Results 1 to 6 of 6

Thread: Scrollable Content Alignment Help

  1. #1
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Scrollable Content Alignment Help

    1) Script Title: Scrollable content script II

    2) Script URL (on DD): www.badnewsbears.tk

    3) Describe problem:
    i do not know how to align so the scroll is over the image above just under the links. i've been trying to figure it out for awhile now and i'm finally giving up and just asking you guys. i'm not that great with html code but if you guys could help me out that's be awesome. also, if you could tell me the code for making a new window pop up when you click on a link, that's be awesome! thanks alot. i hope you can help!
    - mike

  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

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    a:link {color: #FFFFFF; text-decoration: none;}
    a:visited {color: #FFFFFF; text-decoration: none;}
    a:active {color: #FFFFFF; text-decoration: none;}
    a:hover {color: #000000; text-decoration: none;}
    #sc {
    width:175px;
    position:relative;
    height:175px;
    top:-280px;
    left:-10px;
    }
    </style>  
    </head>
    <body bgcolor="#333333" leftmargin="0" topmargin="0" marginwidth="0" 
    
    marginheight="0">
    <font color="#000000">
    <br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;
    
    
    
    <table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td>
    
    <img src="http://home.comcast.net/~bubige/Website-Idea.jpg" width="660" 
    
    height="500" border="0" alt="" usemap="#Website_Idea_Map">
    <map name="Website_Idea_Map">
    <area shape="rect" alt="" coords="557,49,606,64" 
    
    href="http://home.comcast.net/~bubige/news.html">
    
    <area shape="rect" alt="" coords="551,94,613,111" 
    
    href="http://home.comcast.net/~bubige/media.html">
    <area shape="rect" alt="" coords="561,143,607,160" 
    
    href="http://home.comcast.net/~bubige/links.html">
    <area shape="rect" alt="" coords="540,121,624,136" 
    
    href="http://home.comcast.net/~bubige/contacts.html">
    <area shape="rect" alt="" coords="532,69,637,91" 
    
    href="http://home.comcast.net/~bubige/biography.html">
    <area shape="rect" alt="" coords="23,79,159,91" href="http://community.livejournal.com/badnewsbearspa/">
    <area shape="rect" alt="" coords="23,25,154,44" href="http://www.purevolume.com/badnewsbears">
    <area shape="rect" alt="" coords="23,49,150,72" href="http://www.myspace.com/badnewsbearspa">
    </map></td></tr>
    
    
    <tr><td align="right">
    <div id="sc"><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=4
    
    if (iens6){
    document.write('<div id="container" style="position:relative;width:175px;height:160px;border:0px solid black;overflow:hidden">')
    document.write('<div id="content" style="position:absolute;width:170px;left:0;top:0">')
    }
    </script>
    
    <ilayer name="nscontainer" width=175 height=165 clip="0,0,300,250">
    <layer name="nscontent" width=175 height=165 visibility=hidden>
    <!--INSERT CONTENT HERE-->
    
    <p align="justify" style="margin-top:0;">
    <font size=2>
    <b>Monday, July 24th 2006</b>
    <br>
    Hey kiddies! this website is taking forever to make because i suck a HTML CODE so yeah. WFT MATE! LOL! OMG! HAHAH!
    sincerely,
    mike </p><p align="justify">
    <b>Tuesday, July 25th 2006</b>
    <br>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p><p align="justify">
    <b>Wednesday, July 26th 2006</b>
    <br>
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <!--END CONTENT-->
    
    </layer>
    </ilayer>
    
    <script language="JavaScript1.2">
    if (iens6)
    document.write('</div></div>')
    </script>
    
    <table width="175"><tr><td><p align="right">
    
    <a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="http://home.comcast.net/~bubige/up.gif" border=0></a>  <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="http://home.comcast.net/~bubige/down.gif" border=0></a></p></td></tr>
    </table></div>
    </td></tr></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>
    
    </body>
    </html>
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Now, I'm probably wrong, but this is the way I would do this.
    Code:
    <html>
    <head>
    <style type="text/css">
    .frame {
    font:12px arial;
    width:200;
    height:200;
    border:none;
    overflow:hidden;
    border:1px solid black;
    padding:5;
    }
    </style>
    <script language="javascript">
    i = 0
    var speed = 4
    function scrollUp() {
    i = i - speed
    var div = document.getElementById("news")
    div.scrollTop = i
    if (i > div.scrollHeight - 160) {i = 0}
    t1=setTimeout("scrollUp()",100)
    }
    function scrollDown() {
    i = i + speed
    var div = document.getElementById("news")
    div.scrollTop = i
    if (i > div.scrollHeight - 160) {i = 0}
    t2=setTimeout("scrollDown()",100)
    }
    </script>
    </head>
    <body>
    <div class="frame" id="news">
    NEWS
    <br><hr>
    <br>Segment 1
    <br>Segment 2
    <br>Segment 3
    <br>Segment 4
    <br>Segment 5
    <br>Segment 6
    <br>Segment 7
    <br>Segment 8
    <br>Segment 9
    <br>Segment 10
    <br>Segment 11
    <br>Segment 12
    <br>Segment 13
    <br>Segment 14
    <br>Segment 15
    <br>Segment 16
    <br>Segment 17
    <br>Segment 18
    <br>Segment 19
    </div>
    <br><a href="#" onmouseover="scrollUp()" onmouseout="clearTimeout(t1)">Up</a>
    <br><a href="#" onmouseover="scrollDown()" onmouseout="clearTimeout(t2)">Down</a>
    </body>
    </html>
    - Mike

  4. #4
    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

    Yes, you are wrong. Not because your code is no good though, it may be horrible, I didn't need to check it much to see that you missed the point. You're wrong because you haven't addressed the question asked in this thread, which was how to get the existing scroller to appear over the image map.

    If you want to publish your own code for your own scroller, do it in the 'Javascript' or the 'Submit a DHTML or CSS code' forums. Your own code would be fine here though, if it actually solved the problem.
    - John
    ________________________

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

  5. #5
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Oops. I guess i didn't read the question well enough. I feel like a moron
    - Mike

  6. #6
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    amazing! thank you sooo much! you're the best!

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
  •