Browse Source

JS plugin added to project to show grid on top of the page

from http://arnaumarch.com/en/less-grid.html
Muhammad Talha Mansoor 12 years ago
parent
commit
15d0f2b9c7
2 changed files with 254 additions and 0 deletions
  1. 168 0
      js/jquery-1.4.4.min.js
  2. 86 0
      js/less-grid-4.js

File diff suppressed because it is too large
+ 168 - 0
js/jquery-1.4.4.min.js


+ 86 - 0
js/less-grid-4.js

@@ -0,0 +1,86 @@
+/* 
+        less grid v4.0 - For Less Framework 4.
+        (c) Arnau March http://arnaumarch.com/en/lessgrid.html, freely distributable under the terms of the MIT license.
+*/
+
+$(document).ready(function() {
+        createSwitch();
+});
+
+function createGrid () {
+        $('body').append('<div id="less-grid"></div>');
+        var pageWidth = $('body').width();
+        //var pageWidth = $('body').children(':first').width();   //If you don't set body width, uncomment this
+        //var pageLeft = ($('body').width() - pageWidth) / 2;     //If you don't set body width, uncomment this
+        $('#less-grid').css({ 
+                                                        width: pageWidth,
+                                                        position: "absolute",
+                                                        top: "0",
+                                                        bottom: "0",
+                                                        zIndex: 900,
+                                                        //left: pageLeft //If you don't set body width, uncomment this
+        });
+        var colWidth = 68;
+        var colSep = 24;
+        var colCount = 1;
+        for(colLeft=0;colLeft<=pageWidth;colLeft=(colWidth+colSep)*(colCount-1)){
+                $('#less-grid').append('<span class="col col-'+colCount+'">&nbsp;col:&nbsp;'
+                +colCount+'<br/>&nbsp;w:&nbsp;'+(((colWidth+colSep)*colCount)-colSep)+'</span>'); 
+                $('#less-grid .col-'+colCount).css({ 
+                                                                width: colWidth,
+                                                                position: "absolute",
+                                                                top: "0",
+                                                                left: colLeft,
+                                                                bottom: "0",
+                                                                background: "#3d5fa3",
+                                                                opacity: 0.5,
+                                                                color: "#fff",
+                                                                fontSize: "13px",
+                                                                paddingTop: "33px"
+                });
+                colCount++;
+        };
+}
+
+function createSwitch () {
+        $('body').append('<span id="less-grid-switch">show grid</span>');
+        $('#less-grid-switch').css({ 
+                                                        position: "absolute",
+                                                        top: "0",
+                                                        right: "0",
+                                                        background: "#3d5fa3",
+                                                        border: "2px solid #fff",
+                                                        borderTop: 0,
+                                                        color: "#fff",
+                                                        fontSize: "13px",
+                                                        lineHeight: "13px",
+                                                        padding: "2px 8px 6px 8px",
+                                                        cursor: "pointer",
+                                                        "border-radius": "0 0 5px 5px",
+                                                        "-moz-border-radius": "0 0 5px 5px",
+                                                        zIndex: 1000
+                                                        
+        });
+        $('#less-grid-switch').toggle(function() {
+                $(this).text("x");
+                $('#less-grid').show();
+                $(this).attr('rel','on');
+                $('#less-grid').remove();
+                createGrid();   
+        }, function() {
+                $(this).text('show grid');
+                $('#less-grid').hide();
+                $(this).attr('rel','off');
+        });
+        
+}
+
+$(function(){
+        $(window).resize(function(){
+                if($('#less-grid-switch').attr('rel')=="on") {
+                        $('#less-grid').remove();
+                        createGrid();
+                }
+         });
+});
+