Search code examples
jquerycsspositioningcss-positionabsolute

Changing "top" css of absolute positioned element with jQuery click

I've got a div (#slider) that I'm using position: absolute; to allow it to span the width of the screen without having to break my wrapper code. However, I have a menu that toggles upon click of the "work" div using jQuery slideToggle. I would like to adjust the "top" property of the absolute positioned element so that it moves down when my menu slides down.

This can be viewed live at http://osephj.com/dev/

This is all using adaptive media queries, so obviously the CSS triggered by the click via jQuery would need to have media queries in it so the top position will apply appropriately for all screen sizes.

Right now, the code I have for toggling the menu is this:

    <script type="text/javascript">
 $(document).ready(function() {
$('#worktoggle').click(function(){
     $('div.slider').css('top', 700);
     $('div.work').slideToggle(600,'swing');
     return false;
   });
});
</script>

This is now relocating the .slider div, but I need to be able to change the value for each media size. Also, I'd like it to match the "swing" transition at the 600 speed that the menu comes down with. Basically, how it would act if it were a block element that followed my "work" UL in the same parent element.

Solution

  • css method is probably what your looking for.

    $('#').css('top', 1000);

    or addClass and removeClass to add your own class to the element.

    you may want to look at the slideDown animation method for the transition.

    You want to add this code inside your click function since you want it to change onclick.

    $('#worktoggle').click(function(){
    $('div.toMove').css('top', 100);
    $('div.work').slideToggle(600,'swing');
     return false;
});