I have pretty much knowledge of CSS but I am totally new in Javascript, so I don't know how to do the following task, need your help.
I want to show a fixed div in the bottom of a screen but it should only appear after a specific period of time, suppose 10 seconds, how to do that with the following code.
CSS
.bottomdiv
{
position: absolute;
left: 0;
right: 0;
z-index : 100;
filter : alpha(opacity=100);
POSITION: fixed;
bottom: 0;
}
HTML
<div class="bottomdiv">
<iframe src="" width="990" height="110" scrolling="no"></iframe>
</div>
Thanks.
I have pretty much knowledge of CSS but I am totally new in Javascript, so I don't know how to do the following task, need your help.
I want to show a fixed div in the bottom of a screen but it should only appear after a specific period of time, suppose 10 seconds, how to do that with the following code.
CSS
.bottomdiv
{
position: absolute;
left: 0;
right: 0;
z-index : 100;
filter : alpha(opacity=100);
POSITION: fixed;
bottom: 0;
}
HTML
<div class="bottomdiv">
<iframe src="http://example.com" width="990" height="110" scrolling="no"></iframe>
</div>
Thanks.
Share Improve this question edited Nov 16, 2016 at 13:20 Samir 1,3681 gold badge10 silver badges16 bronze badges asked Nov 16, 2016 at 12:18 Hamza AhmadHamza Ahmad 811 gold badge2 silver badges10 bronze badges 1- Possible duplicate of Call function with setInterval in jQuery? – Bharat Commented Nov 16, 2016 at 12:21
4 Answers
Reset to default 5There is the jQuery tag in your question, so I bet you're using jQuery. You can do this:
// Execute something when DOM is ready:
$(document).ready(function(){
// Delay the action by 10000ms
setTimeout(function(){
// Display the div containing the class "bottomdiv"
$(".bottomdiv").show();
}, 10000);
});
You should also add the "display: none;" property to your div css class.
Use Timeout with JS. I set it as 5 sec. Also the working fiddle. It's a good practice to add/remove class for these kind of activities
https://jsfiddle.net/ut3q5z1k/
HTML
<div class="bottomdiv hide" id="footer">
<iframe src="http://example.com" width="990" height="110" scrolling="no"></iframe>
</div>
CSS
.bottomdiv
{
position: absolute;
left: 0;
right: 0;
z-index : 100;
filter : alpha(opacity=100);
POSITION: fixed;
bottom: 0;
}
.hide {
display: none;
}
JS
setTimeout(function(){
document.getElementById('footer').classList.remove('hide');
}, 5000);
You need small chnage in your css as well,
.bottomdiv{
left: 0;
right: 0;
z-index : 100;
filter : alpha(opacity=100);
position: fixed;
bottom: 0;
display: none
}
And as my other fiend suggest, you need to show the div 10 sec through js,
$(document).ready(function(){
setTimeout(function(){
$(".bottomdiv").show();
}, 10000);
});
Example without using Jquery, just pure Javascript:
<!DOCTYPE html>
<html>
<body>
<div id='prova' style='display:none'>Try it</div>
<script>
window.onload = function () {
setTimeout(appeardiv,10000);
}
function appeardiv() {
document.getElementById('prova').style.display= "block";
}
</script>
</body>
</html>