jQuery sliders

they dissapear when a function is called a 2nd time

[tonynoriega]

i have 3 jQuery sliders on a page i developed.

based on their values, they display certain items, that show up when a user clicks a button labeled "find my items"

when the items are displayed, i then have another function that says "start over"

and essentially it resets the values of the sliders, and puts the page back to its original form.

now, when you hit the "find my items" again, display the items, and hit "start over" a second time, the sliders dissapear.

why would only the sliders dissapear and not anything else?

obviously you can call a function more than once on one page, since the "find my items" button works fine every time...

its just the sliders that dont display the second time around..

brughhhhaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

[tonynoriega]

problem solved. thanks.

[lexipixel]

I was having a similar issue with some Jquery code.

It seems you need to destroy instantiations of some functions after calling them, (which resets things to the original settings).

Did you add a "destroy" to fix it ?

[tonynoriega]

No, i actually converted some of my code from traditional javascrip to jquery code.

replaced the order of how the sliders were being called, and it seemed to work.

i have a new issue now that i cant quite figure out.

super times.

[lexipixel]

Here's a snip where I had to explicitly destroy the call or it wouldn't fire again.

With a single click the code:

- tallies up some data

- runs a some PHP using AJAX, (the called php code uses GD and generates a .JPG image from the passed data).

- runs a block of PHP that calls FDPF and creates a PDF file which uses the just created .JPG

- tells the user it's ready and gives them a link to View the PDF.

- all of this is done for multiple discrete users where each gets their own DATA, JPG and PDF files which can be retrieved via URLs..

$("#downloadPdfButton").click (
function() {
ttlApples = parseInt(ttla) + parseInt(ttlb) + parseInt(ttlc);
pdfUrl = "<?php echo $base_url ?>/<?php echo $user_dir ?>/<?php echo $f_sid ?>/<?php echo $f_sid ?>.pdf";
$("#viewPdf").html('<a href="' + pdfUrl + '" target="_blank">View PDF Now</a>');
$.ajax( {
type: "GET",
url: "genjpg.php",
data: "f_sid=<?php echo $f_sid ?>&f_num_apples=" + ttlApples + "&f_num_bananas=" + ttlBananas,
success: function() {
$.ajax( {
type: "POST",
url: "genpdf.php",
data: "f_datetime=<?php echo $f_datetime ?>&f_uip=<?php echo $f_uip ?>&f_sid=<?php echo $f_sid ?>",
success: function() {
$("#viewPdf").dialog({
bgiframe: true,
resizable: false,
modal: true,
overlay: { backgroundColor: '#000', opacity: 0.5 },
buttons: { Done: function() { $("#viewPdf").dialog('destroy'); } }
});
}
});
}
});
$("#viewPdf").dialog('destroy');
}
);

My problem was the little "X" button in the upper right of the dialog. If the user clicked the "Done" button, (which I specified as as option in the dialog code), everything was fine (the dialog got destroyed), but if they clicked the "X", it didn't.

Also, I had to chain the calls in a way that each step was hinged on the "success" of the previous step -- I had tried writing them just in sequence, e.g.-

$("#mydiv").dosomething();
$("#mydiv").donextthing();
$("#mydiv").etc({ some code });

but it was getting ahead of itself and displaying the "View PDF" dialog before the script that creates the .JPG was done, (it would all still work, but I'd find half finished .JPG files embedded in the PDFs).

Still, to not have to think much about UI, event handlers, ajax, etc.. and let Jquery do all that work makes it all worthwhile.

[tonynoriega]

Nice...

Well here is a new issue.

when the slider passes a threshold of a certain value, i have a hidded div appear..

i.e. my slider has Low, Medium and High

Value 0
Min 0
Max 100
step 1

at default i have a div id="low" showing.

when the user sliders the handle bar past step 33 i hide id="low" and show id="medium"

but if you slide it just a tad too fast, both divs show up on top of eachother...

what is happening?

how is one not being cleared before the other is being called?

[lexipixel]

With no code example, I can't say, but my guess is your logic statements overlap and match as "true" for more than one condition.

Maybe a little verbose, but here's my solution.

(Be sure to set the path for query code in the src="" values of script tags).

<html>
<head>
<title>jQuery Slider with levels</title>
<link type="text/css" href="css/custom-theme/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.slider.js"></script>
<style type="text/css">
#lowBox, #medBox, #highBox {
height: 50px;
border: 2px solid black;
text-align: center;
font-size: 30px;
font-family: Arial, sans-serif;
font-weight: 700;
}
#lowBox { color: black; background-color: yellow; }
#medBox { color: white; background-color: orange; }
#highBox { color: white; background-color: red;}

#wrapper {
margin:0px;
padding:0px;
width: 302px;
height: 52px;
border: 0px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){

$("#medBox").hide();
$("#highBox").hide();

var slideVal = '0';
$("#rangeDisplay").html(slideVal);

$(function() {
$("#levelSlider").slider({
value:0,
min: 0,
max: 100,
step: 1,
slide: function(event, ui) {
slideVal = ui.value;
if ( slideVal <= 33 ) {
$("#medBox").hide();
$("#highBox").hide();
$("#lowBox").show();
} else if (( slideVal >= 34 ) && ( slideVal <= 67 )) {
$("#lowBox").hide();
$("#highBox").hide();
$("#medBox").show();
} else {
$("#lowBox").hide();
$("#medBox").hide();
$("#highBox").show();
}
$("#rangeDisplay").html(slideVal);
}
});
});

});
</script>
</head>
<body>

<div id="wrapper">
<div>Slider Value: <span id="rangeDisplay"></span></div>
<div id="lowBox">Low</div>
<div id="medBox">Medium</div>
<div id="highBox">High</div>
<div id="levelSlider"></div>
</div>

</body>
</html>

[tonynoriega]

pretty darn close to what i had already (minus the html)
what i see currently is not a graceful fadeout and fadein of the boxes, i see one push the other down, then fade out, then the next slides up and fades it...

so its pushing everything else down just for a split second..frustrating.

:

<script type="text/javascript"><!--
$(document).ready(function(){

$('#infoLowBene').hide();
$('#infoMedBene').show();
$('#infoHighBene').hide();
});

$(function() {
$("#slider").slider({
value:15,
min: 0,
max: 30,
step: 1,
animate:true,
orientation:"horizontal",
slide: function(event, ui) {

if (parseInt(ui.value) >= 0 && parseInt(ui.value) <= 10) {
$('#infoMedBene').fadeOut('slow');
$('#infoHighBene').fadeOut('slow');
$("#infoLowBene").animate({ opacity: 'show' }, "slow");
}
else if (parseInt(ui.value) >= 11 && parseInt(ui.value) <= 20) {
$('#infoLowBene').fadeOut('slow');
$('#infoHighBene').fadeOut('slow');
$("#infoMedBene").animate({ opacity: 'show' }, "slow");
}
else if (parseInt(ui.value) >= 21 && parseInt(ui.value) <= 30) {
$('#infoMedBene').fadeOut('slow');
$('#infoLowBene').fadeOut('slow');
$("#infoHighBene").animate({ opacity: 'show' }, "slow");
}
}
});

[tonynoriega]

AHHHH HAAA

instead of fadeOut and fadeIn i used slideUp and slideDown.

looks much better.

the content just slides over one another.

[lexipixel]

If you notice, I used a container div, (#wrapper), around the divs that hide and show -- no jumpiness.

Also I hide everything that needs to disappear before I show anything, (which is why in the "if / else" construct the jQuery calls are arranged as below)...

med HIDE
high HIDE
low SHOW

low HIDE
high HIDE
med SHOW

low HIDE
med HIDE
high SHOW

[tonynoriega]

You were right.
.hide();

.show();

eliminates the double call of the <div's>

its a lot "snappier"

thanks for the set of eyes.