Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 19.12.2012, 06:45
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от Perumov
Я уже через CSS извращаюсь, но ничего не выходит
Cпойлер средсвами css - Это Возможно ?
Ответить с цитированием
  #22 (permalink)  
Старый 19.12.2012, 10:41
Интересующийся
Отправить личное сообщение для Perumov Посмотреть профиль Найти все сообщения от Perumov
 
Регистрация: 18.12.2012
Сообщений: 19

Есть способ на js, но работает только с jQuery 1.8.2. Можно ли такое на js или в связке с библиотекой jQuery 1.4.2 реализовать, подскажет кто-нить?
<script type="text/javascript">
$(function(){
 $("#toggler").on("click", function(){
  $("#popup-credit").show();
 })
 $(".cancelComment").on("click", function(){
  $("#popup-credit").hide();
 })
})
</script>
Ответить с цитированием
  #23 (permalink)  
Старый 19.12.2012, 11:00
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

<div><input type="button" value="Открыть" onclick="Hide(this)">
<span style="display:none">Текст</span></div>

<script>
function Hide(a)
{
   var b = a.parentNode.getElementsByTagName('span')[0].style;
   if(a.value == 'Открыть')
   {
      a.value = 'Закрыть';
      b.display = '';
   }
   else
   {
      a.value = 'Открыть';
      b.display = 'none';
   }
}
</script>
Ответить с цитированием
  #24 (permalink)  
Старый 19.12.2012, 13:15
Интересующийся
Отправить личное сообщение для Perumov Посмотреть профиль Найти все сообщения от Perumov
 
Регистрация: 18.12.2012
Сообщений: 19

Deff,
А как такой же фокус можно проделать, если кнопка показа спойлера находится вне основного блока, а сам блок абсолютно позиционирован?
Получится, если вместо input'a прописать button и эту кнопку абсолютным позиционированием поставить в нужное место и так же поступить и с основным блоком? Мне нужно, чтобы блок показывался поверх самой кнопки и перекрывал ее.
Ответить с цитированием
  #25 (permalink)  
Старый 19.12.2012, 15:07
Интересующийся
Отправить личное сообщение для Perumov Посмотреть профиль Найти все сообщения от Perumov
 
Регистрация: 18.12.2012
Сообщений: 19

Я уже в отчаянии, ни где не могу найти совета ни оффлайн ни онлайн. Все, что пробую сделать - не работает
Повторяюсь: Как заставить работать такую структуру html кода? Нужно, чтобы при клике на ссылку с классом .pp-credit-block-button показывался блок с классом .popup-credit, потом при клике на ссылку с классом .cancelComment блок с классом .popup-credit закрывался. Выше я написал как такое реализуется с jQuery 1.8.2, но с этой версией библиотеки у меня перестает работать плагин prettyPhoto. Вопрос в следующем как это все сделать только на js или как подружить тот код js, который я написал выше с версией библиотеки jQuery 1.4.2?
Пожалуйста, помогите...
<!-- id нельзя использовать, так как на этой странице будет такая же структура кода, но с другим содержимым --> 
<a class="pp-credit-block-button" href="#">Кнопка</a>
<div class="popup-credit">
	<div class="credit_block">
		<a class="cancelComment" title="Закрыть">X</a>
		<h2>Заголовок</h2>
		<p>Текст</p>
		<p>Текст</p>
		<p>Текст</p>
		<a class="pp-credit-block-button" href="#" target="_blank">Ссылка</a>
	</div>
</div>

Последний раз редактировалось Perumov, 19.12.2012 в 15:16.
Ответить с цитированием
  #26 (permalink)  
Старый 19.12.2012, 15:30
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<style>
div.popup-credit{
  border:red 1px solid;
  display:none;
}
a.cancelComment {
  cursor:pointer;
  float:right;
  
  margin:-12px 12px;
}
</style>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>







<!-- id нельзя использовать, так как на этой странице будет такая же структура кода, но с другим содержимым --> 
                         <a class="pp-credit-block-button" href="#" onclick="return false">В рассрочку</a>
			 <div class="popup-credit">
				<div class="credit_block">
                                        <a class="cancelComment" title="Закрыть">X</a>
					<h2>Заголовок</h2>
					<p>Текст</p>
					<p>Текст</p>
					<p>Текст</p>
					<a class="pp-credit-block-button" href="#" target="_blank">Ссылка</a>
				</div>
			</div>



<script>
$(".pp-credit-block-button").click( function(){
  $(this).next(".popup-credit").toggle("fast")
});
$(".cancelComment").click( function(){
  $(this).parents(".popup-credit:first").hide("fast")
});
</script>
Ответить с цитированием
  #27 (permalink)  
Старый 19.12.2012, 17:43
Интересующийся
Отправить личное сообщение для Perumov Посмотреть профиль Найти все сообщения от Perumov
 
Регистрация: 18.12.2012
Сообщений: 19

Deff,
Вы Человек с большой буквы "Ч", СПАСИБО большое!!!
Скрипт просто супер, все работает как я и хотел!
Ответить с цитированием
  #28 (permalink)  
Старый 30.10.2013, 12:51
Новичок на форуме
Отправить личное сообщение для 911fnn Посмотреть профиль Найти все сообщения от 911fnn
 
Регистрация: 30.10.2013
Сообщений: 1

Подскажите,

есть скрипт, вывода и скрытия текста при клике на пункты.
как нужно его переделать, что бы при заходе на страницу или обновлении страницы 1 пункт был открыт, а далее работало все так же?

скрипт
<script type="text/javascript">
var folder = null;

function expandit( curobj )
{
if( !!folder )
folder.display = 'none';

folder= document.all ? document.all[curobj.sourceIndex+1].style : curobj.nextSibling.nextSibling.style;
folder.display = (folder.display==='none') ? '' : 'none';
return false;
}
</script>

<p style="cursor:hand" onClick="expandit(this)" align="right"><strong>3 пункт</strong></p>
<span style="display:none" style=&{head};>
открылся текст
</span>
<p style="cursor:hand" onClick="expandit(this)" align="right"><strong>2 пункт</strong></p>
<span style="display:none" style=&{head};>
открылся текст
</span>
<p style="cursor:hand" onClick="expandit(this)" align="right"><strong>1 пункт</strong></p>
<span style="display:none" style=&{head};>
открылся текст
</span>
Ответить с цитированием
  #29 (permalink)  
Старый 19.04.2014, 00:14
Интересующийся
Отправить личное сообщение для OlgaMarius Посмотреть профиль Найти все сообщения от OlgaMarius
 
Регистрация: 03.06.2013
Сообщений: 27

Здравствуйте ув. форумчане!
Помогите, пожалуйста. Делаю адаптивное меню и столкнулась с интересной проблемой. Вот код, который открывает и закрывает меню:

function openbox(id){
 if(document.getElementById(id).style.display=='none'){
 document.getElementById(id).style.display='block';
 }else{
 document.getElementById(id).style.display='none';
 }
}


Для большого экрана div с меню отображается стандартно. Для маленького экрана меню "свернуто в кнопку" через медиа-запрос - #menu {display:none;}

Но скрипт приведенный выше не видит этот медиа-запрос и считает, что меню в данный момент отображено. Так как в основных стилях "none" не задано, а только в медиа-запросе.

Это приводит к тому, что меню раскрывается только по второму клику первый раз. В дальнейшем работает нормально. По клику сворачивается, по клику разворачивается. Что делать?
Ответить с цитированием
  #30 (permalink)  
Старый 19.04.2014, 02:53
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от OlgaMarius Посмотреть сообщение
Что делать?
Через style доступны только те свойства, которые указаны в атрибуте style тега. Для получения остальных свойств используйте getComputedStyle.
Например, так:
function openbox(id) {
  var el = document.getElementById(id);
  var display = getComputedStyle(el).display;
  el.style.display = display === 'none' ? 'block' : 'none';
}
Ответить с цитированием
Ответ



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

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