Hi@All.
Das letzte mal das ich was programmiert habe ist schon über 6 Jahre her. Jetzt habe ich einen kleinen NewsRotator für meinen Kumpel programmiert. Seine Seite läuft unter XHTML und das ist neuland für mich...
Ich habe zwar versucht das Script anzupassen aber ich komme einfach nicht dahinter. Hier mal der bisherige Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" lang="de"> <head> <title>test</title> <script type="text/javascript" language="JavaScript"> function sz_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.SmoothScrollSpeed = 'Medium'; 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.FirstTimeAround = true; this.HasTickers = false; this.FirstTicker = null; this.Stopped = false; this.Ticking = false; this.Status = ''; }
// Starts content rotation for the given rotator instance function rcr_Start(rotator) { if (rotator.RotationType == 'SlideShow') { ss_ShowNextSlide(rotator); } else { scroll_Init(rotator); scroll_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); }
// Moves the current slide by the number of pixels specified in rotator.ScrollStep function scroll_NextSlideToView(rotator) { 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', ''));
// 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; }
// Move the slide container var step = 0; switch (rotator.ScrollDirection) { case 'up': if (rotator.RotationType == 'ContentScroll') { newTop -= rotator.ScrollStep; } else { step = abs(newTopThreshold + newTop) / rcr_getSmoothScrollFactor(rotator); if (step <= 2) step = 1; newTop -= step; } break;
case 'left': if (rotator.RotationType == 'ContentScroll') { newLeft -= rotator.ScrollStep; } else { step = abs(newLeftThreshold + newLeft) / rcr_getSmoothScrollFactor(rotator); if (step <= 2) step = 1; newLeft -= step; } break; } Container.style.top = newTop + 'px'; Container.style.left = newLeft + 'px';
// 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); } } }
// 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); rcr_ResetTickers(rotator); } }
// 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; }
// Returns the smooth scroll factor for the given Rotator instance function rcr_getSmoothScrollFactor(rotator) { switch (rotator.SmoothScrollSpeed) { case 'Slow': return 8; break;
case 'Medium': return 6; break;
case 'Fast': return 4; break; } }
// Slideshow client-side code ---------------------------------------------------------------------
// Continues rotation when RotationType == 'SlideShow' function ss_Play(rotator) { if (rotator.HasTickers && rotator.Status == 'PlayingShowEffect') return null; 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 == 'SlideShow' function ss_DisplaySlide(rotator) { if (rotator.Stopped) return null; rotator.Status = 'DisplayingSlide';
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 + ')';