Log in

View Full Version : cannot adapt the Drop Down Overlapping script


damien_thiriet
06-19-2008, 01:38 PM
1) Script Title: Drop Down / Overlapping content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem:

I cannot adapt this script for my own purpose. The demo works, but I couldn't go further, maybe because :
1) I can't ubnderstand which href should I give to the anchor
2) I would like to use <span> instead of <div>, because the box contain further explanations that some people already know, and I don(t want to break the text fort it.

Here is the code (file histoire3.xhtml)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<link rel="stylesheet" type="text/css"
href="../memoire.css" />
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
<title>La Pologne des Jagellons</title>
<meta
content="Le r&egrave;gne des Jagellons marqua une nouvelle orientation, fond&eacute;e sur le rapprochement polono-lituanien, le pluralisme national et religieux. Le Royaume des Jagellons devint une grande puissance europ&eacute;enne."
name="description" />
<meta
content="Jagellon,Lituanie,Pologne,tol&eacute;rance,Witold,Ladislas,Sigismond,Hedwige,Czerwińsk,Nieszawa,Union de Lublin,Union de Krewo,nihil novi"
name="keywords" />
<script type="text/javascript" src="dropdowncontent.js">
/***********************************************
* Drop Down/ Overlapping Content- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body style="direction: ltr;">
<div id="tete">
<div id="titre">Lieux de m&eacute;moire, Lieux
d'histoire en Pologne<br />
</div>
<div id="menu">
<a href="histoire1.xhtml"><img
src="../icones/histoire.png" alt="Rappel historique" /></a><a
href="../biblio.xhtml"><img src="../icones/lire.png"
alt="&Agrave; lire, &agrave; voir" /></a><a href="../sites.xhtml"><img
src="../icones/index.png" alt="index" /></a><a
href="../pourquoi.xhtml"><img src="../icones/Apropos.png"
alt="&Agrave; propos de..." /></a><a href="liens.xhtml"><img
src="../icones/liens.png" alt="liens utiles" /></a></div>
</div>
<div id="colonne" class="histoire">
<a href="histoire1.xhtml">600-1300</a>
<a href="histoire2.xhtml">1300-1382</a>
<a href="histoire3.xhtml">1382-1569</a>
<a href="histoire4.xhtml">1569-1696</a>
<a href="histoire5.xhtml">1696-1795</a>
<a href="histoire6.xhtml">1795-1864</a>
<a href="histoire7.xhtml">1864-1918</a>
<a href="histoire8.xhtml">1918-1939</a>
<a href="histoire9.xhtml">1939-1945</a>
<a href="histoire10.xhtml">1945-1989</a>
</div>
<div id="texte" class="histoire">
<h2>Vers la Pologne-Lituanie</h2>
<p>Il fallut en fait beaucoup de temps pourconsolider cette union
polono-lituanienne. Un nouveau pas fut
franchi en 1413 (Union de Horodło)&nbsp;: les deux pays
s'engageaient &agrave; s'entendre
pour choisir leurs souverains&nbsp;; cette union
amor&ccedil;ait
un rapprochement institutionnel,
puisque le grand-duch&eacute; adoptait certaines institutions
polonaises comme la
<a href="histoire3.xhtml" id="voievodie"
rel="definition1">vo&iuml;evodie</a>
<span id="definition1"
style="border: 1px solid black; padding: 2px; position: absolute; visibility: hidden; background-color: white; width: 400px;">,
<p>La voievodie est une r&eacute;gion</p>
</span>tandis que 47&nbsp;familles lithuaniennes entraient,
&agrave;
&eacute;galit&eacute; de privil&egrave;ges, dans les
registres de noblesse polonais.
</p>
</div>
<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("searchlink", "right-bottom", 500, 'mouseover')
</script>
</body>
</html>
Nile
06-19-2008, 01:41 PM
Ok, take a look:


dropdowncontent.init("searchlink", "right-bottom", 500, 'mouseover')

Where it says searchlink, thats what you need to replace to your id, so just make a span like this:


<span id="searchlink"></span>
The right-bottom, I think tells it where to drop, the 500 tells it the pace of the drop, and the mouseover tells it to drop when the client mouses over searchlink.
Please post a link to the page on your site that contains the problematic script so we can check it out.
damien_thiriet
06-20-2008, 09:44 AM
Thank you for answering my question. I tried with

<span id="definition1">...</span> ...
dropdowncontent.init("definition1", "right-bottom", 500, 'mouseover')
but it still doesn't work:confused:...
damien_thiriet
06-20-2008, 09:49 AM
PS My pages are not yet available on the web : I intend to finish all the site before I put it on the web...
damien_thiriet
06-20-2008, 10:07 AM
I have thind one error in my script, I wasn't getting the dropdowncontent.js because I should have asked for
../dropdowncontent.js.
I corrected it, but there are still some problem : I can know see that the onmouseOver is working, but nothing is showing anyway. I thought it could be because of my .css (attachment).
I tried giving a z-index to the span, without success;
damien_thiriet
06-20-2008, 10:37 AM
Uups, I found it. I gave the element ID instead of the anchor ID when writing
dropdowncontent.init("definition1", "right-bottom", 500, 'mouseover')
Once again thanks.:)