Category Archives: javascript

Today In nodeJS

Posted by on September 29, 2010 No comments 
// Today In Node 9-29

var work = require('company');

logan.on('wake_up', function(){
    logan.go_potty();
    logan.shower(function(){
        logan.trigger('breakfast_hunger')
    })
}).on('breakfast_hunger', function(){
    logan.move_to_kitchen(function(){
        logan.eat_pop_tart();
        logan.trigger('clothing_non_optional');
    })
}).on('clothing_non_optional', function(){
    logan.get_dressed();
}).on('begin_work', function(){
    logan.review_open_cases(bugz, function(){
        bugz.each(function(itr, bug){
            if(bugz.submitter_is_nincompoop() || bug.is_duplicate()) {
                bug.close();
                break;
            } else if (bug.is_important() || (bug.is_trivial() && bugz.no_more_importants())) {
                bug.solve(function(){
                    bug.close();
                    break;
                });
            }
        }).onComplete(function(){logan.trigger('begin_work')}); // Rinse and repeat
    })
}).on('lunch_hunger', function(){
    logan.move_to_kitchen(function(){
       logan.eat_hot_pocket.trigger('begin_work');
    });
}).on('finish_work', function(){
    console.lot('NT');
    logan.trigger('begin_work');
}).set_trigger_time('9am', 'beginwork')
  .set_trigger_time('12am', 'lunch_hunger')
  .set_trigger_time('6pm', 'finish_work');

view raw gistfile1.js This Gist brought to you by GitHub.

JQuery UI Tabs Bug In IE 7 /8

Posted by on September 21, 2010 No comments

Depending on the version of JQuery you’re running, included plugins/scripts, and how you retrieve JQuery, you may have noticed that JQuery’s UI Tabs is broken. JQuery should be aware of the problem as it has been posted to their forum. 

window.scrollTo = function () { return true; };
view raw gistfile1.js This Gist brought to you by GitHub.

This line of code has been provided by one of the users as a reason for the error appear in IE 7/8. The thread appears to resolve mainly around MicrosoftAjax.js issues. This same issue happens if you use Google Ajax Apis. If you look at the javascript code executed by the jsapi from google you will see they’re storing their loader in the window object as well. 

if (!window['google']) {
window['google'] = {};
}
if (!window['google']['loader']) {
window['google']['loader'] = {};
google.loader.ServiceBase = 'http://www.google.com/uds';
google.loader.GoogleApisBase = 'http://ajax.googleapis.com/ajax';
view raw gistfile1.js This Gist brought to you by GitHub.

This appears to be an issue involving the window object in JQuery UI Tabs. This issue only affects version 1.4.2 of JQuery, if you change to 1.4.1 you’ll be fine.

You may consider not using Google Ajax Apis, in that case replace your google.load code with the following: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
view raw gistfile1.html This Gist brought to you by GitHub.

Open Lightbox From link

Posted by on September 13, 2010 1 comment

When using lightbox as a photo gallery you may want to have the images only appear in your lightbox, not anywhere else on the page. The trick to this is that lightbox is active by clicking an image. This is how to manipulate this configuration to open a lightbox displaying many images on via a text link. This will decrease page load speed because the images will not be retrieved until lightbox requires it. This is based off the JQuery Lightbox Plugin.

The Html:

<a href="#" class="activateLightbox">See Gallery</a>
<div class="gallery" style="display:none;">
    <a href="image1.jpg" class="lightbox" rel="galleryView">&nbsp;</a>
    <a href="image2.jpg" class="lightbox" rel="galleryView">&nbsp;</a>
    <a href="image3.jpg" class="lightbox" rel="galleryView">&nbsp;</a>
    <a href="image4.jpg" class="lightbox" rel="galleryView">&nbsp;</a>
    <a href="image5.jpg" class="lightbox" rel="galleryView">&nbsp;</a>
</div>
view raw gistfile1.html This Gist brought to you by GitHub.

None of the links will be displayed because they’re wrapped in a hidden div, and the rel tag identifies the gallery.

The javascript:

$(document).ready(){function(){
    $('a.lightbox').lightbox();
    
    $('a.activateLightbox').click(function(e){
        e.preventDefault();
        $(this).next('.gallery a.lightbox:first').trigger('click');
    });
}};
view raw gistfile1.js This Gist brought to you by GitHub.

This is pretty straight forward, the first line binds the Lightbox plugin to the links with class lightbox. The next binds a custom function to the activateLightbox link. It overrides the normal click event. It then finds the next node that matches our criteria for lightbox. You should customize this selector to match the needs of your site. We then trigger a click on the node. Lightbox has been bound to this node already, so lightbox is triggered.

Display Google Map In A Pop Up

Posted by on September 12, 2010 No comments

If you have ever tried displaying a google map in a pop div, you’ve probably realized that there is something wrong. Google determines the div size when the map is initialized. Since the div is generally hidden at this time it Google cannot accurately determine the size. The solution to this is rather simple, make sure the div is not hidden when map is initialized or resize the map when the div is displayed. We’ll go with the second solution as it is far more elegant. Chances are that your user may open or close the pop up div multiple times. There is no need then to be pingping the maps API multiple times, so we’ll ping once and resize.

$(document).ready(){function(){
    function initialize() {
        var latlng = new google.maps.LatLng(latitude, longitude);
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom : 8,
            center: latlng,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        });
    }
    
    
    initialize();
    
    $('#mapOpen').click(function(){
        $('#mapWrapper').fadeIn( 'slow',  function(){
            google.maps.event.trigger(map, 'resize');
        });
    });
}};
view raw gistfile1.js This Gist brought to you by GitHub.

The wrapper div is displayed by the fadeIn function. Upon completion a google maps function call is made that checks for a new width of the div. #map should always be displayed, the wrapper #mapWrapper should be have display set to none.

Include Google Maps 3 via Google Loader

Posted by on September 12, 2010 1 comment

Changing the version from 2 to 3 is not enough to get Google Loader to work correctly. You’ll get some error about how the sensor parameter is not set. To set this parameter use the follow code:

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript">
google.load("maps", "3", {other_params:"sensor=false"});
</script>
view raw gistfile1.js This Gist brought to you by GitHub.