Page 2 of 2

Re: Two Javascripts, similar, but need working on mobile

Posted: Mon Sep 29, 2014 10:28 am
by Celauran
Calling $('#focus') tells jQuery to fetch the element with ID focus and create a jQuery object based on it. There's no need to do that over and over and over. It's inefficient and completely unnecessary.

Code: Select all

var focus = $('#focus');
This grabs the jQuery object and stores it in the variable focus. You can now replace all subsequent calls to $('#focus') with just focus.

Re: Two Javascripts, similar, but need working on mobile

Posted: Mon Sep 29, 2014 10:33 am
by simonmlewis
If I do this, it fails.

Code: Select all

<script type="text/javascript">
$(function() {
    var focus = $('#focus');
    var sWidth = focus.width();
    
	var len = $("#focus").find("ul li").length;
	
	var index = 0;
var picTimer;
	
	var btn = "<div class='btnBg'></div><div class='btn'>";
	for(var i=0; i < len; i++) {
		btn += "<span></span>";
	}
	btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
	$("focus").append(btn);
	$("focus .btnBg").css("opacity",0.9);

	$("focus .btn span").css("opacity",0.9).mouseover(function() {
		index = $("focus .btn span").index(this);
		showPics(index);
	}).eq(0).trigger("mouseover");

	$("focus .preNext").css("opacity",0.8).hover(function() {
		focus.find("ul").stop(true,false).animate({"left":nowLeft},300);
	},function() {
		focus.find("ul").stop(true,false).animate({"left":nowLeft},300);
	});

	$("focus .pre").click(function() {
		index -= 1;
		if(index == -1) {index = len - 1;}
		showPics(index);
	});

	$("focus .next").click(function() {
		index += 1;
		if(index == len) {index = 0;}
		showPics(index);
	});

	$("focus ul").css("width",sWidth * (len));
	
	$("focus").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			showPics(index, focus);
			index++;
			if(index == len) {index = 0;}
		}, 50000); 
	}).trigger("mouseleave");
	

	function showPics(index) { //????
		var nowLeft = -index*sWidth; //??index???ul???left?
		$("focus ul").stop(true,false).animate({"left":nowLeft},300); //??animate()??ul?????????position
		//$("focus .btn span").removeClass("on").eq(index).addClass("on"); //??????????????
		$("focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate

({"opacity":"1"},300);
	}
});
</script>

Re: Two Javascripts, similar, but need working on mobile

Posted: Mon Sep 29, 2014 10:37 am
by Celauran
simonmlewis wrote:If I do this, it fails.
You'll need to be a little more specific than that.

Re: Two Javascripts, similar, but need working on mobile

Posted: Mon Sep 29, 2014 10:40 am
by simonmlewis
Ok - if I do what I pasted there, none of the slider arrows load, the dots at the bottom of the iagme don't load. Nothing at all that happens normals, work at all.

Re: Two Javascripts, similar, but need working on mobile

Posted: Mon Sep 29, 2014 10:42 am
by simonmlewis
What this tool, is meant to do, is load up arrows in the foreground on left and right, with some tiny squares bottom right of image (over the top of it) to show what images you are on, and how many are there. If I do as pasted, none of that appears. If I leave the #focus in, it all works.

Re: Two Javascripts, similar, but need working on mobile

Posted: Mon Oct 06, 2014 8:44 am
by simonmlewis
Any news on this? I'm not further to getting it working. I've explained the issue, and been told about the focus bit.
If someone could just say "do this, and then do that", "and here's how it works", that would be great.