Hallo Leute,
ich bin gerade dabei ein Projekt abzuschließen. Fast alles steht soweit, nur leider kommt der IE6 mal wieder in die Quere.
Wenn ihr euch mal diese Seite (noch nicht öffentlich, nicht weitersagen! http://www.chavakis.de/index.php?idcatside...&detailid=2 ) im IE6 anschaut fallen euch sicher die Probleme auf, vor denen ich stehe.
Es ruckelt wie wild. Das liegt wohl daran, dass die Grafiken zu lange brauchen, alles aufhalten und per JS zuviel am DOM gewerkelt wird.
Vor allem die Navi wird per DOM-Scripting umgemodelt.
Ich setzte die std. Navi
Ordner1
seite1
seite2
Ordner2
Ordner3
um in:
<div>
Ordner1
Ordner2
Ordner3
</div>
<div>
seite1
seite2
</div>
Es wäre echt nett, wenn mir der ein oder andere Tipps bzgl Code-Verbesserungen geben könnte. Vielleicht kann ich auch was an der Listen-Navi schrauben, dass das so kommt wie gewünscht!
Als JS-Lib setz ich JQuery ein.
lg, monk
Vollansicht: IE6: Javascript kommt zu spät/langsam
also ich weiss nicht. bei mir ist in ie6 nix langsamer?!? 
hi andi,
wirklich nicht? bei mir sieht man beim "durchblättern" immer erst kurz die "rohe" navi, bevor diese dann per skript in die richtige form gebracht wird...
muss dazu sagen, dass ich bei mir ein standalone ie hab, neben einem ie7. vielleicht ist das noch langsamer...
trotzdem: mein kunde hat sich darüber beklagt, bei ihm wars also auch fürn §$%&... (sorry, ie-frust ;-) )
hast du dir mal mein skript angeschaut? irgendwas verwerfliches? (außer das viele auskommentierte?)
lg, monk
wirklich nicht? bei mir sieht man beim "durchblättern" immer erst kurz die "rohe" navi, bevor diese dann per skript in die richtige form gebracht wird...
muss dazu sagen, dass ich bei mir ein standalone ie hab, neben einem ie7. vielleicht ist das noch langsamer...
trotzdem: mein kunde hat sich darüber beklagt, bei ihm wars also auch fürn §$%&... (sorry, ie-frust ;-) )
hast du dir mal mein skript angeschaut? irgendwas verwerfliches? (außer das viele auskommentierte?)
lg, monk
Bei FF 3 gibt es einen ähnlichen Effekt (allgemein, ohne obiges Beispiel). Die Inhalte der Seiten sind schneller da, als das die Seite gerendert ist. Das betrifft nicht eine graphische Navigation, sondern die gesamte Seite
Hallo Monk,
ich kann die Beobachtung von dir bestätigen. In meinem IE6 springt die Navigation auch. Zudem habe ich es noch im IE 7 ausprobiert und auch da gibt es Probleme.
Ich vermute, dass das document.ready im IE später ausgeführt wird, als in den anderen Browsern. Deshalb habe ich ein bisschen recherchiert und folgende Artikel gefunden:
Allgemeines zu document.ready()
Dein Problem betreffend 1
Dein Problem betreffend 2
Generelles zur Geschwindigkeit -> dort auf Javascript
ich kann die Beobachtung von dir bestätigen. In meinem IE6 springt die Navigation auch. Zudem habe ich es noch im IE 7 ausprobiert und auch da gibt es Probleme.
Ich vermute, dass das document.ready im IE später ausgeführt wird, als in den anderen Browsern. Deshalb habe ich ein bisschen recherchiert und folgende Artikel gefunden:
Allgemeines zu document.ready()
Dein Problem betreffend 1
Dein Problem betreffend 2
Generelles zur Geschwindigkeit -> dort auf Javascript
Noch ein anderer Gedanke: Warum fügst du nicht 2 Navigationsmodule untereinander ein, dass dir die gewünschte Struktur erzeugt.
<div>
Ordner1
Ordner2
Ordner3
</div>
<div>
seite1
seite2
</div>
Das erste gibt dir nur die Ordner aus und das zweite nur die Seiten. Sollte doch gehen, oder?
<div>
Ordner1
Ordner2
Ordner3
</div>
<div>
seite1
seite2
</div>
Das erste gibt dir nur die Ordner aus und das zweite nur die Seiten. Sollte doch gehen, oder?
das ist ne super idee. dafür bekommst du imaginäre high five!! 
ich würd trotzdem gerne diesen thread dazu nutzen etwas über js-feinheiten zu lernen. was macht man oft falsch, was verbraucht viel rechenzeit? ich weiß zB, dass meine derzeitige Lösung über die Navi-Elemente zu iterieren nicht der Weißheit letzter Schluss ist (Stichwort dom-zugriff).
also, wo sind die js/jquery heads?
edit: uups, hab mvsxyz´s 1. beitrag übersehen.
übrigens: klickt auch mal auf das bild, dann müsste eigentlich eine Großansicht kommen. Funktioniert das bei euch?
bin dankbar für jeden input
lg, monk
ich würd trotzdem gerne diesen thread dazu nutzen etwas über js-feinheiten zu lernen. was macht man oft falsch, was verbraucht viel rechenzeit? ich weiß zB, dass meine derzeitige Lösung über die Navi-Elemente zu iterieren nicht der Weißheit letzter Schluss ist (Stichwort dom-zugriff).
also, wo sind die js/jquery heads?
edit: uups, hab mvsxyz´s 1. beitrag übersehen.
übrigens: klickt auch mal auf das bild, dann müsste eigentlich eine Großansicht kommen. Funktioniert das bei euch?
bin dankbar für jeden input
lg, monk
danke, mvsxyz. werd mal die tage deine links nachrecherchieren!
@gunwalt: was meinst du genau damit? etwa, dass das dom erst geladen wird und dann die bilder etc?
@gunwalt: was meinst du genau damit? etwa, dass das dom erst geladen wird und dann die bilder etc?
High five zurück.
Damit du dein Studium noch etwas vertiefen kannst, habe ich noch ein paar Links zum Thema Performance von jQuery rausgesucht:
Some quick tips for jQuery performance
jQuery: Performance analysis of selectors
Interaktiver Performance-Vergleich von mehreren JS-Bibliotheken (leider schon etwas veraltete Versionen)
Damit du dein Studium noch etwas vertiefen kannst, habe ich noch ein paar Links zum Thema Performance von jQuery rausgesucht:
Some quick tips for jQuery performance
jQuery: Performance analysis of selectors
Interaktiver Performance-Vergleich von mehreren JS-Bibliotheken (leider schon etwas veraltete Versionen)
Also ich finde den ganzen Ansatz der da verfolgt wurde einen Irrweg. Schaut es euch mal mit JS Off an 
Wozu hat es da für jedes Bild eine Seite (oder Pseudoseite)? Dadurch hast du dir erst den ganzen Mist eingehandelt (reload)!
Imho brauchst du doch nur die Bilder links mit den großen Bildern selbst zu verlinken, dann bissel Manipulation und die in den rechten Block reinzaubern
Wozu hat es da für jedes Bild eine Seite (oder Pseudoseite)? Dadurch hast du dir erst den ganzen Mist eingehandelt (reload)!
Imho brauchst du doch nur die Bilder links mit den großen Bildern selbst zu verlinken, dann bissel Manipulation und die in den rechten Block reinzaubern
die zweifel hatte ich auch, ich war nur von den features des galerie-moduls überzeugt. hat alles was ich brauche. zB der walker zum wechseln der bilder (mit nummerierung) wäre für mich sonst (nur mit js) schwer zu realisieren gewesen.
Oder was wäre dein vorschlag? dazu brauchst du doch auch wieder js?
Oder was wäre dein vorschlag? dazu brauchst du doch auch wieder js?
ZITAT(monkderhonk @ Wed. 10. September 2008, 00:12) 
Oder was wäre dein vorschlag? dazu brauchst du doch auch wieder js?
Klar, spricht nichts gegen JS, aber wie du hast bekommt der User ohne die Bilder nicht zu sehen, das ist der Nachteil.
Mein Vorschlag wäre dieser Richtung:
QUELLTEXT
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
ul{
width:80px;
}
ul li{
float:left;
list-style:none;
margin:5px;
}
#main{
border:1px solid #cccccc;
float:right;
height:600px;
margin:5px;
width:860px;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// <!--
//
$(function() {
$("#thumb-list a").click( function (){
$href = $(this).attr("href");
$("#main img").remove();
$("#main").append("<img src='"+$href+"'>");
return false
});
});
// -->
</script>
</head>
<body>
<div id="main">
<img src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_10_Gross.jpg" border="0" alt="thumbnail" />
</div>
<ul id="thumb-list"><li>
<a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_10_Gross.jpg">
<img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_10_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
<li>
<a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_1_Gross.jpg">
<img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_1_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
<li>
<a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_2_Gross.jpg">
<img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_2_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
<li>
<a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_3_Gross.jpg">
<img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_3_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
</ul>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
ul{
width:80px;
}
ul li{
float:left;
list-style:none;
margin:5px;
}
#main{
border:1px solid #cccccc;
float:right;
height:600px;
margin:5px;
width:860px;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// <!--
//
$(function() {
$("#thumb-list a").click( function (){
$href = $(this).attr("href");
$("#main img").remove();
$("#main").append("<img src='"+$href+"'>");
return false
});
});
// -->
</script>
</head>
<body>
<div id="main">
<img src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_10_Gross.jpg" border="0" alt="thumbnail" />
</div>
<ul id="thumb-list"><li>
<a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_10_Gross.jpg">
<img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_10_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
<li>
<a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_1_Gross.jpg">
<img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_1_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
<li>
<a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_2_Gross.jpg">
<img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_2_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
<li>
<a href="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_3_Gross.jpg">
<img class="thumb" src="http://www.chavakis.de/media/images/Work/Airport Tempelhof/Tempelhof_3_Klein_cms_thumb.jpg" border="0" alt="thumbnail" />
</a>
</li>
</ul>
</body>
</html>
Hi Olaf,
das würde natürlich gehen und hätte sicherlich den vorteil, dass nicht für jedes bild eine neue seite geladen werden müsste.
nur, wie zB würdest du den Walker, also die Nummernanzeige, bauen? das war mir zu dem zeitpunkt, als ich mich dann fürs galerie-modul entschieden hatte zu umständlich und der Zeitaufwand nicht zu rechtfertigen, da alle nötigen Features im besagten Modul bereits enthalten sind. Außerdem sollte es mit vernünftigem Caching ja flott gehen.
Dass man das Bild ohne js nicht sieht, ist schlecht, das stimmt. Das werde ich aber umstellen können, den wert nicht in css setzen, sondern erst bei dom-ready verstecken...
Hat vielleicht noch jemand eine gute Idee, wie man die Großansicht, also die Anzeige, die erscheint, wenn man auf das Bild klickt, verbessern kann? Bis jetzt hab ich das per Cookie realisiert und dom-scripting, dass je nach cookie-wert einzelne Objekte im Baum löscht bzw verschiebt.
lg und danke fürs mitdenken,
monk
das würde natürlich gehen und hätte sicherlich den vorteil, dass nicht für jedes bild eine neue seite geladen werden müsste.
nur, wie zB würdest du den Walker, also die Nummernanzeige, bauen? das war mir zu dem zeitpunkt, als ich mich dann fürs galerie-modul entschieden hatte zu umständlich und der Zeitaufwand nicht zu rechtfertigen, da alle nötigen Features im besagten Modul bereits enthalten sind. Außerdem sollte es mit vernünftigem Caching ja flott gehen.
Dass man das Bild ohne js nicht sieht, ist schlecht, das stimmt. Das werde ich aber umstellen können, den wert nicht in css setzen, sondern erst bei dom-ready verstecken...
Hat vielleicht noch jemand eine gute Idee, wie man die Großansicht, also die Anzeige, die erscheint, wenn man auf das Bild klickt, verbessern kann? Bis jetzt hab ich das per Cookie realisiert und dom-scripting, dass je nach cookie-wert einzelne Objekte im Baum löscht bzw verschiebt.
lg und danke fürs mitdenken,
monk
ZITAT(monkderhonk @ Wed. 10. September 2008, 12:01)
nur, wie zB würdest du den Walker, also die Nummernanzeige, bauen? das war mir zu dem zeitpunkt, als ich mich dann fürs galerie-modul entschieden hatte zu umständlich und der Zeitaufwand nicht zu rechtfertigen....
Das dauert auch nich lang:
QUELLTEXT
$("#thumb-list a").each( function(i){
$(this).clone().empty().text(i+1).prependTo("#main")
.click( function(){
$href = $(this).attr("href");
$("#main img").remove();
$("#main").append("<img src='"+$href+"'>");
return false
});
});
$(this).clone().empty().text(i+1).prependTo("#main")
.click( function(){
$href = $(this).attr("href");
$("#main img").remove();
$("#main").append("<img src='"+$href+"'>");
return false
});
});
Das ist natürlich nur hingerotzt
Zur Großansicht, da müsstest du dir das append der ersten Funktion noch mal anschauen und anpassen, dann suchst du nach livequery und bindest diese Großansicht damit an den erzeugten Code. Aber nun gut, ich will nicht deine Arbeit machen
wow, das hats in sich. muss ein armer jquery padavan erst mal drüber nachgrübeln.
jetzt fällt mir aber auch wieder das killerargument pro galeriemodul ein: direkte links zu jedem foto. bekommst du das per javascript auch hin?
jetzt fällt mir aber auch wieder das killerargument pro galeriemodul ein: direkte links zu jedem foto. bekommst du das per javascript auch hin?
ZITAT(monkderhonk @ Thu. 11. September 2008, 21:02)
jetzt fällt mir aber auch wieder das killerargument pro galeriemodul ein: direkte links zu jedem foto. bekommst du das per javascript auch hin?
Jetzt hast du aber was ganz falsch verstanden. Das muss schon das Modul tun, also du erzeugst die Thumbs mit den Links mit der Galerie und setzt darauf dies Verhalten mit JQuery drauf.
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.