I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page. The Iframe takes a while to load.
I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.
This is the Hide/Show script
$(function () {
$('#form_710370').submit(function (e) {
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
This is the HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
This is the relevant CSS
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}
Detect your iFrame has loaded :
$('#YourIframe').load(function(){
});
On your form submitted :
$("#form_710370").on('ajax:complete',function(){
});
Put your hide and show code inside iframe load() function.
$('#frame').load(function(){
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
});
Try this
timeout = setTimeout(function () {
$('#form_container').hide();
}, 6000);
// delay
setTimeout(function () {
// after delay
$('#form_container').animate({
'height': '0px'
}, '400', 'swing', function () {
// finish animate fadeIn
$('#mydivhide1, #mydivhide2').fadeIn('400');
});
}, '700');
Hope is help
Related
I am trying to load a html form which has submit button after end of a loading screen/animation..
In short,
First loading screen or animation shoul run.. It shoul run for 15 seconds...
Then, form should load.
Here is my code
<div id="load">
<span>Loading...</span>
</div>
<div id="loader">
<form method="POST" action="submit.php">
<button type="button" class="btn btn-primary" id="btnsubmit" name="btnsubmit">Submit </button>
</form>
</div>
Here is my jquery
$(window).load (function (){
$('#loader').fadeOut ('slow', function(){
$('#load').fadeIn ('slow');},15000);});
My codes not work... can anyone help me? Please
The function .fadeOut (https://api.jquery.com/fadeout/) has only the parameters [duration ] [, easing ] [, complete ]. The timeout must therefore be managed with Javascript.
The #load is hidden by default with CSS. The timeout function waits as long as defined in waitTimeUntilFadeOut. Then #loader is faded out and #load is faded in within the complete function.
$(window).on('load', function(){
var waitTimeUntilFadeOut = 2000 ;
setTimeout(function() {
$('#loader').fadeOut ('slow', function() {
$('#load').fadeIn ('slow');
});
}, waitTimeUntilFadeOut);
});
#load {
display:none;
}
<html>
<body>
<div id="loader">loader</div>
<div id="load">load</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I am working on angular program in which I have an image which I am animating by using jQuery .animate() property.Its working fine but the issue occur when I change the state using ui-router in middle of the animation.
It result in abrupt behaviour like even its url changes but the animation process still persist.I have tried .stop() , .clearQueue() and even .finish() property to end the animation before switching but nothing help me at all.
app.controller('appCtrl',function () {
setTimeout(function () {
$('#character').animate({marginTop:"A1px",marginLeft:"B1px"},1000);
},1000);
setTimeout(function () {
$('#character').animate({marginTop:"A2px",marginLeft:"B2px"},1000);
},3000);
setTimeout(function () {
$('#character').animate({marginTop:"A3px",marginLeft:"B3px"},1000);
},5000);
setTimeout(function () {
$('#character').animate({marginTop:"A4px",marginLeft:"B4px"},1000);
},7000);
setTimeout(function () {
$('#character').animate({marginTop:"A5px",marginLeft:"B5px"},1000);
},9000);
});
<div class="">
<div class="">
<img src="character.png" id="character" alt="" />
</div>
<div class="">
<input type="button" name="name" value="BACK" ui-sref="backpage">
<input type="button" name="name" value="NEXT" ui-sref="nextpage">
</div>
</div>
Here is updated plunker.
Use $timeout and on controller destroy remove the timeout .
$scope.$on('$destroy', function() {
$timeout.cancel(timer);
});
Better practice do never merge jQuery with Angular.
Use ngAnimate instead of jQuery's .animate() property.
Check here for illustrations and examples.
For the above. try this
angular.element(document.querySelector(#character)).animate({marginTop:"A1px",marginLeft:"B1px"},1000);
instead of
$('#character').animate({marginTop:"A1px",marginLeft:"B1px"},1000);
I want to show a spinner div element on my page when user clicks submit button. There seems to be a bug in my code as I checked multiple answers and suggestions here for similar problems and nothing seems to work - on click console message is shown and the page starts reloading without showing the div element.
HTML:
<form action="/uploader" id="upload_form" method="POST" enctype="multipart/form-data" runat="server">
...
<div class="form-group">
<input type = "submit" id="upload_button" class="btn btn-primary btn-lg" />
</div>
</form>
Jquery:
$(document).ready(function(){
$('#upload_form').on('submit', function(e) {
e.preventDefault();
$('.sk-cube-grid').show();
console.log('Upload button was clicked');
this.submit();
});
});
I also tried without success :
$('#upload_button').on('click', function(e) {
console.log('Clicked on upload form');
$('.sk-cube-grid').show();
});
EDIT: when I remove this.submit(); the spinner is shown after click but the form is not submitted - so CSS seems to be fine. Also, upload takes several seconds before page is reloaded so I have time to see the messages on console and verify that no spinner is shown...
The code works. But the message quickly disappear becouse a new page is rendered.
$('.sk-cube-grid').hide();
$('#upload_form').on('submit', function(e) {
e.preventDefault();
$('.sk-cube-grid').show();
console.log('Upload button was clicked');
var form = this;
setTimeout( function () {
form.submit();
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/7914637" id="upload_form" method="GET">
<p>...</p>
<div class="form-group">
<input type = "submit" id="upload_button" class="btn btn-primary btn-lg" />
</div>
</form>
<div class="sk-cube-grid">My hide message</div>
I think that you should make an additional submit button that is hidden and is being pressed automatically by JavaScript after an interval that the spinner should have been shown.
Code:
<form action="/uploader" method="POST">
<input type="button" value="Submit" onclick="showSpinner()">
<div id="loading"></div>
<input type="submit" style="visibility: hidden" id="submit">
<script>
function showSpinner() {
document.getElementById("loading").style = "background: blue";
document.getElementById("animation").innerHTML =
'#keyframes loading {
100% { background: red; }
}';
setTimeout(redirect, 2000)
}
function redirect() {
document.getElementById("submit").click();
}
</script>
<style>
#loading {
height: 50px;
width: 50px;
animation: loading 2s linear infinite;
</style>
<style id="animation"></style>
You can increase the setTimeout to fit your spinner, or if you use percentage, make it redirect when it's 100%.
You need to make a check before confirmation like:
$(function() {
$('#upload_button').on('click', function(e) {
if (confirm("Click OK to continue?")){
$('form').submit();
}
else
{
e.preventDefault();
}});
});
Hope it will help you.
I'm trying to create function which fades in a div and an iframe on click. The iframe is nested in the div. It works. Unfortunately when I want to make them both fade out it doesn't work. The div fades out having display:none property on it and iframe stays display:inline despite jQuery initiating fade out command. Could someone help me to sort it out, please?
My HTML:
<div id="icontent">
<div id="frame">
<input type="button" id="hide" value=""/>
<iframe src="" scrolling="no" frameborder="0" id="mainFrame" name="mainFrame"></iframe>
</div>
</div>
My jQuery:
jQuery(document).ready(function($) {
$('.gallery').on('click', 'a', function(event) {
event.preventDefault();
var link = $(this).prop('href');
$("#icontent").fadeIn(200).width($(window).width());
$("#mainFrame").attr("src", link).load(function(){
$("#mainFrame").contents().find('body').css("background-image", "none").css("background-color", "transparent");
$("#mainFrame").fadeIn(300);
})
});
$("#hide").click(function () {
$("#icontent").fadeOut(200);
setTimeout(function(){
$("#mainFrame").attr("src", "about:blank").fadeOut(10);
}, 250);
});
$("#icontent").click(function () {
$("#icontent").fadeOut(200);
setTimeout(function(){
$("#mainFrame").attr("src", "about:blank").fadeOut(10);
}, 250);
});
$(document).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$("#icontent").fadeOut(200);
setTimeout(function(){
$("#mainFrame").attr("src", "about:blank").fadeOut(10);
}, 250);
}
});
});
My CSS:
#frame{width:53.125em;margin:3.125em auto;position:relative;}
#mainFrame{width:53.125em;height:40.625em;overflow:hidden;background:none transparent;display:none;}
#icontent{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent url(images/tlogaleria.jpg);background-size:cover;text-align:center;display:none;z-index:10000;}
#loader{position:absolute;top:60%;left:20%;padding:0.375em;height:1em;width:1em;background:white url(images/ajax-loader.gif) no-repeat 50%;display:none;border-radius:1.563em;opacity:0.8;z-index:100;}
#hide{top:-1.438em;right:1.563em;position:absolute;width:1.25em;height:1.25em;border:0 none;padding:0;margin:0;}
.svg #hide{background:transparent url(images/close.svg) no-repeat;background-size:100% 100%;}
.no-svg #hide{background:transparent url(images/fallback/close.png) no-repeat;background-size:100% 100%;}
#hide:hover{opacity:0.5;}
#hide:hover{cursor:pointer;}
You can see it working here, by cklicking on the first carousel item on the left (the one with EF-2000 image ;))
Thanks in advance for all hints, cheers, Dan.
I have a mobile app with a search bar and these functions:
$(".dk").hide(0);
$("#fus").click(function () {
$(".dk").fadeOut(100);
$("#sim").removeAttr("autofocus")
});
$("#ys").click(function (e) {
$("#s,#u,#n,#l,#a,#m,.dk").hide(100);
$("#re,#r").animate({"margin-left": "0px"}, 200);
$("#s,#u,#n").animate({ "margin-left": "2px"}, 200);
$("#sim").delay(300).attr({"autofocus": "autofocus"});
$(".dk").fadeIn(100);
e.stopPropagation();
});
})
HTML
<div style="padding-top:10px;" id="toolbar">
<div class="tbar">
<img style="height:30px;" src="img/cles.png" />
<div class="ha">
<img id='ys' style=" height:27px" src="img/searchico.png" />
</div>
</div>
</div>
<div class='dk'>
<form id="hif">
<input id='sim' type="search">
<img style="position:absolute;height:26px;margin-left:-270px;margin-top:20px;" src="img/searchicog.png">
</form>
</div>
I am trying to fade in and out the div .dk (aka the search box). #Ys is the search icon, #sim is the input field, and #fus is the place to click (or tap) to trigger the fadeOut func.
Unfortunately it only autofocuses once. It also it messes up the fadeIn when it does work. After, I have to refresh the page for it to autofocus again.
This YouTube video shows what I want to accomplish: https://www.youtube.com/watch?v=T5n3m2LRy5Y
Setting the autofocus attribute does not cause the focus to change. Instead, you should use the .focus() method.
$(".dk").hide(0);
$("#fus").click(function () {
$(".dk").fadeOut(100);
$("#sim").removeAttr("autofocus")
});
$("#ys").click(function (e) {
$("#s,#u,#n,#l,#a,#m,.dk").hide(100);
$("#re,#r").animate({"margin-left": "0px"}, 200);
$("#s,#u,#n").animate({ "margin-left": "2px"}, 200);
$("#sim").delay(300).focus();
$(".dk").fadeIn(100);
e.stopPropagation();
});
})
Additionally, .delay does not delay non-animations, so to delay the focus, you'll need to use setTimeout.
setTimeout(function(){
$("#sim").focus()
},300)