SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    help with sliding menu

    I'd like some help with a sliding menu I created.
    Two script below, the first with one function, works if 1st event has finished before next starts, the second (the one I use) works fine even if you rollover fast and all a triggered, but there is alot of activity. (too much for google's highlight, crashes browser!)

    They both are condensed to work alone.
    Code:
    <script>
    button=new Array(1,2,3,4,5,6,7,8);sct=button.length
    but=new Array
    for (i=0;i<sct;i++) {
    document.write(
    '<style>',
    'img { border:0px }',
    '.butdiv'+i+' { position:absolute; left:105px; top:'+(i*35)+'px; z-Index:2; background-image:url(http://www.unitingrhythms.co.uk/images/butbg.gif)}',
    '.imgsl'+i+' { position:absolute; left:105px; top:'+(i*35)+'px; z-Index:3; height:30px; overflow:hidden; background-image:url(http://www.unitingrhythms.co.uk/images/slbg.gif)}',
    '</style>',
    '<div class="butdiv'+i+'" id="butdiv'+i+'">','<a href="+i+">','<img src=""http://www.unitingrhythms.co.uk/images/butbg.gif>','</a>','</div>',
    '<div class="imgsl'+i+'" id="imgsl'+i+'">','<a href="+i+" id=p5x5 title='+button[i]+'>',button[i],'</a>',
    '</div>')
    }
    posArray=new Array(105,105,105,105,105,105,105,105,105)
    timerL=new Array; timerR=new Array
    function moveleft(slnol,dir) {
     posArray[slnol]=posArray[slnol]-dir;
    wid=110-posArray[slnol]
    if ((posArray[slnol]>=15)&&(posArray[slnol]<=105)) {
    document.getElementById("imgsl"+slnol).style.left=posArray[slnol];
    document.getElementById("imgsl"+slnol).style.width=wid;
    timerL[slnol]=setTimeout("moveleft("+slnol+","+dir+")",2)}}
    </script>
    <div style="position:absolute;top:0px;left:0px; z-Index:4">
    <script>
    for (i=0;i<sct;i++) {
    document.write('<a href="'+i+'">','<img style="position:absolute; left:15px; top:'+(i*35)+'px; width:120px; height:30px;" src="images/o.gif" onMouseover="moveleft('+i+',10)" onMouseout="moveleft('+i+',-10)" alt='+button[i]+'>','</a>')}
    </script>
    </div>
    The second has two functions, one to make the sliders go left, one to make them go right. the function to make it go left is alot faster than the one to go right, as both try to work at the same time. How could I stop this?
    Code:
    <script>
    button=new Array(1,2,3,4,5,6,7,8);sct=button.length
    but=new Array
    for (i=0;i<sct;i++) {
    document.write(
    '<style>',
    'img { border:0px }',
    '.butdiv'+i+' { position:absolute; left:105px; top:'+(i*35)+'px; z-Index:2; background-image:url(http://www.unitingrhythms.co.uk/images/butbg.gif)}',
    '.imgsl'+i+' { position:absolute; left:105px; top:'+(i*35)+'px; z-Index:3; height:30px; overflow:hidden; background-image:url(http://www.unitingrhythms.co.uk/images/slbg.gif)}',
    '</style>',
    '<div class="butdiv'+i+'" id="butdiv'+i+'">','<a href="+i+">','<img src=""http://www.unitingrhythms.co.uk/images/butbg.gif>','</a>','</div>',
    '<div class="imgsl'+i+'" id="imgsl'+i+'">','<a href="+i+" id=p5x5 title='+button[i]+'>',button[i],'</a>',
    '</div>')
    }
    posArray=new Array(105,105,105,105,105,105,105,105,105)
    timerL=new Array; timerR=new Array
    function moveleft(slnol) {
     posArray[slnol]=posArray[slnol]-10;
    wid=110-posArray[slnol]
    if (posArray[slnol]>=15) {
    document.getElementById("imgsl"+slnol).style.left=posArray[slnol];
    document.getElementById("imgsl"+slnol).style.width=wid;
    timerL[slnol]=setTimeout("moveleft("+slnol+")",2)}}
    function moveright(slnor) {
     posArray[slnor]=posArray[slnor]+10;
    wid=110-posArray[slnor]
    if (posArray[slnor]<=105) {
    document.getElementById("imgsl"+slnor).style.left=posArray[slnor];
    document.getElementById("imgsl"+slnor).style.width=wid;
    timerR[slnor]=setTimeout("moveright("+slnor+")",50);clearTimeout(timerL[slnor])}}
    </script>
    <div style="position:absolute;top:0px;left:0px; z-Index:4">
    <script>
    for (i=0;i<sct;i++) {
    document.write('<a href="'+i+'">','<img style="position:absolute; left:15px; top:'+(i*35)+'px; width:120px; height:30px;" src="images/o.gif" onMouseover="moveleft('+i+')" onMouseout="moveright('+i+')" alt='+button[i]+'>','</a>')}
    </script>
    </div>
    I would prefer to use something like the first, using only one function, but what else can I add to let the triggers work simultaneiosly?


    ps. If anyone uses this on their site, can they not use my pictures directly from site, and if possible, link to my site below....Ta.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is it simplified abit.
    What I want is for the yellow box to extend out from the red, but when you mouseover the yellow from the red for it to not go back in.
    I've managed to use just the one function by putting the speed directly in it.
    If(dir<0) {speed=50} else speed=2I've also taken out the clear image that covers the buttons, as this would allow me to put links into the sliding division.
    Code:
    <script>
    posArray=new Array(105,105,105,105,105,105,105,105,105)
    timer=new Array
    button=new Array(1,2,3,4,5,6,7,8);
    sct=button.length;
    but=new Array
    function move(slno,dir) {
    posArray[slno]=posArray[slno]-dir;
    wid=110-posArray[slno]
    if ((posArray[slno]>=15)&&(posArray[slno]<=105)) {
    document.getElementById("imgsl"+slno).style.left=posArray[slno];
    document.getElementById("imgsl"+slno).style.width=wid;
    if(dir<0) {speed=50} else speed=2
    timer[slno]=setTimeout("move("+slno+","+dir+")",speed)}
    }for (i=0;i<sct;i++) {
    document.write(
    '<style>',
    '.butdiv'+i+' { position:absolute; left:105px; top:'+(i*35)+'px; width:30px;height:30px; z-Index:2; background-color:red}',
    '.imgsl'+i+' { position:absolute; left:105px; top:'+(i*35)+'px; z-Index:3; height:30px; overflow:hidden; border:1px; background-color:yellow;}',
    '</style>',
    '<div class="butdiv'+i+'" id="butdiv'+i+'" onMouseover="move('+i+',10)" onMouseout="move('+i+',-10)">',
    '<a href="+i+">',
    "but"+i,
    '</a>','</div>',
    '<div class="imgsl'+i+'" id="imgsl'+i+'" onMouseover="move('+i+',10)" onMouseout="move('+i+',-10)">',
    '<a href="+i+" id=p5x5 title='+button[i]+'>',button[i],'</a>',
    '</div>')
    }</script>
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've got the answer. Put a clearTimeout(timer[slno]) as the first line of the function. Works smooth as.........
    Can someone check it for me, full working one below....
    Code:
    <script>
    posArray=new Array(105,105,105,105,105,105,105,105,105)
    timer=new Array
    button=new Array(1,2,3,4,5,6,7,8);
    sct=button.length;
    but=new Array
    function move(slno,dir) {
    clearTimeout(timer[slno])
    posArray[slno]=posArray[slno]-dir;
    wid=110-posArray[slno]
    if ((posArray[slno]>=15)&&(posArray[slno]<=105)) {
    document.getElementById("imgsl"+slno).style.left=posArray[slno];
    document.getElementById("imgsl"+slno).style.width=wid;
    if(dir<0) {speed=50} else speed=2
    timer[slno]=setTimeout("move("+slno+","+dir+" )",speed)} else dir=0
    }
     
    for (i=0;i<sct;i++) {
    document.write(
    "<style>",
    ".butdiv"+i+" { position:absolute; left:105px; top:"+(i*35)+"px; width:30px;height:30px; z-Index:2; background-color:red}",
    ".imgsl"+i+" { position:absolute; left:105px; top:"+(i*35)+"px; z-Index:3; height:30px; overflow:hidden; border:1px; background-color:yellow;}",
    "</style>",
    "<div class=\"butdiv"+i+"\" id=\"butdiv"+i+"\" onMouseover=\"move("+i+",10)\" onMouseout=\"move("+i+",-10)\">",
    "<a href="+i+">",
    "but"+i,
    "</a>","</div>",
    "<div class=\"imgsl"+i+"\" id=\"imgsl"+i+"\" onMouseover=\"move("+i+",10)\" onMouseout=\"move("+i+",-10)\">",
    "<a href="+i+" title="+button[i]+">",button[i],"</a>",
    "</div>")
    }</script>
    If you use it, any chance of a link to my site? PR0 at the mo, but have worked really hard to change it (It's a really fun site for IE )
    anyway, if you want to use it just put the links you want to use in button array............
    If there's still a problem with it can you let me know.....
    many thanks.....
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Another tip if you want to use this script......
    When I put the script back into my site, with the transparent images, it crashed the browser again. I have just taken the transparent images out and it works fine. It was the movement of transparent images that crashed the browser when doing a Google "highlight", not the script. So, I'd advise not to use em, and just use CSS to colour the boxes......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •