jQuery animations within a function call

Question

I would like to have a function called in an onclick handler, within an IF statement... Confused?

I would be too, the code below should help... For some reason, I get "gotoIt is not defined" in FireBug.

I think people keep misunderstanding the question :P... the full code is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- REQUIRE COMMON VARIABLE FILE -->
<? require 'sys/common.php'; ?>
<title><? echo $projectName; ?></title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/screen.css" type="text/css" />

<script src="js/jquery-1.4.2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        if ($(window).width()<1259) { //Small
            function gotoIt(x,y) {
                $('.elements').animate({
                    left: x+'px',
                    top: y+'px'
                }, 500, function() {
                });
            }
        } else { //Large
            function gotoIt(x,y) {
                $('.elements').animate({
                    left: x+'px',
                    top: y+'px'
                }, 500, function() {
                });
            }
        };

    });
</script>
</head>

<body onload="">
<!-- SITE CONTAINER -->
<div class="section">
    <!-- CENTRAL CONTAINERS -->
        <ul class="elements" style="height:4884px; width:6000px;">
            <li>1<br/><a href="#" onclick="javascript:gotoIt(1620,1130);">Next</a></li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20<a name="test"></a></li>
        </ul>
    </div>
</body>
</html>

And the CSS:

   body {
        font-family: arial;
        font-size: 62.5%;
        text-align: center;
        background-color: #fff;
    }

    /* CONTAINERS */
    div.section{
        border:1px black solid;
        width:100%;
        height: 100%;
        min-height: 100%;
        position:relative;
        clear:both;
    }
        div.section h3{
            margin-bottom:10px;
        }
        div.section li{
            float:left;
            vertical-align: middle;
        }
        div.pane{
            overflow:auto;
            clear:left;
            margin: 10px 0 0 10px;
            position:relative;
            width:826px;
            height:322px;
        }


    ul.elements{
        background-color:#5B739C;
        position:absolute;
        top:0;
        left:0;
    }
    ul.elements li{
        width:1280px;
        height:815px;
        font-weight:bolder;
        border:1px black solid;
        text-align:center;
        margin-right:200px;
        margin-bottom: 200px;
        background-color:#DDD;
        font-size: 100px;
    }

    #pane-options ul.elements li{
        margin:5px;
    }

Edited my answer, and heres a copy: jsfiddle.net/P9bNk

tcooc
– tcooc

2010-06-21 23:04:23 +00:00
Commented Jun 21, 2010 at 23:04 — tcooc
– tcooc, Commented Jun 21, 2010 at 23:04

tcooc · Accepted Answer · 2010-06-21 23:03:37Z

2

Define the function, then call it.

function gotoIt(x,y) {
  $('.elements').animate({
    left: x+'px',
    top: y+'px'
  }, 500);
}

if ($(window).width()<1259) { //Small
  gotoIt(/* parameters here */);
} else { //Large
  gotoIt(/* parameters here */);
}

Edit 3: is this what you want?

$(document).ready(function() {
    if ($(window).width()<1259) { //Small
        (function(x, y) {
            $('.elements').animate({
                left: x+'px',
                top: y+'px'
            }, 500);
        })(20,20); //arguments x and y
    } else { //Large
        (function(x, y) {
            $('.elements').animate({
                left: x+'px',
                top: y+'px'
            }, 500);
        })(-20,-20); //arguments x and y
    }
});

edited Jun 21, 2010 at 23:03

answered Jun 21, 2010 at 22:35

tcooc

21.4k3 gold badges42 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Barrie Reader Over a year ago

Hmm, thanks but the IF statement needs to wrap around the functions. Unless there is a better way for me to do it?

tcooc Over a year ago

You could use anonymous functions. Ill edit my post to include it.

Mark Over a year ago

No, the if doesn't need to wrap around the function. If blocks do not create their own scope. Wrapping if around the function does nothing, really. The function will only run when called, and the way that digitalFresh has it does what you want.

Collectives™ on Stack Overflow

jQuery animations within a function call

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related