Высота шкалы деления до заданной высоты при изменении размера окна

Question

Высота шкалы деления до заданной высоты при изменении размера окна

0

Я ищу решение с помощью Jquery для масштабирования высоты div, когда пользователь изменяет размеры окна браузера и добавляет к нему легкую анимацию с небольшой задержкой. Мне нужен <div> с классом .graph чтобы иметь минимальную высоту 300 пикселей и иметь возможность вырасти до 700 пикселей при изменении размера окна.

HTML

<div id="slide1" class="current">

    <div class="graph resize">
    This is where a SVG graph would go
    </div>

</div>

CSS

body,html{
margin:0;
height:100%;
}

.current{
height:100%;
min-height:750px;
position:relative; 
background:#ccc;
padding:5px;
}

.graph{
position:absolute;
width:950px;
min-height:300px;
background:#fafafa;
box-shadow: 0 1px 0 1px #DAD8D8;
}

ryan 22 окт. 2013, в 00:36

Источник

Теги:

jquery

scale

window-resize

1 ответ

Ещё вопросы

ryan · Answer 1 · 2013-10-22T18-35-00.000Z

Хорошо, я понял это. После игры с анимацией jQuery и некоторыми свойствами css у меня есть довольно гладкий скрипт.

Я включил скрипку ниже, если кто-то хотел бы, чтобы она работала.

JSFIDDLE

$(document).ready(function(){

$(window).resize(function(){

$('.className').css({
position:'absolute',
left: ($("#slide2, #slide3, #slide4").width() 
 - $('.className').outerWidth())/2,
 top: ($(window).height() 
 - $('.className').outerHeight())/2
 });

});

// To initially run the function:

$(window).resize();

$(window).on('load resize', function(){
$('.className').animate({height: $(window).height()-$('.className').height() / 2},300,
function(){

        setInterval(function() {

        $(".className").css({
        top: ($(window).height()
          - $('.className').outerHeight())/2,
        });

        }, 0);
        });
});


});