Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.02.2013, 19:02
Интересующийся
Отправить личное сообщение для hesrun Посмотреть профиль Найти все сообщения от hesrun
 
Регистрация: 15.02.2013
Сообщений: 17

помогите со скриптом jquery
http://jsfiddle.net/RwH5x/

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

Заранее спасибо, помогите плизз...
Ответить с цитированием
  #2 (permalink)  
Старый 20.02.2013, 19:44
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 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 в 19:47.
Ответить с цитированием
  #3 (permalink)  
Старый 20.02.2013, 21:03
Интересующийся
Отправить личное сообщение для hesrun Посмотреть профиль Найти все сообщения от hesrun
 
Регистрация: 15.02.2013
Сообщений: 17

ну это немного не то... Щас опишу...

при нажатии на блоке обвертке, должен плавно открыться полностью абзац и после этого примениться класс, который изменил бы вид блока обвертки, а при втором нажатии абзац закрылся и этот класс удалился.
В общем в задумке сделать блок обвертку в виде кнопки. При наведение срабатывает ховер со своими стилями тенями и т.д., при нажатии, происходит появление абзаца а у дива (кнопки), меняются стили...

Последний раз редактировалось hesrun, 20.02.2013 в 21:19.
Ответить с цитированием
  #4 (permalink)  
Старый 20.02.2013, 21:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,066

извините что лезу со своим самоваром ))) но может сгодится jQuery plugin, обрезающий строки
Ответить с цитированием
  #5 (permalink)  
Старый 20.02.2013, 21:25
Интересующийся
Отправить личное сообщение для hesrun Посмотреть профиль Найти все сообщения от hesrun
 
Регистрация: 15.02.2013
Сообщений: 17

Сообщение от рони Посмотреть сообщение
извините что лезу со своим самоваром ))) но может сгодится jQuery plugin, обрезающий строки
Тоже не то... Раскрывающийся абзац должен тянуть див обвертку
Ответить с цитированием
  #6 (permalink)  
Старый 20.02.2013, 22:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,066

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>

Последний раз редактировалось рони, 20.02.2013 в 23:59.
Ответить с цитированием
  #7 (permalink)  
Старый 20.02.2013, 22:36
Интересующийся
Отправить личное сообщение для hesrun Посмотреть профиль Найти все сообщения от hesrun
 
Регистрация: 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, 20.02.2013 в 22:40.
Ответить с цитированием
  #8 (permalink)  
Старый 20.02.2013, 22:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,066

Сообщение от hesrun
Только стили должны подхватытваться из CSS, не прописывая их в скрипте... И изначально, он (див) должен быть уже маленького размера...
так пропишите в css всё что нужно и уберите из скрипта всё лишнее.сам скрипт готов дело за вами.
Сообщение от hesrun
при нажатии на блоке обвертке, должен плавно открыться полностью абзац и после этого примениться класс, который изменил бы вид блока обвертки, а при втором нажатии абзац закрылся и этот класс удалился.
скрипт именно так и работает.

Последний раз редактировалось рони, 20.02.2013 в 22:59.
Ответить с цитированием
  #9 (permalink)  
Старый 20.02.2013, 23:02
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от hesrun
Раскрывающийся абзац должен тянуть див обвертку
Так там делов то - удалить div.more{position:absolute} из css.
Ответить с цитированием
  #10 (permalink)  
Старый 20.02.2013, 23:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,066

hesrun,
смотрите код в 6 посте
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите преобразовать javascript в jquery Rayzor jQuery 1 13.09.2012 11:00
Помогите разобраться со скриптом jQuery emere jQuery 13 08.10.2011 08:46
Помогите разобратся с Jquery append unsiker jQuery 3 08.07.2011 21:06
Помогите разобраться со скриптом artnik jQuery 0 23.01.2011 17:53
Помогите разобраться со скриптом слайдшоу InviS jQuery 0 23.09.2010 13:47