/    Sign up×
Community /Pin to ProfileBookmark

Drop-down for extended information script?

Copy linkTweet thisAlerts:
Feb 19.2005

Hi all

Ok I’m trying to make a site with a list of products in a table…. e.g:

Product Name Manufacturer Price
Something1 Someone1 $$$
Something2 Someone2 $$$

I haven’t got any shopping cart type software. So I don’t have the luxury of setting up something where I can click on one of the products and a page is loaded with the details, image and price of the product.

So I’m thinking of having an onmouseover script that displays the product picture (which I’ve found). However to save having to create a new HTML page for each product, I was wondering is there are script that I can use that when I click on one of the products, something drops down below it and displays the information for that particular product. Does anyone know of a script like this or seen a website using something similar?

The only site I can think of atm that uses a similar thing is [url]http://iso*unt.com[/url] (once having searched for something), though it’s not quite what I’m after and it also loads a separate page I think.

Any help would be greatly appreciated.

cheers
nathan

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@ElegiditoFeb 19.2005 — Something like this?

[SIZE=1]<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta name="Content-Script-Type" content="text/javascript"&gt;
&lt;meta name="Content-Style-Type" content="text/css"&gt;
&lt;title&gt;Shopping Cart&lt;/title&gt;
&lt;style type='text/css'&gt;
.hDiv {display:block;}
&lt;/style&gt;
&lt;script type='text/javascript'&gt;
Document.prototype.getElementsByClassName = function (a) {mArr = new Array();d = document.getElementsByTagName('*');for (x=0;x&lt;d.length;x++){if (d[x].className == a){mArr[mArr.length]=d[x];}}return mArr;};
function showInfo(n)
{
document.getElementById("info"+n).style.display = (document.getElementById("info"+n).style.display=="block") ? "none" : "block";
document.getElementById("link"+n).firstChild.data = (document.getElementById("link"+n).firstChild.data == "Product Info") ? "Hide Product Info" : "Product Info";
}
function hideDivs()
{
for (var a=0;a&lt;document.getElementsByClassName("hDiv").length;a++)
{
document.getElementsByClassName("hDiv")[a].style.display="none";
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad='hideDivs()'&gt;
&lt;table style="width:75%;border:1px solid black;"&gt;
&lt;TR&gt;
&lt;TD&gt;Product Numero Uno &lt;BR&gt;
&lt;a style='font-height:10px;' href='javascript:void(0)' onClick='showInfo(1)' id='link1'&gt;Product Info&lt;/a&gt;
&lt;div id ='info1' class='hDiv'&gt;
Lorem ipsum dolor sit amet, porta nibh tempor suspendisse nostra urna pellentesque, dui ultricies volutpat
cursus. Dui vel mattis sociis ultrices morbi sed, eget ante suscipit id, cum sollicitudin, sed eget, id ac in
ut justo ac. Nonummy ut lacus. Vel dui, ipsum metus rutrum ut blandit, nec aenean nulla, purus mi curabitur
ligula. Cras lorem praesent suspendisse, eu donec vel, per vel orci tellus lorem sit diam, quisque nec mus
fermentum aliquam aliquet. Ligula integer, consectetuer mauris urna dictum, laoreet volutpat nunc dolor. Est
mauris phasellus ac nulla, a donec a, eget eu dolor volutpat, id mollis augue felis massa erat mauris.
Suscipit donec ut varius, suscipit egestas sed tincidunt ipsum, nascetur tellus etiam lectus ultrices. Ac
tempus dictumst eu, malesuada fusce nunc, sit per dictum nec, auctor adipiscing semper dolor accumsan.
&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;TR&gt;
&lt;TD&gt;Product Numero Dos &lt;BR&gt;
&lt;a style='font-height:10px;' href='javascript:void(0)' onClick='showInfo(2)' id='link2'&gt;Product Info&lt;/a&gt;
&lt;div id ='info2' class='hDiv'&gt;
Lorem ipsum dolor sit amet, porta nibh tempor suspendisse nostra urna pellentesque, dui ultricies volutpat
cursus. Dui vel mattis sociis ultrices morbi sed, eget ante suscipit id, cum sollicitudin, sed eget, id ac in
ut justo ac. Nonummy ut lacus. Vel dui, ipsum metus rutrum ut blandit, nec aenean nulla, purus mi curabitur
ligula. Cras lorem praesent suspendisse, eu donec vel, per vel orci tellus lorem sit diam, quisque nec mus
fermentum aliquam aliquet. Ligula integer, consectetuer mauris urna dictum, laoreet volutpat nunc dolor. Est
mauris phasellus ac nulla, a donec a, eget eu dolor volutpat, id mollis augue felis massa erat mauris.
Suscipit donec ut varius, suscipit egestas sed tincidunt ipsum, nascetur tellus etiam lectus ultrices. Ac
tempus dictumst eu, malesuada fusce nunc, sit per dictum nec, auctor adipiscing semper dolor accumsan.
&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;[/SIZE]
Copy linkTweet thisAlerts:
@treelovinhippieauthorFeb 19.2005 — Thanks heaps.... is there a way to make it so that if you click on the first link, then when you click on the second, the first contracts the drop-down?
Copy linkTweet thisAlerts:
@ElegiditoFeb 19.2005 — Here ya go:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta name="Content-Script-Type" content="text/javascript"&gt;
&lt;meta name="Content-Style-Type" content="text/css"&gt;
&lt;title&gt;Shopping Cart&lt;/title&gt;
&lt;style type='text/css'&gt;
.hDiv {display:block;}
&lt;/style&gt;
&lt;script type='text/javascript'&gt;
Document.prototype.getElementsByClassName = function (a) {mArr = new Array();d = document.getElementsByTagName('*');for (x=0;x&lt;d.length;x++){if (d[x].className == a){mArr[mArr.length]=d[x];}}return mArr;};
function showInfo(n)
{
document.getElementById("info"+n).style.display = (document.getElementById("info"+n).style.display=="block") ? "none" : "block";
hideDivs(n);
}
function hideDivs(n)
{
num = (n) ? n-1 : parseInt(document.getElementsByClassName("hDiv").length+10);
for (var a=0;a&lt;document.getElementsByClassName("hDiv").length;a++)
{
if (a!=num){document.getElementsByClassName("hDiv")[a].style.display="none";}
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad='hideDivs()'&gt;
&lt;table style="width:75%;border:1px solid black;"&gt;
&lt;TR&gt;
&lt;TD&gt;Product Numero Uno &lt;BR&gt;
&lt;a style='font-height:10px;' href='javascript:void(0)' onClick='showInfo(1)' id='link1'&gt;Product Info&lt;/a&gt;
&lt;div id ='info1' class='hDiv'&gt;
Lorem ipsum dolor sit amet, porta nibh tempor suspendisse nostra urna pellentesque, dui ultricies volutpat
cursus. Dui vel mattis sociis ultrices morbi sed, eget ante suscipit id, cum sollicitudin, sed eget, id ac in
ut justo ac. Nonummy ut lacus. Vel dui, ipsum metus rutrum ut blandit, nec aenean nulla, purus mi curabitur
ligula. Cras lorem praesent suspendisse, eu donec vel, per vel orci tellus lorem sit diam, quisque nec mus
fermentum aliquam aliquet. Ligula integer, consectetuer mauris urna dictum, laoreet volutpat nunc dolor. Est
mauris phasellus ac nulla, a donec a, eget eu dolor volutpat, id mollis augue felis massa erat mauris.
Suscipit donec ut varius, suscipit egestas sed tincidunt ipsum, nascetur tellus etiam lectus ultrices. Ac
tempus dictumst eu, malesuada fusce nunc, sit per dictum nec, auctor adipiscing semper dolor accumsan.
&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;TR&gt;
&lt;TD&gt;Product Numero Dos &lt;BR&gt;
&lt;a style='font-height:10px;' href='javascript:void(0)' onClick='showInfo(2)' id='link2'&gt;Product Info&lt;/a&gt;
&lt;div id ='info2' class='hDiv'&gt;
Lorem ipsum dolor sit amet, porta nibh tempor suspendisse nostra urna pellentesque, dui ultricies volutpat
cursus. Dui vel mattis sociis ultrices morbi sed, eget ante suscipit id, cum sollicitudin, sed eget, id ac in
ut justo ac. Nonummy ut lacus. Vel dui, ipsum metus rutrum ut blandit, nec aenean nulla, purus mi curabitur
ligula. Cras lorem praesent suspendisse, eu donec vel, per vel orci tellus lorem sit diam, quisque nec mus
fermentum aliquam aliquet. Ligula integer, consectetuer mauris urna dictum, laoreet volutpat nunc dolor. Est
mauris phasellus ac nulla, a donec a, eget eu dolor volutpat, id mollis augue felis massa erat mauris.
Suscipit donec ut varius, suscipit egestas sed tincidunt ipsum, nascetur tellus etiam lectus ultrices. Ac
tempus dictumst eu, malesuada fusce nunc, sit per dictum nec, auctor adipiscing semper dolor accumsan.
&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@treelovinhippieauthorFeb 19.2005 — That was quick... thanks Elegidito ?

I tried the second code in firefox and it worked fine, but in IE it doesn't work - the expanded information is already expanded, and when I click on the link it tries to take me to a separate 'javascript:void(0)' page.

Would it possible if you could include something so that the extended information scrolls in a set window width? i.e. when you put about double the details in the information can be scrolled rather than running all the way down the page

thanks heaps
Copy linkTweet thisAlerts:
@ElegiditoFeb 20.2005 — Apparently, IE doesn't like it when you add a property to the document. I fixed that and added the scrolling feature, hope that helps you.

[size=1]<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta name="Content-Script-Type" content="text/javascript"&gt;
&lt;meta name="Content-Style-Type" content="text/css"&gt;
&lt;title&gt;Shopping Cart&lt;/title&gt;
&lt;style type='text/css'&gt;
.hDiv {display:block;height:100px;overflow:auto;}
&lt;/style&gt;
&lt;script type='text/javascript'&gt;
function getElementsByClassName(a) {mArr = new Array();d = document.getElementsByTagName('*');for (x=0;x&lt;d.length;x++){if (d[x].className == a){mArr[mArr.length]=d[x];}}return mArr;};
function showInfo(n)
{
document.getElementById("info"+n).style.display = (document.getElementById("info"+n).style.display=="block") ? "none" : "block";
hideDivs(n);
}
function hideDivs(n)
{
num = (n) ? n-1 : parseInt(getElementsByClassName("hDiv").length+10);
for (var a=0;a&lt;getElementsByClassName("hDiv").length;a++)
{
if (a!=num){getElementsByClassName("hDiv")[a].style.display="none";}
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad='hideDivs()'&gt;
&lt;table style="width:75%;border:1px solid black;"&gt;
&lt;TR&gt;
&lt;TD&gt;Product Numero Uno &lt;BR&gt;
&lt;a style='font-height:10px;' href='#' onClick='showInfo(1);return false;' id='link1'&gt;Product Info&lt;/a&gt;
&lt;div id ='info1' class='hDiv'&gt;
Lorem ipsum dolor sit amet, porta nibh tempor suspendisse nostra urna pellentesque, dui ultricies volutpat
cursus. Dui vel mattis sociis ultrices morbi sed, eget ante suscipit id, cum sollicitudin, sed eget, id ac in
ut justo ac. Nonummy ut lacus. Vel dui, ipsum metus rutrum ut blandit, nec aenean nulla, purus mi curabitur
ligula. Cras lorem praesent suspendisse, eu donec vel, per vel orci tellus lorem sit diam, quisque nec mus
fermentum aliquam aliquet. Ligula integer, consectetuer mauris urna dictum, laoreet volutpat nunc dolor. Est
mauris phasellus ac nulla, a donec a, eget eu dolor volutpat, id mollis augue felis massa erat mauris.
Suscipit donec ut varius, suscipit egestas sed tincidunt ipsum, nascetur tellus etiam lectus ultrices. Ac
tempus dictumst eu, malesuada fusce nunc, sit per dictum nec, auctor adipiscing semper dolor accumsan.
&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;TR&gt;
&lt;TD&gt;Product Numero Dos &lt;BR&gt;
&lt;a style='font-height:10px;' href='#' onClick='showInfo(2);return false' id='link2'&gt;Product Info&lt;/a&gt;
&lt;div id ='info2' class='hDiv'&gt;
Lorem ipsum dolor sit amet, porta nibh tempor suspendisse nostra urna pellentesque, dui ultricies volutpat
cursus. Dui vel mattis sociis ultrices morbi sed, eget ante suscipit id, cum sollicitudin, sed eget, id ac in
ut justo ac. Nonummy ut lacus. Vel dui, ipsum metus rutrum ut blandit, nec aenean nulla, purus mi curabitur
ligula. Cras lorem praesent suspendisse, eu donec vel, per vel orci tellus lorem sit diam, quisque nec mus
fermentum aliquam aliquet. Ligula integer, consectetuer mauris urna dictum, laoreet volutpat nunc dolor. Est
mauris phasellus ac nulla, a donec a, eget eu dolor volutpat, id mollis augue felis massa erat mauris.
Suscipit donec ut varius, suscipit egestas sed tincidunt ipsum, nascetur tellus etiam lectus ultrices. Ac
tempus dictumst eu, malesuada fusce nunc, sit per dictum nec, auctor adipiscing semper dolor accumsan.
&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;[/size]
Copy linkTweet thisAlerts:
@treelovinhippieauthorFeb 20.2005 — thankyou so much again ? firefox runs flawlessly with it

Though it doesn't really like it with SP2 in IE.

IE blocks the script ... "IE has restricted this file from showing active content...." and shows both links with the information extended. Though when you click "allow blocked content" the script works perfectly.

Is there a way to override SP2?
Copy linkTweet thisAlerts:
@ElegiditoFeb 20.2005 — That should only happen locally, and you can change those settings. When it is uploaded that warning shouldn't come up.
Copy linkTweet thisAlerts:
@treelovinhippieauthorFeb 20.2005 — oh ok thanks heaps for all your help
Copy linkTweet thisAlerts:
@treelovinhippieauthorFeb 20.2005 — hi again

I've been tweaking around with the code and so far have come up with below. Though I'm having a bit of a problem with the table as when you click one of the links, the 'Manufacturer' part moves slightly. How do I stop this from moving?

cheers

nathan

[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Shopping Cart</title>
<style type='text/css'>
.hDiv {display:block;height:100px;overflow:auto;}
</style>
<script type='text/javascript'>
function getElementsByClassName(a) {mArr = new Array();d = document.getElementsByTagName('*');for (x=0;x<d.length;x++){if (d[x].className == a){mArr[mArr.length]=d[x];}}return mArr;};
function showInfo(n)
{
document.getElementById("info"+n).style.display = (document.getElementById("info"+n).style.display=="block") ? "none" : "block";
hideDivs(n);
}
function hideDivs(n)
{
num = (n) ? n-1 : parseInt(getElementsByClassName("hDiv").length+10);
for (var a=0;a<getElementsByClassName("hDiv").length;a++)
{
if (a!=num){getElementsByClassName("hDiv")[a].style.display="none";}
}
}
</script>
</head>
<body onLoad='hideDivs()'>
<table width="100%" cellspacing="0" cellpadding="2" align="left" style="border:1px solid black;">
<TR>
<TD width="70%">Product Name</td>

<TD width="20%">Manufacturer</td>
<TD align="right" width="10%">Price</td>
</tr>
<TR>
<TD ><a style='font-height:10px;' href='#' onClick='showInfo(1);return false;' id='link1'>Ritek G04 DVD-R Printable 4.7Gb (4x speed) 50 pack</a></td>
<TD >Ritek</td>
<TD align="right">$49</td>

</tr>
<TR>
<TD colspan="3"><div id ='info1' class='hDiv'> Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa</div></td>
</tr>
<TR>
<TD ><a style='font-height:10px;' href='#' onClick='showInfo(2);return false' id='link2'>Databank DVD-R Branded Green 4.7Gb (4x speed) 50 pack</a></td>
<TD >Databank</td>
<TD align="right">$49</td>

</tr>
<TR>
<TD colspan="3"><div id ='info2' class='hDiv'> Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa Blaaaaaaa</div></td>
</tr>
</table>
</body>
</html>
[/CODE]
×

Success!

Help @treelovinhippie spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...