Freeze Screen w/ Overlay if JavaScript isn't enabled - javascript

I'd like to darken and lock the page (prevent clicking / scrolling) and have some white text saying that the user doesn't have JavaScript enabled.
I know that the proper thing to do is have everything gracefully degrade when there isn't JavaScript- but I don't want to go this route right now.

<noscript>
<div id="nojs-overlay">
Please Enable Javascript to View This Site<br>
Instructions on how to enable javascript
</div>
</noscript>
The above example only loads the overlway div in case javascript is not enabled. The selected answer will cause a flicker or delay on slow devices.
Make sure the style your nojs-overlay div (or a series of divs) to overlay the complete screen.

Related

How to disable overflow on body but not iframe (Meteor.js)

Im working on a Meteor POS project at the moment. (for people who don't know Meteor is a framework and can use javascript/jquery and all kinds of web app scripting). The application is suppose to be a full screen POS that does not need to scroll at all, but only the area which entered products needs scrollbar (iframe).
I ran into a problem that I don't know how to solve, which is how to disable overflow on the entire page but not the iframe. There are a few things I have tried but failed:
Setting body to overflow: hidden and iframe auto. Which of course it doesn't work because the entire body is not able to show the scroll bar and iframe is embedded within.
using onmouseenter (mouseover) and onmouseleave (mouseout) to listen for changes and using javascript or jquery to toggle between hidden or auto. I tried and even console logged but it doesn't want to work in meteor.js for some reason. Even if it worked I think the main page scroll bar will show too which I don't want.
Here is an image, the top and bottom is part of the body and the middle part filled with items are using iframe.
Thanks for any help!
It has been answered by axel.michel in the comment.
It was a better solution overall than using iframe.
Thanks!

Preventing re-paint in Google Chrome via CSS/JS/etc

Is it possible to cause Google Chrome to prevent painting... as in, to keep the page exactly the same, no animations or content changes.
The reason I ask is because I have created an extension for people who find it difficult to read webpages when things are animating/flashing/changing/etc.
It currently works by taking a screenshot and layering it over the page (position absolute, with a high value z-index).
But because captureVisibleTab cannot capture the whole page (issue 45209), the screenshot needs to be re-created every time the user scrolls the page.
However the change in iOS 8 Safari to not pause printing while scrolling got me thinking there may be another way around this by trying to emulate the pre iOS 8 behaviour (something I preferred, as Reader View does not always work, or stop animated gifs).
You cannot stop the execution thread, its browser who decides it.
However to prevent CPU Cycles What chrome does is, Pauses the javascript execution thread when window is blurred. But since you are showing captured with higher z-index you window will still be active.
One possible way :
Disable the script for that url when the page is loaded.
You might miss the dynamic content but as you asked "no animations or content changes". Any dom or style manipulations by javscript causes repaint of the page. Disabling it might be one solution. However not pretty sure about how to stop css animations.
I have also seen extensions that can capture full webpage image or pdf. you can capture the full page and show them irrelevant of whatever changing in the background

How can I hide a div when my webpage is viewed in Lynx?

My website has a div element (in form of a block) that I want to make invisible whenever a user visits the website through a text based browser like Lynx, that doesn't support JavaScript.
Basically what command or code do I need to write in order for this to happen?
Since you can't run javascript there, you have to not send that div in the first place for it to be invisible in the text-mode browser.
You can make a server side user-agent check and do not render that div.
Lynx user agents:
http://www.useragentstring.com/pages/Lynx/
You can set the div invisible by default.
and make it visible in your js code.
Thus it'd not appear on a text-mode browser.

divs not displaying with js disabled

My website all seems to work fine when I have javascript enabled but as soon as I disable it, the main page background renders fine but the actual content doesn't display at all. I thought I had designed it in a gracefully degrading manner. Can anyone shed some light on why the content does not display with JS disabled?
Website link
Your CSS on #main_content (and other elements) have display:none; set which hides the content by default.
You then use javascript to display it. Without javascript, it stays hidden.

BBC slider works even if javascript off, how they do that?

BBC slider works even if javascript off, how they do that? http://www.bbc.co.uk/ - you will see that it still works if you turn off javascript
Thanks
They're using progressive enhancement. The left and right arrows on the main carousel are normal links with a CSS hover class:
<a id="dz-arrow-previous" href="?dzf=default&focusedpane=center">...</a>
<a id="dz-arrow-next" href="?dzf=default&focusedpane=left">...</a>
If JavaScript isn't enabled, clicking them moves you to the next page by following the link (without a sliding effect, at least on Chrome; CSS transitions could probably be used). If JavaScript is enabled, they hook clicks on the elements and do the nifty carousel thing.
There's nothing clever going on - it just falls back to sending a request to the server if Javascript is unavailable. If you click a link with Javascript unavailable, you're effectively getting a new page from the server - watch the URL change as you do it.

Categories