Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.12.2017, 14:42
Интересующийся
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 16

Спойлер автоматически должен закрыться по таймеру
Доброго дня всем хорошим людям))
Задача: сделать спойлер, ограниченный определённым временем открытия по кнопке (клик по кнопке открывает спойлер, а через заданное время спойлер автоматически закрывается).
Пожалуйста, подскажите правильный код для IE!
Ответить с цитированием
  #2 (permalink)  
Старый 01.12.2017, 14:53
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,585

А что в ie setTimeout не работает?
Ответить с цитированием
  #3 (permalink)  
Старый 01.12.2017, 15:11
Интересующийся
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 16

Сообщение от Nexus Посмотреть сообщение
А что в ie setTimeout не работает?
В ie setTimeout работает))
У меня голова пока не работает - только учусь я... если можете, то подскажите!
Ответить с цитированием
  #4 (permalink)  
Старый 01.12.2017, 15:15
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,585

Борис К, покажите код, который открывает/закрывает спойлер.
Ответить с цитированием
  #5 (permalink)  
Старый 01.12.2017, 15:29
Интересующийся
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 16

Сообщение от Nexus Посмотреть сообщение
Борис К, покажите код, который открывает/закрывает спойлер.
Nexus, пожалуйста:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});
</script>
<style> 
#panel {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body> 
<button id="flip">Click</button>
<div id="panel">Hello world!</div>
</body>
</html>

Последний раз редактировалось Борис К, 01.12.2017 в 15:32.
Ответить с цитированием
  #6 (permalink)  
Старый 01.12.2017, 15:40
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,585

Предполагаю, что код, что вы представили корректно работает под ie.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
	var timer=0;
    $("#flip").click(function(){
		clearTimeout(timer);
        $("#panel").slideDown("slow");
		timer=setTimeout(function(){
			$("#panel").slideUp("slow");
		},2000);
    });
});
</script>
<style> 
#panel {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body> 
<button id="flip">Click</button>
<div id="panel">Hello world!</div>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 01.12.2017, 15:45
Интересующийся
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 16

Сообщение от Nexus Посмотреть сообщение
Предполагаю, что код, что вы представили корректно работает под ie.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
	var timer=0;
    $("#flip").click(function(){
		clearTimeout(timer);
        $("#panel").slideDown("slow");
		timer=setTimeout(function(){
			$("#panel").slideUp("slow");
		},2000);
    });
});
</script>
<style> 
#panel {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body> 
<button id="flip">Click</button>
<div id="panel">Hello world!</div>
</body>
</html>
Спасибо за подсказку! Проверил - не работает... извините!!!
Поменял на другую библиотеку:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});
</script>
<style> 
#panel {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body> 
<button id="flip">Click</button>
<div id="panel">Hello world!</div>
</body>
</html>

Спасибо Вам!

Последний раз редактировалось Борис К, 01.12.2017 в 16:02.
Ответить с цитированием
  #8 (permalink)  
Старый 01.12.2017, 16:07
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,585

А так?
<html>
<head>
	<title>Untitled</title>
	<style> 
		#panel {
			padding: 5px;
			text-align: center;
			background-color: #e5eecc;
			border: solid 1px #c3c3c3;
		}
		#panel {
			padding: 50px;
			display: none;
		}
	</style>
</head>
<body> 
<button id="flip">Click</button>
<div id="panel">Hello world!</div>
<script type="text/javascript"> 
	var timeout=0;
	addEvent(document.getElementById('flip'),'click',function(){
		var panel=document.getElementById('panel');
		panel.style.display='block';
		
		clearTimeout(timeout);
		timeout=setTimeout(function(){
			panel.style.display='none';
		},2000);
	});
	
	function addEvent(elem,evnt,func){
		if(elem.addEventListener)
			elem.addEventListener(evnt,func,false);
		else if(elem.attachEvent)
			elem.attachEvent("on"+evnt,func);
		else
			elem[evnt]=func;
	}
</script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 01.12.2017, 16:11
Интересующийся
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 16

Сообщение от Nexus Посмотреть сообщение
А так?
<html>
<head>
	<title>Untitled</title>
	<style> 
		#panel {
			padding: 5px;
			text-align: center;
			background-color: #e5eecc;
			border: solid 1px #c3c3c3;
		}
		#panel {
			padding: 50px;
			display: none;
		}
	</style>
</head>
<body> 
<button id="flip">Click</button>
<div id="panel">Hello world!</div>
<script type="text/javascript"> 
	var timeout=0;
	addEvent(document.getElementById('flip'),'click',function(){
		var panel=document.getElementById('panel');
		panel.style.display='block';
		
		clearTimeout(timeout);
		timeout=setTimeout(function(){
			panel.style.display='none';
		},2000);
	});
	
	function addEvent(elem,evnt,func){
		if(elem.addEventListener)
			elem.addEventListener(evnt,func,false);
		else if(elem.attachEvent)
			elem.attachEvent("on"+evnt,func);
		else
			elem[evnt]=func;
	}
</script>
</body>
</html>
Так в IE отлично работает))
Вот только хотелось бы, чтобы открывшийся блок через какое-то время исчезал (например, через 10 секунд)!
Ответить с цитированием
  #10 (permalink)  
Старый 01.12.2017, 16:27
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,585

Борис К, а какая у вас версия ie?
Timeout должен работать.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Спойлер с динамической подгрузкой daslex jQuery 16 28.01.2017 21:21