RE: JQuery Home Scroller Issue with Width and Height

HI,

I’m using a homescroller which takes the width and height of the object which in this instance happens to be the image.

The issue is it only sets the width and height on rare occasions maybe 1/5 times if you refresh the page.

Could anyone give me any advice why this is as I can’t see why?

Also the scrolling feasture doesn’t seem to be working with a error about the Jquery which I’m unsure of.

Any help would be great.

Thanks for looking

http://roller.rollertestingserver.co.uk/


;(function($) {

	$.fn.homescroller = function(settings){

		settings = jQuery.extend({
			num: 0
		},settings);

		this.each(function() {

			var obj = $(this);
			var w = null;
			var h = null;
			var idx = 1;

			function loopcheck() {
				$("#homescroller-images li:nth-child("+idx+")", obj).hide();
				idx++;
				if (idx>settings.num) {
					//looped
					$("#homescroller-overlays li:nth-child(1)", obj).show().css({marginLeft: 0});
					$("#homescroller-images li:nth-child(1)", obj).show();
					$("#homescroller-overlays li:nth-child("+(settings.num+1)+")", obj).hide().css({marginLeft: (1-w)});
					$("#homescroller-images li:nth-child("+(settings.num+1)+")", obj).hide();
					idx=1;
				}
				timeout = setTimeout(function(){ animate(); }, 8000);
			};

			function animate() {
				overlay_out();
				$("#homescroller-images li:nth-child("+(idx+1)+")", obj).fadeIn(
					{ duration:1600, easing:'easeOutCubic', complete:loopcheck }
				);
			};

			function overlay_out() {
				$("#homescroller-overlays li:nth-child("+idx+")", obj).animate(
					{ marginLeft: (1-w) },
					{ queue:false, duration:700, easing:'easeInCubic', complete:overlay_in }
				);
			};
			
			function overlay_in() {
				$("#homescroller-overlays li:nth-child("+idx+")", obj).hide();
				$("#homescroller-overlays li:nth-child("+(idx+1)+")", obj).show().animate(
					{ marginLeft: 0 },
					{ queue:false, duration:700, easing:'easeOutCubic' }
				);
			};

			//setup
			if (settings.num>0) {
				w = obj.width();
				h = obj.height();

				var ul_overlays = $("<ul id=\\"homescroller-overlays\\" />");
				ul_overlays.width(w);
				ul_overlays.height(h);
				for (var i=0; i<settings.num; i++) {
					$("<li style=\\"margin-left: -"+w+"px; background-image: url('/images/homescroller/overlay-"+i+".png');\\"></li>").width(w).height(h).hide().appendTo(ul_overlays);
				}
				ul_overlays.append($('li:first-child', ul_overlays).clone());
				$('li:first-child', ul_overlays).css({marginLeft: 0}).show();

				var ul_images = $("<ul id=\\"homescroller-images\\" />");
				ul_images.width(w);
				ul_images.height(h);
				for (var i=0; i<settings.num; i++) {
					$("<li style=\\"background-image: url('/images/homescroller/image-"+i+".jpg');\\"></li>").width(w).height(h).hide().appendTo(ul_images);
				}
				ul_images.append($('li:first-child', ul_images).clone());
				$('li:first-child', ul_images).css({marginLeft: 0}).show();

				obj.html('');
				obj.append(ul_images);
				obj.append(ul_overlays);

				//init
				var timeout = setTimeout(function(){ animate(); }, 8000);
			}

		});
	};
})(jQuery);
//start it
$(document).ready(function() {
	$('#homescroller').homescroller({num: 2});
});