I am trying to implement a simple grid overlay Jquery Plugin
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/
加载中,请稍侯......
精彩评论