lodret rulleslides til vandret rulleslides
Har følgende script - der fungerer perfekt hvis det skal rulle fra bund til top, men er der nogen der kan hjælpe med at rette scriptet til så det kører vandret - fra højre mod venstre.<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="newsRotator" onMouseOver="mousy(true);" onMouseOut="mousy(false);" style="height:170px;width:145px;overflow:hidden;">
<!--<div id="newsRotator" onMouseOver="ie_MsOver(this, rco_newsRotator);" onMouseOut="ie_MsOut(this, rco_newsRotator);" style="height:170px;width:155px;overflow:hidden;"> -->
<script language="JavaScript">
// Content Rotator JavaScript class definition
function ungnd_Rotator()
{
this.GlobalID = '';
this.ElementID = '';
this.ContainerID = '';
this.AutoStart = true;
this.HideEffect = null;
this.HideEffectDuration = 0;
this.Loop = true;
this.PauseOnMouseOver = true;
this.RotationType = 'ContentScroll';
this.ScrollDirection = 'up';
this.ScrollInterval = 10;
this.ScrollStep = 1;
this.ShowEffect = null;
this.ShowEffectDuration = 0;
this.SlidePause = 2000;
this.Slides = new Array();
this.Tickers = new Array();
this.LeadTickers = new Array();
this.CurrentSlide = -1;
this.CurrentLeadTicker = 0;
this.ScrollIntervalID = 0;
this.NextSlideTimeoutID = 0;
this.HideTimeoutID = 0;
this.Paused = true;
this.FirstTimeAround = true;
this.HasTickers = false;
this.FirstTicker = null;
this.Stopped = false;
this.Ticking = false;
}
// Starts content rotation for the given rotator instance
function rcr_Start(rotator)
{
if (rotator.RotationType == 'ContentScroll')
{
scroll_Init(rotator);
scroll_ShowNextSlide(rotator);
}
else
{
ss_ShowNextSlide(rotator);
}
}
// Continues content rotation after it was stopped
function rcr_Play(rotator)
{
if (!rotator.Stopped) return null;
rotator.Stopped = false;
if (!rotator.Ticking)
{
if (rotator.RotationType == 'SlideShow')
{
ss_Play(rotator);
}
else
{
scroll_Play(rotator);
}
}
}
// Stops content rotation for the given rotator instance
function rcr_Stop(rotator)
{
if (rotator.Stopped) return null;
rotator.Stopped = true;
window.clearTimeout(rotator.NextSlideTimeoutID);
window.clearTimeout(rotator.HideTimeoutID);
if (rotator.SlidePause == 0) window.clearInterval(rotator.ScrollIntervalID);
if (rotator.RotationType == 'SlideShow')
{
var Container = document.getElementById(rotator.ContainerID);
Container.style.visibility = 'visible';
}
}
// Sets the index of the next slide
function rcr_SetNextSlideIndex(rotator)
{
if (rotator.CurrentSlide == -1)
rotator.CurrentSlide = 0;
else if (rotator.CurrentSlide == rotator.Slides.length - 1)
{
rotator.CurrentSlide = 0;
rotator.FirstTimeAround = false;
}
else
rotator.CurrentSlide ++;
}
// Content scrolling client-side code -------------------------------------------------------------
// Initializes slide content
function scroll_Init(rotator)
{
var Container = document.getElementById(rotator.ContainerID);
var RotatorElement = document.getElementById(rotator.ElementID);
var startTop;
var startLeft;
switch (rotator.ScrollDirection)
{
case 'up':
startTop = parseInt(RotatorElement.style.height.replace('px', '')) + 'px';
startLeft = '0px';
break;
case 'left':
startTop = '0px';
startLeft = parseInt(RotatorElement.style.width.replace('px', '')) + 'px';
break;
}
Container.style.top = startTop;
Container.style.left = startLeft;
Container.style.visibility = 'visible';
}
// Continues rotation when RotationType == 'ContentScroll'
function scroll_Play(rotator)
{
if (rotator.ScrollIntervalID == 0)
{
scroll_ShowNextSlide(rotator);
}
else if (rotator.SlidePause == 0)
{
var functionParam = 'scroll_NextSlideToView(' + rotator.GlobalID + ')';
rotator.ScrollIntervalID = window.setInterval(functionParam, rotator.ScrollInterval);
}
}
// Shows the next slide when RotationType == 'ContentScroll'
function scroll_ShowNextSlide(rotator)
{
rcr_SetNextSlideIndex(rotator);
if (!rotator.Loop && !rotator.FirstTimeAround)
{
rcr_Stop(rotator);
return null;
}
var functionParam = 'scroll_NextSlideToView(' + rotator.GlobalID + ')';
rotator.ScrollIntervalID = window.setInterval(functionParam, rotator.ScrollInterval);
}
// så rotationen stopper når musen holdes over
// Moves the current slide by the number of pixels specified in rotator.ScrollStep
function scroll_NextSlideToView(rotator)
{
if(!rotator.Stopped){ // tilføjet
var Container = document.getElementById(rotator.ContainerID);
var CurSlide = document.getElementById(rotator.Slides[rotator.CurrentSlide]);
var newTop = parseInt(Container.style.top.replace('px', ''));
var newLeft = parseInt(Container.style.left.replace('px', ''));
// Move the slide container
switch (rotator.ScrollDirection)
{
case 'up':
newTop -= rotator.ScrollStep;
break;
case 'left':
newLeft -= rotator.ScrollStep;
break;
}
Container.style.top = newTop + 'px';
Container.style.left = newLeft + 'px';
// Figure out the slide threshold
var newTopThreshold = 0;
var newLeftThreshold = 0;
var prevSlide = document.getElementById(rotator.Slides[scroll_PreviousSlideIndex(rotator)]);
if (!(rotator.FirstTimeAround && rotator.CurrentSlide == 0))
{
newTopThreshold = prevSlide.offsetHeight;
newLeftThreshold = prevSlide.offsetWidth;
}
// Stop to show the slide or run tickers, if required
if ((newTop + newTopThreshold == 0 && rotator.ScrollDirection == 'up') ||
(newLeft + newLeftThreshold == 0 && rotator.ScrollDirection == 'left'))
{
window.clearInterval(rotator.ScrollIntervalID);
rotator.ScrollIntervalID = 0;
if (!(rotator.FirstTimeAround && rotator.CurrentSlide == 0))
scroll_SwapPreviousSlide(rotator);
if (rotator.HasTickers)
{
rcr_StartTickerSequence(rotator);
}
else
{
var functionParam = 'scroll_ShowNextSlide(' + rotator.GlobalID + ')';
if (!rotator.Stopped)
rotator.NextSlideTimeoutID = window.setTimeout(functionParam, rotator.SlidePause);
}
}
} // tilføjet
}
// Removes the previous slide from the content tree, then recreates it at the end
function scroll_SwapPreviousSlide(rotator)
{
var Container = document.getElementById(rotator.ContainerID);
if (rotator.ScrollDirection == 'up')
{
var prevSlide = document.getElementById(rotator.Slides[scroll_PreviousSlideIndex(rotator)]);
var prevSlideCopy = prevSlide.cloneNode(true);
Container.removeChild(prevSlide);
Container.style.top = '0px';
Container.appendChild(prevSlideCopy);
rcr_ResetTickers(rotator);
}
else
{
var cRow = document.getElementById(rotator.ContainerRowID);
var prevSlideCell = cRow.cells[0];
var a = cRow.removeChild(prevSlideCell);
Container.style.left = '0px';
var b = cRow.appendChild(a);
}
}
// Returns the index of the previous slide
function scroll_PreviousSlideIndex(rotator)
{
if (rotator.CurrentSlide == 0)
return rotator.Slides.length - 1;
else
return rotator.CurrentSlide - 1;
}
// Slideshow client-side code ---------------------------------------------------------------------
// Continues rotation when RotationType == 'SlideShow'
function ss_Play(rotator)
{
if (!rotator.Ticking)
{
ss_PlayHideEffect(rotator);
var delay = 0;
if (rotator.HideEffect) delay = rotator.HideEffectDuration;
functionParam = 'ss_ShowNextSlide(' + rotator.GlobalID + ')';
rotator.NextSlideTimeoutID = window.setTimeout(functionParam, delay);
}
}
// Shows the next slide when RotationType == 'SlideShow'
function ss_ShowNextSlide(rotator)
{
if (rotator.Stopped) return null;
rcr_SetNextSlideIndex(rotator);
// Setup slide content
var Container = document.getElementById(rotator.ContainerID);
var CurSlide = document.getElementById(rotator.Slides[rotator.CurrentSlide]);
Container.innerHTML = CurSlide.innerHTML;
CurSlide.innerHTML = '';
rcr_ResetTickers(rotator);
ss_PlayShowEffect(rotator);
if (rotator.HasTickers)
{
// Set timeout for displaying the slide
var functionParam = 'rcr_StartTickerSequence(' + rotator.GlobalID + ')';
var timerID = window.setTimeout(functionParam, rotator.ShowEffectDuration);
}
else
{
// Set timeout for displaying the slide
var functionParam = 'ss_DisplaySlide(' + rotator.GlobalID + ')';
rotator.NextSlideTimeoutID = window.setTimeout(functionParam, rotator.ShowEffectDuration);
}
}
// Displays current slide when RotationType == 'ContentScroll'
function ss_DisplaySlide(rotator)
{
if (rotator.Stopped) return null;
window.clearTimeout(rotator.HideTimeoutID);
window.clearTimeout(rotator.NextSlideTimeoutID);
if (!rotator.Loop && rotator.CurrentSlide == rotator.Slides.length - 1)
{
rcr_Stop(rotator);
return null;
}
// Set timeout for hiding the slide
var functionParam = 'ss_PlayHideEffect(' + rotator.GlobalID + ')';
rotator.HideTimeoutID = window.setTimeout(functionParam, rotator.SlidePause);
// Set timeout for ss_ShowNextSlide
var delay = 0;
if (rotator.HideEffect) delay += rotator.HideEffectDuration;
delay += rotator.SlidePause;
functionParam = 'ss_ShowNextSlide(' + rotator.GlobalID + ')';
rotator.NextSlideTimeoutID = window.setTimeout(functionParam, delay);
}
// Plays show effect when RotationType == 'ContentScroll'
function ss_PlayShowEffect(rotator)
{
var Container = document.getElementById(rotator.ContainerID);
if (Container.filters && rotator.ShowEffect)
{
Container.style.filter = rotator.ShowEffect;
Container.filters[0].apply();
}
Container.style.visibility = 'visible';
if (Container.filters && rotator.ShowEffect) Container.filters[0].play();
}
// Plays hide effect when RotationType == 'ContentScroll'
function ss_PlayHideEffect(rotator)
{
var Container = document.getElementById(rotator.ContainerID);
if (Container.filters && rotator.HideEffect)
{
Container.style.filter = rotator.HideEffect;
Container.filters[0].apply();
}
// Reset slide content
var CurSlide = document.getElementById(rotator.Slides[rotator.CurrentSlide]);
CurSlide.innerHTML = Container.innerHTML;
Container.style.visibility = 'hidden';
if (Container.filters && rotator.HideEffect) Container.filters[0].play();
}
// Ticker integration client-side code ------------------------------------------------------------
// Starts the ticker sequence for the current slide of the given rotator instance
function rcr_StartTickerSequence(rotator)
{
rotator.Ticking = true;
rcr_StartTicker(rotator.LeadTickers[rotator.CurrentLeadTicker]);
}
function rcr_EndTickerSequence(rotator)
{
rotator.Ticking = false;
if (!rotator.Stopped)
{
if (rotator.RotationType == 'ContentScroll')
{
var functionParam = 'scroll_ShowNextSlide(' + rotator.GlobalID + ')';
rotator.NextSlideTimeoutID = window.setTimeout(functionParam, rotator.SlidePause);
}
else
{
ss_DisplaySlide(rotator);
}
}
rcr_SetNextLeadTicker(rotator);
}
// Sets the lead ticker index for the next slide
function rcr_SetNextLeadTicker(rotator)
{
if (rotator.CurrentLeadTicker == rotator.LeadTickers.length - 1)
rotator.CurrentLeadTicker = 0;
else
rotator.CurrentLeadTicker ++;
}
// Sets the text of all ticker instances contained within the give rotator instance to ''
function rcr_ResetTickers(rotator)
{
if (rotator.HasTickers)
for (var i = 0; i < rotator.Tickers.length; i++)
rcr_SetTickerText(rotator.Tickers[i], '');
}
function mousy(t)
{
if(t) rcr_Stop(rco_newsRotator);
else rcr_Play(rco_newsRotator);
}
// Utils ------------------------------------------------------------------------------------------
// Determines whether the mouse pointer is currently over the given object
function nsIsMouseOnObject(objName, evt)
{
if (objName != null)
{
var obj = document.getElementById(objName);
var objLeft = ns_pageX(obj) - 1;
var objTop = ns_pageY(obj) - 1;
var objRight = objLeft + obj.offsetWidth + 1;
var objBottom = objTop + obj.offsetHeight + 1;
if ((evt.pageX > objLeft) && (evt.pageX < objRight) &&
(evt.pageY > objTop) && (evt.pageY < objBottom))
return true;
else
return false;
}
else
return false;
}
// Calculates the absolute page x coordinate of any element
function ns_pageX(element)
{
var x = 0;
do
{
if (element.style.position == 'absolute')
{
return x + element.offsetLeft;
}
else
{
x += element.offsetLeft;
if (element.offsetParent)
if (element.offsetParent.tagName == 'TABLE')
if (parseInt(element.offsetParent.border) > 0)
{
x += 1;
}
}
}
while ((element = element.offsetParent));
return x;
}
// Calculates the absolute page y coordinate of any element
function ns_pageY(element)
{
var y = 0;
do
{
if (element.style.position == 'absolute')
{
return y + element.offsetTop;
}
else
{
y += element.offsetTop;
if (element.offsetParent)
if (element.offsetParent.tagName == 'TABLE')
if (parseInt(element.offsetParent.border) > 0)
{
y += 1;
}
}
}
while ((element = element.offsetParent));
return y;
}
</script>
<div id="newsRotator_SlideContainer" style="position:relative;visibility:hidden;cursor:hand">
<div id="newsRotator_slide0">
<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" >
<tr bgcolor="#E2E2E2" ><td height="18" class="menu_overskrift">0</td></tr>
<tr bgcolor="#E2E2E2" ><td height="18" class="">
test 0
</td></tr>
</tr> </table></div>
<div id="newsRotator_slide1">
<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" >
<tr bgcolor="#E2E2E2" ><td height="18" class="menu_overskrift">1</td></tr>
<tr bgcolor="#E2E2E2" ><td height="18" class="">
test 1
</td></tr>
</tr> </table></div>
<div id="newsRotator_slide2">
<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" >
<tr bgcolor="#E2E2E2" ><td height="18" class="menu_overskrift">2</td></tr>
<tr bgcolor="#E2E2E2" ><td height="18" class="">
test 2
</td></tr>
</tr> </table></div>
<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" >
<tr bgcolor="#E2E2E2" ><td height="18" class="menu_overskrift">3</td></tr>
<tr bgcolor="#E2E2E2" ><td height="18" class="">
test 3
</td></tr>
</tr> </table></div>
<div id="newsRotator_slide4">
<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" >
<tr bgcolor="#E2E2E2" ><td height="18" class="menu_overskrift">4</td></tr>
<tr bgcolor="#E2E2E2" ><td height="18" class="">
test 4
</td></tr>
</tr> </table></div>
<div id="newsRotator_slide5">
<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" >
<tr bgcolor="#E2E2E2" ><td height="18" class="menu_overskrift">5</td></tr>
<tr bgcolor="#E2E2E2" ><td height="18" class="">
test 5
</td></tr>
</tr> </table></div>
<div id="newsRotator_slide6">
<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" >
<tr bgcolor="#E2E2E2" ><td height="18" class="menu_overskrift">6</td></tr>
<tr bgcolor="#E2E2E2" ><td height="18" class="">
test 6
</td></tr>
</tr> </table></div>
<div id="newsRotator_slide7">
<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="0" >
<tr bgcolor="#E2E2E2" ><td height="18" class="menu_overskrift">7</td></tr>
<tr bgcolor="#E2E2E2" ><td height="18" class="">
test 7
</td></tr>
</tr> </table>
</div>
</div>
<script language="JavaScript">
// Initialize rotator instance -------------------------------------------------
var rco_newsRotator = new ungnd_Rotator();
rco_newsRotator.GlobalID = 'rco_newsRotator';
rco_newsRotator.ElementID = 'newsRotator';
rco_newsRotator.ContainerID = 'newsRotator_SlideContainer';
rco_newsRotator.ContainerRowID = 'newsRotator_ContainerRow';
rco_newsRotator.AutoStart = true;
rco_newsRotator.SlidePause = 1000;
rco_newsRotator.HideEffect = null;
rco_newsRotator.HideEffectDuration = 250;
rco_newsRotator.Loop = true;
rco_newsRotator.PauseOnMouseOver = true;
rco_newsRotator.RotationType = 'ContentScroll';
rco_newsRotator.ScrollDirection = 'up';
rco_newsRotator.ScrollInterval = 10;
rco_newsRotator.ShowEffect = null;
rco_newsRotator.ShowEffectDuration = 250;
rco_newsRotator.Slides = new Array();
rco_newsRotator.Slides[0] = 'newsRotator_slide0'; rco_newsRotator.Slides[1] = 'newsRotator_slide1'; rco_newsRotator.Slides[2] = 'newsRotator_slide2'; rco_newsRotator.Slides[3] = 'newsRotator_slide3'; rco_newsRotator.Slides[4] = 'newsRotator_slide4'; rco_newsRotator.Slides[5] = 'newsRotator_slide5'; rco_newsRotator.Slides[6] = 'newsRotator_slide6'; rco_newsRotator.Slides[7] = 'newsRotator_slide7';
rco_newsRotator.HasTickers = false;
if (rco_newsRotator.AutoStart) rcr_Start(rco_newsRotator);
</script>
</div>
</td>
</tr>
</table></td>
</tr>
</td>
</tr>
</table>
</body>
</html>
