Menu
If I hide some elements on page_load using jquery, the elements flicker for a split second when the page posts and then disappear:
function pageLoad() {
$('#panelOne').hide();
$('#panelTwo').hide();
Is there a way to prevent the flickering?
I don't want to set the elements css to visibility: hidden, because then calling the jquery .show() method later on doesn't seem to show the element.
900
The hide () method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show () method. Optional. Specifies the speed of the hide effect.
In this article, we will see how to hide all heading elements on a page when they are clicked in jQuery. To hide all heading elements from page, we use slideUp () method. First we use click () method to detect the element is clicked and then use slideUp () method to hide the heading elements.
I'm pretty sure $ ("#your-class-id").show (); would still work even hiding it that way as well. Add this to any element you don't want to be visible when loading the page. Then use $ ("div#extraControls").show (); to display it again. With CSS3 you can actually hide content until a page loads by taking advantage of the :only-child selector.
How to hide parts of text. With jQuery, you can hide and show HTML elements with the hide () and show () methods: The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
Setting visibility: hidden doesn't work, but display: none does. See jsFiddle.
You could do this on the DOMReady event, but it would be cleaner to do it in CSS.
87
$.show() doesn't work on elements set to visibility: hidden. You need to use display: none. This will work out better for you than using jQuery to hide on DOM ready, and will absolutely guarantee you won't see flickering.
36
Definitely use document ready as opposed to page load:
$(function() {
$('#panelOne, #panelTwo')
.hide();
});
Rather than hide on pageload, hide it on domready like so:
$(function() { ........ });
Replace the ...... with your 2 lines of hiding.
Domready runs when the dom-tree has been built, and much earlier than pageLoad. Pageload waits for images and stuff to run. (asuming that you have pageLoad as following: <html onload="pageLoad();">).
34
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
