PDA

View Full Version : Drop down menu and images help



Sir Twonish
11-19-2007, 07:22 PM
1) Script Title:

2) Script URL (on DD):

3) Describe problem:

I am using a drop down menu, the only issue I have is that when I click on one of the items in the menu it loads my picture in a new window and not in a frame in the same window as it is supposed to. Here is the relevant coding:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Envirofresh Products</title>


<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />

<script src="thumbnailviewer.js" type="text/javascript">

</script>

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 2, and so on
var menu0=new Array()
menu0[0]='<a href="http://cnn.com">Slurp N Fresh</a>'
menu0[1]='<a href="http://msnbc.com">Slurp N Fresh Directions</a>'
menu0[2]='<a href="http://news.bbc.co.uk">Pet Dental Care Tips</a>'

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="images/ef100a.jpg" rel="thumbnail">Get The Odor Out Pet Formula</a>'
menu1[1]='<a href="http://www.freewarejava.com">Get The Odor Out Skunk Formula</a>'
menu1[2]='<a href="http://codingforums.com">Get The Odor Out Sport Formula</a>'
menu1[3]='<a href="http://www.cssdrive.com">Get The Odor Out Commercial Formula</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">SR-40 Stain Remover</a>'
menu2[1]='<a href="http://msnbc.com">SR-40 Stain Remover Directions</a>'
menu2[2]='<a href="http://news.bbc.co.uk">Stain removal Tips</a>'


//Contents for menu 2, and so on
var menu3=new Array()
menu3[0]='<a href="http://cnn.com">3 In 1 Shampoos</a>'
menu3[1]='<a href="http://msnbc.com">3 In 1 Colonges, Conditioners, and Detanglers</a>'



var menuwidth='165px' //default menu width
var menubgcolor='white' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'"

onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

</head>


<body>
<body background="images/wall.jpg" bgcolor="#00FFFF" text="#000080" link="#008000" vlink="#000080" alink="#00FF00">


<div id="container">
<div id="header">


<ul>
<li><a href="http://www.freewebsitetemplates.com">Home</a></li>

<li><a href="http://www.freewebsitetemplates.coonClick="return clickreturnvalue()"m" onMouseover="dropdownmenu(this,

event, menu1, '150px')" onMouseout="delayhidemenu()">Odor Products</a></li>

<li><a href="http://www.freewebsitetemplates.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this,

event, menu2, '150px')" onMouseout="delayhidemenu()">Stain Remover</a></li>

<li><a href="http://www.freewebsitetemplates.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this,

event, menu0, '150px')" onMouseout="delayhidemenu()">Pet Breath Freshener</a></li>

<li><a href="http://www.freewebsitetemplates.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this,

event, menu3, '150px')" onMouseout="delayhidemenu()">Shampoos and Colonge</a></li>


</ul>
</div>

jscheuer1
11-19-2007, 07:58 PM
1) Script Title:

2) Script URL (on DD):

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Please post a link to the page on your site that contains the problematic code so we can check it out.

Your page/code is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

Without the resources (scripts and images) for the code you give, it is hard to diagnose this. That's why I ask for a link to your page and a link to the scripts on DD.

To avoid a DD usage terms violation, you need to include the script credit for the thumbnail script. I know that perhaps your actual page may have it, but I don't see it in your code from your post.

Just in general, the thumbnail script needs to initialize the content from the menu script, but the menu script only adds the content to the page on demand, not as the page is loading as is expected by the thumbnail script.