Question

On a page I have multiple Jquery UI Sliders that fade out/in the opacity of different layers in an image. It’s for a portfolio, so I have the same div in a different .html page that gets loaded into the page, it replaces the content in the div with the content that correlates to the new thumb. The sliders work fine, and then when I load the new content they don’t show up.

Here is the page link, the thumbs are up at the top, and if you scroll down to the section that says “Layering” and then under it “A Simplified Layer Model Demonstration” and if you click start demo it will animate the sliders into view. So when the page first loads and go scroll right down, the sliders show up. If you then scroll back up and select a different thumbnail and scroll back down and do teh same thing and prompt the demo animation, they don’t appear, I’m at a loss for why this happens.

http://www.klossal.com/portfolio/index_current.html

Here is the code I am using:

JS

<script type="text/javascript">
$(document).ready(function() {
    //Step 1: set up the slider with some options. The valid values for opacity are 0 
to 1
    //Step 2: Bind an event so when you slide the slider and stop, the following     
function gets called
    $('#slider4').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#planet').css('opacity', ui.value)

         }                
    });
$('#slider3').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#nebula').css('opacity', ui.value)

         }                
    });
$('#slider2').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#light').css('opacity', ui.value)

         }                
    });
$('#slider1').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#starsimg').css('opacity', ui.value)

         }                
    });

});
</script>

CSS

#slider4 { width: 280px;}

#slider4 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }

#slider3 { width: 280px; }
#slider3 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }

#slider2 { width: 280px; }
#slider2 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }

#slider1 { width: 280px; }
#slider1 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }


.ui-widget-content { background: #373737;height:18px;border:0px solid #181818;border-    
color:#-webkit-box-shadow: inset 0px 0px 13px 2px #000000;
box-shadow: inset 0px 0px 13px 2px #000000; }

HTML

<DIV id="sliders_all" class="sliders_container" style="float:left;-webkit- 
transform:translate(308px, -5px);">
<img src="/media/divider.png" width="100%" height="20px" border="0"   
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider4" data-wjs-element="box"></div>

<img src="/media/divider.png" width="100%" height="20px" border="0"    
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider3" data-wjs-element="box"></div>

<img src="/media/divider.png" width="100%" height="20px" border="0" 
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider2" data-wjs-element="box"></div>

<img src="/media/divider.png" width="100%" height="20px" border="0"  
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider1" data-wjs-element="box"></div>
<img src="/media/divider.png" width="100%" height="20px" border="0"   
style="opacity:0.0;filter:alpha(opacity=0)">
</DIV id="sliders_container">

This code for the HTML portion remains the same when you click a new thumbnail, I figured because the code that was there before is getting replaced so there’s no need to worry about names conflicting with each other. When I did go back and change some of the ID names around it didn’t seem to make a difference.

Any help I can get here would be greatly appreciated, thanks.

Answer 1

What I was doing wrong was I needed to add the javascript for sliders into the external page. I do find that to be a little confusing because the javascript is already on the page the html is getting loaded into, but somehow it’s not able to reference it and needs to also be written into the external one.