আগামী ২৩ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

Pure CSS noscript Message

StackOverflow noscript message

Example: Stack Overflow

Sometimes some users have their Javascript Disabled for some reason, but what ever that reasonis, heres a simple way to notify them that their Javascript is disabled…

example

What we’ll be making

You see that gray bar on the top with the “Please turn on Javascript” Message? yeah, thats what’ll we’ll be making here…

The CSS

Put this css code into a file, example “noscript.css”

body:before{
    content: 'Please turn on Javascript';

    color: white;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-align: center;

    width: 100%;
    padding: 1em 0;

    background: rgba(0,0,0,0.9);

    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

The HTML

just put this HTML code inside your body tag…
Note: In the new HTML5 it is absolutely valid to define links to Stylesheets inside the body tag….

<noscript>
	<link rel="stylesheet" type="text/css" href="noscript.css">
</noscript>

Explanation

Pseudo: Latin for False

This NoScript message relies on CSS3 Peuso Elements, especiall the :before element and HTML’s <noscript> tag.

The :after selector(not really a selector) here creates a new element before the body tag, but it does not show up in the DOM Tree as it is not a real element. This element can only be accessed and styled through css.

Here when the browser detects no javascript support it loads up the noscript CSS file. The content property is mandatory for pseudo elements as without it it will not render. The other styles are quite self explanatory. Notice on the last line the z-index is set exceptionally high.. this is so that the bar stays on top of all the defined elements in the body however deep they are nested.

How to Test <noscript/>

In Firefox

First Install the Web Developer Toolbar  Web Developper Addon Page

Now you can Disable Javascript from this toolbar like so:disabling Javascript in Firefox

In Chrome

Type this into chrome’s address bar…

chrome://settings/content

and change the settings, then press “Done

disabling javascript in Chrome

Now just go to the URL of the site you added this to for testing…
Good Luck.

Hi, I am Omran Jamal from Bangladesh, a Student of A-Level, and an Intern at Techbeeo. Though young, I am very enthusiastic about Computers. Taught myself how to code when I was 12 and been coding ever since.

Leave a Reply

Your email address will not be published. Required fields are marked *