Price Range Slider - how do I implement this into a query?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Price Range Slider - how do I implement this into a quer
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Price Range Slider - how do I implement this into a quer
This comment seems to answer the 'how':
Whether or not it will work for your implementation, you'll have to test and let us know.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.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Price Range Slider - how do I implement this into a quer
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>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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: Price Range Slider - how do I implement this into a quer
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.
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>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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: Price Range Slider - how do I implement this into a quer
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.
If I make it the same as the function #slider, it doesn't work.
But ALL the reports on this addition use that word.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Price Range Slider - how do I implement this into a quer
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.simonmlewis wrote:it doesn't work.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Price Range Slider - how do I implement this into a quer
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):
This is the script from the top:
And this is the "form".
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>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:
£<input type='text' id='pricemin' name='pricemin' class='slidepricefield' ";
if (isset($pricemin)) { echo " value='$pricemin'";}
echo ">
</div>
<div class='search-price'>Max:
£<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>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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: Price Range Slider - how do I implement this into a quer
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:
£<input type='text' id='pricemin' name='pricemin' class='slidepricefield' ";
if (isset($pricemin)) { echo " value='$pricemin'";}
echo ">
</div>
<div class='search-price'>Max:
£<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>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Price Range Slider - how do I implement this into a quer
Code: Select all
$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Price Range Slider - how do I implement this into a quer
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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: Price Range Slider - how do I implement this into a quer
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'];
}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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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: Price Range Slider - how do I implement this into a quer
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).
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'];
}
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Price Range Slider - how do I implement this into a quer
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.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Price Range Slider - how do I implement this into a quer
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.