/    Sign up×
Community /Pin to ProfileBookmark

Javascript/DHTML Sliding Menu/area?

Copy linkTweet thisAlerts:
May 23.2003

I’m look for something that I can easily modify and learn from for a nice graphical update to my sites ([url=http://network.myispfinder.org]Myispfinder LLC[/url]).

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, [url=http://network.myispfinder.org]Myispfinder LLC[/url]
[url]http://forums.myispfinder.org[/url]
[url]http://hosting.myispfinder.org[/url]

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@JonaMay 23.2003 — [b][font=arial][color=maroon]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:[/color][/font][/b]

[font=courier new]

<!--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>

[/font]
Copy linkTweet thisAlerts:
@himerusauthorMay 23.2003 — 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
Copy linkTweet thisAlerts:
@JonaMay 23.2003 — [b][font=arial][color=maroon]That's going to take a lot more coding... And possibly a day or two before I could finish making something that big.[/color][/font][/b]
Copy linkTweet thisAlerts:
@himerusauthorMay 23.2003 — 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.
Copy linkTweet thisAlerts:
@JonaMay 23.2003 — [b][font=arial][color=maroon]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. ?[/color][/font][/b]

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/
×

Success!

Help @himerus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...