Question

I need my code to run onclick instead of onload. I think I have to set var Delay = to -1;, but what else? I’ve seen this code: 

<a href="#" onClick="javascript:initGateway(); return false;">Click here</a> 

But I have no idea how to use it, or where it goes.

<!-- This goes in the head -->

<style>
A.yourlinkclass {
        font-family: Arial;
        color: #CCCCCC;
        text-decoration: none;
        font-size: 13px;
        font-weight:;
}

A.yourlinkclass:hover {
        font-family: Arial;
        color: #CCCCCC;
        text-decoration: underline;
        font-size: 13px;
        font-weight:;
}
</style>


<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

    var Delay = 10;//Seconds after them clicking the link, the gateway vanishes. 
    function setupgateway()
    {


        var Left = $(window).width() /2;
                Left = Left - $('#gatewaydiv').width()/2;

        var Top = $(window).height() /2;
        Top = Top - $('#gatewaydiv').height()/2;

        $('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');
        $('#gatewayDimmer').width($('html').width());
        $('#gatewayDimmer').height($('html').height());
        $('#gatewayDimmer').css({display:'block', position:'fixed'});
    }

    function removegateway()
    {
        $('#gatewaydiv').css('display', 'none');
        $('#gatewayDimmer').css('display','none');
    }

    $(document).ready(function()
    {
        $('.offerlink').click(function()
        {
            setTimeout('removegateway()', Delay*1000);
        });

        setupgateway();
    });
</script>


<style type="text/css">

    body
    {
        background-image:url('http://');
        background-repeat:repeat;
        height:100%;
        margin:0;
    }

    #mainContent
    {
        background-color:white;
        margin-left:auto;
        margin-right:auto;
        margin-top:130px;
        width:370px;
        border:3px solid #CDCDCD;
        text-align:center;
    }

    #gatewaydiv
    {
        background-image:url("http://");
        background-repeat:no-repeat;
        width:370px;
        height:546px;
        padding:px;
        position:absolute;
        display:none;
        background-color:;
        border:solid px ;
        text-align:center;
        font-family:tahoma;
    }

    #gatewaydiv h1
    {
        font-size:24px;
        color:#FFFFFF;
    }

    #gatewayMessage
    {
        font-size:18px;
    }

    .offerlink
    {
        color:#CC9999;
        font-weight:bold;
                font-size:14px;
    }

    #OfferList
    {
        margin:0;
        padding:0;
    }

    #OfferList
    {
        list-style:none;
    }

    #gatewayDimmer
    {
        background-color:#000000;
        opacity:0.8;
                filter: alpha(opacity = 50);
        display:none;
        position:absolute;
        top:0;


    }

</style>




//**this goes in the body**//

<div id="gatewaydimmer">
</div>

<div id="gatewaydiv">
    <ul id="blah">
        <br>
        <br>
        <br>
        <br>
    <h1></h1>
        <br /><br />
    <li></li>
    </ul>
    <br /><br />

</div>

Answer 1

You mean, something like this?

$('#my-link').click(function(e){
    e.preventDefault();
    // Do something here...
});

Plus:

<a href="http:// ... " id="my-link">Click Me!</a>

This way, when you click on the link, instead of getting redirected to somewhere else, the code in //Do something here... will be executed.

BTW, you have to wrap it in:

$(document).ready(function(){
    //...
});

(or just $(function(){ ... });)

in order to have it executed after the DOM element for the <a> is created.