Home/ Questions/Q 871089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T10:35:17+00:00

I would like to have a function called in an onclick handler, within an

  • 0

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;
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
    }
});
    • 0