✔ [jQuery] $(window).ready(function ()...

[xamunrax]

Hallo,

ich habe mit Hilfe eines Tutorials einen ProduktSlider (ähnlich wie der von apple.de) gebaut, nun habe ich folgendes Problem, im Tutorial wird der Slider beim Laden der Seite gestartet, da der Slider bei mir aber nicht von beginn an auf der Homepage ist, sondern erst später mit (appendTo) der Seite hinugefügt wird, kann das Script beim Laden der Seite natürlich den Slider nicht finden und somit bleibt er ohne Funktion.

Hier Ausschnitte aus dem Code:

CSS:

        #sliderGallery {
	        background: url(../img/product_slider_bg.png) no-repeat;
            overflow: hidden;
            position: relative;
            padding: 10px;
            height: 160px;
            width: 780px;
        }
        
        #sliderGallery ul {
            position: absolute;
            list-style: none;
            overflow: none;
            white-space: nowrap;
            padding: 0;
            margin: 0;
        }
        
        #sliderGallery ul li {
            display: inline;
			margin:0;
        }
		#sliderGallery ul li p {
            display: inline;
			margin:0;
        }
        
        #slider {
            width: 750px;
            height: 22px;
            margin-top: 140px;
            margin-left: 5px;
            padding: 1px;
            position: relative;
            background: url(../img/slider_bg.png) no-repeat;
        }
        
        #handle {
            position: absolute;
            cursor: move;
			margin-top: 1px;
            height: 22px;
            width: 198px;
            top: 0;
            background: url(../img/slider.png) no-repeat;
			background-position: 50% 0;
            z-index: 100;
        }

HTML:

<div id="sliderGallery">
				            <ul>
								
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header"></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header"></li>

								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>
								<li><img src="img/red_dot.png" width="130" height="130" alt="Header" /></li>

				            </ul>
				            <div id="slider">
								<div id="handle"></div>
				            </div>
				        </div>

Der HTML-Code wird erst später per (appendTo) der seite hinzugefügt!



und zu aller letzt JS (jQuery):

$(window).ready(function () {
  $('#sliderGallery').each(function () {
    var ul = $('ul', this);
    var productWidth = ul.innerWidth() - $(this).outerWidth();

    var slider = $('#slider', this).slider({ 
      handle: '#handle',
      minValue: 0, 
      maxValue: productWidth, 
      slide: function (ev, ui) {
        ul.css('left', '-' + ui.value + 'px');
      }, 
      stop: function (ev, ui) {
        ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
      }
    });
  });
});

und genau hier liegt das Problem, da er die Funktion schon zu beginn des Seitenaufrufs läd und nicht erst wenn der HTML (s.o.) geladen wird.


Vielen Dank im voraus!

gruß,
Marco

 

[Sven Mintel]

Moin Marco,

Dann rufe doch das Ganze erst auf, wenn auch alles verfügbar ist(wann und wie, kann ich dir angesichts des geposteten Codes nicht sagen, weil es daraus nicht hervorgeht)