Использование JQuery для динамического изменения размера HTML-страницы с двумя столбцами приводит к бесконечному циклу в IE6.5 - PullRequest
Новая
       3

Использование JQuery для динамического изменения размера HTML-страницы с двумя столбцами приводит к бесконечному циклу в IE6.5

1 голос
/ 10 июля 2010

Я пишу веб-страницу, которая имеет вертикальную строку меню слева и основную панель контента справа.Для этого я использовал плавающие элементы CSS, но при изменении размера страницы содержимое может быть «помещено» под меню.Чтобы исправить это, я использовал jQuery для динамического изменения размера панели содержимого, и, похоже, он хорошо работал в FF3, Chrome 5 и IE8.Но когда я тестировал в IE6, браузер, казалось, попал в какой-то бесконечный цикл изменения размера.Я не знаю, почему.

Я использовал браузер, чтобы обойти это, но я знаю, что это не особенно надежный метод.Есть ли способ исправить поведение для IE6?Если нет, то есть ли лучший способ обнаружить это, чем анализировать браузер?Наконец, я переосмыслил эту проблему, добавив JavaScript в смесь?Могу ли я создать веб-страницу с двумя столбцами, которая будет хорошо выглядеть при изменении размера только с помощью CSS?

HTML 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<head> 
    <title>IE 6 Resize Madness</title> 
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" >  
    <link rel="stylesheet" type="text/css" href="home.css" > 
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="home.js"></script> 
</head> 
<body> 
    <h1><span id="id_title">IE 6 Resize Madness</span></h1> 

    <div id="sidebar"> 
        <ul id="main-nav"> 
            <li> 
                <a href='#'>Nav Link 1</a> 
            </li> 
            <li> 
                <a href='#'>Nav Link 2</a> 
            </li> 
            <li> 
                <a href='#'>Nav Link 3</a> 
            </li> 

            <li> 
                <a href='#'>Nav Link 4</a> 
            </li> 

        </ul> 
    </div> 
    <div id="content"> 
        <p class="first"> 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
        <p> 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
        <p> 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
        <p> 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
        </p> 
    </div> 
</body> 
</html>

Таблица стилей 

html {
    height: 100%;
    background-color: Teal;
}

body {
    background-color: Teal;
    margin-left: 0;
    padding-left: 0;
    margin-right: 0;
    padding-right: 0;
}

h1 {
    text-align: center;
    margin-bottom: 0.5em;
}

a {
    font-family: Verdana, sans-serif;
    color: silver;
}

a:hover {
    color: white;
}

/* Navigation menu. */
ul#main-nav {
    font-family:helvetica,arial,sans-serif;
    margin:0;
    padding:0;
    width:10em;
    /*width: 100%;*/
}
ul#main-nav li {
    margin:0;
    padding:0;
    list-style:none;
    margin:0 0 0.3em 0;
}
ul#main-nav li a {
    text-decoration:none;
    display:block;
    padding:0.3em 0.5em;
    border:2px solid indigo;
    color:#003;
    background:#fff;
}
ul#main-nav li a:hover {
    border:2px solid black;
    color:#000;
    background:#efefef
}

#sidebar {
    /*width: 10%;*/
    width: 12em;
    margin-left: 0;
    padding-left: 0.75em;
    margin-right: 2em;
    padding-right: 0;
    float: left;
    clear: left;
    background-color: Teal;
}
#content {
    font-family:helvetica,arial,sans-serif;
    font-size: 1.2em;
    width: 75%;
    margin-top: 0;
    padding-top: 0;
    margin-left: 0;
    padding-left: 0;
    margin-right: 2em;
    padding-right: 0.5em;
    float: right;
    clear: right;
    background-color: teal;
}

p {
    padding-left: 0.5em;
    margin-left: 0.5em;
}

.first {
    margin-top: 0;
    padding-top: 0;
}

JavaScript 

$(document).ready(function(){
    //Fade in the paragraphs.
    $("#content p").hide();
    $(document).click(function(){
        $("#content p").show();
    })
    ;
    $("#content p.first").fadeIn("slow", fade_in_next_paragraph);

    //Set content width.
    set_content_width();
    //IE6 goes crazy with resize events!
    //I hate having to do browser detection, but I am not sure what 
    //feature support I need to test.
    //IE8 in standards mode doesn't go into infinite recursion, but it
    //treats the right content pane as a static size and adds scroll bars
    //if the user tries to resize the window.
    //FF and Chrome seem to resize just fine.  Not sure which
    //behavior is correct.
    if($.browser.msie && parseFloat($.browser.version) < 8.0) return;
    $(window).resize(set_content_width);
})
;

function set_content_width()
{
    var body_width = $("body").width();
    var sidebar_width = $("#sidebar").outerWidth(true);
    var jq_content = $("#content");
    var content_width = jq_content.width();
    var delta = jq_content.outerWidth(true) - content_width;
    jq_content.width(body_width - sidebar_width - delta);
}

function fade_in_next_paragraph()
{
    var jqobj = $(this).next("p");
    if(jqobj.length > 0)
    {
        jqobj.delay(3000).fadeIn("slow", fade_in_next_paragraph);
    }
}

Ответы [ 2 ]

1 голос
/ 11 июля 2010

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

Чтобы получить макет с одной жидкостью на 2 cols 1-fix, вы можете: 

<div id="wrapper">
    <div id="side">
       this is the side bar
    </div>
    <div id="content">
       this is the content
    </div>
    <div id="footer">
       this is the footer
    </div>
</div>

и стиль 

#side {
    width:12em;
    float:left;
    margin:0;
    padding:1em;
}

#content {
    margin-left:12em;
    padding:1em;
    border:solid 1px red;
}

#wrapper {
    width:100%;
}

#footer {
    height:1%;
    clear:both;
    background:#ccc;
    padding:20px;
}
1 голос
/ 11 июля 2010

С каких это пор пользователи ie6 заслуживают просмотра хорошей веб-страницы?Ie6 почти 10 лет!

Теперь к вашему макету попробуйте это: 

#sidebar {
 float:left;
 width:12em
}

#content {
 margin-left:12em
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...