Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2013
    Location
    Were my backpack is!
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question what happens to an element's styling when moved by JavaScript or Jquery

    Hi. I am just about to start playing around with Jquery, but there is something I am confused about.

    If I was to move an element on my website using Jquery, so say I was to animate a page menu tab so that it moved, assuming that element was part of the webpages flow, would Jquery take the element out of the flow? Does it do a relative move, or an absolute move, or something else entirely?

    Let me reiterate, as I am having a hard time coming up with good wording, and hopefully you will get what I mean.

    If I have a bunch of horizontal inline elements, and if I was to use a Jquery animate object to move one of those inline elements down so that it was now below the other inline elements; would by CSS act as though that element had disappeared and shift to take up the space, or would there be no reaction to it moving away?

    Now if I was to do another move using a CSS media query, would I act as though the element has changed locations, or reference its original position?

    Thanks in advance to anyone who can clear this up for me?
    -Adrian

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    I don’t know from mind right now but how about you try it and then inspect the element with the browser’s developer console’s HTML panel? When JS applies/changes styles what happens is that it sets inline styles (using the style attribute on the element(s)), so you can easily see what it did.

    CSS media queries are not considered, as far as I know. You need to calculate the viewport size with JS and change the function depending on the size.

  • #3
    New Coder
    Join Date
    Dec 2013
    Location
    Were my backpack is!
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry I tired this last night and forgot to answer my post.

    Turnes out Jquery move/animate does not change the element css, but can not move the element if the element does not have the correct display type for moving.

    So in order to animate an element, I needed to first use Jquery to change the position property of the element to relative, before I animated it.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    You can also set the position with CSS and it should work, too.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •