Позиционная проблема плагина jQuery Slide - PullRequest
Новая
       21

Позиционная проблема плагина jQuery Slide

1 голос
/ 29 сентября 2011

Я использовал плагин Slide, чтобы вставить div для замены другого div. Вот мой код:

http://jsbin.com/iwemaq/15

Я должен был сделать положение второго div абсолютным, чтобы он оставался на одном уровне с существующим div. Если вы возьмете это из примера, это заставит первый div опуститься, и он не будет на уровне второго, поскольку он оживляет. Однако высота контейнера больше не зависит от содержимого. Как мне добиться этого эффекта?

Я хочу, чтобы 2 дива могли перемещаться взад и вперед, в то время как уровень и хранение контейнера для обоих дивов, любой совет действительно поможет! Спасибо!

Ответы [ 2 ]

1 голос
/ 29 сентября 2011

У меня есть альтернативное, возможно, немного более элегантное решение (см. http://jsfiddle.net/MM3D4/):

CSS: 

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#container {
    display: block;
    width: 100%;
    overflow: hidden;  
}
#panelWrapper {
    display: block;
    width: 200%;   
}

#instructionsPanel, #mainContentContainer {
    display: inline-block;
    width: 49.8%;
}

HTML: 

<div id="container" style="border:thin black solid">
    <div id="panelWrapper">
        <div id="mainContentContainer">
            <a href="#" style="color:blue;text-decoration:underline" id="showInstructionsPanel">See Help column</a>
            <div class="heading2">Main Content</div>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
        </div>
        <div id="instructionsPanel">
            <a href="#" style="color:blue;text-decoration:underline" id="hideInstructionsPanel">&gt;- Click here to Go Back</a>
            <div class="heading2">Help Panel</div>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
        </div>
    </div>
</div>

Javascript: 

jQuery(document).ready(function() {
    jQuery("#showInstructionsPanel").live("click", function(e) {
        jQuery('#mainContentContainer').animate({'margin-left':'-50%'}, 1000);
        e.preventDefault();

    });  
    jQuery("#hideInstructionsPanel").live("click", function(e) {  
        jQuery('#mainContentContainer').animate({'margin-left':'0'}, 1000);
        e.preventDefault();
    });

});
1 голос
/ 29 сентября 2011

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

<script>
    jQuery(document).ready(function() {

        jQuery("#showInstructionsPanel").live("click", function() {

            jQuery('#mainContentContainer').hide('slide', {
                direction: 'left'
            }, 1000);

            jQuery('#instructionsPanel').show('slide', {
                direction: 'right'
            }, 1000, function () { jQuery('#container').height(jQuery(this).height()); });
        });

        jQuery("#hideInstructionsPanel").live("click", function() {

            jQuery('#mainContentContainer').show('slide', {
                direction: 'left'
            }, 1000, function () { jQuery('#container').height(jQuery(this).height()); });

            jQuery('#instructionsPanel').hide('slide', {
                direction: 'right'
            }, 1000);
        });


    });
</script>

Редактировать: вот еще одна версия, котораяанимирует высоту контейнера, чтобы избежать прыжка, который происходит с версией, размещенной выше.http://jsbin.com/iqovox

...