0

I want to add pasted text (that text goes down when user goes down of the page, etc.) at the top of my page, when somebody haven't got enabled JavaScript, something like that :

enter image description here

How to do this ? Is there any way to that using JavaScript or HTML ? I want not to use jQuery, because I don't know that language so good.

@EDIT : Sorry, that was my error - that cannot use JavaScript if user doesn't have JS enabled :)

TN888
  • 7,659
  • 9
  • 48
  • 84
  • 3
    Using javascript to display a message about not having javascript seems problematic. I recommend CSS -- SO uses fixed positioning. – showdev Sep 03 '13 at 16:07
  • Possible duplicate [How to Show One
    if Javascript Enabled and a Different
    if It's Not?](http://stackoverflow.com/questions/963214/how-to-show-one-div-if-javascript-enabled-and-a-different-div-if-its-not)
     – user1477388 Sep 03 '13 at 16:08
  • 1
    possible duplicate of [How to create sticky header bar for a website](http://stackoverflow.com/questions/13212624/how-to-create-sticky-header-bar-for-a-website) – Boaz Sep 03 '13 at 16:08
  • 1
    Have you considered using ` – Shaun Sep 03 '13 at 16:09
  • @Shaun I'm using that tag – TN888 Sep 03 '13 at 16:10

3 Answers3

1

http://jsbin.com/AJUxayA/6/edit

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="no_js_header">test</div>
  <div id="content">content</div>
  <div style="margin-top: 2200px"></div>
</body>
</html>

#no_js_header {
    position:fixed;
    width:100%;
    background-color:red;
    margin: 0px;
    top: 0px;
    left: 0px;
    padding: 3px;
}

#content {
  position: absolute;
  top: 50px;
}

(uncomment for activation in the jsbin)

document.getElementById('no_js_header').style.display = 'none';
Xevelion
  • 859
  • 6
  • 9
1

This is a sample how you can make a info bar like SO:

HTML: 

<noscript><div id="noscript"><p>NO JAVASCRIPT</p></div></noscript>

CSS: 

div#noscript {

    margin: 0 auto; 
    width: 100%; 
    padding: 10px 0; 
    position: fixed; 
    top: 0; 
    background: red;
    z-index: 99999;
}

div#noscript p { 

    text-align: center;
    color: white;
}

Here the JSfiddle

Black Sheep
  • 6,604
  • 7
  • 30
  • 51
0

You can try using the noscript tag...

<noscript>
    <div>
        <p>ahhh, javascript is disabled!</p>
    </div>
</noscript>
Pais
  • 116
  • 7