So I've been working on this little self project for my school and I've gotten a pretty good start, i hope
I have 2 problems though, and i have no clue where they can be..
First off, I'm using 2 scrollers made through javascript (i copied and pasted the code and changed it to fit my liking because i don't know a lot of javascript), they are both basically the same, its just one has pictures in it, for a little slideshow, and the other one is used as a substitute for marquee, mostly because w3c does not validate anything with marquee in it..The scrollers look fine in Firefox, however they go way off when in IE. The look / size of the scrollers is formatted through CSS.
The last thing, and its probably a simple newbie mistake, is that there's a big blank space in the top of the site, and I can't figure out why.
I'm kind of new to most of this, so any advice is very much appreciated
Here's the HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="chsstyles.css">
<title>Clinton High School</title>
<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent=new Array()
pausecontent[0]='<img src="http://www.chs.acs.ac/100th%20birthday/10.jpg" width="250" height="200">'
pausecontent[1]='<img src="http://www.chs.acs.ac/100th%20birthday/4.jpg" width="250" height="200">'
pausecontent[2]='<img src="http://www.chs.acs.ac/100th%20birthday/9.jpg" width="250" height="200">'
var pausecontent2=new Array()
pausecontent2[0]='Announcements Announcements Announcements '
pausecontent2[1]='Announcements Announcements Announcements '
pausecontent2[2]='Announcements Announcements Announcements '
</script>
<script type="text/javascript">
/***********************************************
* Pausing up-down scroller- � Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'<\/div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'<\/div><\/div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------
pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>
</head>
<body>
<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 4000)
</script>
<div id="maindiv">
<div id="header"><span class="c1">Clinton High School</span><br>
<em><span class="c2">"Commited to High Standards"</span></em><br></div>
<div id="leftcol"><img class="headlogo" src="headlogo.gif" alt="">
<p><a class="leftlink" href="http://www.chs.acs.ac/generalinfo/INFO.htm">General<br>
Information</a></p>
<p><a class="leftlink" href="http://www.chs.acs.ac/chshistory/chshistory.htm">CHS History</a></p>
<p><a class="leftlink" href="http://www.acs.ac/Calendar/Approved%20Calendar%202008-09.pdf">Calendar</a></p>
<p><a class="leftlink" href="http://www.chs.acs.ac/clinton%20high%20misc/CHS_Tutoring_Opportunities_08-09[1].doc">Tutoring<br>
Opportunities</a></p>
<p><a class="leftlink" href="http://www.chs.acs.ac/library/main.htm">Library</a></p>
<p><a class="leftlink" href="http://www.chs.acs.ac/departments/counseling/counselingmain.htm">Counseling</a></p>
<p><a class="leftlink" href="http://www.chs.acs.ac/Staff/STAFFCHS.htm">Staff</a></p>
<p><a class="leftlink" href="http://www.chs.acs.ac/departments/departments.htm">Departments</a></p>
<p><a class="leftlink" href="http://www.chs.acs.ac/activities/CHSactiv.html">Activities</a></p>
<p><a class="leftlink" href="http://www.chs.acs.ac/CHSsports/main.htm">Athletics</a></p>
<p><a class="leftlink" href="http://www.chs.acs.ac/wall%20of%20fame/Wall%20Of%20Fame%20Nomination%20form.doc">CHS Wall of<br>
Fame Form</a></p>
<a href="http://www.acs.ac/"><img src="http://www.chs.acs.ac/library/Pics/acsnew.gif" alt="" class="c4"></a></div>
<div id="content">
<p class="c5">Clinton High School, located in Clinton, Tennessee, is a comprehensive high school serving approximately 1250 students in grades 9-12, is fully accredited by the Southern Association of Colleges and grading periods. The school operates on a block schedule which consists of four 90 minute classes.<br>
<br>
The Clinton High School community fosters a commitment to high standards at all T.I.M.E.S. (Teach, Inspire, Motivate, Empower, Support)</p>
</div>
</div>
</body>
</html>
and here is the External Style Sheet.
Code:
body {
font : 100% Verdana, Arial, Helvetica, sans-serif;
background : black;
margin : 0;
padding : 0;
text-align : center;
color : #000000;
}
#maindiv {
margin-left : auto;
margin-right : auto;
height : 565px;
width : 1000px;
}
img.headlogo {
border : none;
clear : left;
margin-right : 2px;
}
a.leftlink:hover {
color : orange;
font-weight : bold;
}
#header {
background : orange;
width : 88%;
height : 14.5%;
float : right;
}
#leftcol {
background : black;
text-align : left;
border : none;
float : left;
width : 11%;
height : 100%;
}
a.leftlink {
text-align : center;
font-size : 100%;
color : white;
font-style : normal;
text-decoration : none;
overflow : auto;
}
#content {
height : 100%;
background : white;
float : right;
width : 88%;
margin : 0 0 0 0;
}
p.c5 {
font-size : 100%;
font-style : normal;
font-weight : lighter;
text-align : left;
margin-left : 30px;
margin-top : 20px;
}
img.c4 {
border : none;
width : 120px;
}
span.c2 {
color : #333333;
font-size : 150%;
}
span.c1 {
font-size : 200%;
}
#pscroller1 {
border : 0 solid black;
padding : 0;
width : 250px;
height : 200px;
position : absolute;
top : 500px;
left : 600px;
}
#pscroller2 {
width : 872px;
height : 20px;
border : 1px solid black;
padding : 3px;
position : absolute;
top : 100px;
left : 451px;
background : black;
color : white;
text-align : center;
}
#pscroller2 a {
text-decoration : none;
}
Thanks in advance!
