Как я могу исправить заставку сайта для работы в IE8 и ниже? - PullRequest
Новая
       4

Как я могу исправить заставку сайта для работы в IE8 и ниже?

0 голосов
/ 28 декабря 2010

Я долго пытался выяснить, как заставить корректно работать заставку на этом сайте в IE8 и ниже? Прямо сейчас он работает во всех других браузерах (Firefox, Chrome, Safari). Вот сайт:

http://gds.parkland.edu/student/fall10/gds220/ashipley/p2/final_revised/index.html

JQuery код: 

/* Sliding Affect Splash Page */
$(function() {
    $('.box').each(function() {
        var $this = $(this);
        $.data(this, 'css', { 
            width: $this.css('width'),
            background: $this.css('background-image') 
        });
    });
});

function restore() {
    $('.box').each(function() {
        var orig = $.data(this, 'css');
        $(this).animate({
            width: orig.width
        },{queue:false});
        $(this).css({backgroundImage: orig.background});
    });
}

/* box 1 */
function boxHover(){
        $('.box').stop().animate({'width' : '596px'},{queue:false});
}

function box1master(){
        $('.box2').css({backgroundImage: 'url(images/splash/zatgun_midtop.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/zatgun_midbottom.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/zatgun_bottom.jpg)'});
}
function box2master(){
        $('.box1').css({backgroundImage: 'url(images/splash/bryan_top.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/bryan_midbottom.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/bryan_bottom.jpg)'});
}
function box3master(){
        $('.box1').css({backgroundImage:'url(images/splash/galleries_top.jpg)'});
        $('.box2').css({backgroundImage: 'url(images/splash/galleries_midtop.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/galleries_bottom.jpg)'});
}
function box4master(){
        $('.box1').css({backgroundImage: 'url(images/splash/contact_top.jpg)'});
        $('.box2').css({backgroundImage: 'url(images/splash/contact_midtop.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/contact_midbottom.jpg)'});
}


$(document).ready(function(){

    $('.box1').hover(function(){
        boxHover();
        box1master();
    }, function(){      
        restore();
    });

    $('.box2').hover(function(){
        boxHover();
        box2master();       
    }, function(){      
        restore();
    });

    $('.box3').hover(function(){
        boxHover();
        box3master();
    }, function(){      
        restore();
    });

    $('.box4').hover(function(){
        boxHover();
        box4master();
    }, function(){      
        restore();
    });

});

Интересно, могу ли я изменить интервал между каждым из полей с помощью jQuery или мне как-то нужно сделать это в CSS / HTML?

Еще один элемент, с которым я связывался в HTML на сайте: 

<!--[if lt IE 8]>

<style text="text/css">
.box2, .box3, .box4 { margin-top: 132px; }
</style>

<![endif]-->

Всякий раз, когда я изменяю поле на отступ, оно не работает одинаково. Когда бы я ни наводил курсор на него, он правильно разнесен, но толкает содержимое справа к краю, не показывая прямоугольники на другой стороне.

Ответы [ 2 ]

1 голос
/ 28 декабря 2010

Когда я загружаю его в IE8, я получаю эту ошибку

Объект не поддерживает это свойство или метод slide_splash.js, строка 81 символ 1

Это строка 81 

$.preloadImages(['zatgun_midtop.jpg', 'zatgun_midbottom.jpg', 'zatgun_bottom.jpg', 'bryan_top.jpg', 'bryan_midbottom.jpg', 'bryan_bottom.jpg', 'galleries_mtop.jpg', 'galleries_midtop.jpg', 'galleries_bottom.jpg', 'contact_top.jpg', 'contact_midtop.jpg', 'contact_midbottom.jpg']);

Что это за preloadImages и откуда он взялся. Вы никогда не вставляли его как часть своего кода.

Это из этого?

http://plugins.jquery.com/project/preloadImages

Если это так, я думаю, вам нужно скачать плагин, чтобы использовать его. Я также получаю в Firefox ту же ошибку. 

$.preloadImages is not a function
[Break On This Error] $.preloadImages(['zatgun_midtop.jpg', ...idtop.jpg', 'contact_midbottom.jpg']);
0 голосов
/ 02 января 2011

Спасибо chobo2 за ваш ответ! Это определенно мне очень помогло.

Но я выяснил, что причина, по которой div смещают друг друга, заключается в том, что позиция и поля считываются в IE.

Я должен был сделать следующее: 

<!--[if lt IE 9]>

<style text="text/css">
.box2, .box4{ top: 132px; }
.box3, .box4{ top: 264px; }
.box1, .box3{ position: absolute; }
.box2, .box4{ position: relative; }
a:hover { cursor: pointer; }
</style>

<![endif]-->

Вы можете увидеть результаты в любом браузере сейчас здесь .

...