css Fehler bei Javascript array

DarkEmperor

Hey ho,
ich hab nen kleines Problem!
Und zwar habe ich auf meiner Seite ganz oben eine Menüleiste! Und in der Mitte habe ich eine Javascript Array durch welches die Links automatisch nach einer gewissen Zeit wechseln!

HTML

<script type="text/javascript">
//<![CDATA[
var toolbarTexts = new Array('Unser Clanblog','Bigpoint - Style up your Account');
var toolbarLinks = new Array('darkemperor.bplaced.de/filemanager/dd/clanblog.htm','de.bigpoint.com/news/g25/?aid=1420&aip=');
var project = '';
REG_NOW_TEXT = 'Mehr finden sie Hier!';
//]]>
</script>
<script type="text/javascript" src="index_htm_files/scroll.js"></script>

Code

addHandler('load',window,init_scroll);
var smooth=null;
var scroll_interval=5000;
var count=0;
var textCount=0;
var ie_filter=100;


function addHandler(type,object,callback)
{if(!object.addEventListener){object.attachEvent('on'+type,callback);}
else{object.addEventListener(type,callback,false);}}




function nextText()
{if(document.getElementById('scroll')){var container=document.getElementById('scroll');if(count==textCount){count=0;}
var link=document.createElement('a');link.href='http://'+toolbarLinks[count];link.setAttribute('onclick','javascript:window.open(this.href);return false;');link.setAttribute('style','color:#CCC;');link.innerHTML=toolbarTexts[count];container.replaceChild(link,container.firstChild);count++;}}




function ie_fade(direction)
{if(document.getElementById('scroll')){var content=document.getElementById('scroll');if(direction=='in'){ie_filter+=10;}
else{ie_filter-=10;}
if((direction=='in'&&ie_filter==100)||(direction=='out'&&ie_filter==0)){content.style.filter='Alpha(opacity='+ie_filter+', finishopacity=0, style=0);';textSet((direction=='in')?'out':'in');return;}
content.style.filter='Alpha(opacity='+ie_filter+', finishopacity=0, style=0);';}}




function fade(direction)
{if(document.getElementById('scroll')){var content=document.getElementById('scroll');var opac=parseFloat(content.style.opacity);if(direction=='in'){opac+=0.1;}
else{opac-=0.1;}
if((direction=='in'&&opac==1.0)||(direction=='out'&&opac==0.0)){textSet((direction=='in')?'out':'in');return;}
content.style.opacity=opac;}}




function fadeInterval(direction)
{if(document.all){smooth=window.setInterval('ie_fade("'+direction+'")',50);}
else{smooth=window.setInterval('fade("'+direction+'")',50);}}




function textSet(direction)
{window.clearInterval(smooth);if(direction=='out'){window.setTimeout('fadeInterval("'+direction+'")',scroll_interval);}
else{nextText();fadeInterval(direction);}}




function getFirstText()
{if(document.getElementById('scroll')){var container=document.getElementById('scroll');for(var i in toolbarTexts){toolbarTexts[i]+=' - '+REG_NOW_TEXT;}
if(!container.hasChildNodes()){textSet('out');return;}
if(container.firstChild.nodeName=='A'){toolbarTexts[textCount]=container.firstChild.childNodes[0].nodeValue;toolbarLinks[textCount]=container.firstChild.getAttribute('href');textCount++;}
textSet('out');}}




function init_scroll()
{textCount=toolbarTexts.length;if(!document.all&&document.getElementById('scroll')){document.getElementById('scroll').style.opacity='1.0';}
getFirstText();}

Alles anzeigen

Das ist der Spaß für den Linkwechsel!

Und ganz links habe ich zwei feste links in einer neuen Division!
Das wäre das:

HTML

<div id="menu"><a href="http://the-pimps.bigpoint.de/" onclick="javascript:window.open(this.href);return false;">The Pimps</a> | <a href="http://dagegendafuer.internet4um.de/" onclick="javascript:window.open(this.href);return false;">Clanforum</a></div>

Das gesamt Packet für die Leiste ist das:

HTML

<div id="toolbar">
        <div id="alles">
                <div id="specialtext">
                        <div id="logo">
                                <b><a href="http://darkemperor.bplaced.de/filemanager/dd/index.htm"><span>[D*D]</span> Devils-Drive</a></b>
                        </div>
                        <div id="dauerlink">
                                 <div id="menu"><a href="http://the-pimps.bigpoint.de/" onclick="javascript:window.open(this.href);return false;">The Pimps</a> | <a href="http://dagegendafuer.internet4um.de/" onclick="javascript:window.open(this.href);return false;">Clanforum</a></div>
                        </div>
                        <div id="scroll"><a href="http://spielwelt11.knightfight.de/?ac=vid&vid=433000864&ref=link" onclick="javascript:window.open(this.href);return false;">Knight Fight - Server 11</a></div>
                </div>
                <div class="clear">&nbsp;</div>
        </div>
</div>
<script type="text/javascript">
//<![CDATA[
var toolbarTexts = new Array('Unser Clanblog','Bigpoint - Style up your Account');
var toolbarLinks = new Array('darkemperor.bplaced.de/filemanager/dd/clanblog.htm','de.bigpoint.com/news/g25/?aid=1420&aip=');
var project = '';
REG_NOW_TEXT = 'Mehr finden sie Hier!';
//]]>
</script>
<script type="text/javascript" src="index_htm_files/scroll.js"></script>

Alles anzeigen

Die css Datei dazu ist:

Code

#toolbar
        {
                position:absolute;
                top:0px;
                left:0px;
                width:100%;
                height:20px;
                z-index:99;
                border:0px;
                display:block;
                border-bottom:1px solid #111;
                background-color:#000000;
                background-image:url('bar-bg.jpg');
                background-repeat:repeat-x;
                font-size:10px;
                font-family:Verdana, Arial, Helvetica, sans-serif;
                padding:0px;
                margin:0px;
        }


        #toolbar #alles
        {
                width:100%;
                min-width:990px;
        }
        #toolbar a,
        #toolbar a:link,
        #toolbar a:visited,
        #toolbar a:active,
        #toolbar a:hover
        {
                font-family:Verdana, Arial, Helvetica, sans-serif;
                font-size:10px;
                color: #CCC;
        }


        #toolbar #alles #specialtext #logo
        {
                float:left;
                width:210px;
                min-width:210px;
                text-align:left;
                font-size:10px;
                padding-left:10px;
        }
        #toolbar #alles #specialtext #logo a,
        #toolbar #alles #specialtext #logo a:link,
        #toolbar #alles #specialtext #logo a:visited,
        #toolbar #alles #specialtext #logo a:active,
        #toolbar #alles #specialtext #logo a:hover
        {
                color:#FFFFFF;
                font-size:10px;
                text-decoration:none;
        }
        #toolbar #alles #specialtext #logo a span
        {
                font-size:10px;
                color:#00C400;
                text-decoration:none;
        }


        #toolbar #alles #specialtext
        {
                width:100%;
                text-align:center;
                font-size:10px;
                color:#FFFFFF;
                padding:4px 0px 0px 0px;
        }
        #toolbar #alles #specialtext a,
        #toolbar #alles #specialtext a:link,
        #toolbar #alles #specialtext a:visited,
        #toolbar #alles #specialtext a:active
        {
                color:#BBBBBB;
                text-decoration:none;
        }
        #toolbar #alles #specialtext a:hover
        {
                color:#FFFFFF;
                text-decoration:none;
        }


        #toolbar #alles #dauerlink
        {
                float:right;
                text-align:right;
                width:210px;
                min-width:210px;
                font-size:10px;
                padding:0px 10px 0px 0px;
                z-Index:100;
        }


        #toolbar .clear
        {
                clear:both;
                font-size:0px;
                line-height:0px;
        }


        #toolbar #alles #specialtext #dauerlink #menu
        {
                width:175px;
                height:16px;
                font-size:10px;
                position:right;
        }


        #toolbar #alles #specialtext #dauerlink #menu a,
        #toolbar #alles #specialtext #dauerlink #menu a:visited
        {
                font-size:10px;
                text-decoration:none;
                color:#BBB;
        }
        #toolbar #alles #specialtext #dauerlink #menu a:hover
        {
                font-size:10px;
                text-decoration:underline;
                color:#FFF;
        }

Alles anzeigen

Auf der Seite: http://darkemperor.bplaced.de/filemanager/dd/index.htm

Mein Problem ist das die rechten Links nicht mehr funktionieren nachdem der erste Linkwechsel in der Mitte war!!!

Hat jemand ne Idee an was das liegen könnte???
Meine grobe Idee ist ja das dieses Array die links irgendwie behindert! Weiß nur nicht wie!

Danke im Vorraus

MfG

EDITIERT:

Der hover Effeckt bei den Links in der Mitte ist auch weg sobald der Linkwechsel war!

Dodo

Hast nen Link?
Schon mal mit Firebug oder Dragonfly durchgecheckt?

DarkEmperor

Der Link ist drin ... aber hier gern nochmal:
http://darkemperor.bplaced.de/filemanager/dd/index.htm
bitte wirklich nur die seite! hab erstmal nur aufm index die aktuellste version der menüleiste drauf! die andren sind älter und noch verbugter!
...
und nein das zeug hab ich / kenn ich ni!

mfg

Dodo

Der Fehler liegt daran, dass die DIVs übereinander liegen.
Da der dynamische über dem statischen liegt, kann der statische DIV nicht mehr geklickt werden.

Arbeite mit Breiten.

DarkEmperor

die lösung wäre also:

HTML

<div id="alles">
<div id="scroll">
scroll
</div>
<div id="statisch">
statisch
</div>
</div>

müsste dann nur noch die css ändern und fertig!?

und woran liegt es das der hover effeckt bei der scroll division nicht mehr funktioniert nach dem ersten wechsel???

mfg
danke

Dodo

Zitat von DarkEmperor

müsste dann nur noch die css ändern und fertig!?

du musst es irgendwie über den anderen bringen

Zitat von DarkEmperor

und woran liegt es das der hover effeckt bei der scroll division nicht mehr funktioniert nach dem ersten wechsel???

Weil er trotzdem verdeckt ist. Man kann Nachbarelemente nicht gleichzeitig hovern und dein scroll-div liegt über dem menü

DarkEmperor

So ich habs jetzt alles etwas geändert!
...
Den automatischen Wechsel habe ich entfernt und dafür auf der rechten Seite nen Aufklappmenü!
...
Jetzt funktioniert alles so wie ich es haben will!
...
Falls jemandem bei dem vorhandenen Script doch was einfallen sollte für einen automatischen Wechsel der LInks in der mitte kann er es gern posten!

MfG

PS: Der Link: http://darkemperor.bplaced.de/filemanager/dd/index.htm

Tags