0

i have a login page and i want a user to not go further if Javascript is disabled. I tried to use noscript tag but the page UserId, Password fields and Login button does appears with the noscript message...How to completely blur the background with an alert and continue only after the user enables the Javascript...

Thanks for your help.

VBJ
  • 673
  • 5
  • 14
  • 24
  • And you would show this alert how exactly... I think you have a chicken and egg problem here. If a user has Javascript disabled you will have to detect that and render markup. You won't be able to take any dynamic actions, so what you send to the browser is what they will get. No magic here. – Josh Sep 16 '12 at 02:01
  • exactly how can you execute `alert()` if javascript is disabled? – Marc B Sep 16 '12 at 02:01
  • If you check Target.com without javascript enabled...i see they are displaying a alert...may be HTML5 i am not sure. – VBJ Sep 16 '12 at 02:02
  • 1
    Take a screen capture of your "blurred background and alert", featuring a message to enable Javascript, and embed it into the `noscript` tag? – Jared Farrish Sep 16 '12 at 02:02
  • @user1493723 - If you inspect Target.com you will notice they are simply using CSS to achieve this effect. Might be worth copying their technique. – Josh Sep 16 '12 at 02:15
  • 1
    [I can haz login?](http://jfcoder.com/test/noscript.html) – Jared Farrish Sep 16 '12 at 02:30
  • oh okay...let me try that too... – VBJ Sep 16 '12 at 02:36

2 Answers2

2

Hide elements with CSS (display: none). Show them with JS. You can make it a class and give that class to all the elements you want hidden.

Use JS to remove that class from those elements to show them. See this answer for how.

Now you won't see the login form unless you have JS. You won't be able to show a JS style alert (that'd require JS, wouldn't it...), but you can hide everything and show a message on the page.

Community
  • 1
  • 1
sachleen
  • 30,730
  • 8
  • 78
  • 73
  • Thank you for a quick reply...I am aware that alert will not work without Javascript...just curious how sites like target.com were doing it... :) Thanks again for the answer. – VBJ Sep 16 '12 at 02:07
1

You can show a page-sized div which lies above all other content with an opaque (or semi-transparent) background in a <noscript> block, so that the login form appears below the div.

nneonneo
  • 171,345
  • 36
  • 312
  • 383