Open Box

hello,

okay let's say i have a link that says:

Low, Down, Dirty

When I click that link (it's a song), I want a box under it to open up (i'm think it has something to do with an iframe) and it shows the lyrics, then theere is a button or link that says close and then it closes it.

any ideas how i'd do that?

thanks

 

It's called DOM scripting. Say we have your link like...

<script>
   function getLyrics(id){
        if(id == 1)
		   document.getElementById("lyrics").innerHTML = '<div style="border: 1px solid #000000; font-size: 11px; width: 300px; text-align: center; padding: 5px;">' +
		   												 'YOUR LYRICS GO HERE<br /><a href="#" onclick="javascript: getLyrics(0)">'+
														 'close</a>';
		else
		   document.getElementById("lyrics").innerHTML = '';
	}
</script>
<a href="#" onclick="javascript:getLyrics(1)">Low, Down, Dirty</a><br /><br />
<div id="lyrics">
</div>

Code (markup):

Working Example: Javascript Open Close Box

Basically, what you are doing is making it so that when a user clicks your link it makes a call to the function 'getLyrics'. If the value passed to the function is 1 it is replacing the content in the hidden div "lyrics". The new content added has a link that onclick sends the javascript function a value other than one (in this case, 0) and then the lyrics div is reset to empty and therefore does not show itself

Hope that helps!

 

Thank you! I will try this.

 

<script type="text/javascript">
function getLyrics(id){
        if(id == 1)
		   document.getElementById("lyrics").innerHTML = '<div style="border: 1px solid #000000; font-size: 11px; width: 600px; height: 550px; text-align: center; padding: 5px;">' +
		   												 '<a href="#" onclick="javascript: getLyrics(0)">'+
														 'close</a><br />' + '<iframe border=0 width=600px height=500 src="lyrics/infinite/infinite.txt"></iframe>';
		else
		   document.getElementById("lyrics").innerHTML = '';
        if(id == 2)
		   document.getElementById("lyrics").innerHTML = '<div style="border: 1px solid #000000; font-size: 11px; width: 600px; height: 550px; text-align: center; padding: 5px;">' +
		   												 '<a href="#" onclick="javascript: getLyrics(0)">'+
														 'close</a><br />' + '<iframe border=0 width=600px height=500 src="lyrics/infinite/itsok.txt"></iframe>';
		else
		   document.getElementById("lyrics").innerHTML = '';
}
</script>

Code (markup):

for some reason, the first one does not open but the second one does...

 

if you're adding a second one you need to make the appropriate div...

<div id="lyrics"></div>
<div id="lyrics1"></div>

Code (markup):

Notice the different Id's...

So in the code you must tell it what id to change...

// beginning of the code
document.getElementById("lyrics1")...
// more code

Code (markup):

Basically you have to tell the javascript to change that particular ID.

Or you could just modify the code like...

<script>
   function getLyrics(id,box){
        if(id == 1)
		   document.getElementById(box).innerHTML = '<div style="border: 1px solid #000000; font-size: 11px; width: 300px; text-align: center; padding: 5px;">' +
		   												 'YOUR LYRICS GO HERE<br /><a href="#" onclick="javascript: getLyrics(0,\''+box+'\')">'+
														 'close</a>';
		else
		   document.getElementById(box).innerHTML = '';
	}
</script>
<a href="#" onclick="javascript:getLyrics(1,'lyrics')">Link 1</a><br /><br />
<div id="lyrics">
</div><br />

<a href="#" onclick="javascript:getLyrics(1,'lyrics1')">Link 2</a><br /><br />
<div id="lyrics1">
</div>

Code (markup):

Hope that makes more sense

 

Yea, I figured it out before.. I started learning javascript cuz it seemed like there is a lot of cool things i could do with it...

thanks for help...

just a question, what are some of the cool things in javascript that are worth learning?

 

Well what do you mean "cool" there are cool things you can learn with any language Any cool things I learned I did by reading reading and reading.

I suppose some pretty nifty things you might like are remote scripting (now called "AJAX") and DOM Scripting

 

what's AJAX, i heard ppl saying it, but i never knew what it is.

 

Asyncronous Java and XML is what it stands for. Also known as remote scripting. Basically it allows you to load information in a specific area or interact with the web server without reloading the entire page. If you are firmiliar with a few of the Google applications (and notice how the page changes, without reloading the page) this is remote scripting (AJAX).