Problem mit JQuery Script

DirtyWorld · 16.03.2010

Hallo,
ich versuche mich grad etwas an JQuery. Bin natürlich auch wieder Javascripranfänger

wodurch das ganze nicht leicheter wird.
Ich versuche ein Bild in ein Div zu laden aber nur beim hover.
Das Bild befindet sich in der Liste in der sich auch der Link zum hovern befindet.
Leider funktioneirt das nicht. Das ein und ausblenden ohne dem einladen in das Div funktioniert.

PHP:

$(document).ready(function(){
  $('span').hover(
/*handlerIn function*/
  function () {
    $('#hoverpos').load(function(){
       $('.image').show();          
  },
/*handlerout function*/
  function () {
    $('.image').hide();  }
   );}

HTML:

<!DOCTYPE  html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
 <style>
   #hoverpos
   {
     position:absolute
     width: 240px;
     height: 160px;
   }
   img
   {
     display:none;
   }   
  </style>
</head>
<body>
  <div id="hoverpos">
    
  </div>
  <ul class="menu-uebersichtmenu"  id="uebersicht">
    <li class="item17"><a href="http://www.google.de"  title="jquery"><img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg"  width="240" height="160" class="image" alt="" />
      <span>google17</span>
      </a>
    </li>
    <li class="item18"><a href="http://www.google.de"  title="jquery"><img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg"  width="240" height="160" class="image" alt="" />
      <span>google18</span>
      </a>
    </li>
</body>
</html>

bzw. hier der JBin Link: JS Bin

viele Grüße

MyBad · 16.03.2010

AW: Problem mit JQuery Script

Ich finde da auch nirgendwo dein Skript im Quellcode!?

dlogic · 16.03.2010

AW: Problem mit JQuery Script

Ich auch nicht.... das Script muss ja auch initialisiert werden:

<script>
function(run); //oder so mit parametern
</script>

Dies wird meist am Ende einer Webseite eingebunden.. oder nach den Div's

Duddle · 16.03.2010

AW: Problem mit JQuery Script

Ein Experte bin ich für jQuery definitiv nicht, aber du scheinst da etwas mit den Klammern durcheinander gekommen zu sein. Das siehst du unter anderem daran, dass die Firefox-Fehlerkonsole (die du hättest anschauen können/sollen) meckert.

Aber selbst wenn ich alle Klammern und Funktionen richtig schliesse, funktioniert (scheinbar) nicht, was du willst:

PHP:

$(document).ready(
        function() {
		$('span').hover(
			function () {
				$('#hoverpos').load(function(){
					$('.image').show();          
				})
			},
			function () {
				$('.image').hide();  
			}
		);
	});

Was willst du denn erreichen?

Duddle

DirtyWorld · 16.03.2010

AW: Problem mit JQuery Script

Hi,
äh ja das laden steht antürlich nciht im Quellcode weil ich das über jBin geschrieben hab. Das müßte ich dann später für die Webseite noch einfügen.
Ich hatte auch noch vergessen das absolute

osition; zu schließen. Gut daran liegt das ja nicht das es nicht funktioniert.

Also ich möchte die Bilder der Links in das Div (#hoverpos) laden. Aber nur beim hover und beim verlassen solls wieder ausgeschaltet werden.

Viele Grüße

Duddle · 16.03.2010

AW: Problem mit JQuery Script

Okay, richtig geraten:

PHP:

$(document).ready(
        function() {
		$('span').hover(
			function () {
				var klon = $(this).prev().clon_e();
				$('#hoverpos').append(klon.show());
			},
			function () {
				$('#hoverpos').empty();
			}
		);
	});

Edit: Das Forum zensiert c_l_o_n_e als Wort, darum musst du oben in der Funktion mal den Unterstrich rausnehmen.

Wie gesagt, jQuery ist mir noch etwas fremd und es gibt bestimmt einen saubereren Weg als den von mir gewählten. Ausserdem gibt es für diese Funktionalität sowieso schon zig PlugIns so weit ich weiß.

Duddle

sokie · 16.03.2010

AW: Problem mit JQuery Script

ich hab keine Ahnung, wohin die vielen klassen führen sollen - keine von ihnen macht Sinn (Tipp: lass die weg!).
benutze die aktuelle Version von jquery

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

wenn du im CSS auf den allgemeinen selektor "img" ein display:none; legst wirkt sich das auf alle imgs aus. (Tipp: die ID des übergeordneten Elements benutzen "#uebersicht li img" engt die Selektion auf die richtigen Elemente ein.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#uebersicht span").hover(function(){
    $(this).prev().*****().appendTo($("#hoverpos"));
  }, function(){
    $("#hoverpos").html("");
  });
});
</script>
<meta name="language" content="de" />
<style>
#hoverpos{
  width: 260px;
  height: 160px;
}
li img{
  display: none;
}
</style>

<title></title>

</head>

<body>
  <div id="hoverpos">
    
  </div>
  <ul id="uebersicht">
    <li>
      <a href="http://www.google.de"  title="jquery"><img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg"  width="240" height="160" alt="" />
      <span>google17</span>
      </a>
    </li>
    <li>
      <a href="http://www.google.de"  title="jquery"><img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg"  width="240" height="160" alt="" />
      <span>google18</span>
      </a>
    </li>
</ul>
</body>
</html>

DirtyWorld · 16.03.2010

AW: Problem mit JQuery Script

Hi,
erstmal danke für deine Hilfe.
Na dann war ich ja garnicht so weit von einem funktionierenden Ergebnis entfernt

.
Eine Verständnisfrage, warum wird jetzt in der Variablen klon einmal in deutsch und einmal in englisch geschrieben?

@sokie: Also ich bin der absolute JS Neuling. Das ich zuviele Klassen verwende kann schon sein ich weiß es aber nicht besser. Für mich war erstmal die premise gegeben das es funktioniert. Und das hat es erstmal.
Und das mit dem CSS ist mir klar. Das hier war nur ein Beispielkonstrukt. In der eigentlichen Webseite ist das etwas sinnvoller aufgebaut.

Viele Grüße

Duddle · 16.03.2010

AW: Problem mit JQuery Script

DirtyWorld schrieb:
Eine Verständnisfrage, warum wird jetzt in der Variablen klon einmal in deutsch und einmal in englisch geschrieben

:uhm:

Naja, das clon_e() ist eben die entsprechende Funktion und eine Variable kannst du nun mal benennen wie du lustig bist (mit minimalen Ausnahmen). Unterschiedliche Sprachen haben hier überhaupt keine Bedeutung

Duddle

Edit: Gott, ist das fehlgeleitet, c_l_o_n_e zu zensieren.