Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Resizing hides (currently hidden)elements when I try to show them? (javascript)

Options
  • 29-07-2013 4:49pm
    #1
    red_ice
    Registered Users Posts: 4,946 ✭✭✭


    I'm not sure how to word the title...

    I'm building a responsive site at the moment that has a styled google map on it that takes up the full screen in width. This map can be toggled.

    If the map is hidden, and the page is resized, then toggled to see it, the map does not display until I scale the browser up or down in width. It only needs the slightest of scaling to work.

    There is also a full screen sliding image gallery on the page, which also toggles... I know, a lot of toggling, but it makes sense when you see it. When this is hidden it also vanishes if the page is scaled.

    Would anyone know what is causing this to happen and a possible work around? It's not vital for this to be fixed, but it is irritating me.

    One idea was to change the width of the div from 100% to 99% when it is hidden, then change it to 100% when it is viewed, but I have yet to try this out.

    Cheers


Comments

  • Options
    #2
    John_Mc
    Registered Users Posts: 2,790 ✭✭✭John_Mc


    red_ice wrote: »
    I'm not sure how to word the title...

    I'm building a responsive site at the moment that has a styled google map on it that takes up the full screen in width. This map can be toggled.

    If the map is hidden, and the page is resized, then toggled to see it, the map does not display until I scale the browser up or down in width. It only needs the slightest of scaling to work.

    There is also a full screen sliding image gallery on the page, which also toggles... I know, a lot of toggling, but it makes sense when you see it. When this is hidden it also vanishes if the page is scaled.

    Would anyone know what is causing this to happen and a possible work around? It's not vital for this to be fixed, but it is irritating me.

    One idea was to change the width of the div from 100% to 99% when it is hidden, then change it to 100% when it is viewed, but I have yet to try this out.

    Cheers

    I would imagine that this is happening because your elements have a style with display:none and the browser is ignoring them when resizing the window. This makes sense if you think about it.

    If you're using jQuery then you could attach an event handler to the window resize event and resize your elements manually by applying a width of 100%?


Advertisement