Форум

hesrun · #11 (**permalink**) 21.02.2013, 11:17

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

hesrun,
смотрите код в 6 посте

Там, если я правильно понял тринарный стоит? А как мне его модифицировать, чтоб он изначально был высотой в 98 пикселей, а потом при щелчке растянулся и при обратном щелчке вернулся в в свои 98...?

рони · #12 (**permalink**) 21.02.2013, 11:48

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

Там, если я правильно понял тринарный стоит? А как мне его модифицировать, чтоб он изначально был высотой в 98 пикселей, а потом при щелчке растянулся и при обратном щелчке вернулся в в свои 98...?

а разве это не так в скрипте?

hesrun · #13 (**permalink**) 21.02.2013, 12:24

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

hesrun,
смотрите код в 6 посте

Ну подскажите еще как сделать, чтоб при загрузке страницы блок был 98 пикселей?

hesrun · #14 (**permalink**) 21.02.2013, 12:28

ой, простите... Это я запутался в постах... Спасибо большое ребят! Я хотел изначально с помощью тогла при нажатии в первой функции описать добавление класса а затем slidetoggle закрыть вообще абзац но это немного не то... А так как бы стараюсь учиться, но не всегда в голову мою приходят такие мысли... Учить и еще раз учить...

hesrun · #15 (**permalink**) 21.02.2013, 15:22

<div class="plashka">
<span class="nomber_quest">01</span>
<h1>Download this app</h1>
<div class="quest_share">
<p>5</p>
<span>shares</span>
</div>
<div class="slide_text">Visite our facebook
Why? For the glory of SATANE of course!
Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
Why? For the glory of SATANE of course!
Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
Why? For the glory of SATANE of course!
Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor</div>
</div>

$(document).ready(function() {
var n = 1;
var h = $('.slide_text').outerHeight() + 10;
$('.slide_text').height(20);
$('.plashka').click(function () {
n ^= 1
n ? $('.slide_text').animate({height: 20}, 1000, function () {$(this).toggleClass('')}) :
$('.slide_text').animate({height: h}, 1000, function () {$(this).toggleClass('')})

})

});

вот переделал от изначального... На сайте таких плашек куча... Нажимая на одной, раскрываются все все абзацы внутри. Как сделать так, чтоб раскрывался только тот абзац, который находится в диве ко которому был произведен клик? Ну и стиль собственно применялся именно к этому диву... В предыдущем скрипте разъезжался див, а нужно чтоб абзац раскрывался и толкал обвертку....

рони · #16 (**permalink**) 21.02.2013, 15:30

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

Как сделать так, чтоб раскрывался только тот абзац, который находится в диве ко которому был произведен клик?

присвоить клики персонально http://api.jquery.com/each/
Пожалуйста, отформатируйте свой код!

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

[js]
... ваш код...
[/js]

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

hesrun · #17 (**permalink**) 21.02.2013, 15:48

http://jsfiddle.net/jejyK/

Простите, но как с форума это сделать не догадался...
Как сделать по человечески? Чтоб открывался только нужный абзац, this, next не подходит....

рони · #18 (**permalink**) 21.02.2013, 15:55

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

Как сделать по человечески? Чтоб открывался только нужный абзац

прочитайте

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

присвоить клики персонально http://api.jquery.com/each/

hesrun · #19 (**permalink**) 21.02.2013, 16:05

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

прочитайте

http://jsfiddle.net/jejyK/1/
они чередуются четная с нечетной...

Нашел такое решение, и довольно простое...
http://jsfiddle.net/jejyK/2/
использовал find() перелопатил документацию...

Если не сложно, покажите как можно было это сделать c each()

рони · #20 (**permalink**) 21.02.2013, 17:05

hesrun,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
  <style type='text/css'>
    .plashka {
	position:relative;
	margin:30px 0 0 0;
	padding:10px 10px 20px 50px;
	width:380px;
	min-height:80px;
	border:1px #ebebeb solid;
}
.nomber_quest {
	position:absolute;
	top:26px;
	left:25px;
	font-size:13px;
	color:#bebebe;
}
.plashka h1 {
	font-size:31px;
	color:#000;
	float:left;
}
.quest_share_blue {
	text-align:center;
	float:right;
	width:85px;
	height:87px;
}
.quest_share_blue p {
	margin-top:15px;
	font-size:30px;
	color:#FFF;
}
.quest_share_blue span {
	color:#FFF;
}
.quest_share_grey {
	text-align:center;
	float:right;
	width:85px;
	height:87px;
}
.quest_share_grey p {
	margin-top:15px;
	font-size:30px;
	color:#FFF;
}
.quest_share_grey span {
	color:#FFF;
}
.slide_text {
	clear:left;
	width:290px;
	font-size:14px;
	color:#666666;
	padding:10px 0 0 0;
	overflow:hidden;
	line-height:20px;
}
.plashka_wrap {
	position:relative;
}
.quest_shadow {
	width:440px;
	height:5px;
	position:absolute;
}
.quest_shadow_inside {
	width:440px;
	height:5px;
	position:absolute;
	top:0px;
}
.left_col_quest {
	float:left;
}
.right_col_quest {
	float:right;
}
  </style>



<script type='text/javascript'>

$(document).ready(function(){
	    $('.plashka').each(function () {
        var n = 1;
	    var h = $('.slide_text', this).outerHeight() + 10;
        $(this).click(function() {
				n ^= 1
				n ? $('.slide_text',this).stop().animate({height: 20}, 500, function () {$(this).toggleClass('')}) :
				$('.slide_text', this).stop().animate({height: h}, 500, function () {$(this).toggleClass('')})
			});
	    })
       $('.slide_text').height(20);
});


</script>


</head>
<body>
  <div class="left_col_quest">
                    	<div class="plashka_wrap">
                        <div class="plashka">
                        	<span class="nomber_quest">01</span>
                        	<h1>Download this app</h1>
                            <div class="quest_share_blue">
                            	<p>5</p>
                                <span>shares</span>
                            </div>
                            <div class="slide_text">Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor11</div>
                            </div><!--plashka-->
                            <div class="quest_shadow">
                            </div>
                        </div><!--plashka_wrap-->

                        <div class="plashka_wrap">
                        <div class="plashka">
                        	<span class="nomber_quest">01</span>
                        	<h1>Download this app</h1>
                            <div class="quest_share_blue">
                            	<p>5</p>
                                <span>shares</span>
                            </div>
                            <div class="slide_text">Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor</div>
                            </div><!--plashka-->
                            <div class="quest_shadow">
                            </div>
                        </div><!--plashka_wrap-->
                        <div class="plashka_wrap">
                        <div class="plashka">
                        	<span class="nomber_quest">01</span>
                        	<h1>Download this app</h1>
                            <div class="quest_share_blue">
                            	<p>5</p>
                                <span>shares</span>
                            </div>
                            <div class="slide_text">Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor</div>
                            </div><!--plashka-->
                            <div class="quest_shadow">
                            </div>
                        </div><!--plashka_wrap-->
                    </div><!--left_col-->



                    <div class="right_col_quest">

                    <div class="plashka_wrap">
                        <div class="plashka">
                        	<span class="nomber_quest">01</span>
                        	<h1>Download this app</h1>
                            <div class="quest_share">
                            	<p>5</p>
                                <span>shares</span>
                            </div>
                            <div class="slide_text">Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor</div>
                            </div><!--plashka-->
                            <div class="quest_shadow">
                            </div>
                        </div><!--plashka_wrap-->
                        <div class="plashka_wrap">
                        <div class="plashka">
                        	<span class="nomber_quest">01</span>
                        	<h1>Download this app</h1>
                            <div class="quest_share">
                            	<p>5</p>
                                <span>shares</span>
                            </div>
                            <div class="slide_text">Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor</div>
                            </div><!--plashka-->
                            <div class="quest_shadow">
                            </div>
                        </div><!--plashka_wrap-->
                        <div class="plashka_wrap">
                        <div class="plashka">
                        	<span class="nomber_quest">01</span>
                        	<h1>Download this app</h1>
                            <div class="quest_share">
                            	<p>5</p>
                                <span>shares</span>
                            </div>
                            <div class="slide_text">Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
								Why? For the glory of SATANE of course!
								Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor</div>
                            </div><!--plashka-->
                            <div class="quest_shadow">
                            </div>
                        </div><!--plashka_wrap-->

                    </div><!--right_col-->

</body>


</html>

Форум

Справочник

Discord чат

Курсы javascript