Mam zamiar wrzucic sobie na swojej stronce pasek a'la informacyjny, u góry, pod topem :-)
Chce to zrobić na takiej zasadzie:
1. Finalny kod z danymi miałby być na tej zasadzie;
tylko zamiast wpisów czysto tekstowych, generowanych ręcznie, chciałbym, żeby na tym pasku przejeżdżały mi treści ogłoszeń, które sa dodawane w moim serwisie.
2. CSS
#dhtmlgoodies_marquee{ /* general marquee layout*/ padding-top:3px; height:25px; background-color: #000; /* End general marquee layout */ position:absolute; left:0px; z-index:1000; bottom:0px; display:none; width:100%; overflow:hidden; } body > div#dhtmlgoodies_marquee{ /* Firefox rule */ position:fixed; } #dhtmlgoodies_marquee .textObj{ /* Layout for the marquee text */ position:absolute; color: #FFF; font-weight:bold; white-space:nowrap; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; } /* Just some layout classes used in this script */ .highlighted{ color:#F00; } .greenText{ color:#0F0;
3. JS
<script type=\"text/javascript\"> var dhtmlgoodies_marqueeSteps = 2; // Higher = Faster, Lower = slower and more smoothly var dhtmlgoodies_marqueeSpeed = 8; // Lower value = Faster var dhtmlgoodies_marqueeStopOnMouseOver = false; // Make the marquee stop moving when user moves his mouse over it var dhtmlgoodies_marqueePosition = \'bottom\'; // \"top\" or \"bottom\" /* Don\'t change anything below here */ var dhtmlgoodies_marqueeObj; var dhtmlgoodies_marqueeTextObj; var dhtmlgoodies_marqueeTmpStep; var dhtmlgoodies_marqueeTextObjects = new Array(); var dhtmlgoodies_marqueeHiddenSpans = new Array(); var dhtmlgoodies_marqueeIndex = 0; function repositionMarquee(e,timeout) { if(document.all)e=event; if(dhtmlgoodies_marqueePosition.toLowerCase()==\'top\'){ dhtmlgoodies_marqueeObj.style.top = \'0px\'; }else{ dhtmlgoodies_marqueeObj.style.bottom = \'-1px\'; } if(document.all && !timeout)setTimeout(\'repositionMarquee(false,true)\',500) } function marqueeMove() { var leftPos = dhtmlgoodies_marqueeTextObj.offsetLeft; leftPos = leftPos - dhtmlgoodies_marqueeTmpStep; var rightEdge = leftPos + dhtmlgoodies_marqueeHiddenSpans[dhtmlgoodies_marqueeIndex].offsetLeft; if(rightEdge<0){ leftPos = document.documentElement.offsetWidth; dhtmlgoodies_marqueeTextObj.style.display=\'none\'; dhtmlgoodies_marqueeIndex++; if(dhtmlgoodies_marqueeIndex>=dhtmlgoodies_marqueeTextObjects.length)dhtmlgoodies_marqueeIndex = 0; dhtmlgoodies_marqueeTextObj = dhtmlgoodies_marqueeTextObjects[dhtmlgoodies_marqueeIndex]; dhtmlgoodies_marqueeTextObj.style.display=\'block\'; } dhtmlgoodies_marqueeTextObj.style.left = leftPos + \'px\'; } function stopMarqueeMove() { if(dhtmlgoodies_marqueeStopOnMouseOver)dhtmlgoodies_marqueeTmpStep = 0; } function resumeMarqueeMove() { dhtmlgoodies_marqueeTmpStep = dhtmlgoodies_marqueeSteps; } function initMarquee() { dhtmlgoodies_marqueeObj = document.getElementById(\'dhtmlgoodies_marquee\'); var spans = dhtmlgoodies_marqueeObj.getElementsByTagName(\'DIV\'); for(var no=0;no<spans.length;no++){ if(spans[no].className==\'textObj\'){ if(!dhtmlgoodies_marqueeTextObj){ dhtmlgoodies_marqueeTextObj = spans[no]; spans[no].style.display=\'block\'; }else spans[no].style.display=\'none\'; dhtmlgoodies_marqueeTextObjects.push(spans[no]); var hiddenSpan = document.createElement(\'SPAN\'); hiddenSpan.innerHTML = \' \' spans[no].appendChild(hiddenSpan); dhtmlgoodies_marqueeHiddenSpans.push(hiddenSpan); } } if(dhtmlgoodies_marqueePosition.toLowerCase()==\'top\'){ dhtmlgoodies_marqueeObj.style.top = \'0px\'; }else{ if(document.all){ dhtmlgoodies_marqueeObj.style.bottom = \'0px\'; }else{ dhtmlgoodies_marqueeObj.style.bottom = \'-1px\'; } } dhtmlgoodies_marqueeObj.style.display=\'block\'; dhtmlgoodies_marqueeTextObj.style.left = document.documentElement.offsetWidth + \'px\'; dhtmlgoodies_marqueeObj.onmouseover = stopMarqueeMove; dhtmlgoodies_marqueeObj.onmouseout = resumeMarqueeMove; if(document.all)window.onscroll = repositionMarquee; else dhtmlgoodies_marqueeObj.style.position = \'fixed\'; dhtmlgoodies_marqueeObj.style.display=\'block\'; dhtmlgoodies_marqueeTmpStep = dhtmlgoodies_marqueeSteps; setInterval(\'marqueeMove()\',dhtmlgoodies_marqueeSpeed); } </script>
Jak wg Was powinienem dalej zając sie tym, by w miejscu tekstu "Breaking news!</span> This is the first headline of this marquee. Wait, more will come!" pojawiały się wspomniane przeze mnie ogłoszenia.