Best way to add a div on demand

Question

I want to implement a box into my page, which is displayed on demand: a user presses a button, the div is shown.

As a visual example what i want to achieve, look at the keyboard-shortcuts box on jsfiddle (down left corner): http://jsfiddle.net/

Now i am not sure in which way i should do this:

Create the div right away and set it to display: none while not needed
Write a script which add's the div via JS
Write a script which loads it from an external .html file

What way would you recommend?

Update

What if i got 15 different boxes which are not shown when the page loads, but should be added on demand? Sure, it would work, but can we call it "good practice" to simply hide every element we do not want to see?

I would go with option 1. Having an existing div gives you more control on when to show/hide and handle events on it. — Ravi Y, Dec 21 '12 at 13:29
possible duplicate of [Toggling visibility of divs using javascript](http://stackoverflow.com/questions/7743373/toggling-visibility-of-divs-using-javascript) — Cerbrus, Dec 21 '12 at 13:30
Agreed...and jquery dialog makes this easy http://jqueryui.com/dialog/ — Mike G, Dec 21 '12 at 13:30
@alliswell: Read the question. He's linking to the site because there's functionality he wants to recreate on there. — Cerbrus, Dec 21 '12 at 13:30
@MikeG thank you, this looks good, as well i would be more statisfied if i could do it without using a further lib — Wottensprels, Dec 21 '12 at 13:34
@ryadavilli Thank you. But what if this won't be the only box to add, but there were about 10-15 ones. Wouldn't this be a little chaotic? — Wottensprels, Dec 21 '12 at 13:36
Can you update your question with details about your scenario where you have 10-15 such divs? — Ravi Y, Dec 21 '12 at 13:37

score 3 · Answer 1 · answered Dec 21 '12 at 13:37

3

just add the div to HTML and set the css property display to none by default and use jquery to fade it in on click as follows:

 $('#some_button').click(function(){
     $('.hidden_box').fadeIn();
 });

Working Example

Try this working jsfiddle

answered Dec 21 '12 at 13:37

Amyth

32,527
26
93
135

Sampson · Accepted Answer · 2012-12-21T13:47:08.673

Update: You recently modified the question to ask about 15 or so elements that aren't immediately needed. In this case, with so many non-immediate elements, I would probably consider creating them on the fly when you need them, but always checking for their existence prior so you don't end up re-creating them over and over.

I would just load the element in when the page loads:

<div id="box"></div>

Style it, having it be non-visible by default:

#box {
    position: fixed;
    top: 10%; left: 10%;
    width: 80%; height: 80%;
    background: red;
    display: none;
}

And then wire-up the logic to show it on some event, perhaps pressing of the spacebar:

var $box = $("#box");

$(document).on({
    keydown: function (event) {
        if (event.which === 32 && $box.is(":not(:visible)"))
            $box.stop().fadeIn();
    },
    keyup: function (event) {
        if (event.which === 32) 
            $box.stop().fadeOut();
    }
});

And voila: http://jsfiddle.net/GfMsd/

Or you could base it off of the clicking of another element, like jsFiddle has done:

$(".toggle").on("click", function (event) {
    $("#box").stop().fadeToggle();
});

Demo: http://jsfiddle.net/GfMsd/1/

This will only show the `div` for as long as the spacebar is held down. Is that intentional? — Cerbrus, Dec 21 '12 at 13:42
@Cerbrus Yes, it was. The question was about showing a box. I took it one way. I've updated my answer to show a simple click-toggle option as well. — Sampson, Dec 21 '12 at 13:44
Okay then :) Personally, I'd suggest adding code to toggle it, also, so readers can choose. — Cerbrus, Dec 21 '12 at 13:48

Cerbrus · Answer 3 · 2012-12-21T13:47:13.163

An answer without jQuery, just to make sure native JS isn't underrepresented ;-)

Create a div containing whatever content you want, and position it wherever you want it to be eventually, and hide it:

<div id="hiddenDiv" style="display:none">Some content here</div>

Then, add a event listener on a button to toggle it's visibility.

document.getElementById('showDivButton').addEventListener('click', toggleDiv);
var div = document.getElementById('hiddenDiv');

function toggleDiv(){
    if(div.style.display == 'block') {
        div.style.display = 'none';
    }else{
        div.style.display = 'block';
    }
}

Best way to add a div on demand

3 Answers3

Working Example