Вместо текста через 25 секунд появляется ссылка
Доброго времени суток дорогие форумчане!
Вопрос: Есть ссылка, и при ее нажатии должен появляться текст, и после 25 секунд текст исчезает и вместо текста появляется ссылка, как можно это сделать ? (готовый вариант) пожалуйста помогите :( |
этот процесс "ссылка<-->текст" должен быть постоянным?
или только 1 раз |
Раед, не понял о чем вы, но объясню так:
Вот ссылка: <a href="#">view</a> И при ее нажатии появляется текст, и этот текст будет стоять 25 сек.. и после текст исчезает и вместо текста появляется ссылка, и все больше это ссылка не исчезает, а точнее только один раз, и после обновление страницы все будет заново |
Раед, извиняюсь, да я вас понял) да только один раз!
|
function linkToText(element) {
var text = element.innerHTML;
var el2 = document.createElement('span');
el2.innerHTML = text;
element.parentNode.insertBefore(el2,element);
element.style.display = 'none';
var handler = function() {
element.parentNode.removeChild(el2);
element.style.display = '';
}
setTimeout(handler,25000);
}
//пример:
document.getElementById('changingLink').onclick = function() {
linkToText(document.getElementById('changingLink'));
}
|
:-? а как это потом установить ? покажите пожалуйста готовый пример :(
|
<html>
<head>
<script type="text/javascript">
function linkToText(element) {
var text = element.innerHTML;
var el2 = document.createElement('span');
el2.innerHTML = text;
element.parentNode.insertBefore(el2,element);
element.style.display = 'none';
var handler = function() {
element.parentNode.removeChild(el2);
element.style.display = '';
}
setTimeout(handler,25000);
}
function addListener(id){
document.getElementById(id).onclick = function() {
linkToText(document.getElementById(id));
}
addListener('cl');
}
</script>
</head>
<body>
<a href="#" id="cl">view</a>
</body>
</html>
добавил ф-ию addListener. Она получает аргументом id и сама ставит обработчик |
Раед, так я не понял, а как ставить текст который должен появиться, и еще как вставить ссылку которая тоже должна появиться после исчезании текста ?
|
Вот например скрипт:
<a onclick="toggle(hidden_content)" style="cursor:pointer">Я кнопка</a>
<div id="hidden_content" style="display: none;">А я текст и я исчезну после 25 секунды</div>
<script>
function toggle(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
}
</script>
тут есть уже текст, и нужно сделать чтобы этот текст стояло 25 секунд, и исчезла, и сразу после исчезновения появлялась ссылка, сразу на место текста, и с эффектом "slow" хотя не важно.. |
<a id="hidden_link" onclick="toggle('hidden_link','hidden_content')" style="cursor:pointer">Я кнопка</a>
<div id="hidden_content" style="display: none;">А я текст и я исчезну после 25 секунды</div>
<script>
function toggle(id1,id2) {
var el1 = document.getElementById(id1);
el1.style.display = 'none';
var el2 = document.getElementById(id2);
el2.style.display = 'block';
handler = function() {
el2.style.display = 'none';
el1.style.display = '';
}
setTimeout(handler,25000);
}
</script>
извините, эффект slow не знаю как реализовать setTimeout - почитайте |
slow не важно, но а где та ссылка которая появиться вместо текста ?
|
то есть должна появляться новая, а не та, которую убрали?
|
ну тогда вот:
<a id="hidden_link" onclick="toggle('hidden_link','hidden_content','after_process_link')" style="cursor:pointer">Я кнопка</a>
<div id="hidden_content" style="display: none;">А я текст и я исчезну после 25 секунды</div>
<a href="#" id="after_process_link">А я ссылка, которая появиться вместо блока</a>
<script>
function toggle(id1,id2,id3) {
var el1 = document.getElementById(id1);
el1.style.display = 'none';
var el2 = document.getElementById(id2);
el2.style.display = 'block';
handler = function() {
el2.style.display = 'none';
el1.style.display = '';
document.getElementById(id3).style.display='inline';
}
setTimeout(handler,25000);
}
</script>
|
Раед, Спасибо большое! только вам нужно было добавить еще и display:none ) я сам поставил) спасибо еще раз!
|
Цитата:
|
irezvov, да нет, а если кто нить еще тупее меня в js по поиску найдет этот скрипт ? поэтому написал чтобы другие могли вставить код
display:none; |
Изучаю_JS,
Вариант )))
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a id="hidden_link" onclick="toggle(this)" style="cursor:pointer">Я кнопка</a>
<script>
function toggle(elem)
{ var text = ['я текст и я исчезну после 25 секунды','я ссылка, которая появиться вместо блока'];
elem.innerHTML = text[0];
elem.onclick = null;
elem.style.cursor = 'text';
setTimeout(function ()
{
elem.href = 'http://javascript.ru/';
elem.innerHTML = text[1];
elem.style.cursor = 'pointer';
},25000);
}
</script>
</body>
</html>
|
рони, спасибо, тоже пригодиться.
|
А как подобную замену сделать не для ссылки, текста и ссылки, а для 3х div-ов?
Т.е. первый div кнопка, по клику он скрыается и появляется второй, а через N секунд второй сменяется третьим.. Или можно эти 2 div-а прописать вместо ['я текст и я исчезну после 25 секунды','я ссылка, которая появиться вместо блока'];? |
открытие через паузу
shurik-malish,
для теста 5 сек. кликать на 1 блок
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.bl{
display: none;
}
.bl.active{
display: block;
}
</style>
</head>
<body>
<div class="bl active">1 блок</div>
<div class="bl">2 блок</div>
<div class="bl">3 блок</div>
<script>
var bl = document.querySelectorAll(".bl"),
n = 0;
function fn() {
bl[n++].classList.remove("active");
bl[n].classList.add("active")
}
bl[n].addEventListener("click", function() {
fn();
setTimeout(fn, 5000)
});
</script>
</body>
</html>
|
спасибо большое
|
| Часовой пояс GMT +3, время: 12:29. |