Reputation: 217

Jquery: functions calls when the page loads

I have a complex function called animated(). Now this function has to affect 2 different DOM elements: one when the page loads, and the second one when I click on it.

$("li div").click(animated);

How can I make it happen for at the start in any case on another <div>?

Something like:

$("li div").animated();

I know that's not right, so how can I do something like that?

thanks for the answers....any way I'm pretty new with Jquery so i'm gonna copy the my code here so yous have an idea about what is going on...this code works perfectly but is redundant and I'm sure there is a way to reduce it.

here is the jquery code

$(document).ready(function() {

var wrapperheightanim = $(window).height(); // check the dimension  of the window to see how many rectangles i can fit
var locid = window.location.hash.replace("!", "");  // save the location id in case the user starts from a page that is not the home

$(window).resize(function() {
  wrapperheightanim = $(window).height();
});

//rollover

$("li").hover(
  function () {
    $("img", this).fadeIn(500);
  }, 
  function () {
    $("img", this).fadeOut(500);
  }
);

//click on the navbar


  function animated() {

    var titletemp = $(this).attr("id"); // save the id in a temp var
    var title=titletemp.replace(/_/g, ' '); // I use the id as titles so i substitute underscores with spaces
    var color = $(this).css("background-color"); // save the bgcolor of the main square

    // animation that bring every square to the start position
    $("#about").animate({top:'200px', left:"0", height: "180px", width:"200px"}, 1000, "easeInOutBack");
    $("#social_media").animate({top:'90px', left:"200px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
    $("#bd_package").animate({top:'90px', left:"400px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
    $("#services").animate({top:'230px', left:"200px", height: "130px", width:"560px"}, 1000, "easeInOutBack");
    $("#portfolio").animate({top:'360px', left:"200px", height: "350px", width:"200px"}, 1000, "easeInOutBack");
    $("#clients").animate({top:'360px', left:"400px", height: "220px", width:"200px"}, 1000, "easeInOutBack");
    $("#contact").animate({top:'290px', left:"600px", height: "160px", width:"220px"}, 1000, "easeInOutBack");
    $("#quote").animate({top:'230px', left:"760px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
    $("#blog").animate({top:'280px', left:"840px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
    $(".shape").animate({top:'200px', left:"200px", height: "0", width:"0"}, 1000, "easeInOutBack");

    // remove the images from the rollover
    $("img", "li").fadeIn(1);
    $("img", this).fadeOut(1);

    // create the main container
    $(this).css("z-index", 99);
    $(this).animate({
        top: '50px',
        left: '150px',
        width: '700px',
        height: '585px'
        }, 500
    );

    // create the side navbar squares
    $("li").not(this).css("z-index", 3);
    $("li").not(this).animate({
        left: '10px',
        width: '140px',
        height: '60px'
        }, 500
    );

    // move the squares to create the side navbar
    $("li").not(this).eq(0).animate({top:'50px'}, 1000, "easeOutExpo");
    $("li").not(this).eq(1).animate({top:'125px'}, 1000, "easeOutExpo");
    $("li").not(this).eq(2).animate({top:'200px'}, 1000, "easeOutExpo");
    $("li").not(this).eq(3).animate({top:'275px'}, 1000, "easeOutExpo");
    $("li").not(this).eq(4).animate({top:'350px'}, 1000, "easeOutExpo");
    $("li").not(this).eq(5).animate({top:'425px'}, 1000, "easeOutExpo");
    $("li").not(this).eq(6).animate({top:'500px'}, 1000, "easeOutExpo");
    $("li").not(this).eq(7).animate({top:'575px'}, 1000, "easeOutExpo");
    $("li").not(this).eq(8).animate({top:'650px'}, 1000, "easeOutExpo");
    $("li").not(this).eq(9).animate({top:'725px'}, 1000, "easeOutExpo");

    // animate the additional square around the main one

    $("#title").delay(1000).queue(function(n) {     // the title square gets the same color of the main container, an gets the the title from the class
        $(this).html("<h1>" + title + "</h1>");     // the function queue allows me to delay the process of changing title when i click
        n();
    }).animate({
                    top: '-40px',
                    left: '400px',
                    width: '450px',
                    height: '70px',
                    backgroundColor: color
                    }, 1000);
    $("#2").css("background-color", "#9090AF").delay(1400).animate({
                    top: '50px',
                    left: '870px',
                    width: '150px',
                    height: '70px'
                    }, 500);
    $("#3").css("background-color", "#47477A").delay(800).animate({
                    top: '655px',
                    left: '270px',
                    width: '750px',
                    height: '70px'
                    }, 1000);
    $("#4").css("background-color", "#A5264E").delay(700).animate({
                    top: '450px',
                    left: '870px',
                    width: '120px',
                    height: '70px'
                    }, 456);
    if(wrapperheightanim > 1000){
    $("#5").css("background-color", "#fff").delay(1000).animate({
                    top: '745px',
                    left: '270px',
                    width: '250px',
                    height: '70px'
                    }, 1000);
    }
    locid = window.location.hash.replace("!", "");
  }




  function animated2() {

    var titletemp2 = $(locid).attr("id");   // save the id in a temp var
    var title2=titletemp2.replace(/_/g, ' '); // I use the id as titles so i substitute underscores with spaces
    var color2 = $(locid).css("background-color"); // save the bgcolor of the main square
    // animation that bring every square to the start position
    $("#about").animate({top:'200px', left:"0", height: "180px", width:"200px"}, 1000, "easeInOutBack");
    $("#social_media").animate({top:'90px', left:"200px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
    $("#bd_package").animate({top:'90px', left:"400px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
    $("#services").animate({top:'230px', left:"200px", height: "130px", width:"560px"}, 1000, "easeInOutBack");
    $("#portfolio").animate({top:'360px', left:"200px", height: "350px", width:"200px"}, 1000, "easeInOutBack");
    $("#clients").animate({top:'360px', left:"400px", height: "220px", width:"200px"}, 1000, "easeInOutBack");
    $("#contact").animate({top:'290px', left:"600px", height: "160px", width:"220px"}, 1000, "easeInOutBack");
    $("#quote").animate({top:'230px', left:"760px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
    $("#blog").animate({top:'280px', left:"840px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
    $(".shape").animate({top:'200px', left:"200px", height: "0", width:"0"}, 1000, "easeInOutBack");

    // remove the images from the rollover
    $("img", "li").remove();

    // create the main container
    $(locid).css("z-index", 99);
    $(locid).animate({
        top: '50px',
        left: '150px',
        width: '700px',
        height: '585px'
        }, 500
    );

    // create the side navbar squares
    $("li").not(locid).css("z-index", 3);
    $("li").not(locid).animate({
        left: '10px',
        width: '140px',
        height: '60px'
        }, 500
    );

    // move the squares to create the side navbar
    $("li").not(locid).eq(0).animate({top:'50px'}, 1000, "easeOutExpo");
    $("li").not(locid).eq(1).animate({top:'125px'}, 1000, "easeOutExpo");
    $("li").not(locid).eq(2).animate({top:'200px'}, 1000, "easeOutExpo");
    $("li").not(locid).eq(3).animate({top:'275px'}, 1000, "easeOutExpo");
    $("li").not(locid).eq(4).animate({top:'350px'}, 1000, "easeOutExpo");
    $("li").not(locid).eq(5).animate({top:'425px'}, 1000, "easeOutExpo");
    $("li").not(locid).eq(6).animate({top:'500px'}, 1000, "easeOutExpo");
    $("li").not(locid).eq(7).animate({top:'575px'}, 1000, "easeOutExpo");
    $("li").not(locid).eq(8).animate({top:'650px'}, 1000, "easeOutExpo");
    $("li").not(locid).eq(9).animate({top:'725px'}, 1000, "easeOutExpo"); 

    // animate the additional square around the main one

    $("#title").delay(1000).queue(function(n2) {        // the title square gets the same color of the main container, an gets the the title from the class
        $(this).html("<h1>" + title2 + "</h1>");        // the function queue allows me to delay the process of changing title when i click
        n2();
    }).animate({
                    top: '-40px',
                    left: '400px',
                    width: '450px',
                    height: '70px',
                    backgroundColor: color2
                    }, 1000);
    $("#2").css("background-color", "#9090AF").delay(1400).animate({
                    top: '50px',
                    left: '870px',
                    width: '150px',
                    height: '70px'
                    }, 500);
    $("#3").css("background-color", "#47477A").delay(800).animate({
                    top: '655px',
                    left: '270px',
                    width: '750px',
                    height: '70px'
                    }, 1000);
    $("#4").css("background-color", "#A5264E").delay(700).animate({
                    top: '450px',
                    left: '870px',
                    width: '120px',
                    height: '70px'
                    }, 456);
    if(wrapperheightanim > 1000){
    $("#5").css("background-color", "#fff").delay(1000).animate({
                    top: '745px',
                    left: '270px',
                    width: '250px',
                    height: '70px'
                    }, 1000);
    }

  }

$("li").click(animated);
animated2(); 

});

as you can see the functions animated and animated2 are exactly the same with the difference that one happens to the div when i click, one happens to a certain div when i load the page..hope with the code it's easier. my problem is how to write the function once and execute it once when i click on one element, and once when the page load on the specific element saved in the variable locid..

Upvotes: 2

Answers (2)

Shalom Craimer

Reputation: 21449

Let's say your function looks like this:

function animate()
{
   // do complex stuff to 2 DOM nodes
}

To run that function on whenever a <div> inside a <li> is clicked, do this:

$('li div').click(function() { 
  animate();
});

If you want to run animate when the page loads, do this:

$(function() {
  animate();
});

Edit: On the other hand, if your function looks like this:

function animate(domElement)
{
   // do complex stuff to domElement
}

To run that function on any <div> inside a <li>, when it is clicked, do this:

$('li div').click(function() { 
  animate(this);
});

And if you want to run the function on page load, on all the <div>s that are inside <li>s, do this:

$('li div').each(function(index, element) {
  animate(element);
});

Upvotes: 1

Didier Ghys

Reputation: 30666

You can't do $('li div').animate() because your function is not a property of a jquery object (unless you implement it as so - like a plugin).

You can trigger the event click you just defined though:

$('li div').click(); // or $('li div').trigger('click');

This will execute your animatedevent handler attached with $("li div").click(animated);

Upvotes: 2

Jquery: functions calls when the page loads

Answers (2)

Related Questions