✔ Bildlaufleiste vertikal

Rudi100 · 27. Januar 2006

Was ist den hier los?

Ich denke doch mal ein Forum ist dafür frage zu stellen oder nicht!

Also wenn ihr mir nicht helfen wollt dann "überlesst" mich doch. VIELEN DANK FÜR DIE TIPS.

Das regt mich so auf.......

Sven Mintel · 27. Januar 2006

Wenn du dir dieses genannte Tickerthema mal in Ruhe durchliest, wirst du merken, dass es genau das ist, was du suchst. Das in dem Ticker, was da läuft, ist normaler HTML-Code.
Niemand hindert dich daran, dort auch Bilder einzufügen.... Links sind ohnehin schon dabei.

Wenn dir das nicht ausreicht... aus dem Tickerthema heraus entstand ein weiteres Urgestein

: Scrollende Bildergalerie.

Wie du siehst...alles en masse da, du musst dich nur bedienen

silmarwen_85 · 11. Juni 2008

Hallo hallo,

@Sven Mintel: Ich möchte dir erstmal herzlich Danken für die Links zu den Tickern, ich habe mir gleich den 6. gekrallt! Nur habe ich ein Problem: er 'tickt' zwar perfekt in Opera und Firefox, aber in IE 6 & IE 7 überhaupt nicht. Er zeigt die Bilder und Links an Ort und Stelle an, aber bewegen tut er sich leider überhauptnicht.

Hier der HTML code Teil wo ich den Tiker Code extern gelinkt habe und mit einer Funktion rufe:

HTML:

<!-- RIGHT MENU SECTION -->
<td id="rightMenu_td">
<div id="right_menu">

<!-- VORSCHAU BILDERLAUFLEISTE MENU -->
<div id="warenkorb" class="menu_style">
<h2 class="menu_title">Vorschau</h2>

<table class="">
  <tbody>
  <tr><td id="bildlaufleiste"><script src="vertikale_bildlaufleiste.js" type="text/javascript"></script>
  <div style="padding: 4px; overflow: hidden; position: relative; text-align: left; width: 0px; height: 0px;">
	<div>
		<div id="ticker" onmouseout="objGo=setInterval('DM_ticken()',50)" onmouseover="clearInterval(objGo)" style="position: relative; color: rgb(255, 255, 255); background-color: rgb(81, 81, 81); top: 0px;">
		</div>
	</div>
  </div>
  </td></tr>
    <tr><td><a href="www.smth.de">Downloaden</a></td></td></tr>
  </tbody>
</table>
</div>
</div>
</td>
</tr>
</table>

<!-- FOOTER SECTION -->
<table id="footer_tb">
<tr>

Hier auch einfach mal der Ticker code:

Code:

/* * * * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */

    //°°°°°°°°°°Die News

tNews=new Array();
tNews.push('<a href="www.smth.de" class="style">1. Karte 1</a><br />');
tNews.push('<img src="001.jpg">');
tNews.push('<img src="trenner.png">');
tNews.push('<a href="www.smth.de" class="style">2. Karte 2</a><br />');
tNews.push('<img src="002.jpg">');
tNews.push('<img src="trenner.png">');
tNews.push('<a href="www.smth.de" class="style">3. Karte 3</a><br />');
tNews.push('<img src="003.jpg">');
tNews.push('<img src="trenner.png">');
tNews.push('<a href="www.smth.de" class="style">4. Karte 4</a><br />');
tNews.push('<img src="004.jpg">');
tNews.push('<img src="trenner.png">');
tNews.push('<a href="www.smth.de" class="style">5. Karte 5</a><br />');
tNews.push('<img src="005.jpg">');
tNews.push('<img src="trenner.png">');
tNews.push('<a href="www.smth.de" class="style">6. Karte 6</a><br />');
tNews.push('<img src="006.jpg">');
tNews.push('<img src="trenner.png">');


    //°°°°°°°°°°Laufrichtung(up,down,left,right)
strDir      ='up';

    //°°°°°°°°°°Delimiter zwischen den einzelnen News(nur bei left/right)
strDelimiter=' + + + ';

    //°°°°°°°°°°Interval in ms
intInterval =50;

    //°°°°°°°°°°Stop bei mouseover?true:false
blnStopHover=true;

    //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
intRepeat   =2;

    //°°°°°°°°°°Rahmen
strBorder   ='1px solid #ffffff';

    //°°°°°°°°°°Breite
intWidth    =130;

    //°°°°°°°°°°Höhe
intHeight   =400;

    //Abstand Rahmen->Inhalt
intPadding  =4;

    //Background-color
strBgc      ='#ffffff';

    //Text-color
strTxtc     ='#4d41a3';

    //Textausrichtung
strAlign    ='left';

    //Schritt pro Durchlauf(px)
intStep=1;


/* * * * * * * * * * * * * * * * * * D E R  T I C K E R * * * * * * * * * * * * * * * * * * * * * */

    //IE ab V4?
IE=document.all&&!window.opera;
    //DOM-Browser(ausser IE)
DOM=document.getElementById&&!IE;


//läuft ab IE4 und in DOM-Browsern
if(DOM||IE)
  {
        //Ermitteln, ob Ticker horizontal oder vertikal laufen soll
    blnDir=(strDir=='up'||strDir=='down')?true:false;

        //Bei horizontalem Ticker wird ein nobr-, ansonsten ein div-Tag verwendet
    strNobr=(blnDir)?'div':'nobr';

        //Trennzeichen zwischen den Einzelnen Eintraegen
        //bei horizontalem Ticker gemäss Angabe in Variale strDelimiter
        //Ansonsten Zeilenumbrueche
    strDelimiter=(blnDir)?'<br><br>':strDelimiter;

        //String fuer Textausrichtung bei vertikalem Ticker
    strAlign=(blnDir)?'text-align:'+strAlign+';':'';

        //Variable zum Speichern des Intervals
    var objGo;
        //Variable zum Speichern der Position
    intPos=0;

        //String erzeugen fuer JS-Code, falls Ticker beim mouseover stoppen soll
    strStopHover=(blnStopHover)?'onmouseover="clearInterval(objGo)"onmouseout="objGo=setInterval(\'DM_ticken()\','+intInterval+')"':'';

        //Tickertext zu String zusammenfuegen
    strText=(blnDir)?tNews.join(strDelimiter)+strDelimiter:tNews.join(strDelimiter)+strDelimiter;
    strNews=strText;
    for(i=1;i<intRepeat;++i)
        {
        strNews+=strText;
        }

        //TickerCode zu String zusammenfuegen
    strTicker='<div style="position: relative; '+strAlign+'overflow:hidden;background-color:'+strBgc+
                    ';border:'+strBorder+';width:'+intWidth+'px;height:'+intHeight+'px;padding:'+intPadding+
                    'px;"><'+strNobr+'><div id="ticker"style="position:relative;color:'+strTxtc+';background-color:'+strBgc+
                    ';"'+strStopHover+'>'+strNews+'</div></'+strNobr+'></div>';

        //TickerCode im Dokument ausgeben
    document.write(strTicker);

        //Funktion, um Ticker ticken zu lassen
    function DM_ticken()
    {
        //Ticker-Objekt je nach Browser ermitteln
    objTicker=(IE)?document.all.ticker:document.getElementById('ticker');

        //Array fuer zu manipulierende Eigenschaften des Tickers je nach Richtung
        //Richtung=new Array(Pixelwert zur Aenderung der Position,Breite/Höhe des Tickers,zu andernder Positionswert);
    arrDir=new Array();
    arrDir['up']    =new Array(-1,objTicker.offsetHeight,'top');
    arrDir['down']  =new Array(1,objTicker.offsetHeight,'top');
    arrDir['left']  =new Array(1,objTicker.offsetWidth,'left');
    arrDir['right'] =new Array(-1,objTicker.offsetWidth,'left');

        //Ermitteln von Breite bzw. Höhe der anzuzeigenden Items
    dblOffset=arrDir[strDir][1]/intRepeat;

        //Neuen Positionswert ermitteln
    switch(strDir)
        {
        case'right':
            intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break;
        case'left':
            intPos=(intPos>0)?-dblOffset:intPos;break;
        case 'up':
            intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break;
        case 'down':
            intPos=(intPos>0)?-dblOffset:intPos;break;
        }
        //Neuen Positionswert zuweisen
    objTicker.style[arrDir[strDir][2]]=intPos + "px";

        //Positionswert hoch/heruntersetzen
    intPos+=intStep*arrDir[strDir][0];
    }
        //Erneut ticken lassen
    objGo=setInterval('DM_ticken()',intInterval);
  }

Schonmal VIELEN Dank für die Hilfe!

Sven Mintel · 11. Juni 2008

Moin,

du hast da ein Element#ticker im Quellext, das bringt Probleme, weil der richtige Ticker nicht gefunden wird.

Du musst nur dort, wo der Ticker erscheinen soll, dein JS einbinden...mehr nicht

Code:

<!-- RIGHT MENU SECTION -->
<td id="rightMenu_td">
<div id="right_menu">

<!-- VORSCHAU BILDERLAUFLEISTE MENU -->
<div id="warenkorb" class="menu_style">
<h2 class="menu_title">Vorschau</h2>

<table class="">
  <tbody>
  <tr><td id="bildlaufleiste">
  <div style="padding: 4px; overflow: hidden; position: relative; text-align: left;">
	<div>
		<div>
		 <script src="vertikale_bildlaufleiste.js" type="text/javascript"></script>
		</div>
	</div>
  </div>
  </td></tr>
    <tr><td><a href="www.smth.de">Downloaden</a></td></td></tr>
  </tbody>
</table>
</div>
</div>
</td>
</tr>
</table>

<!-- FOOTER SECTION -->
<table id="footer_tb">
<tr>

(Die Angaben width: 0px; height: 0px; aus dem Elternlayer hab ich dabei entfernt, sonst sieht man den Ticker nicht)

silmarwen_85 · 11. Juni 2008

VIELEN Dank, es funktioniert!

✔ Bildlaufleiste vertikal

Rudi100

Gesperrt

Sven Mintel

Mitglied

silmarwen_85

Grünschnabel

Sven Mintel

Mitglied

silmarwen_85

Grünschnabel

Neue Beiträge