Archive for July, 2009

960gs Margin Mod July 23rd, 2009

Michael Hartmayer

Lately I’ve been working with the marvelously easy to use and understand CSS framework, 960 Grid System. After getting started with it, I very quickly noticed that, while easy and efficient, it has a flaw. You absolutely can NOT extend your elements to end after a margin, touching the next grid element. And so, one becomes effectively shackled to having margins between any horizontally placed grid elements.

Here’s a quick Mod that I wrote that will allow you to negate that problem, without modifying the 960gs CSS itself. Also, it is important to note, that while this does allow you to push your grid class over the margin, you still can’t pull the next element back. Still, another mod could be written using the same flavor to accomplish that as well.

So, without further adieu, here it is:

960.overExtend.css

/*
 
Modifies the 960gs to allow elements to carry over
into the margins, so that they may snugly touch
the next grid over. Simply use the appropriate grid,
as you normally would, and then attach the additional
overExtend class to it, to make it over extend into
the margin. 
 
Example:
 
<div id="myContainer" class="grid_5 grid_5_overExtend">
...
</div>
 
*/
 
/* Margin Mod 12 Col */
.container_12 .grid_1_overExtend { width:80px !important; margin-right:-10px !important; }
.container_12 .grid_2_overExtend { width:160px !important; margin-right:-10px !important; }
.container_12 .grid_3_overExtend { width:240px !important; margin-right:-10px !important; }
.container_12 .grid_4_overExtend { width:320px !important; margin-right:-10px !important; }
.container_12 .grid_5_overExtend { width:400px !important; margin-right:-10px !important; }
.container_12 .grid_6_overExtend { width:480px !important; margin-right:-10px !important; }
.container_12 .grid_7_overExtend { width:560px !important; margin-right:-10px !important; }
.container_12 .grid_8_overExtend { width:640px !important; margin-right:-10px !important; }
.container_12 .grid_9_overExtend { width:720px !important; margin-right:-10px !important; }
.container_12 .grid_10_overExtend { width:800px !important; margin-right:-10px !important; }
.container_12 .grid_11_overExtend { width:880px !important; margin-right:-10px !important; }
 
/* Margin Mod 16 Col */
.container_16 .grid_1_overExtend { width:60px !important; margin-right:-10px !important; }
.container_16 .grid_2_overExtend { width:120px !important; margin-right:-10px !important; }
.container_16 .grid_3_overExtend { width:180px !important; margin-right:-10px !important; }
.container_16 .grid_4_overExtend { width:240px !important; margin-right:-10px !important; }
.container_16 .grid_5_overExtend { width:300px !important; margin-right:-10px !important; }
.container_16 .grid_6_overExtend { width:360px !important; margin-right:-10px !important; }
.container_16 .grid_7_overExtend { width:420px !important; margin-right:-10px !important; }
.container_16 .grid_8_overExtend { width:480px !important; margin-right:-10px !important; }
.container_16 .grid_9_overExtend { width:540px !important; margin-right:-10px !important; }
.container_16 .grid_10_overExtend { width:600px !important; margin-right:-10px !important; }
.container_16 .grid_11_overExtend { width:660px !important; margin-right:-10px !important; }
.container_16 .grid_12_overExtend { width:720px !important; margin-right:-10px !important; }
.container_16 .grid_13_overExtend { width:780px !important; margin-right:-10px !important; }
.container_16 .grid_14_overExtend { width:840px !important; margin-right:-10px !important; }
.container_16 .grid_15_overExtend { width:900px !important; margin-right:-10px !important; }
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • Live
  • MySpace
  • Reddit
  • StumbleUpon

No Comments »

Continue reading...


 

Alternating Styles in jQuery (Plug-In) July 16th, 2009

Michael Hartmayer

This is a little script that I wrote, that lets you easily alternate the style of repeating class elements, or w/e elements you want to select. This is particularly useful for lists, and the like.

function($){
$.fn.styleAlternation = function(aClass, bClass) {
    var i = 0;
    return this.each(function() {
        if (++i % 2 != 0 && aClass!='') {
            $(this).addClass(aClass);
        } else if(bClass!='') {
            $(this).addClass(bClass);
        }
    });
}(jQuery);

The usage is very simple. Here’s the JavaScript:

$("#awesomeTable tr").styleAlternation("cssClass1","cssClass2");

From there, all you need to do is create your CSS. Example:

.cssClass1 { background: #000; color: #444; }
.cssClass2 { background: #999; color: #333; }

Here’s a screenshot:
Alternation Demo

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • Live
  • MySpace
  • Reddit
  • StumbleUpon

No Comments »

Continue reading...


 

AJAX Calendar Loader Using jQuery July 15th, 2009

Michael Hartmayer

My good pal Austin needed help turning his static calendar into one that could change the month, using AJAX. The calendar itself was written in PHP. Here is the quick and easy solution I came up with for him, using jQuery:

$(document).ready(function() {
 
   // Create Date Object
   var jsDateObject = new Date();
 
   // Create Calendar Object ( Holds all your variables, etc )
   var jsCalendar = {};
       jsCalendar.currentMonth = jsDateObject.getMonth();
 
   // Controls the NEXT button
   $("#jsCalendarNext").click(function() {
      // Update Active Month
      jsCalendar.currentMonth++;
         if(jsCalendar.currentMonth>12) { jsCalendar.currentMonth=1; }
 
      // Get New Calendar
      ajaxUpdateCalendar();
   });
 
   // Controls the PREV button
   $("#jsCalendarPrev").click(function() {
      // Update Active Month
      jsCalendar.currentMonth--;
         if(jsCalendar.currentMonth<1) { jsCalendar.currentMonth=12; }
 
      // Get New Calendar
      ajaxUpdateCalendar();
   });
 
   // Use AJAX to update the Calendar
   function ajaxUpdateCalendar() {
      $.post(
         "phpCalendarLoader.php",
         { calendarMonth: jsCalendar.currentMonth },
         function(data) {
            $("#jsCalendarContainer").html(data);
         },
         "html"
      );
   }
 
});

From here, all Austin had to do was set his $month variable to $_POST['calendarMonth'];.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • Live
  • MySpace
  • Reddit
  • StumbleUpon

No Comments »

Continue reading...