jquery - hasClass if statement for navigation -
first post here bear me!
i using jquery ui tabs plugin create gallery , want have little arrow slide left , right show user gallery being shown:
the code i'm using this:
<script> if ($('#wedding-btn').hasclass('ui-state-active')) { $('.nav-selector').css('left', '5px'); } else if ($('#portrait-btn').hasclass('ui-state-active')) { $('.nav-selector').css('left', '125px'); } else if ($('#landscape-btn').hasclass('ui-state-active')) { $('.nav-selector').css('left', '255px'); } else if ($('#blackandwhite-btn').hasclass('ui-state-active')) { $('.nav-selector').css('left', '410px'); } </script>
here link show i'm talking about: http://www.maxhenchman.co.uk/oh/latest2/
i've looked @ other articles on here , code above seems should work...but i'm pretty new jquery i'm wrong.
any great!
thanks,
max
edit johnny:
<script type="text/javascript"> $(document).ready(function() { $( "#tabs" ).tabs({ show: { effect: "fade", duration: 400 }, hide: { effect: "fade", duration: 800 } }); }); </script> <script type="text/javascript"> $(document).ready(function() { $('#wedding-btn').click(function(){ if($(this).hasclass('ui-state-active')) $('.nav-selector').css('left', '5px'); }); $('#portrait-btn').click(function(){ if($(this).hasclass('ui-state-active')) $('.nav-selector').css('left', '125px'); }); $('#landscape-btn').click(function(){ if($(this).hasclass('ui-state-active')) $('.nav-selector').css('left', '255px'); }); $('#blackandwhite-btn').click(function(){ if($(this).hasclass('ui-state-active')) $('.nav-selector').css('left', '410px'); }); }); </script>
here final answer, since need delay wrapped classcheck function , called on .click() delay using settimeout. here code:
function check_location(){ if ($('#wedding-btn').hasclass('ui-state-active')) { $('.nav-selector').css('left', '5px'); } else if ($('#portrait-btn').hasclass('ui-state-active')) { $('.nav-selector').css('left', '125px'); } else if ($('#landscape-btn').hasclass('ui-state-active')) { $('.nav-selector').css('left', '255px'); } else if ($('#blackandwhite-btn').hasclass('ui-state-active')) { $('.nav-selector').css('left', '410px'); } } $('#tabs').click(function(){ settimeout(check_location,1000) });
Comments
Post a Comment