EasyCFM.COM ColdFusion Forums / Coding Help! / Javascript/jQuery guru needed

   Reply to Discussion | New Discussion << previous || next >> 
Posted By Discussion Topic: Javascript/jQuery guru needed

book mark this topic Printer-friendly Version  send this discussion to a friend  new posts last

donboe
01-17-2013 @ 4:08 AM
Reply
Edit
Profile
Send P.M.
My Gravatar!
Powered by Gravatar
Senior Member
Posts: 474
Joined: Nov 2004

I am working on a one page website where the content is in several div's. The div's are sliding in and out depending on which tab in the menu was pressed! This working fine as you can see in the example. What I would like to accomplish though is that each div has it's own toggle tab as well so that the visitor can close the div to have a better look at the full image background slideshow.

This is the function I am using to make the div's slide in and out:


<InvalidTag type="text/javascript">
     function hidePanel(e){
          $('div.sel').animate({left: -w}, 900, function(){
               $(this).removeClass('sel').hide();
               showPanel(e);
          })
     }
     
     function showPanel(e){
          $(e).css("display", "block").animate({left: 0}, 900)
          $(e).addClass('sel');
     }
     
     var w = $('.sel').width();
     $('.slider:hidden').css({left: -w});
     
     $('#menu li a').click(function () {
          hidePanel($(this).attr('href'))
          return false;
     });     
          
</script>


I tried to add another function, something that i used before. Where I declared another class in the CSS to have a width:

.content {
     width: 500px;
}


and added this class to the divs and used the following function:

<InvalidTag type="text/javascript">
     
$(document).ready(function(){
  var c = $('.content').width();
  $('.panelHandle').toggle(function() {
    $('.content').animate({left: '-=' + c}, 900);
  }, function() {
    $('.content').animate({left: '+=' + c}, 500);
  });
});               
</script>


I guess that the first and this function are interfering with each other because nothing is happening after I added a link with the class panelHandle to each div. I am not sure but I think instead of having a new class (.content) for every div  I should refer to the parent of the link (panelHandle), but my knowledge of Javascript is way to low to figure out how to do so. I hope someone over here is willing to help me with this.

Thank you in advance


“Good artists copy, great artists steal.” (Papblo Picasso)


Website Designed and Developed by Pablo Varando.