Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.06.2013, 15:29
Новичок на форуме
Отправить личное сообщение для dalis Посмотреть профиль Найти все сообщения от dalis
 
Регистрация: 30.06.2013
Сообщений: 2

Сдвиг блока вправо за границу экрана
Здравствуйте!

Вот возникла необходимость сделать такую штуку:

Несколько плиток меню, при клике по любой плитке, все они уезжают вправо за экран, а слева выезжает блок с дополнительной информацией.

Реализовать это вроде проблем не составило, но стало появляться поле горизонтальной прокрутки, убрал его overflow-x: hidden. Вроде все хорошо, но на мобильных браузерах всеравно остается возможность прокрутки до сдвинутых плиток меню. Попытался решить это при помощи fadeOut(0), после завершения анимации, на настольном вообще шикарно - можно и без overflow-x:hidden обойтись, а на мобильных браузерах стало все прыгать.

Собственно говоря, есть какой-либо способ сдвинуть блок вправо за границу экрана и так, чтобы не появлялась полоса прокрутки ни на настольных браузерах, ни на мобильных.

Вот код:

JavaScript

<script>
$('#service-logo').on('click', '#click-6', function(e){
  $('#service-logo').animate({
        left: "+=100%",
      }, 1500 );
  $('#data-6').animate({
        left: "50%",
      }, 1500 );
});

$('.more-data').on('click', '#close-6', function(e){
  $('#service-logo').animate({
        left: "-=100%"
      }, 1500 );
  $('#data-6').animate({
        left: "-100%",
      }, 1500 );
});
</script>


Разметка

<article>
<div class="more-data" id="data-6">Lorem IPSUM Dolor
<p class="service-close" id="close-6">X</p>
</div>

<ul id="service-logo">
<li id="click-6">
<p>LOREM IPSUM</p>
<img src="images/service-logos/service-logo-6.png" />
<div class="description">***<br />
Lorem ipsum 1<br />
Lorem ipsum 2<br />
Lorem ipsum 3<br />
Lorem ipsum 4<br />
***</div>
</li>
</ul>
</article>


Стили

Код:
<style>
#service-logo {
position: absolute;
width: 1200px;
height: 520px;
margin: 0 auto;
}
#service-logo li {
float: left;
width: 200px;
height: 520px;
background: #b0b0b0;
border: 2px dashed #d1d1d1;
color: #f6f6f6;
}
#service-logo img {
width: 140px;
margin: 20px 0 0 30px;
}
#service-logo li p {
text-align: center;
margin: 5px 0 0 0;
}
.description {
text-align: center;
line-height: 48px;
}
.more-data {
width: 1000px;
max-height: 518px;
position: absolute;
left: -100%;
margin-left: -530px;
background: #b0b0b0;
outline: 2px dashed #cdcdcd;
padding: 40px 20px 10px 20px;
color: white;
}
.service-close {
position: absolute;
top: 7px;
right: 10px;
cursor: pointer;
}
</style>
Ответить с цитированием
  #2 (permalink)  
Старый 30.06.2013, 20:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

dalis,
Вариант ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title><style>
#service-logo {
position: absolute;
width: 1200px;
height: 520px;
margin: 0 auto;
}
#service-logo li {
float: left;
width: 200px;
height: 520px;
background: #b0b0b0;
border: 2px dashed #d1d1d1;
color: #f6f6f6;
}
#service-logo img {
width: 140px;
margin: 20px 0 0 30px;
}
#service-logo li p {
text-align: center;
margin: 5px 0 0 0;
}
.description {
text-align: center;
line-height: 48px;
}
.more-data {
width: 700px;
max-height: 518px;
position: absolute;
left: -100%;
background: #b0b0b0;
outline: 2px dashed #cdcdcd;
padding: 40px 20px 10px 20px;
color: white;
margin:  auto 15%;
}
.service-close {
position: absolute;
top: 7px;
right: 10px;
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


</head>

<body>
<article>
<div class="more-data" id="data-6">Lorem IPSUM Dolor
<p class="service-close" id="close-6">X</p>
</div>
<div style="width: 100%; position:  fixed">
<ul id="service-logo">
<li id="click-6">
<p>LOREM IPSUM</p>
<img src="images/service-logos/service-logo-6.png" />
<div class="description">***<br />
Lorem ipsum 1<br />
Lorem ipsum 2<br />
Lorem ipsum 3<br />
Lorem ipsum 4<br />
***</div>
</li>
</ul>
</div>
</article>
<script>
$('#service-logo').on('click', '#click-6', function(e){
  $('#service-logo').animate({
        left: "+=100%",
      }, 1500 );
  $('#data-6').animate({
        left: "0%",
      }, 1500 );
});

$('.more-data').on('click', '#close-6', function(e){
  $('#service-logo').animate({
        left: "-=100%"
      }, 1500 );
  $('#data-6').animate({
        left: "-100%",
      }, 1500 );
});
</script>

</body>

</html>

Последний раз редактировалось рони, 30.06.2013 в 20:34.
Ответить с цитированием
  #3 (permalink)  
Старый 01.07.2013, 23:39
Новичок на форуме
Отправить личное сообщение для dalis Посмотреть профиль Найти все сообщения от dalis
 
Регистрация: 30.06.2013
Сообщений: 2

рони

решение клевое но увы, этот блок находится не совсем наверху, до него скроллить приходится, а из-за position:fixed - доскролливать до него можно всю жизнь (хотя, если в iframe засунутьь ) ) но, большое спасибо

но вот уже не надо, убедил, чтобы блок влево уходил, а не в право

Последний раз редактировалось dalis, 01.07.2013 в 23:42.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Масштабирование блока, в зависимости от разрешения экрана Keksman jQuery 2 25.05.2012 03:49
слайд панели tadjik1 Элементы интерфейса 22 02.04.2012 17:13
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 14:12
Реклама, в зависимости от ширины экрана Asdvin Общие вопросы Javascript 21 22.01.2009 18:27