nicht angemeldet
HTML zu XHTML, JS, Container
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 + ')';
-
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. ;-)
-
Hi,
da nützen auch 3 Posts nichts ;)
Überleg einen Moment bei folgender Frage:
Ich schicke dir ein 20-seitiges Skript zu mit der bitte da mal reinzuschauen weil es nicht funktionoert, sage dir nicht wozu es dient, was ich damit vorhabe. Auch nicht was schief läuft, gebe dir 0 Infos, aber halt den ganzen Quellcode.
Wie gross ist die Chance das Du mir helfen kannst?==>
Anstatt ewig lange Quelltexte zu posten, stell das Beispiel online und Verweis mit einem Link darauf, jeder kann sich dann den Quelltext selbst anschauen und hat sogar das "visualisierte" Beispiel dazu.
Beschreib:
- Was du vorhast
- Was du unternommen hast dies zu realisieren
- Was nicht deinen erwartungen entspr. funktioniert
- Was du unternommen hast den Fehler einzugrenzen
- Welche Fehlermeldungen/debugausgaben du erhalten hast
- Liefer nur die entspr. Quelltextpassagen in denen du den Fehler vermutest/eingegrenzt hast
ansosten wird dir niemand helfen können.
gruss
Thorsten-
Thx für deinen Post. :-)
Das ganze soll ein simpler newsscrooler werden. Der Text der in den Containern steht wird dann einzeln ausgegeben und soll scrollen.
Ein JS Fehler schließe ich aus. bekomme da auch keinen Fehler.
Denke mal das es an der XHTML formatierung liegt.
Habe deshalb auch schonmal einen tBody vor die Tables gesetzt. naja. Das hatte aber auch nicht funktioniert...Wenn ich den Doctype von HTML auf xHTML umsetze wird das ganze DIV untereinander angezeigt. (der Scrooler scroolt aber trotzdem)
habe jetzt mal das ganze auf dem Server geuploaded.
http://www.Fiebig-Naehrstofftechnik.de/html.htm
(Das funktionierende DoCTYPE = HTML)http://www.Fiebig-Naehrstofftechnik.de/xhtml.htm
(Fehler im DIV? = DOCTYPE=XHTML)Die Dateien sind völlig gleich bis auf den DOCTYPE.
-
Tach,
Die Dateien sind völlig gleich bis auf den DOCTYPE.
dein Quelltext ist aber weder HTML noch XHTML: Es wird kein Encoding ausgegeben und du hast block level Elemente, die innerhalb von inline Elementen liegen (http://validator.w3.org). Wenn die Browser jetzt überhaupt was anzeigen, kannst du noch froh sein.
mfg
Woodfighter
-
-