Forum PHP.pl

Hej
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;

[HTML] pobierz, plaintext 
<div id="dhtmlgoodies_marquee">
    <div class="textObj"><span class="highlighted">Breaking news!</span> This is the first headline of this marquee. Wait, more will come!</div>
    <div class="textObj"><span class="highlighted">STOCK NEWS:</span> Company 1 <span class="greenText">82.5</span>(+0.5), Company 2 <span class="greenText">42.9</span>(-2.4), Company 3 <span class="greenText">189.9</span>(-13.7)</div>
 
    <div class="textObj"><span class="highlighted">Sport:</span> The soccer season is almost over in Norway now. We have a few thrilling matches ahead of us.</div>
    <div class="textObj"><span class="highlighted">Other news:</span> The quick brown fox jumps over a lazy dog.</div>
</div> 
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
 
        #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;
[HTML] pobierz, plaintext 

3. JS

[HTML] pobierz, plaintext 
 
 
<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 = \'&nbsp;\'
                                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>
[HTML] pobierz, plaintext 

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.

Ten post edytował rel 9.01.2014, 10:04:51