Bizzare Behavior And Extra Whitespace Added To Page After Showing Large Image - Using Foundation

[dc_dalton]

I am just learning Foundation and haven’t really had a problem to this point (I am assuming it’s Foundation causing the issue at this point)

What I have is a page with thumbnails of a project, when you click on the thumbnails it shows the large version of the screenshot, should be simple but it’s caused me hours of aggravation.

What happens is I make an Ajax call to the server that then finds the correct image and adds it to a div with a close link. This is what the PHP returns:

<div id='large_image' class='port_image'>
<p id='large_image_close' class='fake_link'>close window</p>
<img src='/images/web-application-screenshots/budget.jpg' width='983' height='719' alt='portfolio image'>
</div>

I have styles in my stylesheet for this div as such:

#large_image    {
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #191970;
    position: absolute;
    z-index: 10000;
    }

#large_image_close    {
    text-align: right;
    font-size: .7em;
    }

I then prepend that code to the body and set a margin from the top so that it appears in the correct place in the window as such:

$('.app-thumb').bind('click', function()    {
    
    $('.port_image').remove();

    $.ajax({  
        async: false,
        type: 'POST',  
        url: '/functions/get_portfolio_image.php', 
        dataType: 'json',
        data: 'which=' + $(this).attr('src'),
        success: function(data, textStatus){
            var page_position = $(document).scrollTop();
            $('body').prepend(data.image).css('margin-top', page_position + 'px');
            }

        });

    });

The large image appears correctly BUT two things are happening which have me banging my head on the desk.

1. the call to scrollTop() (BTW Iknow that is a jQuery question) is not only returning the correct number it is also scrolling the page up.

2. A large amount of whitespace it appearing between the top nav bar and the rest of the body content.

To ‘see it in action’ (sorry it is not a live site yet) follow along with these screen shots:

Initial page load

scroll down to a thumbnail

click on thumbnail and large image appears

close large image and it appears the page has scrolled back up

scroll back up the page to see huge whitespace between nav and the rest of the content

This has got me climbing the walls. I have searched high and low and not found and issue. I have tried it in multiple browsers and they all have the same issue and I have tried prepending the the div to everything from the main_content div, the body etc etc and no matter what I try the exat same thing is happening.

I don’t understand how an element that has its position set to absolute is effecting the flow of the document, and that’s why I think it might be Foundation related.

Any help would be truly appreciated, at my wits end over this.

[RyanReese]

Hey,

Unless we can get a demo or some sort of code example that replicates the issue for us, we can’t really help .

[dc_dalton]

Actually I was sitting downstairs watching a movie and it dawned on me, I’m an idiot that was looking at the wrong thing. I was adding the margin top to the element I was appending the div to (the body)

DUH!