Problems loading Jquery script (Galleria) from an i-frame (beginner javascript?)

advertisements

the site in question: http://homecapture.ca/testset/index.html

The scenario: I have a tabbed menu generated from an unordered list, when a menu item is clicked it reveals an iframe which links to the page containing an image gallery. I am using jQuery UI tabs for the tabbed menu, and the galleries to which I'm linking are jQuery Galleria pages, automatically generated with Jalbum.

The problem: The galleria plug-in only works normally from inside of the containing iframe in Chrome 5.0, has inconsistent behaviour in IE8 (seems to work in my local copy, but won't load properly online), and is not loaded properly in Firefox 3.6.3. Instead of displaying a thumbnail area and the first large image, the Galleria page shows the first thumbnail only, then when it is clicked the image it links to, but if you right-click and go Back, the iframe content shows up as a properly rendered Galleria page.

so the code looks like:

<head>
    <title>homecapture.ca</title>
    <!-- link to jquery-ui-1.8.1.custom.css rel="stylesheet" -->
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // Tabs
            $('#tabs').tabs();
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                function() { $(this).addClass('ui-state-hover'); },
                function() { $(this).removeClass('ui-state-hover'); }
            );

        });
    </script>
<!--there are some more css in here for now-->
</head>

<body>
   <div id="tabs" style="margin:0 auto;clear:both;">
        <ul>
            <li><a href="#tabs-1"> 1 </a></li>
            <li><a href="#tabs-2"> 2 </a></li>
            <li><a href="#tabs-3"> 3 </a></li>
            <li><a href="#tabs-4"> 4 </a></li>
        </ul>

        <div id="tabs-1">
        <p> Information </p>
        </div>

        <!--- this tab loads a flash application and works fine -->
        <div id="tabs-2">
        <iframe src="tour/index.html" width="960" height="700"></iframe></div>

        <!-- image gallery tab-->
        <iframe id="tabs-3" src="gallery_jd/index.html" width="960" height="700"></iframe>

        <!-- drawings tab -->
      <iframe id="tabs-4" src="gallery/index.html" width="960" height="700"></iframe>
    </div> <!-- end tabbed content-->
</body>

Jalbum generates script in the < head> of the iframed page in addition to linking to jQuery and the galleria plug-in. All of it seems to be in charge of the gallery navigation , and I have relocated it to the < body> of the page, in an effort to make it load after the parent page scripts, and together with the gallery content.

EDIT: having browsed around more, it seems that simply relocating the script from the header to the end of the body does not necessarily result in the entire iframe being loaded prior to the code (which seems to be the problem)

At this point I am not sure what else I could do to solve the problem, without digging around in all or some of the library and pluging .js files (which I am not knowledgeable enough to do without some pointers). Has anyone dealt with a similar issue? I'm seeing some solutions for manipulating iframe content from a parent page with jQuery on here, is that what I should be researching instead?

Hello, first of all - I'm not entirely new to javascript, but am not fluent in it as I am with html and css, and am especially new to jQuery... so please excuse me if this questions seems easy or obvious, but after days of google I still have no solution to the problem... using jQuery 1.4.2.min, jQuery-ui-1.8.1 ....

Thanks in advance for all the help!


I'm sort of a noob and don't fully understand your problem, but maybe this simple solution will help you. I'm using jQuery UI Tabs and Galleria 1.2 beta as well (though not iframes) and had the same problem with my galleries not loading properly in inactive tabs. According to the jQuery UI Tabs documentation:

Why does my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

This worked perfectly in my case.