Animation after submiting - javascript

I have questioner in HTML and one submit button:
<Input type = "Submit" Name = "Submit6" VALUE = "Dalej >">
I use jQuery to protect situation that user can click two times in submit button with this code:
<script>
$('form').submit(function(){
$(this).find(':submit').attr('disabled','disabled');
});
</script>
Now I want develop this part of script to show also gif animation during loading process. I saw that my users don't know why this system doesn't work and they try to click next time submit but it's disable.
I have two idea how can I solve it. One is show gif animatino (like ajax or something different) and second extinguish the page with animation. First will be more easy and for me is OK.
Can you give me tips?

Assuming you are using ajax request to post your data to server,
Add an image to the html page,
<img id='waiting' src="waiting.gif" style="display:none"/>
And change the script like this,
<script>
$('form').submit(function(){
$(this).find(':submit').attr('disabled','disabled');
$("#waiting").css("display","block");
$.post("/url/to/post/data", function(){
$("#waiting").css("display","none");
});
});
</script>

use the button instead of sumit
$(document).ready(function(e) {
$("form :button").click(function(){
$(this).attr('disabled','disabled');
$("html").fadeOut("1000",function(){ // fade animation
$("form").submit();
});
})
});

If you are using Bootstrap, there is a component for this kind of functionality,
http://getbootstrap.com/javascript/#buttons
Getting inspired from this I've also created a button that toggles classes while making it enabled or disabled, and based on the current class you can show different texts on each state
<button class="btn-progressive">
<span class="button-label">Log In</span>
<i class="icon-spinner icon-large icon-spin"></i>
</button>
and using css you can do,
.btn-progressive .icon-spinner { display: none; }
.btn-progressive.progressing .icon-spinner { display: inline; }
.btn-progressive.progressing .button-label { display: none; }
So while toggling button's enable state, we can also toggle 'proressing' class.
P.S. If you are ok with CSS3 compatibility, you can also use disabled attribute for these CSS rules

Related

Toggle script: change from jQuery to "normal javascript" code

I've been using a toggle script (open/close text container when clicking on a certain link) for a website that uses jQuery. In order to clean up the website I want to get rid of jQuery completely but have some problems converting the existing jQuery code into "normal javascript".
Here is the existing code:
jQuery(function($){
$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
return false; //Prevent the browser jump to the link anchor
});
});
});
Which corresponds to this HTML source code:
<h4 class="trigger toggle-transparent ">Click to show more</h3><div class="toggle_container ">
Hidden Text
</div>
I've tried the following code which doesn't give me an error but just doesn't do anything when clicking on the trigger:
var el = document.querySelectorAll('h4.trigger');
for(var i=0; i < el.length; i++){
el[i].addEventListener('click', function () {
this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
}.bind(this));
}
The only thing I really need for the code is: clicking on the class "trigger" should toggle some HTML class "active" to both the trigger element as well as the toggle_container element. The rest I'm able to change with just CSS.
The hard part of the code is that it should work for multiple toggle areas on one page separately (therefore using a class, not an id).
Any idea where my code has a problem or any (completely) different suggestions?
I have very limited experience with javascript/jQuery and feel more at home with HTML/CSS.
Thanks,
Patrick
The this.classList.toggle("active") doesn't return the element back again, but just a boolean to inform if the action was successful. Chaining happens only in jQuery and not in vanilla JavaScript.
this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
You should be using something like this instead of the above:
this.classList.toggle("active");
this.nextSibling.classList.toggle("toggle_container-active");

Element not hidden on page load

I have the below Javascript code, using jQuery:
$(document).ready(function () {
$('#answer').hide(); //hiding the element
$('#questionOne').click(function () {
$('#answer').show();
However, the element does not get hidden on load. My HTML is this:
<p id="answer">All requests of this nature are required to be submitted via our website www.mufoundation.org/charityrequests. Due to the volume of requests we receive, we require at least 6 weeks notice prior to your event. If your event does not fall within this timescale unfortunately, we will not be able to help.</p>
I cannot seem to hide the paragraph answer element. How can I do this?
If you are always going to be hiding it on load would it not be better practice to not hide it on load and rather attach a CSS class that sets it to hidden? It's extremely simple to do just change your code to do this.
Create a CSS Class called hide
.hide{
display : none;
}
Add the class below.
<p id="answer" class="hide">All requests of this nature are required to be submitted via our website www.mufoundation.org/charityrequests. Due to the volume of requests we receive, we require at least 6 weeks notice prior to your event. If your event does not fall within this timescale unfortunately, we will not be able to help.</p>
If this is literally all the jQuery you have then you have forgotten to add }); }); at the end of the script. So your code should look like this;
$(document).ready(function () {
$('#answer').hide();
$('#questionOne').click(function () {
$('#answer').show();
});
});
if that doesn't fix your problem, are you sure you're including the appropriate jQuery library?
If you posted the right code, then it's the wrong syntax.
Right code
$(document).ready(function () {
$('#answer').hide(); //hiding the element
$('#questionOne').click(function () {
$('#answer').show();
}); });<-- you forgot the clossing brackets
I hope it was that! Let me know if it works.
Create a css class to hide the stuff instead of doing it in onload:
HTML:
<p class="hide">zyz</p>
CSS:
.hide {
display: none;
}
And then, use the following to show it using jquery:
$(document).ready(function () {
$('#questionOne').click(function () {
$('#answer').show();
});
});

Using javascript to hide div

I am using Javascript to hide a search box until a box is clicked. That works fine.
However when the page is first loaded, you can see the search box there and then it disappears once the page has fully loaded.
How can I make it hide and not show at all until my button is clicked..
This is the Javascript:
<script type="text/javascript">
$(function(){
$(".search").hide();
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
.search is the actual search box
.clicktosearch is the box the user must click for the actual search box to show up.
They only thing I have tried is to move the Javascript above the html box but, to no luck, now I am asking you all on SOF.
You need to use
display:none
in the CSS to hide it initially. The javascript only executes after the page has loaded so you will always see it briefly before the javascript kicks in.
This is what you need:
CSS
.search { display:none;}
JS
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
});
I removed $(".search").hide(); because it's unneeded and may cause other problems. (JQuery doesn't need to hide something that's already hidden via CSS.)
BTW: If there's only one element that matches .search, it should really be an id and so #search. Same goes for .clicktosearch.
Hide it using css .
.search { display:none;}
The reason for this happening is the javascript getting loaded after the css and HTML take affect.
Hide it using CSS, the time lag before the div hides will be less.
You have the .hide inside of document.ready, $(function(){ is short for $(document).ready(function() {
So just put it before the document.ready and it should work...
<script type="text/javascript">
$(".search").hide(); //moved this line too here
$(function(){
$(".clicktosearch").on("click", function(){
$(".searchr").slideToggle("600");
although, What I personally would prefer is just in your css hide it.
Like so,
.search { display: none; }
You'll have to touch the CSS.
.search {
height: 0px;
}
Then in your JavaScript:
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
});

jQuery shows hidden content on refresh

I use this fancy little jQuery toggle on my site, works great. But now I have a little larger text area I want to hide, and therefore I've included it in another php file, but when the site opens\refreshes the content is briefly shown and then hidden? Have I done something wrong or does it simply not work right with includes in it ?
Show me?
<div class="content">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
var par = jQuery('.content');
jQuery(par).hide();
});
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>
Use css to hide it
.content{
display:none;
}
Also
var par = jQuery('.content');
is a jQuery object so don't need to wrap it again as
jQuery(par).hide();
Just use par.hide(); but in this case, when you will use css to hide the element, then you don't need this anymore.
That will happen. The document briefly shows all the HTML before executing the code in your ready handler. (It has nothing to do with the PHP include.) If you want an element hidden when the page loads, hide it using CSS.
#myElement {
display: none;
}
The toggle should still work correctly.
You just need to don't use jquery document ready function. just use style attribute.
Show me?
<div class="content" style="display:none">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>
If this information is sensitive/not supposed to be seen without access granted, hiding it with CSS will not fix your problem. If it's not, you can ignore all of this and just use CSS with a display: none property.
If the information IS supposed to be hidden:
You need to only load the file itself on-demand. You would request the data with AJAX, do a $('.content').html() or .append() and send the result back directly from the server to the browser using something like JSON.
You are using the "ready" function that meant it will hide the element when the document is ready (fully loaded).
You can hide it using css:
.contnet { display: none; }
how you render you site server side does not affect how the site is loaded on the browser, what affects it is how the specific browser chooses to load your javascript and html, what i would recommend is set the element to hidden with css, since that is applied before anything else. And keep you code as is, since the toggle will work anyways
You can also clean up the code a little bit.
<script>
$(document).ready(function(){
$('.content').hide();
$('#toggleMe').click(function(){
$('.content').slideToggle('fast');
});
});
</script>

Javascript display onclick with an animation

I want to animate a simple search form. Before the click event, it is hidden behind my fix nav bar (margin-top:-47px). When the user clicks a search button, I want to set the form's margin-top property to 0px so it shows on the page.
jsFiddle
I am using this HTML :
<nav>
<a data-icon="search" class="search-form-toggle"></a>
...
<div class="form search-form">
<fieldset data-icon="search">
<input type="search" placeholder="Search...">
</fieldset>
</div>
And this CSS :
.search-form {
margin-top: -47px;
}
And the following javascript (jQuery) :
$('.search-form-toggle').click(function(){
if($(".search-form").css("margin-top") == "-47px") {
$(".search-form").animate({margin-top: "0px"}, 1000);
} else {
$(".search-form").animate({margin-top: "-47px"}, 1000);
}
return false;
});
When I click the button, it is not working... I guess it is a Javascript issue?
Plus, can I achieve the same result (nice transition) without using jQuery?
The error is in the .animate() it should be:
$(".search-form").animate({'margin-top' : '0px'}, 1000);
and
$(".search-form").animate({margin-top: "-47px"}, 1000);
You forgot the quotes around the margin-top
here's my working fiddle though make sure you add the ajax file that is attached
Fiddle
Here is the working fiddle. You'd forgot to put the quotes.
.animate({"margin-top": "XXpx"});
http://jsfiddle.net/5xxWu/
The answer given were really helpful in debugging my code. However, I went with another option when I found animte.css. It is a CSS library that provides multiple animations for divs and others.
I was also using QuoJS, and I didn't want to add jQuery to my loading time, especially since I am developing for mobile devices.
Here is my final code :
JS :
document.querySelector(".search-toggle").addEventListener("click", function(){
var form = $$(".search-form");
if (form.hasClass('display')) {
form.removeClass('display');
} else {
form.addClass('display animated flipInX');
}
});
CSS :
.search-form {
display:none;
}
.display {
display:block;
}
At first, my div only have the .search-form class, so it is not displayed. I add the .display class with QuoJs with the addClass() function.
The transition are very sleek, thanks to animate.css.

Categories

Resources