CODEWITHSUNDEEP
javascriptphpjqueryhtml
Yasitha
Yasitha

Reputation: 911

executing jquery function using anchor tag

I tried to execute a jquery function using a tag. first of all I tried like this.

<a href="#about_us" onclick="aboutus()">About US</a>

and this is my jquery function in separate file. 

function aboutus() {

    $("#content").css({
        "display": "block",
        "opacity" : 1
    });

    $(".about_us_one").css({
        "left": ($w - 980) / 2,
        "top": 120,
        "z-index": 1000,
        "display": "block"
    });

    $(".about_us_one").animate({
        "opacity": 0.90,
        "width": 980
    }, 2500, $easing2, function() {
    });
    var $about_us_one, $contentHeight;

    $about_us_one = $(".about_us_one").height();
    $(".about_us_two").css({
        "left": ($w - 980) / 2,
        "top": 140 + $about_us_one,
        "z-index": 1000,
        "display": "block"
    });

    $(".about_us_two").animate({
        "opacity": 0.90,
        "width": 980
    }, 2500, $easing2, function() {
    });

    $contentHeight = $(document).height();
    $("#bfooter").animate({
        "top": $contentHeight,
        "margnin-top": 15
    });

    $("#splash").animate({
        "top": 0,
        "opacity": 0.75,
        "height": 100
    }, 1500, $easing2, function() {
    });

    $(".menu").animate({
        "opacity": 1,
        "top": 50,
        //"margin-top": 50
        // "height": $h
    }, 500, $easing);

    $("#slogn1").animate({
        "opacity": 1,
        "top": 50,
        //"margin-top": 50
        // "height": $h
    }, 500, $easing);
    $("#slogn2").animate({
        "opacity": 1,
        "top": 20,
        //"margin-top": 50
        // "height": $h
    }, 500, $easing);
}

when using this method every thing works fine. but if I refresh the page. then I must click again that about us link to view the contents.

so this is not the thing I really need to do. so I tried to pass a variable from the tag using php like this. 

<a href="http://localhost/eventztable/home.php?name=about_us">About US</a>

$page = $_GET['name'];
        if ($page == "about_us") {
            ?>
            <script>
                aboutus();
            </script>
            <?php
        }

but in this method nothing is happening. so I think there should be a problem. so I put an alert("test") in my about us function. but when refreshing that alert is popping out. but other codes are not executing.

I'am really really tired of doing this and that. please help me on this. if there is any easy way please tell me.

thank you..

Upvotes: 0

Views: 55

Answers (3)

user1978142
user1978142

Reputation: 7948

Consider this as an example:

<a href="#aboutus" onclick="aboutus()">About Us</a>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

function aboutus() {
    alert(123);
}

$(document).ready(function(){
    if(window.location.hash == '#aboutus') {
        $('a[href="#aboutus"]').trigger('click');
    }
});
</script>

After clicking the link (initial click). Of course, it will execute, then when you it detects the hash (in this case #aboutus), it will execute again, (in this case, the alert() inside the aboutus() function)

Upvotes: 2

sshet
sshet

Reputation: 1160

On load You need to trigger click event

<?php
$page = $_GET['name'];
        if ($page == "about_us") {
            ?>
            <script>
    $(document).ready(function(){
     $('#about_us').trigger('click');

    });
 $( "#about_us" ).on( "click", function() {
      aboutus();
    });
</script>
            <?php
        } ?>

Upvotes: 0

Joel Jeske
Joel Jeske

Reputation: 1647

It is hard to say without looking at all your HTML but since your javascript is editing the CSS of elements, its possible you are calling the function to edit the CSS before the elements are even rendered. Try changing to run the function when everything is rendered. 

$page = $_GET['name'];
        if ($page == "about_us") {
            ?>
            <script>
                $(document).ready(function(){ 
                    aboutus();
                });
            </script>
            <?php
        }

Upvotes: 0

Related Questions