CODEWITHSUNDEEP
javascriptjqueryhtml
Jawwad Zakaria
Jawwad Zakaria

Reputation: 1159

Placing and calling javascript function in html

I'm a noob at javascript and this may be a dumb question, but I wrote a simple javascript function to slide to specific elements on a webpage. Here's the code: http://jsfiddle.net/bhbTr/

However, when I attempt to put the javascript and html in a single html file, it doesn't seem to work. Here's what I have:

<head>
    <title>Test</title>
    <link rel='stylesheet' id='css' href='style1.css' type='text/css' media='all'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">>
    function goToByScroll(id){
          // Remove "link" from the ID
            id = id.replace("link", "");
            var off = $("#"+id).offset().top - 50;
          // Scroll
            $('html,body').animate({
                scrollTop: off},
                'slow');
        }

    $("#navbar > ul > li > a").click(function(e) { 
          // Prevent a page reload when a link is pressed
            e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id"));           
        });

    $("#navbar > a").click(function(e) { 
          // Prevent a page reload when a link is pressed
            e.preventDefault(); 
          // Call the scroll function
            goToByScroll($(this).attr("id"));           
        });
</script>
</head>

<body>
    <!-- Begin Wrapper -->
    <div id="wrapper">
        <div class="navbar" id="navbar">
            <a href="#" id="WhoWeArelink" class="navbarlogo">Test</a>
            <ul>
                <li><a id = "WhoWeArelink" href="#">Who We Are</a></li>
                <li><a id = "WhatWeDolink" href="#">What We do</a></li>
                <li><a id = "OurWorklink" href="#">Our Work</a></li>
                <li><a id = "Contactlink" href="#">Contact Us</a></li>
            </ul>
        </div>
        <div class="contentcontainer">
            <div class="WhoWeAre" id="WhoWeAre">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="WhatWeDo"id="WhatWeDo">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="OurWork" id="OurWork">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="Contact" id="Contact">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>
</div>
<!-- End Wrapper -->
<!-- Begin Footer -->
<div class="footer">
        <p style="text-align:center;">Some bullshit copyright (c) insert year here</p>
</div>
<!-- End Footer -->
</body>

I can't figure out what I did wrong, but I suspect it has something to do with the functions not being called by the links. I'd really appreciate it if anyone had any suggestions

Upvotes: 2

Views: 1088

Answers (2)

Will Klein
Will Klein

Reputation: 2294

There's two things you need to do. First, take off the extra closing bracket on your second script tag.

Second, wrap your JavaScript code so it executes on document ready. You're using jQuery, so use the following code snippet:

<script type="text/javascript">
$(function() {
    function goToByScroll(id){
        // Remove "link" from the ID
        id = id.replace("link", "");
        var off = $("#"+id).offset().top - 50;
        // Scroll
        $('html,body').animate({
            scrollTop: off},
            'slow');
    }

    $("#navbar > ul > li > a").click(function(e) { 
        // Prevent a page reload when a link is pressed
        e.preventDefault(); 
        // Call the scroll function
        goToByScroll($(this).attr("id"));           
    });

    $("#navbar > a").click(function(e) { 
        // Prevent a page reload when a link is pressed
        e.preventDefault(); 
        // Call the scroll function
        goToByScroll($(this).attr("id"));           
    });
});
</script>

There are a few more suggestions I have to improve your code. I'll keep it simple and go with these two things.

First, you can combine the click handlers with a single, comma delimited selector. Second, you can get the id off the element in the click function with this.id, no need to use the jQuery function to access the id attribute, it's available right on the HTML element that the this keyword represents within the click handler.

$("#navbar > ul > li > a, #navbar > a").click(function(e) { 
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

I forked your jsFiddle to demonstrate the JavaScript changes (does not have the fix to the script tag): jsFiddle

I hope that helps!

Upvotes: 2

tckmn
tckmn

Reputation: 59283

<script type="text/javascript">>

You have an extra angle bracket thingy at the end.

Upvotes: 0

Related Questions