Skip to main content

How to make div suddenly show if JavaScript is disabled even if page has already been opened



I know how to display content if JavaScript is disabled, but what I want to do is make a div suddenly appear even if the page is open at the time of JavaScript being disabled.





  1. The page is opened.



  2. The user goes to browser settings and disables JavaScript.



  3. A div shows without refreshing the page.







How can I do this? I've seen other sites do this but I looked at their JavaScript files and didn't find anything in it.





Thanks in advance!


Comments

  1. Here's a solution using CSS animations. They're not supported everywhere, but I can't think of any alternative.

    This hides your message by giving it a font-size of 0, which is reset to 100% after a delay of one second. Every half-second the JavaScript restarts the animation by switching to a dummy animation which keeps the element hidden. (Demo on jsfiddle)

    HTML

    <div id="noscript-message">
    Please enable JavaScript to use this page.
    </div>

    <div>
    Spiffy JavaScript app here!
    </div>


    CSS

    #noscript-message {
    -webkit-animation-duration: 1s;
    -webkit-animation-name: delayedDisplay;
    color: blue;
    }

    @-webkit-keyframes delayedDisplay {
    0% { font-size: 0;}
    99% { font-size: 0;}
    100% { font-size: 100%; }
    }

    @-webkit-keyframes delayedDisplay_dummy {
    0% { font-size: 0; }
    100% { font-size: 0; }
    }


    JavaScript

    var message = document.getElementById("noscript-message");

    setInterval(function() {
    message.style.webkitAnimationName = "delayedDisplay_dummy";
    setTimeout(function() {
    message.style.webkitAnimationName = "delayedDisplay";
    }, 0);
    }, 500);


    You would need to duplicate all of the webkit prefixed properties with the other vendor prefixes; I've omitted them here for clarity.

    ReplyDelete
  2. As far as I know, this is not possible, not without refreshing the page, at least not using just HTML and Javascript. The behaviour you are describing is not in any standard, so different browsers may act differently once a user has selected to disable javascript.

    The normal mechanism as a developer would be use a <noscript> element. Most browsers will display this if the page was loaded and javascript was disabled. Some browsers may display it also if the page loaded and the user then disabled javascript.

    When scripting is disabled, the contents of this element comes up once the page is refreshed.

    ReplyDelete
  3. You could have your <div> inside a <noscript> element, and then use CSS to animate its opacity:

    @-webkit-keyframes showme {
    0% { opacity: 0; }
    100% { opacity: 1; }
    }
    @-moz-keyframes showme {
    0% { opacity: 0; }
    100% { opacity: 1; }
    }
    @-ms-keyframes showme {
    0% { opacity: 0; }
    100% { opacity: 1; }
    }

    #box {
    -webkit-animation: showme 5s;
    -moz-animation: showme 5s;
    -ms-animation: showme 5s;
    }


    ...Of course, browser support would be an issue.

    ReplyDelete

Post a Comment

Popular posts from this blog

Slow Android emulator

I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?

CCNA 3 Final Exam => latest version

1 . Which security protocol or measure would provide the greatest protection for a wireless LAN? WPA2 cloaking SSIDs shared WEP key MAC address filtering   2 . Refer to the exhibit. All trunk links are operational and all VLANs are allowed on all trunk links. An ARP request is sent by computer 5. Which device or devices will receive this message? only computer 4 computer 3 and RTR-A computer 4 and RTR-A computer 1, computer 2, computer 4, and RTR-A computer 1, computer 2, computer 3, computer 4, and RTR-A all of the computers and the router   3 . Refer to the exhibit. Hosts A and B, connected to hub HB1, attempt to transmit a frame at the same time but a collision occurs. Which hosts will receive the collision jamming signal? only hosts A and B only hosts A, B, and C only hosts A, B, C, and D only hosts A, B, C, and E   4 . Refer to the exhibit. Router RA receives a packet with a source address of 192.168.1.65 and a destination address of 192.168.1.161...