Results 1 to 3 of 3

Thread: Scrollable Content II; Change Scrolling Arrow placements

  1. #1
    Join Date
    Dec 2008
    Location
    Satipo, Peru (amazon jungle)
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face Scrollable Content II; Change Scrolling Arrow placements

    1) Script Title: Scrollable content II

    2) Script URL (on DD):

    http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

    3) Describe problem: This is the perfect script for how I want my page. However, I've encountered a dilemma when I try to change the placements of the scrolling arrows higher up so that they aren't located on the bottom where you can't see them when the page loads. Ideally I would like to have them up at the top on the outsides of the ilayers in the script, but anywhere else where they can function up near the top would be great as well, as long as they're are visible on the initial page load above the layer box and not at the bottom. This would be a great help, this is for the home page (index page) of my first website, www.butterflyhunters.com. I'm a web design virgin so please bear with me if my script looks a little messy. There's another script app on my page but it has nothing to do with this other script, it hasn't affected either one in anyway that I can see. Any other suggestions or comments would be greatly appreciated as well

    here's the script as shown on my page.



    <script type="text/javascript">

    /******************************************
    * Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
    * Visit http://www.dynamicdrive.com/ for full source code
    * This notice must stay intact for use
    ******************************************/

    iens6=document.all||document.getElementById
    ns4=document.layers

    //specify speed of scroll (greater=faster)
    var speed=5

    if (iens6){
    document.write('<div id="container" style="position:relative;width:800px;height:600px;border:2px ridge #FFFF00;overflow:hidden">')
    document.write('<div id="content" style="position:absolute;width:800px;height:1200px;left:0;top:0">')
    }
    </script>

    <ilayer name="nscontainer" width=800 height=400>
    <layer name="nscontent" left="0" top="1" width=800 height=2000>


    ::::Content here; which is my blogger blog running through FTP from dreamweaver to be more specific::::::


    </layer>
    </ilayer>


    <script language="JavaScript1.2">
    if (iens6)
    document.write('</div></div>')
    </script>

    <table width="880"><td><p align="right">
    <a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" width="21" height="57" border="0" align="left" /></a> <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>
    </table>

    <script language="JavaScript1.2">
    if (iens6){
    var crossobj=document.getElementById? document.getElementById("content") : document.all.content
    var contentheight=crossobj.offsetHeight
    }
    else if (ns4){
    var crossobj=document.nscontainer.document.nscontent
    var contentheight=crossobj.clip.height
    }

    function movedown(){
    if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
    crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
    else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
    crossobj.top-=speed
    movedownvar=setTimeout("movedown()",20)
    }

    function moveup(){
    if (iens6&&parseInt(crossobj.style.top)<=0)
    crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
    else if (ns4&&crossobj.top<=0)
    crossobj.top+=speed
    moveupvar=setTimeout("moveup()",20)

    }

    function getcontent_height(){
    if (iens6)
    contentheight=crossobj.offsetHeight
    else if (ns4)
    document.nscontainer.document.nscontent.visibility="show"
    }
    window.onload=getcontent_height
    </script>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This portion of the code from Step 1:

    HTML Code:
    <table width="175px"><td><p align="right">
    <a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>  <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>
    </table>
    is ordinary HTML with javascript events hard coded to the links. It may be placed anywhere you like in the body of your page, as well as styled in any fashion you like. The table need not even be used in fact, all that is required are the links and images, and they may be put anywhere you want. You may even use your own images, or text instead of the image tags, if you prefer.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Location
    Satipo, Peru (amazon jungle)
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you

    I seem to have a tendency to make things more complicated than they really are. My page is starting to come together, thanks.

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
  •