I noticed that half of the time when I load the page, the contents within the #zoom di

Hi chxcore! Does the page load the before the css or after? S

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

Well, you could always try an images loaded . Check out <a href="https://github.

Odd display failure when only one dimension is set in CSS about anythingzoomer HOT 6 CLOSED

css-tricks commented on June 12, 2024

Odd display failure when only one dimension is set in CSS

from anythingzoomer.

Comments (6)

Mottie commented on June 12, 2024

Hi chxcore!

Does the page load the script before the css or after? See what happens when the css is loaded first.

Another method is to make sure all images are loaded before initializing the plugin. This is done by using the window load event instead of the document ready event:

$(window).load(function(){
    $('#zoom').anythingZoomer();
});

If that doesn't work is there a particular browser you're seeing this issue in? Could you share some code or a demo of this issue.

Thanks!

from anythingzoomer.

ckxcore commented on June 12, 2024

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Anythingzoomer Test Page</title>
<link rel="stylesheet" href="/css/anythingzoomer.css" />
<style>
    #zoom .small img{
        width: 300px;   
    }
    #zoom .large img{
        width: auto;
    }
</style>
</head>

<body>
    <div id="zoom">
        <div class="small">
            <img src="http://2.bp.blogspot.com/-ujddJNQ7hBU/T6LKuxhQsLI/AAAAAAAAFNU/RwdvAUH-D7c/s1600/mountains-wallpaper-6.jpg" />
        </div>
        <div class="large">
            <img src="http://2.bp.blogspot.com/-ujddJNQ7hBU/T6LKuxhQsLI/AAAAAAAAFNU/RwdvAUH-D7c/s1600/mountains-wallpaper-6.jpg" />
        </div>
    </div>


    <script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery.anythingzoomer.min.js"></script>
    <script type="text/javascript">
        $("#zoom").anythingZoomer();
    </script>
</body>
</html>

you will notice that it will work sometimes after the page is loaded, and not others. On the times when it doesn't work, you will notice that the height is set to 0 in the style attribute for az-wrap-inner and az-overly. For me it is working about 50% of the time.

However, if you add height to my css, then the code works 100% of the time.

I do not see the problem in any version of Firefox of IE at my disposal. The issue has been noticed on Chrome 19.0.1084.56 m and Safari (Windows) 5.1.7 (7534.57.2).

from anythingzoomer.

Mottie commented on June 12, 2024

AnythingZoomer isn't being initialized inside of a document ready nor a window load function, it should look like this:

<script type="text/javascript">
$(function(){
    $("#zoom").anythingZoomer();
});
</script>

from anythingzoomer.

ckxcore commented on June 12, 2024

Initializing inside of a document ready or window load function doesn't solve this particular issue. A friend of mine brought it to my attention that although the DOM might be ready, images could still be processing, giving the 0 height. If I wish to only set one dimension in CSS (in this case width), then I need to make sure the image is fully loaded before allowing the anythingZoomer to start. Here is a StackOverflow question that gives some insight into the problem: http://stackoverflow.com/questions/1257385/javascript-know-when-an-image-is-fully-loaded

Also, its important to note that I only see this issue in Chrome and Safari.

from anythingzoomer.

Mottie commented on June 12, 2024

Well, you could always try an images loaded script. Check out David Desandro's or my version (which uses a different method). What the script does is update the zoomer once all of the images have completed loading.

Here is a demo, and the script to use:

var zoomer = $('#zoom');

// initialize anythingZoomer
$(window).load(function(){
    zoomer.anythingZoomer();
});

// update after all images have loaded
zoomer.find('img').imagesLoaded(function(){
    // console.debug('all images loaded');
    zoomer.anythingZoomer();
});

from anythingzoomer.

Mottie commented on June 12, 2024

I'm guessing this issue has been resolved. Please feel free to reopen it if you continue to have problems.

from anythingzoomer.

Odd display failure when only one dimension is set in CSS about anythingzoomer HOT 6 CLOSED

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent