20.02.2013, 21:02
|
|
Интересующийся
|
|
Регистрация: 15.02.2013
Сообщений: 17
|
|
|
помогите со скриптом jquery
http://jsfiddle.net/RwH5x/
Вот пример.
В общем задача такова, чтоб при нажатии на блок, скручивался абзац, но не полностью, а так чтоб оставалась его первая строка или две первых строки и при этом я при открытом виде мог подключить один класс, а при закрытом, он удался...
Заранее спасибо, помогите плизз... 
|
|
20.02.2013, 21:44
|
|
Профессор
|
|
Регистрация: 04.02.2011
Сообщений: 1,815
|
|
нужен крохотный скрипт
этот скрипт добавляет класс 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>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Последний раз редактировалось DjDiablo, 20.02.2013 в 21:47.
|
|
20.02.2013, 23:03
|
|
Интересующийся
|
|
Регистрация: 15.02.2013
Сообщений: 17
|
|
|
ну это немного не то... Щас опишу...
при нажатии на блоке обвертке, должен плавно открыться полностью абзац и после этого примениться класс, который изменил бы вид блока обвертки, а при втором нажатии абзац закрылся и этот класс удалился.
В общем в задумке сделать блок обвертку в виде кнопки. При наведение срабатывает ховер со своими стилями тенями и т.д., при нажатии, происходит появление абзаца а у дива (кнопки), меняются стили...
Последний раз редактировалось hesrun, 20.02.2013 в 23:19.
|
|
20.02.2013, 23:12
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
извините что лезу со своим самоваром ))) но может сгодится jQuery plugin, обрезающий строки |
|
20.02.2013, 23:25
|
|
Интересующийся
|
|
Регистрация: 15.02.2013
Сообщений: 17
|
|
Тоже не то... Раскрывающийся абзац должен тянуть див обвертку |
|
21.02.2013, 00:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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>
Последний раз редактировалось рони, 21.02.2013 в 01:59.
|
|
21.02.2013, 00:36
|
|
Интересующийся
|
|
Регистрация: 15.02.2013
Сообщений: 17
|
|
Сообщение от рони
|
hesrun,
Самовар ненужон, могет чайник сгодится ))
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.plashka {
width:440px;
min-height:98px;
border:1px #ebebeb solid;
border-radius:10px;
overflow:hidden;
}
.mini {
background-color:#FFCC00;
}
.plashka h1 {
font-size:30px;
}
.plashka p {
margin-top:20px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" src="http://code.jquery.com/color/jquery.color-2.1.1.js" type="text/javascript"></script>
</head>
<body>
Кликни по блоку с текстом.
<div class="plashka mini">
<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 = 0;
var h = $('.plashka').outerHeight()
$('.plashka').click(function () {
n ^= 1
n ? $(this).animate({
height: 98,
backgroundColor: '#CCFFFF'
}, 1000, function () {
$(this).toggleClass('mini')
}) : $(this).animate({
height: h,
backgroundColor: '#FFCC00'
}, 1000, function () {
$(this).toggleClass('mini')
})
})
})
</script>
</body>
</html>
|
Вот мне надо такую, только с перламутровыми пуговицами...
А точнее, с анимацией все четко, как и нужно было... Только стили должны подхватытваться из CSS, не прописывая их в скрипте... И изначально, он (див) должен быть уже маленького размера...
Последний раз редактировалось hesrun, 21.02.2013 в 00:40.
|
|
21.02.2013, 00:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от hesrun
|
|
Только стили должны подхватытваться из CSS, не прописывая их в скрипте... И изначально, он (див) должен быть уже маленького размера...
|
так пропишите в css всё что нужно и уберите из скрипта всё лишнее.сам скрипт готов дело за вами.
|
Сообщение от hesrun
|
|
при нажатии на блоке обвертке, должен плавно открыться полностью абзац и после этого примениться класс, который изменил бы вид блока обвертки, а при втором нажатии абзац закрылся и этот класс удалился.
|
скрипт именно так и работает.
Последний раз редактировалось рони, 21.02.2013 в 00:59.
|
|
21.02.2013, 01:02
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от hesrun
|
|
Раскрывающийся абзац должен тянуть див обвертку
|
Так там делов то - удалить div.more{position:absolute} из css.  |
|
21.02.2013, 01:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
hesrun,
смотрите код в 6 посте
|
|
|
|
