Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2003
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Scrolling picture show...

    I'm new to Javascript and I would eventually like to design a script that can be put on a page that would have a series of pictures scrolling in a layer that would hide the overflow. It would be good if they were also in a loop so that the user would not be able to tell where the end and the beginning were, it would just look like continuous pics.
    That would be the menu, as it were. So with a "onmouseover" I could get the scrolling list to stop so that the user could click on one of the pictures and then have a larger version of it appear below. I know that this can be done with frames, but I would rather do it without if that's possible.
    Anyway, I would just like any help at all getting this going because it seems like it is a heavy project. I've been trying to look at similar scripts and break them apart but it's pretty hard for me to do.

    any help is good help.

    thanks.

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts

  • #3
    New Coder
    Join Date
    Jan 2003
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I like it...

    That's a good script...very close to what I was talking about.
    Is there a way to make the scrolling smoother though? I was adjusting the speed and when it gets down to a lower number the movement does not seem as....well, smooth.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: I like it...

    Originally posted by Romulus
    That's a good script...very close to what I was talking about.
    Is there a way to make the scrolling smoother though? I was adjusting the speed and when it gets down to a lower number the movement does not seem as....well, smooth.
    If the OS is Win9x or WinME the timer won't be good for values < 18ms which can make low timer intervals useless on those client machines.

    Smoothness of animation can also be heavily effected by the CPU/Video subsystem of the client machine. If you're animating a huge portion of the screen a slow processor or slow video subsystem may be unable to keep up and when that happens the screen will become jerky as some intervals simply don't get displayed.

  • #5
    New Coder
    Join Date
    Jan 2003
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Well...

    I decided to try to make a kind of scrolling picture menu by using layers and I've run into a bit of a problem. I want to have a layer that will make something like a 300px wide area visable on the screen. Then I was trying to put a 400+ px layer, with the thumbnail pics on it, below the first layer and have it scrolling back and forth so that you can only see the 300px space. However, when I tried to do this it seems like both layers are moving together. There are supposed to be 7 identical thums on the bottom layer, but you can only see 5 because there is only 300px visable. And because both layers seem to be moving you never see all the pictures scroll by the space.
    I also put a left, reset, and right button to control the scrolling and it doesn't seem to work the way I wanted. I wanted the pictures to start, centered over the 300px space and then go right or left. But it only seems to go left and won't go all the way to the right.
    I've included the script that I was making in Dreamweaver and if anyone could help me out a little with the problem, it would be a great help.
    ------------------------------
    <html>
    <head>
    <title>Scrolling Picture Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function P7_HScroller(el,dr,tx,ox,spd) { //v1.6 by PVII
    var g,gg,fr,sp,pa='',slw=true,m=false,w,ww,lx,rx;tx=parseInt(tx);
    if((g=MM_findObj(el))!=null){gg=(document.layers)?g:g.style;}else{return;}
    if(dr=="Stop"){if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=false;}
    if((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1)&& !window.opera){pa="px";}
    if(navigator.userAgent.indexOf("NT")>-1 || navigator.userAgent.indexOf("Windows 2000")>-1){slw=false;}
    if(spd=="Slow"){sp=(slw)?2:1;fr=(slw)?40:30;}else if(spd=="Medium"){sp=(slw)?4:1;fr=(slw)?40:10;
    }else{sp=(slw)?8:4;fr=(slw)?40:10;}if(spd=="Warp"){sp=5000;}var xx = parseInt(gg.left);if(isNaN(xx)){
    if(g.currentStyle){xx=parseInt(g.currentStyle.left);}else if(document.defaultView){
    xx=parseInt(document.defaultView.getComputedStyle(g,"").getPropertyValue("left"));}else{xx=0;}}
    if(document.all || document.getElementById){w=parseInt(g.offsetWidth);if(!w){w=parseInt(g.style.pixelWidth);}
    if(g.hasChildNodes){for(wx=0;wx<g.childNodes.length;wx++){ww=parseInt(g.childNodes[wx].offsetWidth);
    if(ww>w){w=ww;}}}}else if(document.layers){w=parseInt(g.clip.width);}lx=tx-w+parseInt(ox);rx=tx;
    if(dr=="Right"){if(xx>lx){m=true;xx-=sp;if(xx<lx){xx=lx;}}}
    if(dr=="Left"){if(xx<rx){m=true;xx+=sp;if(xx>rx){xx=rx;}}}
    if(dr=="Reset"){gg.left=tx+pa;if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=false;}
    if(m){gg.left=xx+pa;if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=true;
    eval("g.p7Magic=setTimeout(\"P7_HScroller('"+el+"','"+dr+"',"+tx+","+ox+",'"+spd+"')\","+fr+")");
    }else{g.toMove=false;}
    }
    //-->
    </script>
    </head>

    <body>

    <div id="containLayer" style="position:absolute; left:271px; top:195px; width:300px; height:63px; z-index:1; clip: rect(0px 300px 63px 0px); background-color: #D8D0C8; layer-background-color: #D8D0C8; border: 1px none #000000; overflow: hidden;">
    <div id="contentLayer" style="position:absolute; width:420px; height:63px; z-index:1; left: -60px; top: 0px; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;">
    <table width="420" border="0" cellspacing="1" cellpadding="0">
    <tr>
    <td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
    <td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
    <td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
    <td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
    <td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
    <td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
    <td><img src="MoGreen/photos/AnnaThumb.jpg" width="60" height="63"></td>
    </tr>
    </table>
    </div>
    </div>


    <div id="Controls" style="position:absolute; width:100px; height:20px; z-index:2; left: 375px; top: 280px;">
    <table width="100" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><a href="javascript:;" onMouseOver="P7_HScroller('containLayer','Right',0,300,'Medium')" onMouseOut="P7_HScroller('containLayer','Stop',0,0,'Medium')"><img src="PVII%20scroller%20Ideas/pk_left.gif" width="26" height="20" border="0"></a></td>
    <td align="center"><a href="javascript:;" onClick="P7_HScroller('containLayer','Reset',0,0,'Warp')"><img src="PVII%20scroller%20Ideas/pk_home.gif" width="28" height="20" border="0"></a></td>
    <td align="right"><a href="javascript:;" onMouseOver="P7_HScroller('containLayer','Left',0,0,'Medium')" onMouseOut="P7_HScroller('containLayer','Stop',0,0,'Medium')"><img src="PVII%20scroller%20Ideas/pk_rite.gif" width="26" height="20" border="0"></a></td>
    </tr>
    </table>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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