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

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

menu fade in effect on mouseover

<ul style="#" class="hmenu">
<li class="active selected">Home</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
I have a menu with one link as active. I use this script to switch active class on hover
$('.hmenu li').on('mouseenter', function () {
$('.hmenu li').removeClass('active');
$(this).addClass('active');
});
$('.hmenu li').on('mouseleave', function () {
$(this).removeClass('active');
$('.hmenu li[class=selected]').addClass('active');
});
This work's but i want to change it so that when i hover any link, the link should fadeIn and fadeOut on mouseleave.
I can't get my head around this - How can i do this ?
Here is the fiddle : http://jsfiddle.net/GdSUg/

Add the:
transition: all 1s;
to the css code in the class .active
this is an example
See the reference for more information: Here

There you go
$('.hmenu li').hover(function () {
$(this).animate({
backgroundColor: "#89B908"
}, 300);
}, function () {
$(this).animate({
backgroundColor: "#FFF"
}, 1);
});
Fiddle

CSS transitions are one way. Another is to use jQuery UI's built in switchClass functionality. Using your demo:
$('.hmenu li').hover(function() {
if (!$(this).hasClass('active')) $(this).switchClass('','active', 200);
}, function () {
$(this).switchClass('active', '', 200);
});
Requires
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Reference: http://jqueryui.com/switchClass/
You may notice weird behavior when quickly hovering over elements that require a delayed transition (i.e. - fade, slide) -- Consider using hoverIntent:
What is hoverIntent?
hoverIntent is a plug-in that attempts to
determine the user's intent... like a crystal ball, only with mouse
movement! It is similar to jQuery's hover method. However, instead of
calling the handlerIn function immediately, hoverIntent waits until
the user's mouse slows down enough before making the call. Why? To
delay or prevent the accidental firing of animations or ajax calls.
Simple timeouts work for small areas, but if your target area is large
it may execute regardless of intent. That's where hoverIntent comes
in...

To animate colours reliably with JQuery, you need to use the JQuery Color Plugin (https://github.com/jquery/jquery-color). You can then do something like the following:
var active = {
backgroundColor: '#89B908',
color: '#FFF'
},
inactive = {
backgroundColor: '#FFF',
color: '#000'
};
$('.hmenu li').on('mouseenter', function () {
$(this).animate(active, function () {
$('.hmenu li').removeClass('active').css(inactive);
$(this).addClass('active').css(active);
}).find('a').animate({
color: '#FFF'
});
});
$('.hmenu li').on('mouseleave', function () {
$(this).animate(inactive, function () {
$(this).removeClass('active');
$('.hmenu li.selected').addClass('active').css(active);
}).find('a').animate({
color: '#000'
});
});
You can find a working jsFiddle here: http://jsfiddle.net/GdSUg/28/

MooTools fade in / fade out effect on a table

I am using MooTools library. I want my fade in fade out effect on table id
<table id="myId"></table>
i have working click event
aNextCal.addEvent('click',function(){
//Click Event working here i want fade in fadeout code
this.showNextWeek();
}.bind(this));`
Please suggest

There is the default fade function to every element
document.id('myId').fade('out'); //hide
document.id('myId').fade('in'); //show
If you need something more complex to control the effect use Tween:
new Fx.Tween('myId', {
duration: 4000,
property: 'opacity',
onComplete: function(){
alert('hide');
}
}).start(0);

Mootools has a method fade, which is intended for fading elements in/out.
myElement.fade([how]);
how = ('in', 'out', 'show', 'hide', 'toggle', number)
Example of use:
// simple example
$('myId').fade('out');
// setting up element with options
$('myId').set( 'tween', {
duration: 400,
transition: 'quad:out'
});
$('myButton').addEvent('click', function(){
$('myId').fade( 'toggle' );
});

jQuery Animation Delay

I'm working on a small bit of functionality for three similar tabbed items. Basically, when you hover over one, I want the opacity of the two siblings to go to 50%. I set up a pretty basic jQuery hover event, here's the page code...
<div id="footer">
Seek
Experience
Gain
</div>
...and the corresponding JS:
$('.footer-tabs').hover(
function () {
$(this).siblings().animate({ opacity: .5 },500);
},
function () {
$(this).siblings().animate({ opacity: 1 },500);
}
);
When you hover onto one everything works great, but when you hover from one to the other the siblings don't dim simultaneously. I did a quick screencast for reference. I'm sure there's a simple way to make it work properly, but I'm at a loss for it. Thanks in advance.
Screencast: http://dl.dropbox.com/u/1762184/example.mp4

You want to cancel any in process animations on the siblings. This is what the stop() function is for.
$('.footer-tabs').hover(
function () {
$(this).siblings().stop().animate({ opacity: .5 },500);
},
function () {
$(this).siblings().stop().animate({ opacity: 1 },500);
}
);

Try this :
$('.footer-tabs').hover(
function () {
$(this).siblings().animate({ opacity: .5 },"fast");
},
function () {
$(this).siblings().animate({ opacity: 1 },"fast");
}
);