PDA

Click to See Complete Forum and Search --> : Javascript/DHTML Sliding Menu/area?

himerus
05-23-2003, 10:26 AM
I'm look for something that I can easily modify and learn from for a nice graphical update to my sites (Myispfinder LLC (http://network.myispfinder.org)).

I've seen something that has appeared on sites. On some it was a window that floated around the screen on top of the content, until you either closed it, or it simply went away after a set time.

The others I have seen have been a slide-out from the side of the page. I found one of those scripts, and for the life of me was unable to modify it to work from either side I wanted, couldn't modify the timings easily, etc.

What I'm looking for would slide out from the right side of the web page, but, the scrollbars at the bottom would not adjust for the overhang on the page. (if that is possible).

I would like to know how to make it semi-transparent.

The purpose of me using this "feature" is to have a new navigation menu between all my sites. I currently have a drop-down menu, and I'd like to make something in addition to that which is much more graphical, and can match the sites layout.

Thanks in advance.

Jake Strawn,
President, Myispfinder LLC (http://network.myispfinder.org)
http://forums.myispfinder.org
http://hosting.myispfinder.org
Jona
05-23-2003, 11:47 AM
This is quite simple. It is easiest done with Flash but you can use a <DIV> tag as well.
Here is the code in a simple page I made:


<!--Note: Invalid HTML; no DTD specified -->
<HTML>
<HEAD><TITLE>Dynamic Positioning</TITLE>
<SCRIPT LANGUAGE="JScript">
var n0 = setInterval("start2()", 1500);
var n1 = setInterval("start3()", 4000);
var id2;
var clear;
function clearIt(){
Banner.style.visibility='hidden';
clearTimeout(clear)
}
function start3(){}
function start2(){
Banner.style.pixelTop = document.body.offsetHeight-200;
Banner.innerHTML="<i>Running With Paste!!</i>"
Banner.style.visibility = "visible";
id2 = window.setInterval("glide2()",50);
clearInterval(n0);
}
function glide2(){
Banner.style.pixelTop -= 10;
if(Banner.style.pixelTop<=200){
Banner.style.pixelTop=200;
clearInterval(id2);
setTimeout('clearIt()', 3000);
} }
function startGlide(){
Banner.style.pixelLeft =
document.body.offsetWidth-200;
Banner.style.visibility = "visible";
id = window.setInterval("glide()",50);
}
function glide(){
Banner.style.pixelLeft -= 10;
if (Banner.style.pixelLeft<=200) {
Banner.style.pixelLeft=200;
window.clearInterval(id);
setTimeout('clearIt()', 2000);
} }
</SCRIPT>
<BODY onload="startGlide()">
<h2>
<DIV ID="Banner" STYLE="visibility:hidden;position:absolute;top:200;left:200;color:blue;font-family:arial">
Welcome to...</div></h2>
<embed src="loop.mp3" loop="false" hidden="true"></embed>
</BODY>
</HTML>
himerus
05-23-2003, 12:46 PM
Here's the link of where I saw what I want.

I only found it again because it is a page that links to my site.

http://www.business2.com/webguide/0,1660,4245,00.html

The section on the right that says expand/collapse. that is exactly what I'm looking for
Jona
05-23-2003, 12:49 PM
That's going to take a lot more coding... And possibly a day or two before I could finish making something that big.
himerus
05-23-2003, 12:56 PM
Please don't get me wrong. I'm not asking someone to code it for me 100%....

I'm more looking for a good example of how it could be done. Once Ihave the slide function the way I want it, the graphcial interface would be nothing at all.

I'm just not very well versed in JavaScript/DHTML... I can code PHP till I'm blue in the face, but haven't taken the time to study the others yet.

If you could even just point me, or give me a good push in the right direction, I could totally get it done myself.
Jona
05-23-2003, 01:03 PM
Well, since you put it that way, you might want to just completely learn JavaScript. I don't know how advanced you are, but I'll just throw out a few extra links for good measure. ;)

http://devedge.netscape.com/

http://htmlgoodies.com/jsp/jsp_toc.html

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jslrfjscriptlanguagereference.asp

http://google.com/ (Search for something like, "Javascript tutorials" or some function-specific command. Or try, "DHTML tutorials.");

http://msdn.microsoft.com/library/ (Search through there for some DHTML tutorials.)

http://dynamicdrive.com/

http://dhtmlshock.com/

http://javascript.internet.com/

http://webreference.com/