Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.08.2015, 13:38
Интересующийся
Отправить личное сообщение для karssen Посмотреть профиль Найти все сообщения от karssen
 
Регистрация: 14.06.2013
Сообщений: 25

Изменение видимости наложенных друг на друга блоков в зависимости от сепаратора
Доброго времени суток. Может кто сталкивался с уже готовыми решениями или у кого то есть мысли как это реализовать. Есть 2 блока абсолютно-спозиционированных один поверх другого. Есть вертикальная линия сепаратор, при перемещении сепаратора вдоль оси Х пространство слева от него должно быть заниматься блоком, который находится снизу, а пространство справа оставаться блоком , который находится сверху, до тех пор пока сепаратор не достигнет правого края.
Разметка есть здесь http://jsfiddle.net/nafz6jr2/
Ответить с цитированием
  #2 (permalink)  
Старый 03.08.2015, 14:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

картинки с сепаратором
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>

Последний раз редактировалось рони, 03.08.2015 в 14:47.
Ответить с цитированием
  #3 (permalink)  
Старый 03.08.2015, 15:04
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от karssen
Может кто сталкивался с уже готовыми решениями
http://www.jqwidgets.com/jquery-ui-splitter/
http://novice2ninja.ru/ninja-book/ch.../splitter.html
Ответить с цитированием
  #4 (permalink)  
Старый 03.08.2015, 16:13
Интересующийся
Отправить личное сообщение для karssen Посмотреть профиль Найти все сообщения от karssen
 
Регистрация: 14.06.2013
Сообщений: 25

Странно. Здесь работает все как надо. Но если запускать код в браузере то получается вот так
Ответить с цитированием
  #5 (permalink)  
Старый 03.08.2015, 16:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

karssen,
css смотрите
Ответить с цитированием
  #6 (permalink)  
Старый 03.08.2015, 16:56
Интересующийся
Отправить личное сообщение для karssen Посмотреть профиль Найти все сообщения от karssen
 
Регистрация: 14.06.2013
Сообщений: 25

спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск