We Keep Coding

How can I make my function to run the moment the page is running?

I would like to make a function run the moment a person loads my page. No interactivity. The function is loading when someone clicks. I also would like to make the function loop after 1 minute and a half. I tried replacing "click" for window.onload and body.onload but as you may have noticed by now I am a true begginer with javascript. Can someone give me a hand please. For now all I have is this:
// Animate an element by adding a class to it:
// Paramaters:
// anim: the class name to add
// time: animation duration (optional, fallsback to the class)
// cb: an optional callback function to happen once the animation ends
$.fn.animatecss = function(anim, time, cb) {
if (time) this.css('-webkit-transition', time / 1000 + 's');
this.addClass(anim);
if ($.isFunction(cb)) {
setTimeout(function() {
// Ensure that the element is available inside the callback.
$(this).each(cb);
}, (time) ? time : 5000);
}
return this;
};
$(document).ready(function() {
$('.box')click(function() {
$(this).animatecss('blur-out', 5000, function() {
console.log('callback');
});
});
});
.blur-out {
-webkit-filter: blur(8px);
-webkit-transform: scale(1.4, 1.4);
-webkit-transition: all 5s ease-out;
transition: all 5s ease-out;
visibility: hidden;
}
.box {
background:#fff;
margin: 80px;
padding: 20px;
}
<div class="box">
<img src="http://companionplants.com/images/small-plant2.jpg">
</div>

$(document).ready(function() {
$('.box').click(function() {
$(this).animatecss('blur-out', 5000, function() {
console.log('callback');
});
});
// add this line
$('.box').trigger('click');
});
Reference: http://api.jquery.com/trigger/

If I understood correctly, You want to start animation automatically after page is loaded.
Remove event handler for click. Leave code for animation like this:
$(document).ready(function() {
$('.box').animatecss('blur-out', 5000, function() {
console.log('callback');
});
});
For automatically repeating this code, you need to place this code in recursive function with settimeout().
$(document).ready(function() {
function animate(){
$('.box').animatecss('blur-out', 5000, function() {
console.log('callback');
});
setTimeout( animate(), 60000);
}
animate();
});
I hope that there are no errors, I cann't check it now, but I think it will help you

How to delay jquery hover event

I have a menu with categories,
when I hover on a category a drop down show up
(I have already delayed the drop down to show up after 600 MS),
I want to know how to delay the hover event on the category too for 600 MS,
What is the best way and easiest way to achieve this using jquery?
jQuery('div.dropdown').hover(function() {
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
});
I have made a bootply here http://www.bootply.com/lXioubaMre

You could use a basic CSS transition
.services-shortcut {
transition: all 0s .6s;
}
that runs immediately after a 600ms delay
Example: http://www.bootply.com/xppQzbvQ3P
If you choose to do this effect absolutely in javascript (but I wouldn't do it, just to keep off style from javascript) then apply the active class after a 600ms timeout, e.g.
jQuery('div.dropdown').hover(function() {
var $this = $(this);
setTimeout(function() {
$this.find('.services-shortcut').addClass('active');
}, 600);
$this.find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, ...
If you use this approach then you should also clear the interval onmouseout

You can use hoverIntent jQuery plugin, which triggers functions based on client mouse movement. In your case the script would be simple, you can take a look at this Bootply:
function showMenu(e) {
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').show();
};
function hideMenu(e) {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').hide();
};
$("div.dropdown").hoverIntent({
over: showMenu,
out: hideMenu,
sensitivity: 3,
timeout: 800
});
$(".dropdown-menu a").hoverIntent({
over: function(){
$(this).addClass('active')
},
out: function(){
$(this).removeClass('active')
},
sensitivity: 3
});

I would use $.hoverDelay() plugin that does exactly that. It lets you configure the delay(s) for the 'in' and 'out' events like so:
$('div.dropdown').hoverDelay({
delayIn: 200,
delayOut:700,
handlerIn: function($element){
$element.css({backgroundColor: 'red'});
},
handlerOut: function($element){
$element.css({backgroundColor: 'auto'});
}
});

You can simply use jQuery.delay() method :
jQuery('div.dropdown').hover(function() {
alert("Action delayed");
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
}).delay(600);
.dropdown{
background-color:red;
]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dropdown">
aaaa
</div>
That will wait for 600ms before executing your action, that's all you need.

Jquery Mobile opacity doesn't work :(

How to make this button pulsate on jQuery mobile?
Are there problems with jQuery mobile because in my main application on some divs I can apply this pulsating effect and on other they just flicker, or fade in and out with interruptions or it jerky fades in and out.
html:
<button id="pulsate">I want to pulsate!</button>
JS:
$('#pulsate').on('click', function () {
pulsate("#pulsate");
});
function pulsate(element) {
$(element || this).animate({ opacity: 0 }, 500, function() {
$(this).animate({ opacity: 1 }, 500, pulsate); });
}
http://jsfiddle.net/alecstheone/zCUSK/
I only use jquery and jquerymobile... I noticed that if I disable jquerymobile in jsfiddle it works but I dont want this as I use jquerymobile in my application for other things...

Your code works fine but you've to make some changes to your script, As you're having a click event on the button but using jQuery mobile your button is wrapped around with span and divs(mainly because of jquery mobile css),
So you just have to traverse through that target div with .closest() to set your animation effect. Below is the small demo of your code with the desired effects.
$('#pulsate').on('click', function () {
pulsate(this); // Change here
});
function pulsate(element) {
$(element || this).closest("div.ui-btn").animate({
opacity: 0
}, 500, function () {
$(this).closest("div.ui-btn").animate({
opacity: 1
}, 500, pulsate);
});
}
Fiddle Example

CSS hover event is cancelled if I set opacity by javascript

I try to make a image fadeIn effect, I set jQuery animate method to implement fade-in effect, and I found the hover event which I register in CSS have been cancelled.
I think it's weird, the method should not affect my hover effect.
Although I can re-register hover event by javascript, but it is doing an other task
Is anything I misunderstanding?
P.S. I'm trying to not to use CSS3 animation.
JS part:
$('img').animate({
'opacity': '0.5'
}, 1500);
CSS part:
img {
opacity: 0;
}
img:hover {
opacity: 1;
}
http://jsfiddle.net/aSRMR/

Use !important in css that will solve the problem
img:hover {
opacity: 1 !important;
}
Working Fiddle

You could use hover instead.
$('img').hover( function (){
console.log('hovered in');
}, function (){
console.log('hovered out');
}
Don't forget to put stop() before you do an animate.
so trying your code will look like this.
$('img').hover( function (){
console.log('hovered in');
$('img').stop().animate({'opacity': '1'}, 1500);
}, function (){
console.log('hovered out');
$('img').stop().animate({'opacity': '0.5'}, 1500);
}
Another solution, if you want to do a CSS approach, do it like this.
$('img').hover( function (){
$('img').addClass('hovered');
}, function (){
$('img').removeClass('hovered');
}
on your CSS.
img {
opacity: 0;
}
.hovered {
opacity: 1;
}
Have you also considered fading using CSS Webkit?

reinstate Jquery features after flash callback

I have a page that uses the jQuery.swfobject plugin to embed 5 flash items into a page and each flash item has a callback using externalInterface. The callbacks work when I have the js function outside of $(document).ready(function() but the jQuery animations do not fire - the ajax load however does.
Does anyone know how to get the animations working too, code below:
function pageLoader(galID) {
$('#menu').hide();
$('#holder_gallery').load("feeds.php", {gallery: galID}, function(){
$('#holder_gallery ul li a').slimbox();
$('#holder_gallery').jScrollPane();
$('.galleryTitle').text(galleryTitle);
$('.galleryTitle').fadeIn(2000);
$('#holder_gallery').fadeIn(2000);
$('.ghost').each(function() {
$(this).hover(function() {
$(this).stop().animate({ opacity: 1.0 }, 300);
},
function() {
$(this).stop().animate({ opacity: 0.5 }, 300);
});
});});}
The main parts above work well - I just want to add the gloss back in using the fadeIn functions and the animate on hovers. The jScrollpane reinstates itself as does the .load
Regards,
MM

What about binding the .ghost elements in the callback of the #holder_gallery animation
//existing code
$('#holder_gallery').fadeIn(2000, function(){
$('.ghost', this).each(function() {
$(this).hover(function() {
$(this).stop().animate({ opacity: 1.0 }, 300);
},
function() {
$(this).stop().animate({ opacity: 0.5 }, 300);
});
});
});