draggable navigation - Forums

draggable navigation, that gotnoheart gave me :)

ChasingLife87 View Profile View Subprofile	Jun 11 2005, 10:12 PM Post #1
ich heisse Meli. Group: Member Posts: 909 Joined: Apr 2005 Member No: 122,016	Mona gave me this script after I asked her for it, and I'm loving it, totally getting it to work: <!-- begin code provided by createblog.com --><br /><br /><HEAD><br /><style><br />.move<br />{<br /> width:100%;<br /> background-color:#99CCFF;<br /> border-bottom:1px solid blue;<br /> font-size:14px;<br /> font-family:vardana;<br /> font-color:"#33CCAA";<br /> text-align:center;<br />}<br />.info<br />{<br /> width:100%;<br /> background-color:#99CCFF;<br /> border-top:1px solid blue;<br /> font-size:13px;<br /> font-family:vardana;<br /> font-color:"#33CCAA";<br />}<br />.panel<br />{<br /> width:150;<br /> position:absolute;<br /> border:1px solid blue;<br /> left:350;<br /> top:200;<br /> font-size:13px;<br /> font-family:vardana;<br />}<br />.panel a:visited{color:blue;}<br />.panel a{text-decoration:none;color:blue}<br />.panel a:hover{text-decoration:none;}<br />#panel a.visited{<br />text-decoration:none;<br />}<br />.menu<br />{<br /> width:100%;<br /> background-color:lightyellow;<br /> font-size:13px;<br /> font-family:vardana;<br />}<br /></style><br /><br /><script LANGUAGE="JavaScript"><br />N = (document.all) ? 0 : 1;<br />var ob;<br />var over = false;<br />function MD(e) {<br />if (over)<br />{<br />if (N) {<br />ob = document.getElementById("panel");<br />X=e.layerX;<br />Y=e.layerY;<br />return false;<br />}<br />else {<br />ob = document.getElementById("panel");<br />ob = ob.style;<br />X=event.offsetX;<br />Y=event.offsetY;<br />}<br />}<br />}<br />function MM(e) {<br />if (ob) {<br />if (N) {<br />ob.style.top = e.pageY-Y;<br />ob.style.left = e.pageX-X;<br />}<br />else {<br />ob.pixelLeft = event.clientX-X + document.body.scrollLeft;<br />ob.pixelTop = event.clientY-Y + document.body.scrollTop;<br />return false;<br /> }<br /> }<br />}<br />function MU() {<br />ob = null;<br />}<br />if (N) {<br />document.captureEvents(Event.MOUSEDOWN \| Event.MOUSEMOVE \| Event.MOUSEUP);<br />}<br />document.onmousedown = MD;<br />document.onmousemove = MM;<br />document.onmouseup = MU;<br /></script><br /></HEAD><br /><br /><BODY><br /><div id="panel" class="panel" ><br /><script language="JavaScript"><br />function getArray(id)<br />{<br /> var splitarray = link[id].split("\|");<br /> return splitarray;<br />}<br />function info(i,obj,col)<br />{<br /> sublink = getArray(i);<br /> infobar = document.getElementById("infob");<br /> infobar.innerHTML = "<img src='pointer2.gif'> "+sublink[2];<br /> obj.style.backgroundColor=col;<br />}<br />function endi(obj,col)<br />{<br /> obj.style.backgroundColor=col;<br /> infobar = document.getElementById("infob");<br /> infobar.innerHTML = "<img src='pointer2.gif'> <br>";<br />}<br />var link = new Array();<br />link[0] = ". My links\|http://www.webdeveloper.com \|Visit my links";<br />link[1] = ". HOME\|http://javascriptsource.com \|Visit my homepage";<br />link[2] = ". JavaScript \|http://www.javascript.com\|Free JavaScripts";<br />link[3] = ". My links\|http://www.webdeveloper.com \|Visit my links";<br /> document.write("<div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color=red><b>JavaScript Source</b></font></div><div class='menu'><br></div>");<br />for(i=0;i<link.length;i++)<br />{<br /> sublink = getArray(i);<br /> document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'gold')\" onmouseout=\"endi(this,'lightyellow')\" style='cursor:hand'> "+ sublink[0] +"</div></a>");<br />}<br /> document.write("<div class='menu'><br></div><div class='info' id='infob' name='infob'><img src='pointer2.gif'> <br></div>");<br /></script><br /></div><br /></body><br /><br /><!-- end code provided by createblog.com --> However, I have one dillema. I'm wanting to use this with frames, but I don't know enough javascript to add the equivalent of CODE target="content" to my array. Is there any way to use this navigation with frames? OR, if not, is there any way to just use regular links but still have it drag? I don't even need the hover effect, as long as the links work right, and it drags. A working example is at Mona's subdomain: http://enchantment.ill-wed.com. I'd ask her but she hadn't been checking her pm's [edit]Feel free to delete the code after the issue is resolved, in case you didn't want the whole world knowing it. idk! [/edit]
[Up]	[Quote]

Replies

talcumpowder View Profile View Subprofile	Jun 11 2005, 10:53 PM Post #2
You'll find me in your dreams. Group: Official Member Posts: 8,536 Joined: Mar 2005 Member No: 114,010	=S It's a lot harder to look at when it's not in a codebox. And, if you notice, her whole page loads over again. There's a diffrent page with a diffrent iFrame for every link. I checked, they're named diffrently. edit// This one.... I'm fairly sure you could use regular links. [ http://codelifter.com/main/javascript/dragablelayer.html ]
[Up]	[Quote]

Posts in this topic

ChasingLife87 draggable navigation Jun 11 2005, 10:12 PM

fishcake-y =S It's a lot harder to look at when it's ... Jun 11 2005, 10:53 PM

mona lisa I didn't get your PM actually. Weird. I tried ... Jun 11 2005, 11:00 PM

ChasingLife87 Whoa then. A bug in the pm system nyah-nek: ye... Jun 11 2005, 11:10 PM

souldreamers QUOTE(ChasingLife87 @ Jun 11 2005, 11:10 PM)W... Jun 12 2005, 02:37 AM

« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)

0 Members: