X something out

[Justin]

How would I make a div box where:
The div box is shown, and in the corner, a red x is in a specified place
When the x is clicked - it closes that div box
Content on the page moves up

I am rusty on Javascript. Thanks.

 

[Dean]

http://www.dynamicdrive.com/dynamicinde ... llapse.htm

You can modify it to meet your needs. All you need is a little css and you should be good 😛

 

[Justin]

Sweet, thanks bro.

 

[Dean]

No problem, glad I could have helped. 🙂 If you need help with the CSS feel free to ask, I love working with css and customizing scripts. 🙂

 

[JamesD31]

You need to do this in javascript, here is the basic way to do this, though you will have to style it correctly (the box) with CSS.

Your "x" will be a link, which you can do two ways to call the javascript code, I usually put it in the href portion, but you can make it one of the two ways below:

<a href="javascript:close('THE DIV's ID NAME');" title="Close This Box">X</a>

or

<a href="" title="Close This Box" onmouseout="close('THE DIV's ID NAME')">X</a>

You will then need this javascript code, either put it in the page or make it an external document

function close(theDiv) {
    document.getElementById(theDiv).style.display = "none";
}

Notice that the div's id refers to the actual ID you give the div, so for example, we will call it thisBox as shown below

<div id="thisBox">
YOUR "x" LINK
</div>