Question:

Script for pop-out windows?

by | earlier

I'm looking for free javascript or other script that will allow me to either drop down information or open a small information window when a link is clicked. I had no idea what you would actually call this.

I can't find any sites offhand which have an example of what I want, but the scenario is:

I have a list of craft classes being offered and I would like to be able for the viewer to get a description on the same page when they click the link. I know I could go thru a whole thing with making a new page so it would just load a new page with the description, but this seemed like a good chance to play with javascript. :) Thanks a ton!

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

2 ANSWERS

Sort By: Date | Rating

go to www.w3school.org
Report (0) (0) | earlier
What you want to do can be easily done by using hidden div's that have their display property set to "display:none" in the css for them and then change it to "block" with javascript as needed. In the sample below, the value of the variable x is changed in the call to the function from the onclick events to determine which div to show. Then inside the div's that appear is a link to close the description. If you need many more lines than what is shown in my example, just continue the patterns in the div id's and in the javascript, and add more "else if" statements in the script and follow their pattern of x==??. You may want to move the script to an external .js file also if it grows much more. If you need more info or help, e-mail me. Try this sample out:

<!DOCTYPE -don't forget to use one of these

<html>

<head>

<title></title>

<style type="text/css">

* { margin:0; padding:0; }

#relat { width:200px; position:relative; }

.hidden { color:red; background:yellow; position:absolute; top:10px; left:25px; width:416px; display:none; border:4px solid gray; }

p { padding:8px; }

ul { margin:10px 25px; }

</style>

<script type="text/javascript">

var x;

function showDescript()

{

if (x==1)

{

document.getElementById ("descript101").style.display = "block";

}

else if (x==2)

{

document.getElementById ("descript201").style.display = "block";

}

else if (x==3)

{

document.getElementById ("descript301").style.display = "block";

}

else if (x==4)

{

document.getElementById ("descript401").style.display = "block";

}

else

{

document.getElementById ("descript501").style.display = "block";

}

}

function hide()

{

document.getElementById ("descript101").style.display = "none";

document.getElementById ("descript201").style.display = "none";

document.getElementById ("descript301").style.display = "none";

document.getElementById ("descript401").style.display = "none";

document.getElementById ("descript501").style.display = "none";

}

</script>

</head>

<body>

<div id="relat">

<p>This is just some text</p>

<ul>

<li><h4><a href="#" onclick="showDescript(x=1)"> Craft class 101</a></h4></li>

<li><h4><a href="#" onclick="showDescript(x=2)"> Craft class 201</a></h4></li>

<li><h4><a href="#" onclick="showDescript(x=3)"> Craft class 301</a></h4></li>

<li><h4><a href="#" onclick="showDescript(x=4)"> Craft class 401</a></h4></li>

<li><h4><a href="#" onclick="showDescript(x=5)"> Craft class 501</a></h4></li>

</ul>

<div id="descript101" class="hidden"><p>Craft class 101 will teach the student to create really neat craft works.
Some examples: <img src="pic1.jpg" alt="pic1.jpg" title="These are a few items we will make." width="400" height="200" /></p>

<p><a href="#" onclick="hide()">Close description</a></p>

</div>

<div id="descript201" class="hidden"><p>Craft class 201 will do a better job of teaching the student to create really neat craft works.</p>

<p><a href="#" onclick="hide()">Close description</a></p>

</div>

<div id="descript301" class="hidden"><p>Craft class 301 will do an even better job of teaching the student to create really neat craft works.</p>

<p><a href="#" onclick="hide()">Close description</a></p>

</div>

<div id="descript401" class="hidden"><p>Craft class 401 will teach the student to create and sell really neat craft works as a personal business.</p>

<p><a href="#" onclick="hide()">Close description</a></p>

</div>

<div id="descript501" class="hidden"><p>Craft class 501 will further teach the student to create and sell really neat craft works as a personal business. Topics covered will include visiting craft fairs and setting up your own booth for display of craft items in a manner which will attract a customers attention.</p>

<p><a href="#" onclick="hide()">Close description</a></p>

</div>

</div> 

<p>This is just some more text</p>

</body>

</html>

Note: in the script I left a space between the Id and first ( -on each line just because Yahoo was dropping the code otherwise, should take that space out.
Report (0) (0) | earlier