PDA

View Full Version : Scrollable Content Alignment Help



bubige
07-29-2006, 06:34 AM
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

jscheuer1
07-29-2006, 04:07 PM
<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>

mburt
07-29-2006, 04:36 PM
Now, I'm probably wrong, but this is the way I would do this.

<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>

jscheuer1
07-29-2006, 05:34 PM
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.

mburt
07-29-2006, 05:37 PM
:o Oops. I guess i didn't read the question well enough. I feel like a moron

bubige
07-29-2006, 07:26 PM
amazing! thank you sooo much! you're the best!