Forums > draggable navigation

Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics

ChasingLife87

Jun 11 2005, 10:12 PM

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]

talcumpowder

Jun 11 2005, 10:53 PM

=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 ]

mona lisa

Jun 11 2005, 11:00 PM

I didn't get your PM actually. Weird. I tried to work it with iframes, but it didn't work. I realized I had to have the page load again as nyah-nek0 said. Each page had to be exactly the same. That's why I'm changing the layout now. Ha. I don't mind keeping the code up. lol I didn't make it, so it doesn't matter.

ChasingLife87

Jun 11 2005, 11:10 PM

Whoa then. A bug in the pm system

nyah-nek: yeah, I noticed that Mona's wasn't frames because the images reloaded every time and the nav went back to the default position. BUT! Thanks for that site, that's good enough for me!!!

so, both of you thanks, and this can probably be closed now

souldreamers

Jun 12 2005, 02:37 AM

QUOTE(ChasingLife87 @ Jun 11 2005, 11:10 PM)

Whoa then. A bug in the pm system

- Topic Closed -

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.