I have two divs on called #loading and one called #main;
<div id="loading"></div>
<div id="main"></div>
What I'm trying to achieve is with using javascript, show #loading for five seconds then after the five seconds hide the #loading div and show the #main div. The #main div is default hidden and once the #loading div is hidden the #main div shows.
I'm assuming that to achieve this would be a mixture of css and javascript; hopefully you understand what I'm trying to achieve and can help me accomplish what I'm trying to achieve.
Thankyou.
Your css would be:
#main {
display:none;
}
The JS would be:
setTimeout(function() {
document.getElementById('main').style.display = 'block';
document.getElementById('loading').style.display = 'none';
}, 5000);
Maybe this could help you out without the use of CSS. Only pure Jquery.
$("#loading").show();
$("#main").hide();
setTimeout(function() {
$("#loading").hide();
$("#main").show()
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">loading here..</div>
<div id="main" class="hidden">This is main content</div>
Use setTimeout.
window.onload = function() {
setTimeout(function() {
document.getElementById("loading").style.display = "none";
document.getElementById("main").style.display = "block";
}, 5*1000);
}
#main {
display: none;
}
<div id="loading">loading</div>
<div id="main">main</div>
Hope this helps
function loading(dur) {
if (window.busy) {return;}
document.getElementById('loading').style.display = "block";
document.getElementById('main').style.display = "none";
window.busy = setTimeout(function () {
document.getElementById('loading').style.display = "none";
document.getElementById('main').style.display = "block";
window.busy = 0;
}, dur);
}
loading(5000);
Personaly I would avoid using ID's here as they polute the global.
You can do this nicely with CSS and classes..
var holder = document.querySelector('.holder');
setTimeout(function () {
holder.classList.remove('isloading');
}, 5000);
.loading {
display: none;
}
div.isloading .loading {
display: block;
}
.main {
display: none;
}
div:not(.isloading) .main {
display: block;
}
<div class="holder isloading">
<div class="loading">Loading</div>
<div class="main">Main</div>
</div>
Related
I am "emulating" a Gravity Form. I am using a previous button for my form. I know the best way to solve the problem is by 'telling' the function the id of the current div (display: block) but I don't know how.
In the first part of the code, I show or hide divs based on the selected option of the tag select, now, in the second one is where I configure the "previous button".
<script>
function yesnoCheck(that) {
if (that.value == "2") {
document.getElementById("b").style.display = "block";
document.getElementById("a").style.display = "none";
<?php $new="b" ?>
} else {
document.getElementById("a").style.display = "none";
document.getElementById("d").style.display = "block";
}
}
</script>
<script>
function yesnoCheck2(that) {
if (that.value != " ") {
document.getElementById("c").style.display = "block";
document.getElementById("a").style.display = "none";
document.getElementById("b").style.display = "none";
<?php $new="c" ?>
} else {
document.getElementById("a").style.display = "none";
}
}
</script>
<script>
function yesnoCheck3(that) {
if (that.value != " ") {
document.getElementById("d").style.display = "block";
document.getElementById("c").style.display = "none";
<?php $new="f" ?>
} else {
document.getElementById("c").style.display = "none";
}
}
</script>
<script>
function yesnoCheck4(that) {
if (that.value.length == 8) {
document.getElementById("tform").style.display = "block";
} else {
document.getElementById("tform").style.display = "none";
}
}
</script>
It isn't entirely clear what you're trying to do, but what I think you're trying to do is navigate through a set of sections in a form as if they were different pages.
One really easy way to do this is to use the :target CSS selector, which allows you to select elements that match the ID of the current page's anchor fragment. For example, if I had a section with the ID of main, and the URL was something like https://example.com/#main, I could use section:target to show that section.
Here's a full example for you. HTML:
<section id="one">
<h1>Section 1</h1>
<p>
This is section one. Content goes here.
</p>
Next
</section>
<section id="two">
<h1>Section 2</h1>
<p>
This is section two. More content goes here.
</p>
Previous
Next
</section>
<section id="three">
<h1>Section 3</h1>
<p>
This is the last section.
</p>
Previous
</section>
CSS:
.button {
background: #333;
color: #fff;
text-decoration: none;
padding: 0.5em 1em;
border-radius: 0.3em;
}
section {
display: none;
}
section:target {
display: block;
}
Finally, some JavaScript to initialize things:
// Default to the first section
if (!location.hash.substr(1)) {
location.hash = 'one';
}
The buttons are just links to the next section, by way of anchor fragment.
This example is up on JSFiddle here: https://jsfiddle.net/91pnc3gf/
Each div is shown only after 2 clicks at the start.After 2 initial clicks on each div, each div showhide works with just 1 click. Javascript and html
function showhide() {
var div = document.getElementsByClassName('search_form')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
function showhide2() {
var div = document.getElementsByClassName('login')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
function showhide3() {
var div = document.getElementsByClassName('carrello')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
.search_form {
display: none;
float: right;
}
.login {
display: none;
float: right;
}
.carrello {
display: none;
float: right;
}
<div class="login-carrello">
<img src="img.png" onClick="showhide();" onmouseover="this.src='img.png'" onmouseout="this.src='gg.png'" width="50px" height="50px">    
<img src="img.png" onClick="showhide2()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
<img src="imgt.png" onClick="showhide3()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
</div>
are both in a single PHP page.Thanks in advance.
The problem is in JavaScript code. Since display property was initially set in css, div.style.display won't give you none. So, you have to change your code a little bit. Like this:
if(div.style.display != "block")
div.style.display = "block";
else
div.style.display = "none";
Once you set the display property using JavaScript code, you can read it using JavaScript.
Because the display property is not actually set (although it is applied through CSS), it's initial value is empty (and thus not equal to 'none' ).
If checked in the reverse order, it would work, but perhaps safer is to use an extra class (with the display property) you toggle instead.
A minimized example:
function showhide(cn) {
var div = document.getElementsByClassName(cn)[0];
div.classList.toggle('show');
}
.login-carrello >img{
width:50px;
height: 50px;
}
.search_form,.login, .carrello {
float: right;
display: none;
}
.show{
display:block;
}
<div class="login-carrello">
<img src="/wp-content/themes/kyro/img/search.png" onClick="showhide('search_form')">
<img src="img.png" onClick="showhide('login')">
<img src="imgt.png" onClick="showhide('carrello')">
</div>
<div class="search_form">search_form</div>
<div class="login">login</div>
<div class="carrello">carrello</div>
The start setting for .search_form,.login, .carrello is display:none, but adding .show overrides that. (I've also taken the liberty of parameterizing the classname to show/hide so only a single function is needed. With late binding it could be automated further, but this stays pretty close to the original)
Not sure if you're looking for a double click, or just two seperate clicks. However if a double click would satisfy your functionality requirement, you could try something like the following:
<img src="img.png" ondblclick="showhide2()" onmouseover="this.src='img.png'" mouseout="this.src='img.png'" width="50px" height="50px">
I've search around and tried my best, but could not find out how to achieve the following:
Loop through an unknown amount of divs
Have some sort of animation (maybe just a simple width growth of 110%)
Each Div fades in/fades out
Delay in between the final div fading out and the first div fading in again
My Current code is as follows
JS Fiddle Link - Example
HTML
<div class="container">
<div class="popup">Popup 1</div>
<div class="popup r">Popup 2</div>
<div class="popup b">Popup 3</div>
<div class="popup g">Popup 4</div>
<div class="popup y">Popup 5</div>
</div>
CSS
.popup {
display: none;
width: 400px;
height: 80px;
background: #000;
color: #fff;
line-height: 80px;
text-align: center;
}
.r{background:red}
.b{background:blue}
.g{background:green}
.y{background:yellow}
jQuery
var popups = $('.popup');
var i = 0;
function step() {
if (i >= popups.length)
i = 0;
$(popups[i]).fadeToggle(300);
i++;
}
setInterval(step, 2000);
As you can see, my divs don't fade out until all are shown, this is not desired.
You can chain together animations with a delay between:
function next() {
if (i >= popups.length)
i = 0;
popups.eq(i).fadeIn(300).delay(2500).fadeOut(300).delay(1000).queue(function(){
next();
$(this).dequeue();
});
i++;
}
next()
(note: I have used popups.eq(i) which is the same as $(popups[i]))
Live example: http://jsfiddle.net/3ujb7k4L/7/
Something like this?
var popups = $('.popup');
var i = 0;
function fadeOutLater(popup) {
setInterval(function() {
popup.fadeOut(500);
}, 5000);
}
function step() {
var popup;
if (i >= popups.length)
i = 0;
popup = $(popups[i]);
popup.fadeIn(300, fadeOutLater(popup));
i++;
}
setInterval(step, 2000);
To create a longer pause between hiding the last element and showing the first element again you could skip one fadeIn/fadeOut cycle on resetting the counter:
var popups = $('.popup');
var i = 0;
function step() {
if (i >= popups.length) {
i = 0;
} else {
$(popups[i]).delay(300).fadeIn(300).delay(200).fadeOut(300).delay(200);
i++;
}
}
setInterval(step, 2000);
Like here: http://jsfiddle.net/r72qpher/
basically i'm trying to create multiple popup boxes that appear when different links are clicked. For some reason, a popup box only appears when the first link is clicked. When the rest of the links are clicked, nothing happens. Any help is appreciated, thanks. Also, I've only included 2 of the links in this example.
javascript code:
function xpopup() {
document.getElementById("x").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("xPopup");
overlay.style.display = "block";
popup.style.display = "block";
}
}
function ypopup() {
document.getElementById("y").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block";
}
}
</script>
HTML code:
<body onLoad="xpopup()"; "ypopup()";>
<div id="overLay"></div>
<div class="popupBox" id="xPopup"></div>
<div class="popupBox" id="yPopup"></div>
Link 1<br>
Link 2<br>
CSS code:
.popupBox{
display:none;
position: fixed;
width: 30%;
height: 40%;
margin-left: 16.5%;
margin-top: 4.5%;
background-color: white;
border: 2px solid black;
border-radius: 10px;
z-index: 10;
}
#overLay{
display:none;
position: fixed;
width: 100%;
height: 100%;
background-color: #707070;
opacity: 0.7;
z-index: 9;
left: 0;
top: 0;
}
Replace <body onLoad="xpopup()"; "ypopup()";> with <body onLoad="xpopup(); ypopup();"> and in your JavaScript code you have a typo.
function ypopup() {
document.getElementById("y").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block"; // Here the popup1 is undefined change it to popup.style.....
}
}
Edit :-->
I've changed your code to hide the popup, if you click on the greyed out section.
Fiddle
HTML:
<body>
<div id="overLay"></div>
<div class="popupBox" id="xPopup"></div>
<div class="popupBox" id="yPopup"></div>
Link 1
<br />
Link 2
<br />
</body>
JavaScript:
var overlay = document.getElementById("overLay");
var xpopup = document.getElementById("xPopup");
var ypopup = document.getElementById("yPopup");
document.getElementById("x").onclick = function () {
overlay.style.display = "block";
xpopup.style.display = "block";
};
document.getElementById("y").onclick = function () {
overlay.style.display = "block";
ypopup.style.display = "block";
};
overlay.onclick = function () {
overlay.style.display = "none";
xpopup.style.display = "none";
ypopup.style.display = "none";
};
I'm seeing two issues --
The first is already answered by chipChocolate.py:
Replace <body onLoad="xpopup()"; "ypopup()";> with <body onLoad="xpopup(); ypopup();">.
The second (and maybe this is just a typo?) is that you have:
function ypopup() {
document.getElementById("y").onclick= function()
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block";
}
}
You're referencing popup1 but you've named your variable popup. If you open up the javascript console you'll probably see that's throwing an error. Rename the variable popup1 and this should work.
Hi I want to add delay in jquery. I was trying to put $('.fade_test').delay(5000); It is working but div last three is no next to start one.
Link to a jsfiddle
HTML
<div class="fadein">
<div class="fade_test">one <button id="toggler" class="playin">Pause</button></div>
<div class="fade_test">two <button id="toggler" class="playin">Pause</button></div>
<div class="fade_test">three <button id="toggler" class="playin">Pause</button></div>
</div>
CSS
.fadein { position:relative; height:332px; width:500px; }
.fadein .fade_test { position:absolute; left:0; top:0; }
JS
var pauseplay;
function startFader() {
$x = $(".fade_test:visible").fadeOut(1000);
$next = $x.next();
if ($next.length == 0)
$next = $(".fade_test:first-child");
$next.fadeIn(1000);
$('.fade_test').delay(5000);
}
function stopFader(){
window.clearInterval(pauseplay);
console.log("stop");
}
$('.fadein .fade_test:gt(0)').hide();
pauseplay= window.setInterval(startFader, 2000);
var $button = $('.fadein #toggler');
$button.toggle(function() {
stopFader();
$(this).toggleClass('playin pausin');
$(this).text("Play");
}, function() {
$(this).toggleClass('pausin playin');
$(this).text("Pause");
pauseplay= window.setInterval(startFader, 2000);
});
Any help would be most appreciated
Not JQuery but you could use Javascript's very simple setTimeout(fn,milliseconds);
here is another post explaining
function foo(){
alert('foo');
}
setTimeout(foo,1000);