Page 1 of 1
How do you do Ajax Sliders, to change content as you slide?
Posted: Thu Sep 04, 2014 4:11 am
by simonmlewis
Hi
We have a web site where there are certain products suitable for certain scenarios. You see this kind of thing on Hosting web sites, and Computer sales sites, where you slide something, and it changes the content.
Here is an example from a company web use:
https://www.34sp.com/vps-hosting
As you slide the metal looking disc across, the content below it changes.
I want to be able to do the same thing. Click the area above it (to slide across), or slide the graphic over, and the content change - HOWEVER, I want the content to change by querying the database based on where the slider stops.
I'm sure there is a static way of showing different content, but I'm assuming via Ajax, you can query the database directly, based on the position of the graphic.
It would be a brilliant tool on our site.
Re: How do you do Ajax Sliders, to change content as you sli
Posted: Thu Sep 04, 2014 6:40 am
by Celauran
Looks like the slider widget from jQuery UI.
http://api.jqueryui.com/slider/
Re: How do you do Ajax Sliders, to change content as you sli
Posted: Thu Sep 04, 2014 6:48 am
by simonmlewis
Thanks. Bit of further help here too, following on from what you've suggested:
http://www.tutorialspoint.com/jqueryui/ ... slider.htm
Re: How do you do Ajax Sliders, to change content as you sli
Posted: Thu Sep 04, 2014 7:07 am
by simonmlewis
Code: Select all
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-5" ).slider({
orientation:"horizontal",
value:1,
slide: function( event, ui ) {
$( "#minval" ).val( ui.value );
}
});
$( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
});
</script>
</head>
<body>
<!-- HTML -->
<div id="slider-5"></div>
<div id="slider-4"></div>
<p>
<label for="minval">Minumum value:</label>
<input type="text" id="minval"
style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
</body>
</html>
Ok I've managed to get a nice version altered so it' s horizonal. I'm sure there is an "interval" method in there somewhere, so it slides up to say, 6 points.
But also how do I assign the "minval" to a $variable, so I can then query it and then run queries?
I will also be using this for a property website, so I can drag the pricing and up come the changes. But don't know how to assign the values to a $variable.
Also, just looked again at the code, and don't see any kind of "interval", to say use values "1, 2, 3, 4, 5, 6" or whatever.
Re: How do you do Ajax Sliders, to change content as you sli
Posted: Thu Sep 04, 2014 7:17 am
by simonmlewis
Correction: sorted the stages, just need to assign the minval to a $variable so I can start playing with it. Tho still not sure how I would then use it in Ajax - perhaps "onchange" of a variable it would then do it.
Re: How do you do Ajax Sliders, to change content as you sli
Posted: Thu Sep 04, 2014 7:34 am
by simonmlewis
Code: Select all
<script>
function findprod(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("srcHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax_findtherightprod.php?q="+str,true);
xmlhttp.send();
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-5" ).slider({
orientation:"horizontal",
min: 0,
max: 6, // max is 24
step: 1,
slide: function( event, ui ) {
$( "#minval" ).val( ui.value );
}
});
$( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
});
</script>
</head>
<body>
<!-- HTML --> <br/><br/>
<div id="slider-5" style='width: 710px'></div>
<p>
<label for="minval">Minumum value:</label>
<input type="text" name="q" id="minval"
style="border:0; color:#b9cd6d; font-weight:bold;" onChange="findprod(this.id)">
</p>
<?php
echo "<div id='srcHint' class='hintbox'></div>";
?>
</body>
</html>
Now at this stage. My thinking is that I can do an onChange, and it posts to Ajax, but it's not working, possibly because of something missing in the script.
I found this, but don't see where you can put in this code the means to assign it to a value to then use further down:
http://stackoverflow.com/questions/4791 ... p-variable