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 == 'SlideShow' function ss_PlayShowEffect(rotator) { rotator.Status = 'PlayingShowEffect'; 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 == 'SlideShow' function ss_PlayHideEffect(rotator) { rotator.Status = 'PlayingHideEffect'; 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.Status = 'RunningTickers'; rotator.Ticking = true; rcr_StartTicker(rotator.LeadTickers[rotator.CurrentLeadTicker]); }
function rcr_EndTickerSequence(rotator) { rotator.Ticking = false; if (!rotator.Stopped) { if (rotator.RotationType == 'SlideShow') { ss_DisplaySlide(rotator); } else { var functionParam = 'scroll_ShowNextSlide(' + rotator.GlobalID + ')'; rotator.NextSlideTimeoutID = window.setTimeout(functionParam, rotator.SlidePause); } } 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], ''); }
// Mouse over & mouse out rotator event handlers --------------------------------------------------
function ie_MsOver(obj, rco_rotator) { if(!obj.contains(event.fromElement) && rco_rotator) rcr_Stop(rco_rotator); }
function ie_MsOut(obj, rco_rotator) { if(!obj.contains(event.toElement) && rco_rotator) rcr_Play(rco_rotator); }
function ns_MsOver(evt, rElementID, rco_rotator) { if (nsIsMouseOnObject(rElementID, evt) && rco_rotator) rcr_Stop(rco_rotator); }
function ns_MsOut(evt, rElementID, rco_rotator) { if (!nsIsMouseOnObject(rElementID, evt) && rco_rotator) rcr_Play(rco_rotator); }
// 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; }
// Returns the absolute value for the given parameter function abs(x) { if (x < 0) return -x; else return x; } </script> <style type="text/css"> .Rotator { width:450px; height:25px; padding:3px; font-family:verdana; font-size:11px; cursor:default; }
.RotatorFrame { width:450px; height:25px; font-family:verdana; font-size:11px; cursor:default; }
.RotatorFrameOver { width:450px; height:25px; font-family:verdana; font-size:11px; cursor:default; }
.NewsTitle { font-family:Verdana; font-size:10px; font-weight:bold; text-decoration:underline; color:Black; }
.NewsText { font-family:Verdana; font-size:10px; color:Black; }
.NewsDate { font-family:Verdana; font-size:10px; color:black; } </style> </head> <body> <span class="RotatorFrame" style="width:328px;height:80px;" OnMouseOver="this.className='RotatorFrameOver'" OnMouseOut="this.className='RotatorFrame'"> <div id="Rotator1" class="Rotator" onMouseOver="ie_MsOver(this, rco_Rotator1);" onMouseOut="ie_MsOut(this, rco_Rotator1);" style="height:80px;width:328px;overflow:hidden;">
<div id="Rotator1_SlideContainer" style="position:relative; visibility:hidden; left: 215px; top: 65px; width: 328px; height: 53px;"> <div id="Rotator1_slide0"> <table summary="" width="328" height="80" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="NewsText"> <span class="NewsTitle"> Hier kommen die Events rein! </span> </td> <td class="NewsDate" align="right"> Montag 02, 2004 </td> </tr> <tr> <td class="NewsText" colspan="2" height="100%" valign="top"> test123. Wir haben ein neues Design! Es gibt viele neue Funktionnen. Am besten einfach alles Testen! </td> </tr> </table> </div> <div id="Rotator1_slide1"> <table summary="" width="328" height="80" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="NewsText"> <span class="NewsTitle"> SQL Events </span> </td> <td class="NewsDate" align="right"> Montag 02, 2004 </td> </tr> <tr> <td class="NewsText" colspan="2" height="100%" valign="top"> De events werden von der SQL Datenbank abgefragt. Der result kommt in ein DIV. ;-) </td> </tr> </table> </div> <div id="Rotator1_slide2"> <table summary="" width="328" height="80" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="NewsText"> <span class="NewsTitle"> Mausaktion </span> </td> <td class="NewsDate" align="right"> Montag 02, 2004 </td> </tr> <tr> <td class="NewsText" colspan="2" height="100%" valign="top"> Wenn Du mit der Maus über den Rotator fährst. Dann bleibt der stehen. Wenn die maus wegfährt kommt das nächste DIV. ;-) </td> </tr> </table> </div> </div> <script language="JavaScript" type="text/javascript"> // Initialize rotator instance -------------------------------------------------
var rco_Rotator1 = new sz_Rotator(); rco_Rotator1.GlobalID = 'rco_Rotator1'; rco_Rotator1.ElementID = 'Rotator1'; rco_Rotator1.ContainerID = 'Rotator1_SlideContainer'; rco_Rotator1.ContainerRowID = 'Rotator1_ContainerRow'; rco_Rotator1.AutoStart = true; rco_Rotator1.SlidePause = 3000; rco_Rotator1.HideEffect = null; rco_Rotator1.HideEffectDuration = 250; rco_Rotator1.Loop = true; rco_Rotator1.PauseOnMouseOver = true; rco_Rotator1.RotationType = 'SmoothScroll'; rco_Rotator1.ScrollDirection = 'up'; rco_Rotator1.ScrollInterval = 15; rco_Rotator1.ShowEffect = null; rco_Rotator1.ShowEffectDuration = 250; rco_Rotator1.SmoothScrollSpeed = 'Medium'; rco_Rotator1.Slides = new Array(); rco_Rotator1.Slides[0] = 'Rotator1_slide0'; rco_Rotator1.Slides[1] = 'Rotator1_slide1'; rco_Rotator1.Slides[2] = 'Rotator1_slide2'; rco_Rotator1.HasTickers = false; if (rco_Rotator1.AutoStart) rcr_Start(rco_Rotator1); </script> </div> </span> </body> </html>
Wenn ich die zeilen
<!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">
duch den Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ersetze läuft der newsrotator einbahnfrei.
Das DIV wird bei der XHTML darstellung vollständig angezeigt...? Hoffe das mir da jemand helfen kann.
Sorry für meine zwei posts... Aber es ging nicht anders.
THX. ;-)