Best Practice (Jquery, CSS): How to Initialize Hidden Elements That Will Toggle Visible

Best Practice (jQuery, CSS): How to initialize hidden elements that will toggle visible?

If you're trying to change the style of elements loaded via Ajax, it's almost like you're trying to hit a moving target. I would create two declarations in my stylesheet - one for hidden, one for visible - and then toggle them based on a class attached to the body tag (or any other containing tag).

Like so:

body .mybutton {
  display:block;
}

body.loaded .mybutton {
  display:none;
}

Then in your JS file:

$(document).ready(function() {
  $('body').addClass('loaded');
});

This way, any elements that have the class name mybutton - current and future - will have the appropriate style applied.

Can I make a DIV and its contents visible and invisible with jQuery?

How about .hide() and .show()?

---

Not directly related to your question, but since you mentioned CSS, I'd really recommend just defining the styles outside of the HTML ...embedded in the JS... something like this:

#token2 > div {
    padding: 2px 4px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid red;
}

#token2 > span {
    color: red;
}

which simplifies the JavaScript down to

$('#token2').html('<div><span>Incorrect</span></div>');

although the .html() part is really irrelevant anyway, with the previously mentioned jQuery methods.

Elements with display:none show on load

That's called FOUC (flash of unstyled content) and the usual cause for it is javascript running on page load. Browsers will hold off on displaying a page for a few seconds (or tenths of a second) before just displaying. Run your site through webpagetest.org and zoompf.com to identify issues that are slowing down page load.

To help you in the short term, add a style attribute to the element when you generate the page, and set the value dynamically, e.g. for PHP:

<div id="desktop-menu" style="display:<?php echo $mobile ? 'none' : 'block'; ?>">

Edit: I've just noticed you've tagged the page with jquery. Presumably then you are hiding the element with code like this:

$(function(){$('desktop-menu').toggle();});

That runs when your web browser has finished loading the page. The best thing to do in this case is to inline the CSS diaply:none as a style attribute, and simply dump the jQuery call.

Initially hiding a div for later display

Try using visibility instead. Example:

$("#id2").click(function (e) {
    $("#id1").css('visibility','hidden');
    $("#id3").css('visibility','hidden');
    $("#id2").css('visibility','visible');
});

Both display and visibility can have an effect on browser behavior.

An alternative work-around to both is to set the opacity of the divs you want to hide to 0. That always works in my experience but is less elegant.

---

Update in reply to comment: In that case, you can set other properties like the width and height to 0px and the over-flow to hidden so that the divs don't occupy any space on screen. Ugly, but basic, and works.

<style>
.hidden {
    visibility: hidden;
    overflow: hidden;
    width: 0px;
    height: 0px;
}
</style>

<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Aster_Tataricus.JPG/245px-Aster_Tataricus.JPG"/></div>
<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/280px-Chamomile%40original_size.jpg"/></div>
<div><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Jonquil_flowers06.jpg/320px-Jonquil_flowers06.jpg"/></div>

You can use the jQuery addClass and removeClass methods to make the divs visible and invisible, e.g.: $("#id1").removeClass("hidden"); and $("#id3").addClass("hidden");.

How do you create a toggle button?

The good semantic way would be to use a checkbox, and then style it in different ways if it is checked or not. But there are no good ways do to it. You have to add extra span, extra div, and, for a really nice look, add some javascript.

So the best solution is to use a small jQuery function and two background images for styling the two different statuses of the button. Example with an up/down effect given by borders:

$(document).ready(function() {  $('a#button').click(function() {    $(this).toggleClass("down");  });});

a {  background: #ccc;  cursor: pointer;  border-top: solid 2px #eaeaea;  border-left: solid 2px #eaeaea;  border-bottom: solid 2px #777;  border-right: solid 2px #777;  padding: 5px 5px;}
a.down {  background: #bbb;  border-top: solid 2px #777;  border-left: solid 2px #777;  border-bottom: solid 2px #eaeaea;  border-right: solid 2px #eaeaea;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a id="button" title="button">Press Me</a>

Toggle display-state with jQuery

You should put your clickhandlers inside a document.ready handler
See updated fiddle http://jsfiddle.net/9wh2n47s/10/

$(document).ready(function(){
    $( "#show-map" ).click(function() {
        $(".display-toggle").css("display", "block");
        initialize();
    });

    $( "#hide-map" ).click(function() {
        $(".display-toggle").css("display", "none");
    });  
});

best practice for loading large image gallery

Initially load a few images then use preloader for other images..

Common jquery gallery does this look for gallerific :
http://www.twospy.com/galleriffic/

Updated: https://github.com/iamvery/galleriffic

If you want to build solution manually you can use preloader :
http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Toggle display-state with jQuery

You should put your clickhandlers inside a document.ready handler
See updated fiddle http://jsfiddle.net/9wh2n47s/10/

$(document).ready(function(){
    $( "#show-map" ).click(function() {
        $(".display-toggle").css("display", "block");
        initialize();
    });

    $( "#hide-map" ).click(function() {
        $(".display-toggle").css("display", "none");
    });  
});

jQuery hover menu not disappearing

The answer is that the script was attempting to run the hover/mouseenter/whatever functions on the LI's of the submenu. By giving each of the root menu LI's their own class, it now works. That way it's not calling the functions on the submenu LI's. Here's the finished function:

$('#firstmenu .root-item').mouseenter(function() {
    $(this).addClass('hover').children('ul:first').show();
    if($('.current-page').length > 0) {
        $('.current-page').children('ul:first').hide();
    }
}).mouseleave(function() {
    $(this).removeClass('hover').children('ul').hide();
    if($('.current-page').length > 0) {
        $('.current-page').children('ul:first').show();
    }
});

---

Related Topics