PDA

View Full Version : Resolved JQuery UI slider: Help with slide listener



ZacharyNevin
01-29-2012, 02:24 AM
THIS ISSUE HAS BEEN RESOLVED. IF YOU WANT TO SEE THE FINAL RESULT, GO TO: http://cyclingtoendms.com/The_Expedition.html#sponsor-a-mile

Hello,

I am making a website for a Canadian cycling expedition (for charity) that I am participating in. Part of it involves a 'sponsor-a-mile' function, where visitors 'sponsor' specific sections of our route.

I have provided a link to an image showing how I made the sponsor-a-mile function: http://cyclingtoendms.com/routedesc.png

As you can see in photo, you select the section of the route you are sponsoring using a simple jQuery UI slider, and the map dynamically displays the section of the route being sponsored. You have a red-coloured canvas tag sandwiched between two images, one of which has the route a transparent section in the shape of the route. As you move the left slider, the left margin of the canvas is meant to move, and as the right slider moves, the right side of the canvas moves (by changing its width). This is all detailed in the code provided.

The problem is shown in the photo (as best as possible): when I move the left slider backwards, or the right slider forwards, the map works fine. However, when I try and move the left and right sliders in the opposite directions, nothing happens on the map. The other values being displayed (amount, price...etc) work just fine.

Thank you for your help!
- Zachary

I have included the code that I used to create the map, and how it was linked to the slider:
--------------Javascript Code------------------


<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 1,
max: 3600,
values: [ 500, 1000 ],
/* Change listener */

slide: function( event, ui ) {

/* THIS IS THE SECTION OF CODE THAT DEFINES THE ROUTE CANVAS LEFT-MARGIN AND WIDTH */

var canvas=document.getElementById('myCanvas');
var left=((ui.values[ 0 ]-1)/6);
var width=((ui.values[ 1 ]-1)/6)-((ui.values[ 0 ]-1)/6);
var ctx=canvas.getContext('2d');
ctx.fillStyle='#fb0000';
ctx.fillRect(left,0,width,310);

/* ---------- */

if(ui.values[0]!=ui.values[1]) {

$( "#amount" ).val('#' + (ui.values[ 0 ] + " - #" + ui.values[ 1 ] ));
$( "#number" ).val((ui.values[ 1 ] - ui.values[ 0 ] + 1) );
$( "#price" ).val('$' + (ui.values[ 1 ] - ui.values[ 0 ] + 1) );
$( "#percent" ).val( Math.round(100*((ui.values[ 1 ] - ui.values[ 0 ] + 1 )/3600)*100)/100 + "%");
}
else {
$( "#amount" ).val('#' + (ui.values[ 0 ]));
$( "#number" ).val( 1 );
$( "#price" ).val('$' + 1 );
$( "#percent" ).val( Math.round(100*((ui.values[ 1 ] - ui.values[ 0 ] + 1 )/3600)*100)/100 + "%");
}
/* Slide listener for route visibility*/

}


});


$( "#slider-range" ).slider({

/* Change listener for Paypal*/

change: function( event, ui ) {

$( "#pricepay" ).val(ui.values[ 1 ] - ui.values[ 0 ] + 1);
$( "#sponmiles" ).val('Miles Sponsored: #' + (ui.values[ 0 ] + " - #" + ui.values[ 1 ] ));
}

});
});
</script>

-----------------------------------------
--------------HTML Code------------------------


<div style="position:relative;">
<img src="images/route/spon/trilayer/route.png" width="846" height="339" border="0">

<canvas id="myCanvas" style="position:absolute;left:85px;top:10px;" width="600" height="310">Your browser does not support the canvas tag.</canvas>

<img style="position:absolute;left:0px;top:0px;" src="images/route/spon/trilayer/routetrans.png" width="846" height="339" border="0">
</div>

-----------------------------------------

ZacharyNevin
01-29-2012, 03:21 AM
Could this be the reason why?

"In the Canvas example above, once the rectangle is drawn, the fact that it was drawn is forgotten by the system. If its position were to be changed, the entire scene would need to be redrawn, including any objects that might have been covered by the rectangle. But in the equivalent SVG case, one could simply change the position attributes of the rectangle and the browser would determine how to repaint it. There are additional JavaScript libraries that add scene-graph capabilities to the Canvas element. It is also possible to paint a canvas in layers and then recreate specific layers." - Wikipedia