I have made a very quick jQuery slideshow, and I'm using this to hide the DIVs which shouldn't be shown until it's their turn:
$(document).ready(function() {
//Hide All Div's Apart From First
$('div#gall2').hide();
$('div#gall3').hide();
$('div#gall4').hide();
But on loading the page you can see DIV's gall2 gall3 and gall4 for a split second before they are hidden.
Would it be OK to just add inside my CSS:
#gall2, #gall3, #gall4{ display:none;}
This would solve the problem of them showing for a split second, just want to know if it's acceptable
visibility: hidden means it will be hidden, BUT will remain in the flow of the website. Essentially, visibility: hidden will not show the element, but will retain the space it takes up. Whereas display: none completely removes it.
To hide an element, set the style display property to “none”. document. getElementById("element"). style.
The visibility: hidden rule, on the other hand, hides an element, but the element will still take up space on the web page. If you want to hide an element but keep that element's space on the web page, using the visibility: hidden; rule is best.
The visibility property in JavaScript is also used to hide an element. The difference between the style. display and style. visibility is when using visibility: hidden, the tag is not visible, but space is allocated.
Disabling in CSS is fine, but then users without JS will never see them.
To disable for users with JS only, mark the body and appropriate CSS:
<body>
<script type="text/javascript">
document.body.className += " js";
</script>
CSS:
.js #gall2, .js #gall3, .js #gall4 { display: none; }
As an alternatie to orip's answer, you can do the following if you don't like adding scripts in the <body>
:
<html>
<head>
<script src="jquery.js"></script>
<script>
$('html').addClass('js');
$(function() {
// do DOM ready stuff
});
</script>
<style>
.js #gall2, .js #gall3, .js #gall4 { display: none; }
</style>
</head>
You will avoid flickering this way because you are adding a class name to the HTML before DOM ready.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With