0

Here's a link to what it looks like here (since I'm not reputable enough yet to post imgs directly).

I've tested my page in chrome, safari, ff, opera and everything works fine. IE9 is creating empty nested div containers that have the same classes as those with content below them.

Here is the example code:

<body class="no-touch">
    <header>
        <nav>
            <!--#include virtual="/menu.shtml"-->
        </nav>
    </header>
    <div class="wrap">
        <div class="box">
            <div class="boxInner">
                <a href="project_example.shtml"><img src="Thumbnails/1.jpg" /></a>
                <div class="titleBox">Some text</div>
            </div>
        </div>
        ...
        <div class="box">
            <div class="boxInner">
                <a href="#"><img src="Thumbnails/8.jpg" /></a>
                <div class="titleBox">Some text</div>
            </div>
        </div>
    </div>
    <!-- /#wrap -->

Here's ALL of the JS:

$(function() {
    // Stick the #nav to the top of the window
    var nav = $('#nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width()
            });
            isFixed = true;
        } else if (!shouldBeFixed && isFixed) {
            nav.css({
                position: 'absolute'
            });
            isFixed = false;
        }
    });
});

$(function() {
    // See if this is a touch device
    if ('ontouchstart' in window) {
        // Set the correct [touchscreen] body class
        $('body').removeClass('no-touch').addClass('touch');

        // Add the touch toggle to show text when tapped
        $('div.boxInner img').click(function() {
            $(this).closest('.boxInner').toggleClass('touchFocus');

        });
        $('.nav ul li a').click(function() {
            $(this).closest('.nav li').toggleClass('touchFocus');


        });
    }
});

$(document).ready(function() {
    $('.thumbnail').live("click", function() {
        $('#mainImage').hide();
        var i = $('<img />').attr('src', this.href).load(function() {
            $('#mainImage').attr('src', i.attr('src'));
            $('#imageWrap').css('background-image', 'none');
            $('#mainImage').fadeIn();
            $('div img').each(function(index) {
                var width = $(this).width(); // Current image width
                var height = $(this).height(); // Current image height

                // Check if the current width is larger than the max
                if (height > width) {
                    $(this).css("width", "44.5%"); // Set new width

                } else {
                    $(this).css("width", "100%");
                }
            });

        });
        return false;
    });


});

$(window).load(function() {
    $('img').each(function(index) {
        var width = $(this).width(); // Current image width
        var height = $(this).height(); // Current image height

        // Check if the current width is larger than the max
        if (height > width) {
            $(this).css("width", "44.5%"); // Set new width
            $(this).addClass("vert img"); // Set new width
        }
    });
});

Sorry if the formatting is funny. I have a really hard time pasting code. Let me know if the CSS is needed too.

4

0 回答 0