Ok for some reason i can only get this script to work in IE and Opera. It wont work in Mozilla or Safari and its getting really annoying:
the scrollbars dont wanna work correctly:
http://www.mxpdesign.com/projects/co...editorials.php
i've tried everything... i just dont know.
please help... thank you.
-Tom
Code:
<html>
<head>
<title>the concubine</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script language="javascript">
<!--
function validateIt(theForm)
{
if(theForm.categoryid.value != '')
{
theForm.submit()
}
else
{
return false
}
}
//-->
</script>
<script language="javascript">
<!--
function validateIt(theForm)
{
if(theForm.categoryid.value != '')
{
theForm.submit()
}
else
{
return false
}
}
if (document.all && window.print){
macIE = false;
}else{
macIE = true;
}
var dom = document.getElementById;
var iex = document.all;
var ns4 = document.layers;
function getElement(name, nest){
nest = nest ? 'document.'+nest+'.' : '';
var el = dom ? document.getElementById(name) : iex ? document.all[name] : ns4 ? eval(nest+'document.'+name) : false;
el.css = ns4 ? el : el.style;
el.getTop = function(){return parseInt(el.css.top) || 0};
el.setTop = function(y){el.css.top=y};
el.getHeight = function(){return ns4 ? el.document.height : el.offsetHeight};
el.getClipHeight = function(){return ns4 ? el.clip.height : el.offsetHeight};
return el;
}
function getMouse(e){
return iex ? event.clientY : e.pageY;
}
function fixNetscape(){
if(NS4origWidth != window.innerWidth || NS4origHeight != window.innerHeight){
window.location.reload();
}
}
if(document.layers){
NS4origWidth = window.innerWidth;
NS4origHeight = window.innerHeight;
window.onresize = fixNetscape;
}
// Scroll Drag Functions
function initScroller(){
scrollSpeed = 10; // scrolling speed
dragHeight = 7; // Height of scrollbar drag
trackHeight = 300; // Height of scrollbar track
upObj = getElement('up'); // Reference to the up arrow div
downObj = getElement('down'); // Reference to the down arrow div
dragObj = getElement('dragbar'); // Reference to the scrollbar drag div
dragPicObj = getElement('dragpic','dragbar'); // Reference the scrollbar drag pic
contentMaskObj = getElement('contentMask'); // Reference to the content mask div
contentObj = getElement('content','contentMask'); // Reference to the content div
trackTop = dragObj.getTop(); // Scrollbar top contraint
trackBottom = (trackTop+trackHeight)-dragHeight; // Scrollbar bottom contraint
contentMaskHeight = contentMaskObj.getClipHeight();// Height of the div that masks the content div
contentHeight = contentObj.getHeight(); // Height of the content div
scrollLength = (trackHeight-dragHeight)/(contentHeight-contentMaskHeight); // Height difference between the scrollbar track and the content
scrollTimer = null;
upObj.onmousedown = scrollUp;
upObj.onmouseup = stopScroll;
upObj.onmouseout = stopScroll;
downObj.onmousedown = scrollDown;
downObj.onmouseup = stopScroll;
downObj.onmouseout = stopScroll;
dragObj.onmousedown = startDrag;
dragObj.ondragstart = function(){return false}; // for ie4.5 compatibility
if(ns4){
upObj.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEOUT);
downObj.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEOUT);
dragObj.captureEvents(Event.MOUSEDOWN);
}
if (macIE == false){
// modification for IE on the PC
dragbar.style.backgroundImage = "none";
}else if(macIE == true){
document.dragpic.src = "images/spacer.gif";
}
}
function startDrag(e){
if((ns4 && e.which!=1) || (iex && event.button!=1)){
return true; // Enables the right mousebutton
}
dragStartMouse = getMouse(e); // Holds the starting y mouse position
dragStartOffset = dragObj.getTop(); // Holds the starting top position of the scrollbar drag
document.onmousemove = drag;
document.onmouseup = stopDrag;
if(ns4) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
return false;
}
function stopDrag(){
if(ns4) document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = null;
document.onmouseup = null;
}
function drag(e){
var currentMouse = getMouse(e);
var mouseDifference = currentMouse-dragStartMouse;
var dragDistance = dragStartOffset+mouseDifference;
var dragMovement = (dragDistance<trackTop) ? trackTop : (dragDistance>trackBottom) ? trackBottom : dragDistance;
var contentMovement = -(dragMovement-trackTop)*(1/scrollLength);
dragObj.setTop(dragMovement);
contentObj.setTop(contentMovement);
if(iex){
return false; // So ie-pc doesn't select the image
}
}
// Scroll Arrow Functions
function scrollUp(){
var contentMovement = contentObj.getTop()+scrollSpeed;
if(contentMovement > 0){
contentMovement = 0;
}
contentObj.setTop(contentMovement);
updateDrag();
scrollTimer = window.setTimeout('scrollUp()',25);
return false;
}
function scrollDown(){
var contentMovement = contentObj.getTop()-scrollSpeed;
if(contentMovement < -(contentHeight-contentMaskHeight)){
contentMovement = -(contentHeight-contentMaskHeight);
}
contentObj.setTop(contentMovement);
updateDrag();
scrollTimer = window.setTimeout('scrollDown()',25);
return false;
}
function updateDrag(){
var dragMovement = contentObj.getTop()*((trackHeight-dragHeight)/(contentHeight-contentMaskHeight));
dragMovement = trackTop-Math.round(dragMovement);
if(dragMovement < trackTop){
dragMovement = trackTop;
}else if(dragMovement > trackBottom){
dragMovement = trackBottom;
}
dragObj.setTop(dragMovement);
}
function stopScroll(){
if(scrollTimer){
window.clearTimeout(scrollTimer);
scrollTimer = null;
}
}
window.onload = initScroller;
-->
</script>
</head>
<body>
<table width="610" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="610" bgcolor="#333333"><img src="main_images/header.jpg" width="610" height="125" border="0" usemap="#header_img_map" alt=" " /></td>
</tr>
<tr>
<td width="610" height="424" align="center" valign="top" bgcolor="#333333" style="background-image: url('main_images/content.jpg');" ><table width="608" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="70" rowspan="3"> </td>
<td width="475" height="33"> </td>
<td width="63"> </td>
</tr>
<tr>
<td height="357" align="left" valign="top"><!-- CONTENT -->
<table width="359" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="415" height="320" align="left" valign="top"><table width="550" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="562" rowspan="3" align="left" valign="top" height="303"><!-- CONTENT MASK -->
<div id="contentMask" style="position:absolute; width:377px; height:335px; clip:rect(0px,562px,350px,0px); overflow:hidden; z-index:5;">
<div id="content">
<table width="513">
<tr>
<td width="507"><table width="101%" cellpadding="0" cellspacing="5">
<tr>
<td width="100%" align="left" class="generaltext" height="16"><i>For the brave and truly hardcore.</i>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>dd</p>
<p>fdf</p>
<p>dfw</p></td>
</tr>
</table></td>
</tr>
</table>
</div>
</div></td>
<td width="49" height="16" align="center" valign="bottom"><div id="up" style="position:relative; z-index:1;"> <img src="main_images/scroll_up.gif" border="0" width="17" height="20" alt=" " /></div>
</td>
</tr>
<tr>
<td width="49" height="320" align="center" valign="top"><div id="dragbar" style="position:relative; z-index:3; background-image: url('/images/news/news_scrollbar.gif');"> <img src="main_images/scroll.gif" border="0" id="dragpic" name="dragpic" alt=" " /></div>
</td>
</tr>
<tr>
<td width="49" height="23" align="center" valign="top"><div id="down" style="position:relative; z-index:4;"> <img src="main_images/scroll_dn.gif" border="0" alt=" " width="17" height="20" /></div>
</td>
</tr>
</table></td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td height="25"> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.mxpdesign.com" class="style1">MxP Designs</a></div></td>
</tr>
</table>
<map name="header_img_map" id="img_map">
<area href="headlines.php" shape="rect" coords="21, 27, 93, 43" alt=" ">
<area href="obituaries.php" shape="rect" coords="108, 29, 183, 42" alt=" ">
<area href="listings.php" shape="rect" coords="23, 43, 84, 57" alt=" ">
<area href="contact.php" shape="rect" coords="135, 46, 187, 58" alt=" ">
<area href="entertainment.php" shape="rect" coords="21, 62, 120, 76" alt=" ">
<area href="sources.php" shape="rect" coords="134, 62, 190, 76" alt=" ">
<area href="editorials.php" shape="rect" coords="21, 77, 96, 91" alt=" ">
<area href="index.php" shape="rect" coords="189, 29, 597, 71" alt=" ">
</map>
</body>
</html>
Linear Mode
