I have a site that has a buttons visible typically. If javascript is disabled then I want to hide that button from the user. I tried using the following code:
<noscript>
<style>
.cart-opt{display:none;}
</style>
<br>
<div class="panel callout radius"> <h5>Please Enable Javascript</h5></div>
</noscript>
<div class="cart-opt opt-btns"> <!-- BUTTONS HERE SHOULD BE SHOWN WITH JS ENABLED--> </div>
This didn't work. Even though the <style> tag was wrapped in <noscript> tag it was still read and hid the buttons even when JS enabled.
How do I write the styles so the <style> tag isn't read unless JS is disabled?
Note: I am using HTML 5.
Wouldn't this be an alternative solution?
<noscript>
<div class="panel callout radius"> <h5>Please Enable Javascript</h5></div>
<div style="display:none">
</noscript>
<div class="cart-opt opt-btns"> <!-- BUTTONS HERE --> </div>
<noscript>
</div>
</noscript>
You can wrap the button with <noscript> instead or you can hide the button initially (with CSS), and then display it with JavaScript.
In this case without the JavaScript, the button won't be shown
Also, leave the header notification (the one prompting user to use JS) inside the <noscript>.
Make them initially hidden by class.
<style>.jscriptenabled{display:none;}</style>
Then if JavaScript is allowed, they will become visible!
<script>
document.write('<style> .jscriptenabled{display:inherit;} </style>');
</script>`
Related
I am showing and hiding a div Via Jquery. Is there any way to display that DIV by default if Javascript is disabled in Browser?
Simply remove/hide that div with JS code. If no JS is enabled, than code will not be executed:
$('.fallback').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fallback">Fallback if no JS</div>
You can use a <noscript> block and inside use some CSS to make the specific div show instead of being hidden. The following code has been tested with Javascript disabled and the div shows up properly, but is hidden with Javascript enabled:
#hiddenID {
display: none;
}
<div id="hiddenID">test</div>
<noscript>
<style>
#hiddenID {
display: block;
}
</style>
</noscript>
There is a <noscript> tag :
<noscript>
<div>
Javascript is disabled.
</div>
</noscript>
If javascript is activated, the div won't be displayed.
More here.
use<noscript></noscript> tag to display something when javascript is disabled in browser.
I have been researching and learning more and more about HTML 5, jQuery, CSS3, and the power of hiding and disabling certain elements when JavaScript is or is not disabled. (<noscript> tags)
My questions are,
How do I make a hyperlink ONLY work if JavaScript is DISABLED?
If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?
HTML
Simple enough, I hide my cart area and change the login link if the JS is disabled.
<!-- If JavaScript is disabled it will make the login link take you to a login page instead of a drop-down box. -->
<noscript>
<style>
.login-form, .js-enabled{
display: none;
}
.cart{
top: -80px;
}
</style>
<div class="cart">
<a href="#" id="cart_img">
<img src="img/bag.jpg" alt="Check Cart"
onmouseover="this.src='img/bag-gold.jpg'"
onmouseout="this.src='img/bag.jpg'">
</a>
Why HorseTack? |
About |
Contact |
Login
</div>
</noscript>
<!-- End JavaScript text -->
<div class="cart js-enabled">
<a href="#" id="cart_img">
<img src="img/bag.jpg" alt="Check Cart"
onmouseover="this.src='img/bag-gold.jpg'"
onmouseout="this.src='img/bag.jpg'">
</a>
Why HorseTack? |
About |
Contact |
Login
<div class="login-form">
<form class="login-frm">
<label><input type="text" placeholder="Username"></label>
<label><input type="password" placeholder="Password"></label><br>
<input type="submit" value="Login"><br>
New User?
</form>
</div>
</div>
JQuery
This makes the login-box slide down (just to avoid taking people to a login page unless they have to)
// Login Box Pop-Up
jQuery(document).ready(function() {
jQuery(".login-form").hide();
//toggle the componenet with class msg_body
jQuery(".login-box").click(function()
{
jQuery(this).next(".login-form").slideToggle(500);
});
});
What I would like instead of having that <noscript> tag and the content duplicated, just a way for the hyperlink to only work when there is no JavaScript.
I have already set the page up to let users know when their JS is disabled (like Stack Overflow has done)
Any questions about my question (hopefully I wasn't vague?) ask!
How do I make a hyperlink ONLY work if JavaScript is DISABLED?
If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?
Write a JavaScript function that causes the menu to be displayed. Make sure that it captures the first argument (which will be the event object).
Bind the function to the link as an event handler.
Call preventDefault() on the event object.
function (event) { /* display menu then ... */ event.preventDefault(); }
<noscript> tags
There are almost always the worst solution to a problem. Be progressive and unobtrusive.
You could show the link, and if javascript is enabled, hide it.
You can put the link inside a div, and if JS is enabled, remove the link and put an event to that div
Like:
<div class="link-holder">
Link
</div>
And jQuery:
$(document).ready()
{
$('.link-holder').text('').click(function(){
displayLogin(); //assuming displayLogin() has your function to, well, display the login
});
}
I have a div in my php page that uses jQuery to hide it once the page has loaded. But is there a way to hide it from the very start of loadup?
The reason I ask is because for a brief second, you can see the div when the page is loading, and then hides when the page is fully loaded.
It looks unprofessional.
Just wondering if there is a way around this?
Thanks
Use css style to hide the div.
#selector { display: none; }
or Use it like below,
CSS:
.hidden { display: none; }
HTML
<div id="blah" class="hidden"><!-- div content --></div>
and in jQuery
$(function () {
$('#blah').removeClass('hidden');
});
I've had the same problem.
Use CSS to hide is not the best solution, because sometimes you want users without JS can see the div..
The cleanest solution is to hide the div with JQuery. But the div is visible about 0.5 seconde, which is problematic if the div is on the top of the page.
In these cases, I use an intermediate solution, without JQuery. This one works and is immediate :
<script>document.write('<style>.js_hidden { display: none; }</style>');</script>
<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>
Of course, you can still add all the effects you want on the div, JQuery toggle() for example.
And you will get the best behaviour possible (imho) :
for non JS users, the div is visible directly
for JS users, the div is hidden and has toggle effect.
Barring the CSS solution. The fastest possible way is to hide it immediatly with a script.
<div id="hideme"></div>
<script type="text/javascript">
$("#hideme").hide();
</script>
In this case I would recommend the CSS solution by Vega. But if you need something more complex (like an animation) you can use this approach.
This has some complications (see comments below). If you want this piece of script to really run as fast as possible you can't use jQuery, use native JS only and defer loading of all other scripts.
Why not add "display: none;" to the divs style attribute? Thats all JQuery's .hide() function does.
This method I've used a lot, not sure if it is a very good way but it works fine for my needs.
<html>
<head>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<div id="HiddenStuff1" style="display:none">
CONTENT TO HIDE 1
</div>
<div id="HiddenStuff2" style="display:none">
CONTENT TO HIDE 2
</div>
<div id="HiddenStuff3" style="display:none">
CONTENT TO HIDE 3
</div>
<input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>
Using CSS you can just set display:none for the element in a CSS file or in a style attribute
#div { display:none; }
<div id="div"></div>
<div style="display:none"></div>
or having the js just after the div might be fast enough too, but not as clean
What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.
EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)
To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).
First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/
Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.
I have a webpage which has content layout like 1,2,3 in markup (and also for no-js
) while visually I want it to be 2,3,1.
I'm using Javascript (jQuery) to swap their position. But the problem is, the Javascript code is executed after page loads and therefore the swap process can be obviously seen.
The only solution (and a bad one) I can think of now is to hide the whole body first and restore body when the swap is done.
$(function() {
$("#div2, #div3").insertBefore("#div1");
$("body").css({display: "block"});
});
<body style="display: none;">
...
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
...
<!-- in case JS is disabled, use css to restore -->
<!-- style should not be here, that's why I said it's a bad one. -->
<style type="text/css">
body {display: block !important;}
</style>
</body>
Anyone got a better idea?
Try executing JavaScript instantly after those three elements:
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
<script type="text/javascript"> $("#div2, #div3").insertBefore("#div1"); </script>
Of course, it's a pollution of your HTML, but, in any case, it's better than hiding the whole body element (the page will flicker in some old browsers).