Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вертикальный слайдер или ..? (https://javascript.ru/forum/dom-window/50997-vertikalnyjj-slajjder-ili.html)

Jonny316 20.10.2014 15:17
Вертикальный слайдер или ..?
 
не подскажете скрипт когда 1 контент находит на другой, другой бы исчезал?

MallSerg 20.10.2014 18:40
аккардион?

ViRuSreloaded 20.10.2014 18:55
Код яваскрипт(вставляем до </head>):
<script type="text/javascript">
$(document).ready(function() {
	$('.content').click(function() {
			$('.content').removeClass('big'); // Убираем у всех класс "большой"
			$(this).addClass('big'); // Ставим текущему класс "большой"
     });
});
</script>


А после HTML:
<div class='content small'>
	БЛОК 1
</div>
<div class='content small'>
	БЛОК 2
</div>


CSS:
.small {
width:100%;
height:50px;
background: pink;
}
.big {
width:100%;
height:100px;
background: green;
}

ViRuSreloaded 20.10.2014 18:56
P.S.: Писал все тут, возможны опечатки.

Jonny316 22.10.2014 11:14
да наверно аккардион,
ViRuSreloaded спасибо Вам большое! выручили

kostyanet 22.10.2014 11:17
Цитата:
Сообщение от Jonny316
да наверно аккардион,
Пишите тогда уж по-русски: баян.

Jonny316 24.10.2014 17:14
я вот тут хочу сделать чтоб при наезде нижнего блока на верхний, верхний растворялся, тогда что в скрипте изменить надо?
<script type="text/javascript">
$(document).ready(function() {
$('.content').click(function() {
$('.content').removeClass('big'); // Убираем у всех класс "большой"
$(this).addClass('big'); // Ставим текущему класс "большой"
});
});
</script>

kostyanet 24.10.2014 17:32
Надо добавить йаду. Йад растворяет.

рони 24.10.2014 17:45
Jonny316,
:-? 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .small {
width:100%;
height:50px;
background: pink;
}
.big {
width:100%;
height:100px;
background: green;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
	$('.content').click(function() {
			$('.content').not(this).removeClass('big').fadeToggle(1500);
			$(this).toggleClass('big');
     });
});
</script>

</head>

<body>
<div class='content small'>
	БЛОК 1
</div>
<div class='content small'>
	БЛОК 2
</div>

</body>

</html>

kostyanet 25.10.2014 12:20
Я же говорил что нужен йад. Когда растворяются пункты top-level-menu - а именно так и задумал ТС и ему уже помогают - то это признак растворения мозга.

Jonny316 27.10.2014 10:28
не не кликом а прокруткой, пробую через
<script type="text/javascript">
$(document).ready(function(){

$(window).scroll(function(){
if ($(this).scrollTop() > 1200) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});

});
</script>
но не получается..

Jonny316 28.10.2014 11:31
точнее через fadeToggle

рони 28.10.2014 11:59
Jonny316,
делайте полноценный макет
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Jonny316 28.10.2014 15:21 
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .small {
width:100%;
height:50px;
background: pink;
}
.big {
width:100%;
height:100px;
background: green;
}
  </style>
  <script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
$(window).scroll(function(){
if ($(this).scrollTop() > 500) {
$('.big').fadeToggle(1500);
} else {
$('.small').fadeIn();
}
});
 
});
</script>
</head>
<body>
<div class='content small'>
    БЛОК 1
</div>
<div class='content small'>
    БЛОК 2
</div>
</body>
</html>

рони 28.10.2014 15:37
Jonny316,
24 строка -- где в коде хоть 1 элемент с классом big

Jonny316 28.10.2014 16:31
всe сделал рони, спасибо брат, что помогал..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 205) {
$('.logo').fadeOut(1500);
} else {
$('.logo').fadeIn();
}
});
});
</script>

рони 28.10.2014 16:48
Jonny316,
:)

Jonny316 29.10.2014 13:30
:)


Часовой пояс GMT +3, время: 23:10.