Page 1 of 2

Two Javascripts, similar, but need working on mobile

Posted: Wed Sep 17, 2014 5:06 am
by simonmlewis
I have a gallery slider that uses javascript. It get used via a <div id='focus'>.
Trouble is, 'focus' is used for the desktop, but I need it working for a different DIV for mobile (positioned elsewhere on the page).

This is the desktop one:

Code: Select all

<script type="text/javascript" src="/js/jquery-1.js"></script>
<script type="text/javascript">
$(function() {
	var sWidth = $("#focus").width(); 
	var len = $("#focus ul li").length;
	var index = 0;

	
	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() {
		$(this).stop(true,false).animate({"opacity":"0.9"},300);
	},function() {
		$(this).stop(true,false).animate({"opacity":"0.9"},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);
			index++;
			if(index == len) {index = 0;}
		}); 
	}).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>

<div class='homeslider'>
<link href='/source/slider_productdesktop.css' rel='stylesheet' type='text/css' />
<div id='focus'>
	    <ul style='left: 0px; width: 4000px;'>";
			$string = "$row->photo";
      $token = strtok($string,"|");
      
      while($token)
      {
			echo "<li><a href=/images/productphotos/$token' class='MagicZoom' id='Zoomer' rel='selectors-effect-speed: 600; zoom-position: inner;' /><img src='/images/productphotos/$token'></a></li>";
			$token = strtok("|");
			}
$token = NULL;
     echo "</ul>
</div>
If I set it so focus become focusm, and alter a duplicated javascript to be #focusm, all the functions of the desktop one stop working.

So how can I use the slider twice, preferablly with just one Javascript?
Incidentlaly, there are two CSS files, but they just control the layout, which is fine.

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

Posted: Mon Sep 22, 2014 2:21 am
by simonmlewis
Sorry, i don't see there where I can make this functino work in two places, with one being modified?

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

Posted: Mon Sep 22, 2014 3:26 am
by requinix
Obviously it would be best if you didn't have to use two elements and could just reuse the same one for both desktop and mobile. Tried that yet?

Do you need it working for both at the same time? I don't think so but it kinda sounds like that's what you're saying.
Assuming not, rewrite the Javascript to work off $("#focus") and not some combination of selectors like $("#focus ul"). For example,

Code: Select all

var len = $("#focus").find("ul li").length;
Edit showPics() so it takes the object as an argument,

Code: Select all

function showPics(index, focus) {

Code: Select all

focus.find("ul").stop(true,false).animate({"left":nowLeft},300);
and, of course, pass a value in for it when you call the function. Maybe just passing in $("#focus") for the moment.

Once you've confirmed everything is still working (for desktop), at the beginning of the code, decide whether to use #focus or #focusm, shove it with $() into a variable, and substitute that variable everywhere you were using $("#focus").

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

Posted: Mon Sep 22, 2014 3:32 am
by simonmlewis
You are assume not, correctly.
I guess the browser will look for them twice, but for mobile, the mobile one would be used. And for Desktop, the desktop one would be used. And yes I have tried it asis, but it conflicts, and stops the desktop one working.

Problem is, after all this ..... I don't think I can get the slider script to "auto height". I may be able to get it to auto width, but with DIVs I dont' think you can set the height to auto, unless "inline-block" works in the CSS.

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

Posted: Mon Sep 22, 2014 5:50 am
by simonmlewis
Ok the good news is the changes, still work.
I don't understand "shove it with $() into a variable" though, sorry.
I get the focusm.... I think you are saying to make a COPY of the javscript, and change all #focus to #focusm in th copy.

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

Posted: Mon Sep 22, 2014 12:23 pm
by requinix
It'll probably be easier to explain with code. What do you have now?

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

Posted: Mon Sep 22, 2014 4:58 pm
by simonmlewis

Code: Select all

<script type="text/javascript">
$(function() {
	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>

<div class='homeslider'>
<link href='/source/slider_productdesktop.css' rel='stylesheet' type='text/css' />
<div id='focus'>
	    <ul style='left: 0px; width: 4000px;'>
	    <li><a href='http://www.site.co.uk/images/productphotos/$row->photoprimary' class='MagicZoom' id='Zoomer' rel='selectors-effect-speed: 600; zoom-position: inner;' /><img src='http://www.site.co.uk/images/productphotos/$row->photoprimary'></a></li>
	    ";
			$string = "$row->photo";
      $token = strtok($string,"|");
      
      while($token)
      {
			echo "<li><a href='http://www.site.co.uk/images/productphotos/$token' class='MagicZoom' id='Zoomer' rel='selectors-effect-speed: 600; zoom-position: inner;' /><img src='http://www.site.co.uk/images/productphotos/$token'></a></li>";
			$token = strtok("|");
			}
$token = NULL;
     echo "</ul>
</div>

Not added the DIVs for mobile yet, but I would assume part of this is to do that?

For now it's just this.

<div class='product_gallerymobile'>
<img src='http://www.site.co.uk/images/productpho ... otoprimary' />
</div>

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

Posted: Mon Sep 29, 2014 7:36 am
by simonmlewis
Any more news on this - it sounded like we were close to a solution.

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

Posted: Mon Sep 29, 2014 8:57 am
by Celauran
You still haven't implemented most of requinix's suggestions. You're still using $('#focus whatever') all over the place rather than caching $('#focus') and using it throughout.

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

Posted: Mon Sep 29, 2014 8:59 am
by simonmlewis
All the examples he gave I have done.
What have I missed?

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

Posted: Mon Sep 29, 2014 9:11 am
by Celauran
As I said, you're still using $('#focus') all over the place. Grab $('#focus') once and store it in a variable so you can reference the variable throughout the remainder of your code, making swapping out #focus for #focusm trivial.

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

Posted: Mon Sep 29, 2014 9:44 am
by simonmlewis
Grab $('#focus') once and store it in a variable so you can reference the variable throughout the remainder of your code
Huh?
I am not a JS writer so I don't know how you actually do that... sorry.

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

Posted: Mon Sep 29, 2014 9:52 am
by Celauran
Same way you would in PHP or any other language, really.

Code: Select all

$(function() {
    var focus = $('#focus');
    var sWidth = focus.width();
etc.

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

Posted: Mon Sep 29, 2014 9:53 am
by Celauran
Once you've got that working -- and that should be relatively trivial -- you can expand it to accept a parameter rather than hardcoding #focus

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

Posted: Mon Sep 29, 2014 9:59 am
by simonmlewis
I know I have just copied what you put, but is this *it*?

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>
You say you can expand it to accept a parameter rather than hardcoding #focus - I don't know what you mean. I really don't.
I'm here because i'm completely lost with it.
I need basicallyl an answer to how I make it work for Desktop, and then be able to use that same code but in a mobile format. I can then tell the mobile version to perhaps use a secondary CSS file that I can modify to suit.

But until I know how the JS runs, I'm lost.