Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.
Hi all, please see this major site announcement: https://www.boards.ie/discussion/2058427594/boards-ie-2026

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

  • 29-07-2013 03:49PM
    #1
    red_ice
    Registered Users, Registered Users 2 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

  • #2
    John_Mc
    Registered Users, Registered Users 2 Posts: 2,793 ✭✭✭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