Witam. Zamontowałem sobie skrypt odpowiedzialny za rozmieszczenie treści w Taby (karty). Wszystko działa cacy w Operze, a w innych nie wyświetla treści. Po sprawdzeniu walidatorem wszystko jest ok - poprawny dokument i styl CSS. Ciekaw jestem w czym sęk.
strona:
http://www.opera-fanklub.cba.pl/
Skrypt:
//DD Tab Menu- Script rewritten April 27th, 07: http://www.dynamicdrive.com //**Updated Feb 23rd, 08): Adds ability for menu to revert back to default selected tab when mouse moves out of menu //Only 2 configuration variables below: var ddtabmenu={ disabletablinks: false, //Disable hyperlinks in 1st level tabs with sub contents (true or false)? snap2original: [true, 300], //Should tab revert back to default selected when mouse moves out of menu? ([true/false, delay_millisec] currentpageurl: window.location.href.replace(“http://”+window.location.hostname, “”).replace(/^//, “”), //get current page url (minus hostname, ie: http://www.opera-fanklub.cba.pl/ ) definemenu:function(tabid, dselected){ this[tabid+"-menuitems"]=null this[tabid+"-dselected"]=-1 this.addEvent(window, function(){ddtabmenu.init(tabid, dselected)}, “load”) }, showsubmenu:function(tabid, targetitem){ var menuitems=this[tabid+"-menuitems"] this.clearrevert2default(tabid) for (i=0; i menuitems.className="" if (typeof menuitems.hasSubContent!=“undefined”) document.getElementById(menuitems.getAttribute(“rel”)).style.display=“none” } targetitem.className=“current” if (typeof targetitem.hasSubContent!=“undefined”) document.getElementById(targetitem.getAttribute(“rel”)).style.display=“block” }, isSelected:function(menuurl){ var menuurl=menuurl.replace(“http://”+menuurl.hostname, “”).replace(/^//, “”) return (ddtabmenu.currentpageurl==menuurl) }, isContained:function(m, e){ var e=window.event || e var c=e.relatedTarget || ((e.type==“mouseover”)? e.fromElement : e.toElement) while (c && c!=m)try {c=c.parentNode} catch(e){c=m} if (c==m) return true else return false }, revert2default:function(outobj, tabid, e){ if (!ddtabmenu.isContained(outobj, tabid, e)){ window[“hidetimer_”+tabid]=setTimeout(function(){ ddtabmenu.showsubmenu(tabid, ddtabmenu[tabid+"-dselected"]) }, ddtabmenu.snap2original[1]) } }, clearrevert2default:function(tabid){ if (typeof window[“hidetimer_”+tabid]!=“undefined”) clearTimeout(window[“hidetimer_”+tabid]) }, addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload) var tasktype=(window.addEventListener)? tasktype : “on”+tasktype if (target.addEventListener) target.addEventListener(tasktype, functionref, false) else if (target.attachEvent) target.attachEvent(tasktype, functionref) }, init:function(tabid, dselected){ var menuitems=document.getElementById(tabid).getElementsByTagName(“a”) this[tabid+"-menuitems"]=menuitems for (var x=0; x if (menuitems[x].getAttribute(“rel”)){ this[tabid+"-menuitems"][x].hasSubContent=true if (ddtabmenu.disabletablinks) menuitems[x].onclick=function(){return false} if (ddtabmenu.snap2original[0]==true){ var submenu=document.getElementById(menuitems[x].getAttribute(“rel”)) menuitems[x].onmouseout=function(e){ddtabmenu.revert2default(submenu, tabid, e)} submenu.onmouseover=function(){ddtabmenu.clearrevert2default(tabid)} submenu.onmouseout=function(e){ddtabmenu.revert2default(this, tabid, e)} } } else //for items without a submenu, add onMouseout effect menuitems[x].onmouseout=function(e){this.className=""; if (ddtabmenu.snap2original[0]==true) ddtabmenu.revert2default(this, tabid, e)} menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)} if (dselected==“auto” && typeof setalready==“undefined” && this.isSelected(menuitems[x].href)){ ddtabmenu.showsubmenu(tabid, menuitems[x]) this[tabid+"-dselected"]=menuitems[x] var setalready=true } else if (parseInt(dselected)==x){ ddtabmenu.showsubmenu(tabid, menuitems[x]) this[tabid+"-dselected"]=menuitems[x] } } } }
Arkusz stylów:
.solidblockmenu ul{ margin: 0; padding: 0; float: left; font: bold 13px Arial; width: 541px; border: 1px solid #625e00 ; border-width: 1px 0; background: black url(…/media/blockdefault.gif) center center repeat-x; margin-left : 6px; } .solidblockmenu li{ display: inline; } .solidblockmenu li a{ float: left; color: white !important; padding: 9px 20px; text-decoration: none; border-left: 1px solid white; } .solidblockmenu li a:visited{ color: white !important; } .solidblockmenu li a:hover, .solidblockmenu li a.current{ color: white; background: transparent url(…/media/blockactive.gif) center center repeat-x; } .tabcontainer{ clear: left; width:95%; /*width of 2nd level sub menus*/ height : 300px !important; /*height of 2nd level sub menus. Set to largest’s sub menu’s height to avoid jittering.*/ } *:first-child+html .ieclass{ /*IE7 hack to remove gap between menu and sub contents*/ margin-top: -1em; } * html .ieclass{ /*IE6 and below hack to remove gap between menu and sub contents*/ margin-top: -1em; } .tabcontent{ display:none; }
mbocian
9 Marzec 2011 19:38
#2
Nie znam tego skryptu, natomiast CSS-ów to znam tylko na tyle, aby zrobić szablon, nie znam komend odnośnie dopasowania do każdej przeglądarki. Natomiast radzę Tobie zainteresowanie się zaawansowaną, prostą i uznaną biblioteką do UI strony jaką jest JQueryUI. Od razu dam Tobie link do widgetu ‘tabs’, którego zaprogramowanie jest bardzo proste i praktycznie wymaga dosłownie parę linijek JavaScriptu. http://jqueryui.com/demos/tabs/ - link do tego widgetu. Ofc możesz zmieniać skórki do woli, jakie są w Theme Roller-ze
– Dodane 09.03.2011 (Śr) 20:42 –
Odnośnie walidacji, skoro dokument jest w porządku winą są różnice między silnikami przeglądarek, zwłaszcza Internet Explorer do wersji 8. Trzeba byłoby zrobić warunki w html, coś w stylu (nie jestem pewny czy to dobrze), jednak polecam JQUI, gdyż nie trzeba się przejmować różnicami i stosuję ten framework w swoich projektach.
Tak jak pisze mbocian, używaj jqery a nie czystego js bo się zamęczysz tylko dlatego że każda przeglądarka coś inaczej wyświetli. Jak dobrze napiszesz kod to te detekcje przeglądarek będą zupełnie zbędne.
http://docs.jquery.com/UI/Tabs .
ps. przenieś się na kodowanie utf-8 bo to już standard tak właściwie
mbocian , punkomuzykant ,
ok. Już wiem w czym był błąd. Mam w head ścieżkę do innego skryptu,. Przeniosłem ją na koniec sekcji head i działa teraz we wszystkich. Dzięki za zainteresowanie tematem.
PS
Opera jednak ma tolerancje na błędy
