How to call JS function with jQuery using animate.css - javascript

I am using animate.css library.
I have this Javascript function
function animationClick(element, animation){
element = $(element);
element.click(
function() {
element.addClass('animated ' + animation);
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 600);
});
}
I have this jQuery call
$(document).ready(function(){
$("#startButton").click(function() {
animationClick(this, 'pulse');
});
});
This is my html
<input id="startButton" class="btn contained animated fadeInDown" type="button" id="startButton" value="Start!"></input>
What i have tried, i have tried adding onclick="" to my html button, and calling the function directly, nothing seemed to work.
I thought something was wrong with the animation, so i tried to do a simple .hide instead but my jQuery still hasn't worked
I've looked online and made sure my pages are calling each other properly, such as <link rel="stylesheet" href="animation.css"> and <script src="play.js"></script>
I have also tried to import jQuery versions by downloading it locally and calling the file <script src="jquery-3.3.1.min.js"></script>
Help appreciated
An update:
I have checked the page console and this message appears: Uncaught ReferenceError: $ is not defined
at play.js:92
Line 92 is $(document).ready(function () {
I'm thinking this is an importing of jQuery issue, but i have already imported it. Isn't the import correct?

You can try this code.
$(document).ready(function(){
$(document).on("click","#startButton",function() {
$(this).addClass('animated pulse');
window.setTimeout( function(){
$(this).removeClass('animated pulse');
}, 600);
});
});
No need to call a function you can add and remove class directly on click event of jQuery!!

<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#startButton").on("click", function() {
$(this).addClass('animated pulse');
window.setTimeout( function(){
$(this).removeClass('animated pulse');
}, 600);
});
</script>
This is how your code should look, maybe your loading your jquery after your dom function.

Related

Attaching click event won't work

I've wanted to attach click event to an object not yet added to the DOM like here.
I've used a code from the answer but nothing happens when I click anything.
Here's my HTML:
<html>
<head>
<script src="resources/js/components/jquery/jquery-3.1.1.min.js"></script>
<script src="file.js"></script>
</head>
<body>
asl;kdfjl
<div id="my-button">sdgdf</div>
</body>
</html>
JavaScripts are in those location and I can see them in Sources tab in Chrome.
My file.js has content exactly copy-pasted from jsfiddle:
$('body').on('click','a',function(e){
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$('body').on('click','#my-button',function (e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
As your code is in the head tag, you need to use a DOM ready wrapper to ensure your code executes after the DOM has rendered elements.
The jsfiddle doesn't have it because the fiddle is set to run the code onload already.
$(function(){
$('body').on('click','a',function(e){
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$('body').on('click','#my-button',function (e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
});
Your code working with snippet .Better use with document.ready.Post you js after document.ready .And change the selector document instead of body
$(document).ready(function() {
$(document).on('click', 'a', function(e) {
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$(document).on('click', '#my-button', function(e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
asl;kdfjl
<div id="my-button">sdgdf</div>

How to include a jquery plugin in your code

This may be a really dumb question but I'm having trouble including a jquery plugin in my code.
The plugin I'm referring to is: http://davidlynch.org/projects/maphilight/docs/
I want to mimic something very similar to the following:
http://jsfiddle.net/keith/PVpgK/
But when I copy the code over, I keep getting error messages saying "maphilight is not a function"
How do I use a jquery plugin in my code? Thank you
$(function() {
//using the jquery map highlight plugin:
//http://davidlynch.org/js/maphilight/docs/
//initialize highlight
$('.map').maphilight({strokeColor:'808080',strokeWidth:0,fillColor:'00cd27'});
//hover effect
$('#maplink1').mouseover(function(e) {
$('#map1').mouseover();
}).mouseout(function(e) {
$('#map1').mouseout();
}).click(function(e) { e.preventDefault(); });
// initialize tabbing
$(".tabs area:eq(0)").each(function(){
$(this).addClass("current");
});
$(".tab-content").each(function(){
$(this).children(":not(:first)").hide();
});
//map clicks
$(".tabs area").click(function(){
//This block is what creates highlighting by trigger the "alwaysOn",
var data = $(this).data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
//there is also "neverOn" in the docs, but not sure how to get it to work
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
});
You need to include the link to jquery in your html header.
1) Download jquery from jQuery.com
2) Link to downloaded file in your header
Like so:
<head>
...
<script src="/path/to/jquery-1.11.3.min.js"></script>
...
</head>
As the previous answer. But put them in the bottom of the body tag.
<html>
<head>
</head>
<body>
<script src="../path/to/jquery-1.11.3.min.js"></script>
<script src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
</body>
</html>
you need to add the following to the header of your html code
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js">
</script>

Removing an Ajax loader image after sometime

I have an ajax loader that appears after a button is clicked with the following code:
jQuery(document).ready(function($){
{
$.getElementById('form').onsubmit = function () {
$.getElementById('submit').style.display = 'block';
$.getElementById('loading2').style.display = 'block';
};
}(document));
});
HTML:
<input type="submit" class="button alt" onclick="$(\'#loading\').show();" name="woocommerce_checkout_place_order"/>'
I would like the ajax loader to disappear after like 10seconds.
Please let me know
You can use this to hide your loader after 10 seconds.
setTimeout(function() {
$('#loading').hide(); // I wasnt sure which one you wanted to hide
$('#loading2').hide();
}, 10000);
Also looking at your code im not sure if that would have worked anyway. Also if you are using jQuery then you don't really need to use vanilla Javascript so your code could be changed to this.
jQuery(document).ready(function($){
$('#form').submit(function () {
$('#submit').css('display', 'block');
$('#loading2').css('display', 'block');
});
});
$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 10 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
$("#loading").hide('blind', {}, 500)
}, 10000);
});
Note: In order to make you jQuery function work inside setTimeout you should wrap it inside
function() { ... }

jquery load() after ajax page is loaded - howto

i have following lines included at the bottom of my index.php:
<script type="text/javascript" language="javascript" src="class/jquery-1.4.3.min.js"> </script>
<script type="text/javascript" language="javascript" src="class/jquery.nivo.slider.pack.js"></script>
<script type='text/javascript' language='javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
problem lies in $(window).load ...
index.php's body is updated onload through ajax call which delivers div#slider upon matching. this makes it nivoSlider() not executing. do you have any trick to make this thing work. i do prefer non-jquery way around it, but at the end of the day anything helps.
many thanks
WEBPAGE IS HERE
Add the call in the callback for the AJAX load.
$('.something').load( 'http://www.example.com/foo', function() {
$(this).find('#slider').nivoSlider();
});
Example using your code (for body):
$(function() { // run on document ready, not window load
$('#content').load( 'page.php?c=2&limit=5', function() {
$(this).find('#slider').nivoSlider();
});
});
For link:
<!-- updates links like so -->
<a class='nav' href='page.php?category=art&limit=5&c=1'>art</a>
// in the same document ready function
$('a.nav').click( function() {
var $link = $(this);
$('#content').load( $link.attr('href'), function() {
$(this).find('#slider').nivoSlider();
$link.addClass('selected'); // instead of setting bg directly to #828282;
});
return false; // to prevent normal link behavior
});
Would you not want to use $(document) rather than $(window)?
$(window).load(function() {
$('#slider').nivoSlider();
});
or shorthand
$(function() {
$('#slider').nivoSlider();
});

JQuery click text in span?

I'm trying to use JQuery to have a method fire when the following code gets clicked:
<div class="content_sub_list">
<img src="/imgs/close-icon.jpg" class="exit_sub_list"/>
hello
</div>
It is not doing anything and my JQuery code looks like this:
$(document).ready(
function()
{
$('#my_accnt').click(
function()
{
$('.content_sub_list').css("display", "block");
$('.content_sub_list').css("margin-left", "4px");
$('.content_sub_list').html('<div class="sub_list_header">My A<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
});
$('#my_queue').click(
function()
{
$('.content_sub_list').css("display", "block");
$('.content_sub_list').css("margin-left", "165px");
$('.content_sub_list').html('<div class="sub_list_header">My Q<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
});
$('.exit_sub_list').click(
function()
{
alert("hi");
$('.content_sub_list').css("display", "none");
});
});
My header looks like this:
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/mContentBar.js" type="text/javascript"></script>
Other functions work in it except this one? for some reason.
So what am I doing wrong, or how i can get this to work? Thanks
This is working for me. Make sure you have jQuery loaded properly. You can either place jquery.js after your html or wrap your jquery code with a document.ready function.
like
(function() {
$('.exit_sub_list').click(
function() {
alert("hi");
});
});
Check working example at http://jsfiddle.net/p6Q2d/

Categories

Resources