помогите со скриптом jquery
http://jsfiddle.net/RwH5x/
Вот пример. В общем задача такова, чтоб при нажатии на блок, скручивался абзац, но не полностью, а так чтоб оставалась его первая строка или две первых строки и при этом я при открытом виде мог подключить один класс, а при закрытом, он удался... Заранее спасибо, помогите плизз...:help: :help: :help: |
нужен крохотный скрипт
этот скрипт добавляет класс mini
$(function(){
$('.plashka').click(function(){
$(this).toggleClass('mini');
})
})
Рабочий пример
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Кликни по блоку с текстом.
<div class="plashka">
<h1>Download this app</h1>
<p>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</p>
</div>
<script>
$(function(){
$('.plashka').click(function(){
$(this).toggleClass('mini');
})
})
</script>
<style>
.plashka {
width:440px;
min-height:110px;
border:1px #ebebeb solid;
border-radius:10px;
}
.mini {
height:100px;
overflow:hidden;
}
.plashka h1 {
font-size:30px;
}
.plashka p {
margin-top:20px;
}
</style>
|
ну это немного не то... Щас опишу...
при нажатии на блоке обвертке, должен плавно открыться полностью абзац и после этого примениться класс, который изменил бы вид блока обвертки, а при втором нажатии абзац закрылся и этот класс удалился. В общем в задумке сделать блок обвертку в виде кнопки. При наведение срабатывает ховер со своими стилями тенями и т.д., при нажатии, происходит появление абзаца а у дива (кнопки), меняются стили... |
извините что лезу со своим самоваром ))) но может сгодится http://javascript.ru/forum/project/3...jj-stroki.html
|
Цитата:
|
hesrun,
Самовар ненужон, могет чайник сгодится ))
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.plashka {
width:440px;
border:1px #ebebeb solid;
border-radius:10px;
overflow:hidden;
}
.maxi {
background-color:#FFCC00;
border: #00CC00 1px solid
}
.plashka h1 {
font-size:30px;
}
.plashka p {
margin-top:20px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Кликни по блоку с текстом.
<div class="plashka">
<h1>Download this app</h1>
<p>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</p>
</div>
<script>
$(function () {
var n = 1;
var h = $('.plashka').outerHeight()
$('.plashka').height(98);
$('.plashka').click(function () {
n ^= 1
n ? $(this).animate({
height: 98
}, 1000, function () {
$(this).toggleClass('maxi')
}) : $(this).animate({
height: h
}, 1000, function () {
$(this).toggleClass('maxi')
})
})
})
</script>
</body>
</html>
|
Цитата:
Вот мне надо такую, только с перламутровыми пуговицами... А точнее, с анимацией все четко, как и нужно было... Только стили должны подхватытваться из CSS, не прописывая их в скрипте... И изначально, он (див) должен быть уже маленького размера... |
Цитата:
Цитата:
|
Цитата:
|
hesrun,
смотрите код в 6 посте |
Цитата:
|
Цитата:
|
Цитата:
|
ой, простите... Это я запутался в постах... Спасибо большое ребят! Я хотел изначально с помощью тогла при нажатии в первой функции описать добавление класса а затем slidetoggle закрыть вообще абзац но это немного не то... А так как бы стараюсь учиться, но не всегда в голову мою приходят такие мысли... Учить и еще раз учить...
|
<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--> $(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('')}) }) }); вот переделал от изначального... На сайте таких плашек куча... Нажимая на одной, раскрываются все все абзацы внутри. Как сделать так, чтоб раскрывался только тот абзац, который находится в диве ко которому был произведен клик? Ну и стиль собственно применялся именно к этому диву... В предыдущем скрипте разъезжался див, а нужно чтоб абзац раскрывался и толкал обвертку.... |
Цитата:
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
http://jsfiddle.net/jejyK/
Простите, но как с форума это сделать не догадался... Как сделать по человечески? Чтоб открывался только нужный абзац, this, next не подходит.... |
Цитата:
Цитата:
|
Цитата:
они чередуются четная с нечетной... Нашел такое решение, и довольно простое... http://jsfiddle.net/jejyK/2/ использовал find() перелопатил документацию... Если не сложно, покажите как можно было это сделать c each() |
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>
|
Цитата:
|
сделал симбиоз...
http://jsfiddle.net/jejyK/3/ |
Столкнулся вот еще с какой проблемой!
Кликабельный у меня весь блок, и див с текстом тоже, потому что он внутри блока .plashka... Так вот у меня в сворачиваемом блоке кнопки и ссылки, и когда я на них нажимаю блок сворачивается? Как мне отменить анимацию на этих этих элементах??? |
Цитата:
IMHO неудачная реализация... |
Цитата:
Помогите тут: var h = $('.slide_text').outerHeight(true); в переменную H получить значение высоты блока .slide_text, в этом блоке находятся еще блоки. Как мне получить высоту которая включает все падинги марджины его и его чилдренят? |
| Часовой пояс GMT +3, время: 13:10. |