I am trying to implement a simple grid overlay Jquery Plugin_问答_开发者

I am trying to implement a simple grid overlay Jquery Plugin

开发者 https://www.devze.com 2023-01-30 18:53 出处：网络

UPDATE: I decided to just download the demo off the website and build the site from it as a template and that works, I am not sure what I have done wrong but I still can\'t seem to fix it thanks for t

UPDATE: I decided to just download the demo off the website and build the site from it as a template and that works, I am not sure what I have done wrong but I still can't seem to fix it thanks for the help anyways.

I have got to the point where the button shows up that I need to click to show my overlay. However nothing happens when I click the button, it may be a path issue but I am certain that it is not. You can view the site live @ http://www.mrskitson.ca/revised there is a username(stack) and password(stack). I have been following a tutorial from http://www.badlydrawntoy.com/2009/04/21/960gs-grid-overlay-a-jquery-plugin/

Any help would be great!

Anders.

The button is located in the top left hand corner.

CODE BELOW

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Mr's Kitson.ca | KINDERGARTEN | A child's garden.</title>

<!-- 960 -->
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/text.css" />
    <link rel="stylesheet" href="css/960.css" />
<!-- 960 ENDS -->

<!-- CSS -->
    <link rel="stylesheet" type="text/css" href="css/body.css" 开发者_如何学Go/>
<!-- CSS ENDS -->






</head>
<body>
    <div class="container_12" >
        <h1 class="title">Mr's Kitson.ca | KINDERGARTEN | a child's garden.</h1>

            <img src="images/Mr's-Kitson.ca-(logo).png" alt="Mr's Kitson.ca | KINDERGARTEN | a child's garden." class="grid_4" />

    </div>
<!-- CONTAINER 12 ENDS-->   

<!-- javascript 960 OVERLAY courtesy of www.badlydrawntoy.com -->
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.960grid-1.0.min.js"></script>
    <script type="text/javascript">
        /*<![CDATA[*/
    // onload
    $(function() {
        $("body").addGrid(12, {img_path: 'images/'});
    });
/*]]>*/
    </script>
<!-- OVERLAY ENDS-->
</body>
</html>

I'm not sure what this was trying to do:

$(function() {
    $("body").addGrid(12, {img_path: 'images/'});
});

Is there code that makes the link work in the upper left? If you're trying to load the grind on page load, you'll want this:

$(document).ready(function() {
    $("body").addGrid(12, {img_path: 'images/'});
});

If you want the grid turned on when you click that button, assign an id to the div and do it like so - in this case, the id is "gridSwitch":

$(document).ready(function() {
    $("#gridSwitch").click(function(evt) {
        $("body").addGrid(12, {img_path: 'images/'});
    });
});

You're missing opts.grid_id, so the div you creates has id="undefined" and thus it's not working. And the height of the container_12 element gets set to 0px.

I decided to just download the demo off the website and build the site from it as a template and that works, I am not sure what I have done wrong but I still can't seem to fix it thanks for the help anyways. The link is http://www.badlydrawntoy.com/2009/04/21/960gs-grid-overlay-a-jquery-plugin/