| Autor |
Nachricht |
Impigra
Threadersteller
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht: 
|
Verfasst Sa 14.02.2009 22:25
Titel MooTools Bildgröße und mögliches Verständnisproblem... |
  |
|
Hallo Leute,
ich sitz jetzt schon den ganzen Nachmittag an einem Problemchen und komm nicht weiter...
Ich baue gerade eine grafisch dynamische Navigation in der mit Javascript der normale Textinhalt der Linkliste gegen ein verstecktes <span> ausgetauscht wird, der Anchor wird vom inline-Element zum Block-Element mit fester Breite.
Generell funktioniert das...
Nur will ich die Breite des Anchor Elements dynamisch an die Breite des Hintergrundbildes anpassen welches zur Laufzeit generiert wird.
Das Problem ist jetzt die breite des dynamisch generierten Bildes zu ermitteln und diesen Wert ins JS einzufügen.
Ach ja.. mir steht die Mootools 1.2.1 Bibliothek zur Verfügung...
Hier mal der JS Code:
| Code: | <script type="text/javascript">
window.addEvent('domready', function() {
$$('a.linkElement').each(function(el) {
var linkText = el.get('html');
if (linkText!='') {
// Pfad zum dynamischen Image
var iPath = 'images/nav_bright_multi_reg.php?text='+linkText;
// HTML zwischen <a> Tags leeren
el.empty();
// Create span Element
var iSpan = new Element( 'span', {
'class' : 'hide',
'html' : linkText
});
// Span Element einfügen
iSpan.inject(el, 'inside');
// Styles setzen
el.setProperty('style', 'display:block; height:20px; width:80px; background-image:url('+iPath+'); background-repeat:no-repeat; float:left;');
// Class setzen (background-position für hover setzen)
el.addClass('dynnav');
} else {
alert('kein HTML Inhalt im Link ' +el.getProperty('href'));
}
});
});
</script> |
Der usprüngliche HTML Code des Menus:
| Code: | <div id="menu_left">
<ul>
<li><a href="http://www.website.com" title="vorwort" class="linkElement active">vorwort</a></li>
<li><a href="http://www.website.com" title="team" class="linkElement">team</a></li>
<li><a href="http://www.website.com" title="inhalt" class="linkElement">inhalt</a></li>
<li><a href="http://www.website.com" title="linktext" class="linkElement">linktext</a></li>
</ul>
</div> |
Der HTML Code nach der JS Manipulation:
| Code: | <div id="menu_left">
<ul>
<li><a href="http://www.website.com" title="vorwort" class="linkElement active" style="display: block; height: 20px; width: 80px; background-image: url(images/nav_bright_multi_reg.php?text=vorwort); background-repeat: no-repeat; float: left;"><span class="hide">vorwort</span></a></li>
<li><a href="http://www.website.com" title="team" class="linkElement" style="display: block; height: 20px; width: 80px; background-image: url(images/nav_bright_multi_reg.php?text=team); background-repeat: no-repeat; float: left;"><span class="hide">team</span></a></li>
<li><a href="http://www.website.com" title="inhalt" class="linkElement" style="display: block; height: 20px; width: 80px; background-image: url(images/nav_bright_multi_reg.php?text=inhalt); background-repeat: no-repeat; float: left;"><span class="hide">inhalt</span></a></li>
<li><a href="http://www.website.com" title="linktext" class="linkElement" style="display: block; height: 20px; width: 80px; background-image: url(images/nav_bright_multi_reg.php?text=linktext); background-repeat: no-repeat; float: left;"><span class="hide">linktext</span></a></li>
</ul>
</div> |
|
|
| |
   |
 |
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Sa 14.02.2009 22:52
Titel
|
|
|
da das bild zur laufzeit des scriptes noch nicht geladen ist, sind natürlich auch die dimensionen nicht bekannt. du mußt mit dem berechnen warten, bis das bild fertig geladen ist und dann die dimensionen auslesen.
das ganze würde wahrscheinlich etwa so funktionieren:
| Code: |
window.addEvent('domready', function() {
$$('a.linkElement').each(function(el) {
var linkText = el.get('html');
if (linkText!='') {
// Pfad zum dynamischen Image
var iPath = new Image();
var rnd = Math.floor(Math.random()*1111111)
iPath.src = ('images/nav_bright_multi_reg.php?text='+linkText +'?'+rnd);
iPath.onload = function() {
// HTML zwischen <a> Tags leeren
el.empty();
// Create span Element
var iSpan = new Element( 'span', {
'class' : 'hide',
'html' : linkText
});
// Span Element einfügen
iSpan.inject(el, 'inside');
// Class setzen (background-position für hover setzen)
el.addClass('dynnav');
var iPathWidth = iPath.width;
var iPathHeight = iPath.height;
el.setProperty('style', 'display:block; width:' + iPathWidth + 'px; height: ' + iPathHeight + 'px; background-image:url(' + iPath + '); background-repeat:no-repeat; float:left;');
}
} else {
alert('kein HTML Inhalt im Link ' +el.getProperty('href'));
}
});
}); |
(ist aber nicht getestet).
Übrigens: Der IE hat ganz böse Probleme beim Auslesen von Bilddimensionen zur Laufzeit (caching und so) - daher auch der random parameter in der URL - das ist aber immernoch kein Garant für ein reibungsloses Laufen des Scriptes.
Zuletzt bearbeitet von sahnemuh am So 15.02.2009 16:17, insgesamt 3-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Impigra
Threadersteller
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Sa 14.02.2009 22:59
Titel
|
|
|
Ich habe gehofft dass Du antworten würdest 
Ich werd für heute schluss machen und das gleich am Mo. ausprobieren.
Das mit der Bildgröße klingt logisch, deswegen habe ich es mit Asset.image() und oncomplete() versucht.
Hat aber nicht so richtig hingehauen...
Ich werde hier weiter berichten
Vielen Dank schon mal 
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Sa 14.02.2009 23:04
Titel
|
|
|
| Impigra hat geschrieben: | | Ich habe gehofft dass Du antworten würdest |
Hui. danke für die Blumen 
Ja - es ist Samstag abend, ich sitze zuhause, schaue Filme und hab Langweile - was soll ich da sonst machen? 
Du kannst ja Montag berichten ob es funktioniert. Würde mich auch interessieren.
Zuletzt bearbeitet von sahnemuh am Sa 14.02.2009 23:06, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Impigra
Threadersteller
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Sa 14.02.2009 23:10
Titel
|
|
|
Jo.. geht mir so ähnlich... man muss nur Langeweile gegen Stress austauschen 
Aber jetzt ist erst mal Feierabend, kann man bei Dir in dev/null nicht weggehen?
Ich meld mich spätestens am Mo. wieder... 
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Sa 14.02.2009 23:15
Titel
|
|
|
| Impigra hat geschrieben: | Jo.. geht mir so ähnlich... man muss nur Langeweile gegen Stress austauschen
Aber jetzt ist erst mal Feierabend, kann man bei Dir in dev/null nicht weggehen?
Ich meld mich spätestens am Mo. wieder... |
Doch, kann man. Ich wohne quasi zentral im "Bermudadreieck" von drei Läden, die gut sind und die ich zu Fuß in 5 Minuten erreichen kann. Allerdings verspüre ich heute keine große Lust dazu
Langweile ist manchmal eine willkommene Abwechslung (war gestern schon los).
Ich trink jetzt gemütlich weiter Weißwein und tue gutes .
|
|
| |
|
|
Impigra
Threadersteller
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst So 15.02.2009 23:04
Titel
|
|
|
Na super...
Das Ding hat mir schon ein bisschen unter den Nägeln gebrannt...
das Problem an der Sache ist dass ich jetzt das Image-Script abändern darf...
das Fragezeichen ist nämlich nicht ausreichend... die Grafik wird mit dem Random Wert generiert.. aber das ist ohne Probleme in den Griff zu bekommen.
Die Dimension wird ausgegeben...
Einzig die url des Background-Image war in Deinem Script nicht ganz korrekt... das Image Objekt lässt sich ja nicht als Adressinformation verpacken.. deswegen hab ich
| Code: | | background-image:url(' + iPath + ') |
gegen
| Code: | | background-image:url(' + iPath.src + ') |
getauscht.
ich werde jetzt mal nachsehen ob sich das Ganze wirklich so fatal im Internet Explorer auswirkt.
Theoretisch kann die Hintergrundgrafik dann nicht im Cache liegen, was den Traffic in die Höhe treibt... und den Cach unnötig aufbäht weil jede Grafik selbst mit identischem Inhalt einen Platz im Cache belegt... für Vielsurfer auf dieser Seite natürlich schlecht...
Vielen vielen Dank
|
|
| |
|
|
Impigra
Threadersteller
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst So 15.02.2009 23:15
Titel
|
|
|
Sodele...
Erster Test im Internet Explorer 7 ...
Nix funktioniert... die DOM Manipulation funktioniert wohl überhaupt nicht...
Das <span> Element wird angelegt aber das Hintergrund Bild wird nicht eingesetzt.
Ich mach mich mal auf Fehlersuche...
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[AS]Verständnisproblem mit startDrag();
JavaScript | Verständnisproblem
mootools bzw JS: das 'this'
mootools & CO
mootools vs ie6
MooTools v1.11 problem
|
|
Willkommen auf dem Portal für Mediengestalter
