Javascript add delay to animate - javascript

I've been trying to add a delay to one of my JavaScript animations and all I get is an error that says
"Object doesn't support property or method 'delay'". I'm testing this on IE 8 compatibility by the way.
Below is the mentioned code that I've tried.
from
$('a',$(this)).stop().animate({'marginTop':'200'},1000);
to
$('a',$(this)).stop().delay(1000).animate({'marginTop':'200'},1000);
Here is the jsfiddle.
Best Regards,
Vernon

There are two main problems on your fiddle:
1) The animation code is set up before jQuery. Thats why you get a TypeError: $ is not defined in console. Include jQuery in the <head> before your code and without any wrapping function:
<head>
....
<script>
/* jQuery here */
</script>
<script>
$(function() {
/* your code here */
});
</script>
....
</head>
2) You are using a very old jQuery version1.3.2 having no delay function. That's why you get an TypeError: undefined is not a function when calling .delay().
Either use a newer version of jQuery (>= 1.4.3) or define the delay-function by yourself:
$(function() {
// original $.fn.delay copied from jQuery v1.4.3 source:
jQuery.fn.delay = function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
type = type || "fx";
return this.queue( type, function() {
var elem = this;
setTimeout(function() {
jQuery.dequeue( elem, type );
}, time );
});
};
/* Your code here now works with .delay() */
});
Updated FIDDLE here with a delay of 1500 inserted.

Something like this?
$(function(){$('a','body').on('click',function(e){
e.preventDefault();
$(this).delay(1000).animate({marginTop:'200px'},1000);
})
});
SEE Fiddle: http://jsfiddle.net/7hxv3kd4/2/

I have made two following changes in the code,
Replaced </br> to <br/>
Added Jquery library to the Frameworks & Extensions section of JSFiddle
I believe it works fine, Please refer: http://jsfiddle.net/7hxv3kd4/3/

Related

velocity.js: $ is not defined

I am getting started with velocity.js and I included the file like this:
<script src="velocity.js"/> </script>
and in the script part I wrote
window.onload = function(){
$("div").velocity({opacity:1});
}
The rest of the function is only the css for the div, so not very important.
The problem I have is that I always get the error code:
Uncaught ReferenceError: $ is not defined
If I use jQuery with .animate no such problem appears (but in the code above I only use velocity).
If you don't want to use jQuery, you cannot use $.
I've never used it before, but if this tutorial is right, you could do:
window.onload = function(){
var divs = document.getElementsByTagName("div");
divs.forEach(function(el) {
Velocity(el, {opacity:1});
});
}
I think you have an conflict with jQuery. Try .noConflict() to avoid it.
See: https://api.jquery.com/jquery.noconflict/
$j.noConflict();
jQuery( document ).ready(function( $j ) {
// Code that uses jQuery's $j can follow here.
});
Have you tried this?
Velocity(document.getElementById("dummy"), { opacity: 0.5 }, { duration: 1000 });

jQuery JavaScript not working on Wordpress, confused about no-conflict mode syntax

I am trying to get this codepen http://codepen.io/eternalminerals/pen/qdGvMo working on my wordpress page at http://eternalminerals.com/test/
I know that since Wordpress is in no-conflict mode, I have to change the $ to jQuery, but I did that and made sure the script was in the header as well (using this JS adder plugin css-javascript-toolbox) but it still isn't working like the codepen. I tested the codepen without the javascript and it behaves like the wordpress page, so I know the issue must be in the javascript.
<script type='text/javascript'>
StarWars = (function() {
/*
* Constructor
*/
function StarWars(args) {
// Context wrapper
this.el = jQuery(args.el);
// Audio to play the opening crawl
this.audio = this.el.find('audio').get(0);
// Start the animation
this.start = this.el.find('.start');
// The animation wrapper
this.animation = this.el.find('.animation');
// Remove animation and shows the start screen
this.reset();
// Start the animation on click
this.start.bind('click', jQuery.proxy(function() {
this.start.hide();
this.audio.play();
this.el.append(this.animation);
}, this));
// Reset the animation and shows the start screen
jQuery(this.audio).bind('ended', jQuery.proxy(function() {
this.audio.currentTime = 0;
this.reset();
}, this));
}
/*
* Resets the animation and shows the start screen.
*/
StarWars.prototype.reset = function() {
this.start.show();
this.cloned = this.animation.clone(true);
this.animation.remove();
this.animation = this.cloned;
};
return StarWars;
})();
new StarWars({
el : '.starwars'
});
</script>
There are no javascript console errors on my website page but it behaves as if there is no javascript controlling the html like in the codepen. Any help would be greatly appreciated. Thank you!
If you want to quickly update your jQuery call and pass in jQuery to it's own function then you can do so as shown below:
jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});
Additionally, and I've executed this methodology myself below, you can pass jQuery in as the dollar sign. NOTE: All jQuery code that uses "$.apis()" instead of "jQuery.apis()" must be within this code snippet which you may also load from an external script if necessary.
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
You can find the link to examples with more detail here: (https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/)
This solution is designed for wordpress, but I was using in a CMS-serving engine that rendered all the JS files on the backend and only sent out a view. In that scenario I could never use the dollar sign declaration in a typical document.ready function as you are trying so our issue is identical, just with a different engine behind it. This should help, cheers and happy coding!
Ok, thanks to Wordpress embedded javascript on page doesn't work it seems like all I had to do was surround the script with a jQuery ready function:
jQuery(function() {
/* your code here */
)};
http://eternalminerals.com/test/ works now woohoo!

Why does my JQuery fading slider not work on any IE type?

My JQuery slider does not work in IE(in any documentmode). How could I fix this? My code slides down a div of text after a button is pressed(it fades in nicely too). The IE console gives me this error: "Object doesn't support property or method 'fadingSlideToggle'".
(function ($) {
$.fn.fadingSlideToggle = function ($el, options) {
var defaults = {
duration: 500,
easing: 'swing',
trigger: 'click'
};
var settings = $.extend({}, defaults, options)
$selector = $(this).selector;
return this.each(function () {
var $this = $(this);
$(document).on(settings.trigger, $selector, function (e) {
e.preventDefault();
if ($($el).css('display') == 'none') {
$($el).animate({
opacity: 'toggle',
height: 'toggle'
}, settings.duration, settings.easing);
} else {
$($el).animate({
opacity: 'toggle',
height: 'toggle'
}, settings.duration, settings.easing);
}
});
});
};
})(jQuery);
I wonder which part is not supported, and how to fix it. Thank you a lot!
EDIT:
Here is the code where I call the function(it works on firefox and chrome):
<button class="btn-custom btn-lg"" id="clickedEl"><span>Why rate/review websites?</span> </button></br>
<nav role="navigation" id="toggleEl">/*non relevant html*/</nav>
The rest of the javascript:
$(function(){
$('#clickedEl').fadingSlideToggle('#toggleEl');
});
The JSFiddle that does not work in IE: http://jsfiddle.net/3ymvv
The problem seems to come from jQuery 1.10.1 (#13936 #13980). Here's the error we got :
Access Denied - jQuery-1.10.1.js, line : 1513, column : 2
And the related lines :
// Support: IE>8
// If iframe document is assigned to "document" variable and if iframe has been reloaded,
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
if ( parent && parent.frameElement ) { // :1513
parent.attachEvent( "onbeforeunload", function() {
setDocument();
});
}
This happens early, and possibly prevent your script to be loaded.
Update jQuery to the 1.11.0 version (or more) and you'll see it works.
When I was testing in windows XP, ie8 and an old version of firefox exhibited the same behaviour (it suddenly appearing when #clickeEl first clicked) . Removing the <nav> element and just using the <ul> element seemed to fix it. Then I realized that the problem was the tag <nav> which is unknown to ie8 and firefox. As described in this article, the browsers do not know that <nav> is a block element. So adding
nav { display:block }
fixed the problem on me in ie8 in windows xp.
Demo
Actually, not sure how compatible this is, but it seems the plugin is doing some unnecessary stuff, since it's using jQuery. So I added it a bit below. (Mostly it bothered me you have to set display:none in CSS with an ID instead of the plugin itself.
Proposed Changes
Here we clearly do not know where the problem might be.
Your code looks fine.
Please show us the code where you use your plugin
There where you use your plugin, check if the plugin is defined console.log($.fn.fadingSlideToggle)
check that the object you are calling your plugin on is actually a valid jQuery Object.
console.log(obj instanceof jQuery) or (!!obj.jquery && typeof obj.jquery === "string")
a jquery object usualy has a property called jquery that has the current jQuery version in it. Also the jquery object is usually an instance of the jQuery Object itself. But keep in mind it is possible that using .noconflict() there is no global variable jQuery or $
The problem is the jQuery loading in the fiddle. Just load jQuery from a CDN and then initiate your plugin.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// your plugin
</script>
Now it works fine in IE 8+.
Do you by any chance have a html element with the id of fadingSlideToggle? That could be the issue as explained here: https://stackoverflow.com/a/14003088/561957

Uncaught ReferenceError: $ is not defined? Jsfiddle

I'm a beginner at javascript and i have used jsfiddle to create a navigation bar which appears when the user has scrolled down.
When i copy the code to dreamweaver it no longer works?
I have researched and it said something about adding the jquery framework or something?
Or is there a way to do this without the framework?
Link to jsfiddle for full code: http://jsfiddle.net/fNn7K/270/
javascript :
$(window).on('scroll', function () {
console.log($(this).scrollTop());
if ($(this).scrollTop() > 50) {
$('.nav').addClass('visible');
}else if ($(this).scrollTop() <= 50 && $('.nav').hasClass('visible')) {
$('.nav').removeClass('visible');
}
});
Without jQuery you can do :
window.onscroll = function() {
var display = document.body.scrollTop > 150 ? 'inline' : 'none',
elems = document.getElementsByTagName('nav');
for (var i=0; i<elems.length; i++) {
elems[i].style.display = display;
}
}
FIDDLE
When i copy the code to dreamweaver it no longer works?
JS Fiddle assembles a page based on several pieces of user entered data. One of those pieces of data is the selection of a library.
You have to copy the code to the right places in the document and include the same libraries.
Even then, the preview modes of Dreamweaver might not show it up, because they are (or at least were) entirely awful. Do you testing in a real browser.
I have researched and it said something about adding the jquery framework or something?
You need the jQuery library to use jQuery methods, yes.
Or is there a way to do this without the framework?
jQuery is just some JavaScript written by other people. You can reproduce anything it does. A line by line rewrite of your code to not use jQuery would be out of scope for a stackoverflow answer though.
you need to add jquery.js file in your code (dreamweaver)..
add this in between <head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
in the fiddle you provided, the jquery is already loaded..so you didn't get that error.
and don't forget to wrap your code inside document.ready function (which is again, already added in fiddle)..
$(function(){
$(window).on('scroll', function () {
.....
});
});

jquery and mootools conflict - one script works, another don't

Ok, I use mootools to display flash content through google maps and I work hard to make it work properly, so there is little chance to switch it to jQuery. On the other side, I see jQuery more useful to every other things so I'm trying to make it work together. That's for explanation. Now here is the code.
this jQuery script I use to show/hide animation and it works with mootools perfectly
<script type="text/javascript">
jQuery(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
jQuery('#slickbox').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-toggle').click(function() {
jQuery('#slickbox').toggle(400);
return false;
});
});
recently, I added scrit to animate flowing menu and I can't get it work. I've tried to apply noConflict, but it didn't work. Here is the code:
<script language="text/javascript">
var $j = jQuery.noConflict();
var name = "#floatMenu";
var menuYloc = null;
$j(document).ready(function(){
menuYloc = parseInt($j(name).css("top").substring(0,$j(name).css("top").indexOf("px")))
$j(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$j(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>
Error message is Uncaught TypeError: Object # has no method 'dispose'
Thank you very much.
Format your code this way, and there is no need to use noConflict(). Call jQuery.noConflict(); right after the jQuery and MooTools library have been loaded.
<script type="text/javascript">
(function($){
var name = "#floatMenu",
menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
})(jQuery);
</script>
This will encapsulate your code to a function, which will be passed the jQuery object. Anywhere you use $ inside that function it will reference jQuery.
Also, there is no attribute language with the value "text/javascript", it's the type attribute, which should have that value. Don't use the language attribute anymore.

Categories