01.12.2017, 14:42
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
|
Спойлер автоматически должен закрыться по таймеру
Доброго дня всем хорошим людям))
Задача: сделать спойлер, ограниченный определённым временем открытия по кнопке (клик по кнопке открывает спойлер, а через заданное время спойлер автоматически закрывается).
Пожалуйста, подскажите правильный код для IE!
|
|
01.12.2017, 14:53
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
|
А что в ie setTimeout не работает?
|
|
01.12.2017, 15:11
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
Сообщение от Nexus
|
|
А что в ie setTimeout не работает?
|
В ie setTimeout работает))
У меня голова пока не работает - только учусь я... если можете, то подскажите! |
|
01.12.2017, 15:15
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
|
Борис К, покажите код, который открывает/закрывает спойлер.
|
|
01.12.2017, 15:29
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
|
Сообщение от 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.
|
|
01.12.2017, 15:40
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
Предполагаю, что код, что вы представили корректно работает под 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>
|
|
01.12.2017, 15:45
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
|
Сообщение от 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.
|
|
01.12.2017, 16:07
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
А так?
<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>
|
|
01.12.2017, 16:11
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
|
Сообщение от 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 секунд)! |
|
01.12.2017, 16:27
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
|
Борис К, а какая у вас версия ie?
Timeout должен работать.
|
|
|
|
