Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [Solved] jQuery: Positioning a with window size

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #189657
    richerimage
    Participant

    Hi All

    I’m trying to address a common responsive design issue where you have an optin/signup box at the top of a sidebar.

    Although this is the most desired location for desktop views it means the primary optin box would be positioned after the main content column in mobile view if one is using an a-typical RWD grid (Bootstrap, Foundation, etc).

    I am someway towards a solution with this Pen…

    As you will see, the default Optin Box position is near the top of the main content column in mobile/single column view but it moves across to the top of the sidebar once the layout shifts into 2-column mode.

    Here’s where I need the help…

    I’m currently using .insertBefore() to position the optin <div>. This is dependant on there being an html element within the sidebar.

    Is there a way to position the Optin<div> right at the top of the sidebar using the #sidebar selector as opposed the the containers first child?

    This way the functionality would not be dependant on there being any content within the sidebar.

    Here’s the link to the pen again.

    Thanks in advance,

    Richard :)

    #189673
    richerimage
    Participant

    Thank you so much!! That just what I was looking for!

    http://codepen.io/richerimage/pen/bNVWRV

    Thanks for the heads up for the :focus

    I’m guessing this is would only be an issue if the user physically resized their window whilst they are in the form though?

    #189711
    jamygolden
    Member

    @richerimage yeah that is correct, only if the user is focused and THEN resizes their window.

    #189712
    richerimage
    Participant

    Thank you – great stuff – I’m happy with that

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.