Gotta love RobotLegs. Have my team excited about it. Next I’ll have to get Signals as our new buzzword.

8 months ago  /  0 notes

Kindle is surprisingly decent for programming books. Code samples are harder to read, but at least you can search.

1 year ago  /  0 notes

Favicon tip: always use the value “shortcut icon” for the rel attribute. Just using “icon” won’t work in some browsers, notably IE8.

1 year ago  /  0 notes

I’ve been asked about how I created the lightbox popups for my site, so I’ve decided to write a blog post instead. The process is actually quite simple: a sprinkle of AJAX, HTML, CSS and JavaScript. This should work with any number of content management systems, but I will be introducing some code that’s specific to how Viviti works.

Getting Started

The first thing you’ll want to do is back-up your theme or content files. This is especially important as you may not end up liking it, and in some cases you won’t be able to go back. Sure, you could just go through and delete the code you added, but I highly recommend making a back-up anyways.

If you don’t already have one, create a JavaScript file which you can put in the AJAX and JavaScript code.

The HTML

In your theme or template file (default.html for Viviti), you’ll need to add a very small fragment of HTML. Put this anywhere inside the body tag, it doesn’t really matter where as we’ll hide it with CSS in a bit. You can modify this HTML to your liking as well, it’s just important to keep this basic structure with ID’s and Classes. If you change them, you’ll need to also change them in the JavaScript and CSS.

<div class="window" id="content-dialog">
  <div id="dialog-content"></div>
  <div id="dialog-controls">
    <a href="/#" class="close">Close</a>
  </div>
</div>
<div id="mask"></div>

The CSS

Okay, so here’s how we hide the dialog from being seen at all times, and how we style it to look pretty. For the most part, you can leave this how it is, but you’ll probably want to modify the colours to match your site. 

#mask {
  position: absolute;
  z-index: 9000;
  background-color: #000;
  display: none;
}
#content-dialog {
  position: absolute;
  width: 550px;
  height: 500px;
  z-index: 9999;
  padding: 10px 13px;
  display: none;
  background-color: #23201B;
  font-size: 90%;
}
#content-dialog a {
  color: #FE8D2F;
}
#content-dialog #dialog-controls {
  text-align: right;
  padding: 10px;
}
#dialog-content {
  overflow: auto;
  height: 455px;
}

The AJAX

The AJAX part is actually quite simple thanks to this article. We use jQuery to load a page, then grab the content we want using a selector. It’s important to note that this is very Viviti specific. #location_0 is the default content area in a Viviti template, and we use $j instead of $ because the jQuery provided by Viviti is in a no-conflict mode. Non-Viviti users will likely need to modify this to match their needs.

// Load a new page and place it in the dialog
function loadPage( page ) {
  $j('#dialog-content').load( page + ' #location_0 > *', function() { $j('#location_0');});
}

The JavaScript

These are the final bits of code you’ll need to make it all work. They will likely require the modification as well. I’ve broken them up into functions so I can explain a bit of what they’re doing so you can determine if you need to modfy the code or not.

This first piece of code is going to execute once the page has finished loading. It’ll call the other two functions to setup the links and dialog so everything will work.

$j( document ).ready( function() {
  setupLinks();
  setupDialog();
});

This next bit of code will only need one small change, that’s the selector. In my case, I created a custom code block which was just a list of links to the pages I wanted to load. You’ll need to do the same. The reason I do it this was is so that if JavaScript is disabled, the visitor can still get to those other pages. For the most part, all this code does is find out where to position the dialog and show it. You can also tweek the fade-in and fade-out times if you’d like.

function setupLinks() {
  $j('#linkHolder ul li a').click( function(e) {
    // prevent default link action
    e.preventDefault();
    
    // Hide the scrollbars
    $j('body').css('overflow', 'hidden');
    
    // clear the dialog content
    $j('#dialog-content').empty();
    // start loading the new content
    loadPage( $j(this).attr('href') );
    // open the new dialog
    var id = '#content-dialog';  

    //Get the screen height and width  
    var maskHeight = $j(document).height();  
    var maskWidth = $j(window).width();  

    //Set height and width to mask to fill up the whole screen  
    $j('#mask').css({'width':maskWidth,'height':maskHeight,'top':0,'left':0});  

    //transition effect       
    $j('#mask').fadeIn(300);      
    $j('#mask').fadeTo("fast",0.8);    

    //Get the window height and width  
    var winH = $j(window).height();  
    var winW = $j(window).width();  

    //Set the popup window to center  
    $j(id).css('top',  parseInt((winH/2-$j(id).height()/2) + $j(document).scrollTop()));  
    $j(id).css('left', winW/2-$j(id).width()/2);  

    //transition effect  
    $j(id).fadeIn(500);
  });
}

This last bit of code just tells the dialog to close itself. It registers listeners on the close button and the semi-transparent mask to see when they’re clicked. As soon as they’re clicked, it hides both the mask and the dialog.

function setupDialog() {
  //if close button is clicked  
  $j('.window .close').click(function (e) {  
      //Cancel the link behavior  
      e.preventDefault();  
      $j('#mask, .window').hide();
      $j('body').css('overflow', 'auto');
  });       
  //if mask is clicked  
  $j('#mask').click(function () {  
      $j(this).hide();  
      $j('.window').hide();
      $j('body').css('overflow', 'auto');
  });
}

Wrap-up

So that about wraps it up. It’s a very simple way to have content dynamically loaded into a lightbox. Yes, there’s some code you’ll have to add to your site and even modify some of it, but it’s mostly simple stuff. Don’t forget you’ll need at least an HTML file, CSS file and a JavaScript file.

Resources

The following sites were used for reference. They either supplied code, or ideas for code which were then modified.

• Ajaxify your Viviti Site
• Simple jQuery Modal Window Tutorial

1 year ago  /  0 notes

OSX tip: Making dialog buttons keyboard accessible. Go to the Keyboard panel of System Preferences, click on the Keyboard Shortcuts tab and change the Full Keyboard Access option to All Controls. Now you’ll be able to tab through the buttons.

1 year ago  /  Notes

A saturday spent shopping, reading about Python, coding Ruby, messing with the Playbook SDK… Topping if off with Community and Star Wars.

1 year ago  /  Notes