How do you do Ajax Sliders, to change content as you slide?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do you do Ajax Sliders, to change content as you slide?

Post 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.
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: How do you do Ajax Sliders, to change content as you sli

Post by Celauran »

Looks like the slider widget from jQuery UI. http://api.jqueryui.com/slider/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you do Ajax Sliders, to change content as you sli

Post by simonmlewis »

Thanks. Bit of further help here too, following on from what you've suggested:
http://www.tutorialspoint.com/jqueryui/ ... slider.htm
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: How do you do Ajax Sliders, to change content as you sli

Post 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.
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: How do you do Ajax Sliders, to change content as you sli

Post 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.
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: How do you do Ajax Sliders, to change content as you sli

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