Two Javascripts, similar, but need working on mobile

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

simonmlewis wrote:If I do this, it fails.
You'll need to be a little more specific than that.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply