Laden der Seite

[jASScript]

Hi
Wie löse ich das Problem mit Jquery?
Wenn ich die Seite Lade ist das animierte Tooltip geöffnet erst wenn ich mit der Maus darüber fahre schließt es und dann Funktioniert es auch mit dem Hover ganz normal. Wie bekomme ich es hin das es beim Laden der Seite zu ist. die erste Zeile im meiner js Datei sieht so aus:
jQuery(document).ready(function()

 

[GetIT]

Das sind ja massig Informationen.

Also ich versuch mal aus der Informationsflut schlau zu werden.

jQuery(document).ready(function()

heißt, der Code der da drin steht wird ausgeführt, wenn die Seite (komplett) fertig geladen ist.
Also wird da drinnen sowas in der Art stehen:

jQuery(document).ready(function() {
    öffneTooltip()
});

Also musst du den Code (in diesem Bsp. "öffneTooltip()") einfach rausziehen, also:

$().ready(function() {      // ist das gleiche wie jQuery(document).ready(function() - wenn jQuery nicht im Strict-Mode läuft
    ...
});
öffneTooltip()

 

[jASScript]

Das ist der code dazu habe es rausgezogen aber geht auch nicht.

$().ready(function(){
	});
 
	$("#iconbar li").hover(
function(){
	var iconName = $(this).find("img").attr("src");
	var origen = iconName.split("n.")[0];
		$(this).find("img").attr({src: "" + origen + "o.gif"});
		$(this).find("span").animate({opacity: "show", top: "-60"}, "slow");
},
function(){
	var iconName = $(this).find("img").attr("src");
	var origen = iconName.split("o.")[0];
		$(this).find("img").attr({src: "" + origen + "n.gif"});
		$(this).find("span").animate({opacity: "hide", top: "-50"}, "fast");
	});

und hier nochmal mein code

jQuery(document).ready(function(){
 
	$("#iconbar li").hover(
function(){
	var iconName = $(this).find("img").attr("src");
	var origen = iconName.split("n.")[0];
		$(this).find("img").attr({src: "" + origen + "o.gif"});
		$(this).find("span").animate({opacity: "show", top: "-60"}, "slow");
},
function(){
	var iconName = $(this).find("img").attr("src");
	var origen = iconName.split("o.")[0];
		$(this).find("img").attr({src: "" + origen + "n.gif"});
		$(this).find("span").animate({opacity: "hide", top: "-50"}, "fast");
	});
	});

 

[kkapsner]

So funktioniert das nicht.
Der Code, der den Tooltip öffnet muss genauso im document.ready (das gefeuert wird, wenn das DOM fertig aufgebaut ist und nicht wenn die Seite komplett geladen wurde) ausgeführt werden, ABER der Code im hover() muss nochmal außerhalb ausgeführt werden:

jQuery(document).ready(function(){
	function open(){
		var iconName = $(this).find("img").attr("src");
		var origen = iconName.split("n.")[0];
		$(this).find("img").attr({src: "" + origen + "o.gif"});
		$(this).find("span").animate({opacity: "show", top: "-60"}, "slow");
	}
	function close(){
		var iconName = $(this).find("img").attr("src");
		var origen = iconName.split("o.")[0];
		$(this).find("img").attr({src: "" + origen + "n.gif"});
		$(this).find("span").animate({opacity: "hide", top: "-50"}, "fast");
	}
	$("#iconbar li").hover(open, close);
	open();
});

@GetIT: es ist keine gute Idee, etwas zu empfehlen, dass laut jQuery-Doc

not recommended

ist...

 

[jASScript]

Danke aber ich bekomme das gleiche Ergebnis wie vorher die tools werden erst nach dem ersten überfahren geschlossen.

 

[kkapsner]

Oh... falsch gelesen... dachte, du willst das so haben.

Wenn es am Anfang zu sein soll, musst du natürlich close() aufurfen und nicht open()...

 

[jASScript]

Hatte ich auch schon versucht immer noch das gleiche Ergebnis.

jQuery(document).ready(function(){
	function open(){
		var iconName = $(this).find("img").attr("src");
		var origen = iconName.split("n.")[0];
		$(this).find("img").attr({src: "" + origen + "o.gif"});
		$(this).find("span").animate({opacity: "show", top: "-60"}, "slow");
	}
	function close(){
		var iconName = $(this).find("img").attr("src");
		var origen = iconName.split("o.")[0];
		$(this).find("img").attr({src: "" + origen + "n.gif"});
		$(this).find("span").animate({opacity: "hide", top: "-50"}, "fast");
	}
	$("#iconbar li").hover(open, close);
	close();
});

 

[mikdoe]

Bitte benutze HTML Tags, jASScript und es wäre auch gut vorher zu sagen, was man schon probiert hat.

 

[kkapsner]

Kannst du mal einen Testlink geben?

 

[jASScript]

Habe es erst versucht nachdem kkapsner mir es geschrieben hatte. Habe nur es gleich mit close() versucht.
Leider gibt es keinen Testlink. Aber das ist einfach eine Sprechblase mit der Erklärung was was Zeichen heißt wenn mann mit der Maus darüber fährt. Die Blase ist beim Laden halt offen und beim überfahren schließt sie und dann geht es auch normal. Achso danke für deine Mühe.

 

[kkapsner]

Mist - hab' mir den Code nicht genau genug angesehen...

jQuery(document).ready(function(){
	function open(){
		var iconName = $(this).find("img").attr("src");
		var origen = iconName.split("n.")[0];
		$(this).find("img").attr({src: "" + origen + "o.gif"});
		$(this).find("span").animate({opacity: "show", top: "-60"}, "slow");
	}
	function close(){
		var iconName = $(this).find("img").attr("src");
		var origen = iconName.split("o.")[0];
		$(this).find("img").attr({src: "" + origen + "n.gif"});
		$(this).find("span").animate({opacity: "hide", top: "-50"}, "fast");
	}
	$("#iconbar li").hover(open, close).each(close);
});

 

[jASScript]

Ok alles fast gut soweit jetzt laden die Bilder aber erst nach dem überfahren

 

[kkapsner]

Welche Bilder genau? In den Tooltips oder die Icons? Bei den Icons würde ich ja sowieso nicht mit verschiedenen Bildern arbeiten, sondern mit einer, die beide Zustände enhält und dann nur den gewünschten Teil anzeigen - Stichwort CSS sprites.

 

[jASScript]

Die Icons werden nicht angezeigt. Das mit dem sprites werde ich versuchen. Aber ohne muss es doch auch gehen oder. Werde mir auf jeden das mit den sprites genau ansehen. danke dir nochmal.

 

[kkapsner]

Bitte - gern geschehen.