Форум

karssen · #1 (**permalink**) 03.08.2015, 13:38

Доброго времени суток. Может кто сталкивался с уже готовыми решениями или у кого то есть мысли как это реализовать. Есть 2 блока абсолютно-спозиционированных один поверх другого. Есть вертикальная линия сепаратор, при перемещении сепаратора вдоль оси Х пространство слева от него должно быть заниматься блоком, который находится снизу, а пространство справа оставаться блоком , который находится сверху, до тех пор пока сепаратор не достигнет правого края.
Разметка есть здесь http://jsfiddle.net/nafz6jr2/

рони · #2 (**permalink**) 03.08.2015, 14:43

karssen,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <style type='text/css'>
    #wrapper{
	width:400px;
	margin:0 auto;
	position:relative;
}
.vertical1 {
    width:400px;
	height:200px;
	background-color:red;
	position:absolute;
    background-image: url(http://javascript.ru/img/ws_1.png);
     background-position:  left top;
     background-repeat: no-repeat;
    background-size:    cover;
}
.vertical2 {
    width:400px;
	height:200px;
	background-color:blue;
	position:absolute;
    right: 0;
    background-image: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
     background-position: right top;
     background-repeat: no-repeat;
    background-size:    cover;
}
.separator{
	width:5px;
	height:200px;
	background-color:black;
	position:absolute;
	z-index:2;
}
  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type='text/javascript'>
window.onload=function(){
$(document).ready(function(){
	$('#wrapper').mousemove(function(e){
		var sep = $(this).children('.separator');
		var left = $('#wrapper').offset().left;
		var top = $('#wrapper').offset().top;
		if(e.clientX >= left && e.clientX <= (left + 395)){
		sep.offset({top:top, left:e.clientX});
        var a = 400 - (e.clientX - left)
        $('.vertical2').width(a)
		}
	});
})
}

</script>


</head>
<body>
  <div id="wrapper">
		<div class='vertical1'>

		</div>
		<div class='vertical2'>

		</div>
		<div class="separator">
		</div>
	</div>

</body>


</html>

ksa · #3 (**permalink**) 03.08.2015, 15:04

Сообщение от karssen

Может кто сталкивался с уже готовыми решениями

http://www.jqwidgets.com/jquery-ui-splitter/
http://novice2ninja.ru/ninja-book/ch.../splitter.html

karssen · #4 (**permalink**) 03.08.2015, 16:13

Странно. Здесь работает все как надо. Но если запускать код в браузере то получается вот так

рони · #5 (**permalink**) 03.08.2015, 16:31

karssen,
css смотрите

karssen · #6 (**permalink**) 03.08.2015, 16:56

спасибо

Форум

Справочник

Discord чат

Курсы javascript