PDA

Click to See Complete Forum and Search --> : Help me understand and Modify this code please.

kelemvor
09-22-2003, 09:25 PM
Howdy,

I came upon this script at dynamicdrive.com:
http://www.dynamicdrive.com/dynamicindex17/comboviewer.htm

It has the elements of what I want to do but it's not exactly what I need. But they do some coding with things I've never seen before so I'm not sure where to begin to modify it.

THEIR script works off a Combo Box and some hidden DIVs. When you select somethign from the box, it shows/hides the DIVs so you see the info about the item you selected.

MY NEED is a script that does the same thing but instead of using a Combo Box, I need to use the onMouseover event with some hyperlinks. So when a user puts their mouse on link1, I want to show the div pertaining to image 1, then 2, etc.

Can you give me some help with where to begin? Or if it's easy enough, how to do this from scratch?

Thanks.
--Mike

Pasting in the code from DynamicDrive so you don't have to go to the link if you don't want....

HEADER INFO:

<style type="text/css">
.dropcontent{
width: 300px;
height: 140px;
border: 1px solid black;
background-color: #FFECC6;
display:block;
}
</style>

<script type="text/javascript">


if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

function contractall(){
if (document.getElementById){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
}

function expandone(){
if (document.getElementById){
var selectedItem=document.dropmsgform.dropmsgoption.selectedIndex
contractall()
document.getElementById("dropmsg"+selectedItem).style.display="block"
}
}

if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)

</script>


BODY INFO:

<form name="dropmsgform">
<select name="dropmsgoption" size="1" style="width:300" onChange="expandone()">
<option selected>What is JavaScript?</option>
<option>Difference betwen Java and JavaScript</option>
<option>What is DHTML?</option>
</select>
<br>

<div id="dropmsg0" class="dropcontent">
JavaScript.....
</div>

<div id="dropmsg1" class="dropcontent">
Java is completely different from JavaScript.....</div>

<div id="dropmsg2" class="dropcontent">
DHTML is the embodiment.....</div>

</form>
earthwalk
09-23-2003, 01:48 AM
Well, the following modification works, but it also throws an error:


<html>
<head>
<title>DHTML Script</title>

<style type="text/css">


.dropcontent{

width: 300px;

border: 1px solid black;

background-color: #FFECC6;

display:block;

}

</style>



<script type="text/javascript">



/*

Combo-Box Viewer script- Created by and © Dynamicdrive.com

Visit <a href="http://www.dynamicdrive.com/" target="_blank">http://www.dynamicdrive.com/</a> for this script and more

This notice MUST stay intact for legal use

*/



if (document.getElementById){

document.write('<style type="text/css">\n')

document.write('.dropcontent{display:none;}\n')

document.write('</style>\n')

}



function hideIt()
{
if (document.getElementById)
{
var inc=0
while (document.getElementById("dropmsg" + inc))
{
document.getElementById("dropmsg" + inc).style.display="none"
inc++
}
}
}



function showIt(num){

if (document.getElementById){

hideIt()

document.getElementById("dropmsg"+num).style.display="block"

}

}



if (window.addEventListener)

window.addEventListener("load", showIt, false)

else if (window.attachEvent)

window.attachEvent("onload", showIt)



</script>

</head>
<body>


<a href="javascript.html" onMouseOver="showIt(0)">What is JavaScript?</a><br><br>

<a href="difference.html" onMouseOver="showIt(1)">Difference betwen Java and JavaScript</a><br><br>

<a href="dhtml.html" onMouseOver="showIt(2)">What is DHTML?</a><br><br>

<br>



<div id="dropmsg0" class="dropcontent">

JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.

</div>



<div id="dropmsg1" class="dropcontent">

Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.

</div>



<div id="dropmsg2" class="dropcontent">

DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.

</div>


</body></html>



It works fine on both Internet Explorer 6.0 and Mozilla Firebird 0.61, but there's an error message(which doesn't affect its function as far as I can see. ) Firebird's JavaScript Console tells me that "dropmsg" + num has no properties.

Also, an inconvenience with this script is that you have to add onMouseOver=showIt(number) to every link you want to apply the effect to. I think it's inevitable, but someone better versed in DHTML might find a better way.

I took out the height property from the dropcontent class because the pieces of text inside the divs were of different lengths while the height was fixed, resulting in some ugliness.
kelemvor
09-23-2003, 08:14 AM
I was able to strip out almost all of the code and just do it like this:

1) Set up the style sheet like it was before

2) Set up the divs with the different last number on the end.

3) Use this code to show the one I want:

function expandone(which)
{
var inc=0
while (document.getElementById("dropmsg"+inc))
{
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
document.getElementById("dropmsg"+which).style.display="block"
}



Haven't tested in all browsers but it works in IE.
earthwalk
09-23-2003, 08:58 AM
Nice simplification of the script, merging two functions into one. It works on both IE and Firebird.

But it appears you'll have to keep the


if (window.addEventListener)

window.addEventListener("load", showIt, false)

else if (window.attachEvent)

window.attachEvent("onload", showIt)


portion of the script--without it, all the divs display when the page first loads(both IE and Firebird), probably not something you want.

Also, the error message persists. I guess it's no huge problem, since the script itself works.
kelemvor
09-23-2003, 01:15 PM
Oh, I forgot to put it in the post but I also put an onLoad="expansone('0)" in the <body> tag so it sets it to my default 0 DIV on load.

Can see it in action on my test site at: http://www.eventartistry.net/test
earthwalk
09-23-2003, 07:35 PM
The script itself works okay(Firebird ad IE)--you did a good job. Nice colors, design, and blurbs, too. However, on my computer the whole box wobbles badly in both browsers whenever I mouse over a link. I'm guessing this happens because the box has to resize to acommodate the different length of each blurb. You'll have to fix that, since it undermines the effectiveness of the script. I have to scramble for a new handhold everytime the box shifts on me!
kelemvor
09-23-2003, 07:39 PM
Yeah I couldn't get all the DIV sections to be exactly the same size. But I changed the layout so the links are formatted TOP instead of CENTER so now they don't move based on things moving in the DIV area. SHould solve that problem I hope.
earthwalk
09-23-2003, 11:37 PM
Oh, perfect! Now there's no more wobble. It's still a little distracting, if one notices it, that the bottom edge of the box moves up and down--but with the current setup that looks like something one would have to live with. Like the error message, it's no major problem.