Page 2 of 3

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 3:52 am
by simonmlewis
Im trying to see how to make it touch-draggable so it can be used on a phone/ipad.

http://stackoverflow.com/questions/6360 ... ch-devices
This seems to help, but doesn't really help me to know if it will work with me, or how to implement it onto mine.

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 6:45 am
by Celauran
This comment seems to answer the 'how':
I included the library just after jquery-ui library and before the script calling the .slider() function. No further row of code had to be written.
Whether or not it will work for your implementation, you'll have to test and let us know.

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 7:25 am
by simonmlewis

Code: Select all

	<link rel="stylesheet" href="/js/priceslider/jquery-ui.css">
	<script src="/js/priceslider/jquery-1.js"></script>
	<script src="/js/priceslider/jquery-ui.js"></script>
	
	<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

	<script>
	$(function() {
	$('#widget').draggable();
	var pricemin = $("#pricemin");
var pricemax = $("#pricemax");
var mn = pricemin.val() ? parseInt(pricemin.val().replace('$', '')) : 50;
var mx = pricemax.val() ? parseInt(pricemax.val().replace('$', '')) : 450;
var values = [mn, mx];

$("#slider").slider({
  value: 100,
  min: 1,
  max: 300,
  values: values,
  step: 1,
  slide: function (event, ui) {
    $("#pricemin").val("" + ui.values[0]);
    $("#pricemax").val("" + ui.values[1]);
  }
});
$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));
	});
	</script>
This prevents the sliders from moving altogether.

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 7:35 am
by simonmlewis
Ok I have found that I needed to download the js file, so here it is at the moment:
the slider works, but as I say, you cannot slide them on an iphone.

Code: Select all

	<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="/js/priceslider/jquery.ui.touch-punch.min.js"></script>

	<link rel="stylesheet" href="/js/priceslider/jquery-ui.css">
	<script src="/js/priceslider/jquery-1.js"></script>
	<script src="/js/priceslider/jquery-ui.js"></script>
	<script>
	$('#widget').draggable();
	</script>

	<script>
	$(function() {
	var pricemin = $("#pricemin");
var pricemax = $("#pricemax");
var mn = pricemin.val() ? parseInt(pricemin.val().replace('$', '')) : 50;
var mx = pricemax.val() ? parseInt(pricemax.val().replace('$', '')) : 450;
var values = [mn, mx];
$('#widget').draggable();
$("#slider").slider({
  value: 100,
  min: 1,
  max: 300,
  values: values,
  step: 1,
  slide: function (event, ui) {
    $("#pricemin").val("" + ui.values[0]);
    $("#pricemax").val("" + ui.values[1]);
  }
});
$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));
	});
	</script>

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 8:37 am
by Celauran
What is #widget?

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 8:38 am
by simonmlewis
That confused me too actually. I assume it tied in generically with the rest of the slider.
If I make it the same as the function #slider, it doesn't work.
But ALL the reports on this addition use that word.

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 8:45 am
by Celauran
simonmlewis wrote:it doesn't work.
You'll have to elaborate on this. Also, do you have something with markup and scripting we can look at? Very hard to debug a black box.

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 8:54 am
by simonmlewis
Well all the attachment that was in the ZIP is the same.

This is the content of the third file (jquery.ui.touch-punch.min.js):

Code: Select all

/*!
 * jQuery UI Touch Punch 0.2.3
 *
 * Copyright 2011–2014, Dave Furfero
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Depends:
 *  jquery.ui.widget.js
 *  jquery.ui.mouse.js
 */
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

This is the script from the top:

Code: Select all

	<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="/js/priceslider/jquery.ui.touch-punch.min.js"></script>

	<link rel="stylesheet" href="/js/priceslider/jquery-ui.css">
	<script src="/js/priceslider/jquery-1.js"></script>
	<script src="/js/priceslider/jquery-ui.js"></script>
	<script>
	$('#widget').draggable();
	</script>

	<script>
	$(function() {
	var pricemin = $("#pricemin");
var pricemax = $("#pricemax");
var mn = pricemin.val() ? parseInt(pricemin.val().replace('$', '')) : 50;
var mx = pricemax.val() ? parseInt(pricemax.val().replace('$', '')) : 450;
var values = [mn, mx];
$('#widget').draggable();
$("#slider").slider({
  value: 100,
  min: 1,
  max: 300,
  values: values,
  step: 1,
  slide: function (event, ui) {
    $("#pricemin").val("" + ui.values[0]);
    $("#pricemax").val("" + ui.values[1]);
  }
});
$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));
	});
	</script>
And this is the "form".

Code: Select all

<div class='thumbnailstop_pagenum'>
<div>
<form method='GET' action='/index.php'>
<input type='hidden' name='page' value='search'>
<input type='hidden' name='search' value='$search'>
  <div class='search-price'>Min: 
  &pound;<input type='text' id='pricemin' name='pricemin' class='slidepricefield' ";
  if (isset($pricemin)) { echo " value='$pricemin'";}
  echo ">
  </div>

  <div class='search-price'>Max: 
  &pound;<input type='text' id='pricemax' name='pricemax'  class='slidepricefield' ";
  if (isset($pricemax)) { echo " value='$pricemax'";}
  echo ">
  </div>

  <div class='search-submit'>  
  <input type='submit' value='Update' class='slidesubmit'>
  </form>
  </div>  
  
  <div class='search-slider'><div class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all' id='slider' style='width: 290px'></div>
  </div>
  <div style='clear: both' /></div>
</div></div>

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 10:18 am
by simonmlewis
error.jpg
error.jpg (35.42 KiB) Viewed 2899 times
Good news. This works on PC and Mobile, but when it loads, it has errors where the numbers should be.

Code: Select all

    <link href="/js/searchslider/jquery.css" rel="stylesheet">
    <link href="/js/searchslider/jquery-ui-1.css" rel="stylesheet">
    <script src="/js/searchslider/ga.js" async="" type="text/javascript"></script><script src="/js/searchslider/jquery_002.js"></script>
    <script src="/js/searchslider/jquery-ui.js"></script>
    <script src="/js/searchslider/jquery.js"></script>

	<script>
	$(function() {
	var pricemin = $("#pricemin");
var pricemax = $("#pricemax");
var mn = pricemin.val() ? parseInt(pricemin.val().replace('$', '')) : 50;
var mx = pricemax.val() ? parseInt(pricemax.val().replace('$', '')) : 450;
var values = [mn, mx];

	
	
	        
          $( "#slider-range" ).slider({
            range: true,
            min: 1,
            max: 300,
            values: values,
            step: 1,
            slide: function( event, ui ) {
                  $("#pricemin").val("" + ui.values[0]);
    $("#pricemax").val("" + ui.values[1]);
            }
          });
$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));
        });
	</script>
	
	


<div class='thumbnailstop_pagenum'>
<div>
<form method='GET' action='/index.php'>
<input type='hidden' name='page' value='search2'>
<input type='hidden' name='search' value='$search'>
  <div class='search-price'>Min: 
  &pound;<input type='text' id='pricemin' name='pricemin' class='slidepricefield' ";
  if (isset($pricemin)) { echo " value='$pricemin'";}
  echo ">
  </div>

  <div class='search-price'>Max: 
  &pound;<input type='text' id='pricemax' name='pricemax'  class='slidepricefield' ";
  if (isset($pricemax)) { echo " value='$pricemax'";}
  echo ">
  </div>

  <div class='search-submit'>  
  <input type='submit' value='Update' class='slidesubmit'>
  </form>
  </div>  
  
  <div class='search-slider'>      <div class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all' id='slider-range'><div class='ui-slider-range ui-widget-header ui-corner-all'></div><a style='left: 26%;' class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a><a style='left: 51.8%;' class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a></div></div>
  </div>
  <div style='clear: both' /></div>
</div>

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 10:30 am
by Celauran

Code: Select all

$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));
Where is #slider?

Re: Price Range Slider - how do I implement this into a quer

Posted: Fri Dec 11, 2015 11:01 am
by simonmlewis
Ahh don't worry, I have totally and utterly cracked it.
I noticed the errors, fixed them, and even got it to be responsive too.

The only bit in the CSS I cannot suss (and was there before), is the middle colouring that moves with it. Tho that's not vital.

IT works on a phone really nicely.

Re: Price Range Slider - how do I implement this into a quer

Posted: Mon Dec 14, 2015 4:43 am
by simonmlewis

Code: Select all

if(isset($_GET['pricemin']))
{
    $pricemin = $_GET['pricemin'];
    $_SESSION['pricemin']=$pricemin;
} elseif (isset($_SESSION['pricemin'])) {
    $pricemin=$_SESSION['pricemin'];
}


if(isset($_GET['pricemax']))
{
    $pricemax = $_GET['pricemax'];
    $_SESSION['pricemax']=$pricemax;
} elseif (isset($_SESSION['pricemax'])) {
    $pricemax=$_SESSION['pricemax'];
}
This is now causing me an issue, strangely.

If the person is on a category page and changing the values, it's great. I can make it work with page numbers as well.

But if I then go to a different category page, it holds that value, and then it shows nothing is available.... as that price range may not be in that other category. IE. Going from £100 shirts... to keyrings?!

So I need it to identify - I think - if the $categories value is now different, or if the page itself is different too.
I suppose I can create different variables for the different page to avoid it (catpricemin, subcatpricemin, searchpricemin...), but not for different categories.

Re: Price Range Slider - how do I implement this into a quer

Posted: Mon Dec 14, 2015 5:39 am
by simonmlewis
This may have flaws, but this is working.
Can you see a way I can tidy this up??

It checks what is posted.
It then asks if that is the same as what is in $c.
But if the page has only just opened, $c will be empty, or will have a valued from the previous page (which is set below the code).

Code: Select all

// first check that the catid is same or new

// if new catid
$catnew= isset($_GET['c']) ? $_GET['c'] : null;
$c = $_SESSION['c'];

  if ($c <> $catnew)
    {
    $pricemin = 0;
    $pricemax = 500;
    }
  else
  {
if(isset($_GET['pricemin']))
{
    $pricemin = $_GET['pricemin'];
    $_SESSION['pricemin']=$pricemin;
} elseif (isset($_SESSION['pricemin'])) {
    $pricemin=$_SESSION['pricemin'];
}


if(isset($_GET['pricemax']))
{
    $pricemax = $_GET['pricemax'];
    $_SESSION['pricemax']=$pricemax;
} elseif (isset($_SESSION['pricemax'])) {
    $pricemax=$_SESSION['pricemax'];
}
    
}
  
if(isset($_GET['c']))
{
    $c = $_GET['c'];
    $_SESSION['c']=$c;
} elseif (isset($_SESSION['c'])) {
    $c=$_SESSION['c'];
}

Re: Price Range Slider - how do I implement this into a quer

Posted: Mon Dec 14, 2015 6:08 am
by Celauran
If you're going to store min/max prices in session data, presumably for someone navigating away from and then back to a given category, why not use a multidimensional array? Rather than having to juggle $_SESSION['pricemax'] you could have something like $_SESSION['shirts']['pricemax'], $_SESSION['cardigans']['pricemax'], $_SESSION['shoes']['pricemax'] and so forth. Would probably make more sense to use the category IDs, but I wanted the example to be descriptive.

Re: Price Range Slider - how do I implement this into a quer

Posted: Mon Dec 14, 2015 6:12 am
by simonmlewis
Good idea, but we have so many categories, it wouldn't be possible I don't think, to manage it.
This method I have come up with, works on the subcategories, because that uses a different page, and I Can make it ask for the Subid rather than the Catid.

Just wondered if there was a way that uses less code.