Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Floating/sliding menu

Status
Not open for further replies.
uNiHeX

uNiHeX

Programmer
Nov 19, 2000
2
US
I've finished a script that'll make a DIV scroll out from the side of the page when a button/link is clicked, but I'm having a little trouble compacting that script.
It's rather long, so I decided to put in a couple of for statements.
Here's the original function:

function slideb() {
clearTimeout(mTimer1);
if (menu.xpos > -110) {
menu.xpos--;
if (menu.xpos < -8) {
menu.xpos--;
if (menu.xpos < -20) {
menu.xpos--;
if (menu.xpos < -30) {
menu.xpos--;
if (menu.xpos < -40) {
menu.xpos--;
if (menu.xpos < -50) {
menu.xpos--;
if (menu.xpos < -60) {
menu.xpos--;
if (menu.xpos < -70)
menu.xpos--;
}
}
}
}
}
}
menu.left = menu.xpos;
setTimeout(mTimer2,1)
}
else
clearTimeout(mTimer2)
}


Now, everything about that worked perfectly, but that's an extremely lengthy function for doing something so simple.
This is how I tried to shorten it:

function slideb() {
if (menu.xpos > -110) {
for (i = 0;i > -100;i -= 1) {
if (menu.xpos <= i)
menu.xpos--;
menu.left = menu.xpos;
setTimeout(mTimer2,1);
}
}
else
clearTimeout(mTimer2);
}

It seems like it would work, but it doesn't. It doesn't reload the position of the menu DIV fast enough.
Here's the whole file so you can see what I'm talking about:

sliding.html

<HTML>
<HEAD>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--

function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) && ((agent.indexOf('spoofer') == -1) && (agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3));
this.ns3 = (this.ns && (this.major == 3));
this.ns4b = (this.ns && (this.minor < 4.04));
this.ns4 = (this.ns && (this.major >= 4));
this.ie = (agent.indexOf(&quot;msie&quot;) != -1);
this.ie3 = (this.ie && (this.major == 2));
this.ie4 = (this.ie && (this.major >= 4));
this.op3 = (agent.indexOf(&quot;opera&quot;) != -1);
this.win = (agent.indexOf(&quot;win&quot;) != -1);
this.mac = (agent.indexOf(&quot;mac&quot;) != -1);
this.unix = (agent.indexOf(&quot;x11&quot;) != -1);
}

function init() {
var is = new Is();
if (is.ns4) menu = document.menuDiv
if (is.ie4) menu = menuDiv.style
menu.xpos = parseInt(menu.left)
}

mTimer1 = &quot;slide()&quot;;
mTimer2 = &quot;slideb()&quot;;
// Original idea for the script, but has been
// revised in slideb()
function slide() {
clearTimeout(mTimer2);
if (menu.xpos < -2) {
menu.xpos++;
if (menu.xpos > -98) {
menu.xpos++;
if (menu.xpos > -70) {
menu.xpos += 2;
if (menu.xpos > -40)
menu.xpos += 3;
}
}
menu.left = menu.xpos
setTimeout(mTimer1,1)
}
else
clearTimeout(mTimer1)
}

// function that works
/* function slideb() {
clearTimeout(mTimer1);
if (menu.xpos > -110) {
menu.xpos--;
if (menu.xpos < -8) {
menu.xpos--;
if (menu.xpos < -20) {
menu.xpos--;
if (menu.xpos < -30) {
menu.xpos--;
if (menu.xpos < -40) {
menu.xpos--;
if (menu.xpos < -50) {
menu.xpos--;
if (menu.xpos < -60) {
menu.xpos--;
if (menu.xpos < -70)
menu.xpos--;
}
}
}
}
}
}
menu.left = menu.xpos;
setTimeout(mTimer2,1)
}
else
clearTimeout(mTimer2)
} */

// function that I want to work
function slideb() {
if (menu.xpos > -110) {
for (i = 0;i > -100;i -= 1) {
if (menu.xpos <= i)
menu.xpos--;
menu.left = menu.xpos;
setTimeout(mTimer2,1);
}
}
else
clearTimeout(mTimer2);
}
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR=&quot;#FFFFFF&quot; onLoad=&quot;init()&quot;>


<DIV STYLE=&quot;position: absolute;left: 400px;&quot;><A HREF=&quot;javascript:slide()&quot;>slide</A> - <A HREF=&quot;javascript:slideb()&quot;>back</A></DIV>

<DIV ID=&quot;menuDiv&quot; STYLE=&quot;position:absolute; left:-110px; top:0px; width:150px; height:600px;clip:rect(0,120,600,0);layer-background-color: #000000;background: #000000;border: #FFFFFF;&quot;>
</DIV>

</BODY>
</HTML>


Now, what would be appreciated is the function slideb() written.
 
Sort by date Sort by votes
Ahhh...I've got it!
I had the menu.left = menu.xpos; and setTimeout(mTimer2,1); in the wrong place!!!
I'll post the code here for anyone that would like to use this script.
The new slideb() function is:

function slideb() {
if (menu.xpos > -110) {
for (i = 0;i > -100;i -= 10) {
if (menu.xpos <= i)
menu.xpos--;
}
menu.left = menu.xpos;
setTimeout(mTimer2,1);
}
else
clearTimeout(mTimer2);
}



Sorry about the hasty ending to the last post. My sister had to go to work and I was going with her, and so I didn't finish the post.

Thanks for even considering this algorithm!


uni
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
782
trevil620
trevil620
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
721
nanbread
nanbread
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
222
Dara2020
Dara2020
tyutghf
  • Locked
  • Question
Sliding scale calculator
Replies
2
Views
216
tyutghf
tyutghf
Diego Donate
  • Locked
  • Question
How to close JQuery context menu in HTML/js code
Replies
1
Views
422
Diego Donate
Diego Donate

Part and Inventory Search

Sponsor

Back
Top