Archive for the ‘Coding’ Category

UPDATE: Version 1.1 available! Sept 21, 2010
- Overlay prev/next buttons available. This option, “overlay”, is true by default.
- Some small bugfixes
- Clearer left and right keybuttons in the navigation box

Lightboxes, Liteboxes, Greyboxes and Fancyboxes, we have seen them all by now and they all work kind of well. However, they are not very original and work in pretty much the same way. If you want something new and original, yet still oldschool and simple, say hello to the latest addition to the slideshow plugins – DiaProjector.

Remember watching photos with the help of these slides? All you needed was a screen, a diaprojector machine and a ton of slides and you were in for hours of fun with your friends or family. This neat jQuery plugin is almost as fun! At least it’s trying to be, simulating the very same old fuzzy diaprojector feeling. Try it out here on our site and then download it to use on your own site. Please drop a line here when you have it running or have some questions/comments

The plugin should work in Internet Explorer 7+, Firefox, Opera and Safari.

Sites that are using the script at the moment are:
- Monkey Agency

Need to check if an element exists in the page you have loaded using jQuery. It is very simple. The jQuery object encapsulates zero or more DOM elements, and allows us to interact with them in many different ways. Therefor, we can just use the length property to check if our jQuery object, that is returned by our selector query has one or several DOM elements attached to it.

Check if a specific element exists based on ID.

if($('#my-element').length) {
    // Action code goes here
}

Check if a specific or several elements exists based on CLASS.

if($('.my-element').length) {
    // Elment found
}

or

if($('.my-element').length != 0) {
    // Elements found
}

or

if($('.my-element').length > 0) {
    // Elements found
}

Remy Sharp have written an excellent post and recorded a screencast that explains this further on jQuery for Designers

In todays world of web development Ajax is taken for granted and there is a ton of good JavaScript frameworks out there that makes Ajax development quite easy and enjoyable. Together with a nice MVC framework it is even better. Each framework has its own way of detecting Ajax calls or more correctly xmlHttpRequests, which is a huge topic on its own.

For checking if a request is an Ajax request in Pylons you just use is_xhr in your controller, this is based on the fact that you are running your Pylons app as wsgi.

Make sure your importing the request class

from pylons import request

Then in your controller function you can just do

# Checks if request is a xmlHttpRequest (Ajax) and returns a def
if request.is_xhr:
 
# Code goes here
 
return render_mako_def('template_path',"def_name")

You can also return and render a full template if you need or think that works better with your function.

More information can be found at PylonsHQ Paster – Documentation – WSGI, CLI scripts

It is a shame that IE6 doesn’t support hover on html elements other than a-tag. The support can be somewhat flakey in other browsers as well. So for make this work we need to use JavaScript and preferably some kind of JavaScript library which in this case is JQuery.

Here is the script in its full glory, small and simple. It is assumed that this behaviour should be applied on all tables. You can easily modify the script to access just a single table with a specific ID or CLASS. A neater version would be to wrap the code into its own function that only is called when a certain ID or CLASS exists inside the DOM tree.

View Table row highlight example

$(document).ready(function() {
    $('tr').hover(
        function () {
            $(this).addClass('hover');
        },
        function () {
            $(this).removeClass('hover');
        }
    );
    $("tr.table-header").unbind('mouseenter mouseleave');
});

Ever wondered how you can easily redirect a user to the previous url? I.e after a users clicks a delete link or some other action you can use the more common url.current() because that points to the delete action. Instead use request.header REFERER like this:
UPDATE: New way of doing this in pylons 1.0 as redirect_to is replaced by redirect. Thanks to DB for pointing that out!

(This is a Pylons example)

redirect(url(request.referer))

Done!

Small post regarding unicode support in mako. I learned yesterday that mako not only has input and output encoding options but also an default_filter encoding. In the environment.py file, in your Pylons config folder, you need all these three to be sure that everything is enoded as unicode. Remember though that the default_filters argument can have big impact on performance.

(If someone knows the configuration files for other frameworks, please write a comment about it and I’ll add it to the post)

Please read the Mako unicode chapter here if you want the gory details.

#environment.py
 config['pylons.app_globals'].mako_lookup = TemplateLookup(
        input_encoding='utf-8', 
        output_encoding='utf-8', 
        default_filters=['decode.utf8'] )

Even though storing images in the database have its advantages/disadvantages, here is a small guide for those who want to store them in the database and serve them directly to the browser without having to generate a file first. This examples is based on the amazing web framework pylons.

In this example I want to serve small product images from my product controller.

In the product.py controller I have this method

def show_image(self, id, name):
    response.headers['Content-type'] = 'image/png'
    response.headers['Cache-Control'] = 'max-age=14400'
    response.headers['Pragma'] = ''
    product = Product.get_by(id=id)
    return product.image

Then in my mako template I have

<img src="url(controller='product', action='show_image', id='${c.product.id}', name='c.product.image_name')"/>

which will generate

<img src="/product/show_image/1/super-glue.png"/>

So whats happening is that when the page is loading the image tag, the show_image() function is called which fetches the image data from the database and returns the image data buffer to the template. The key for this to work is to set the appropriate headers so that the page know that the data returned is image/png through the Content-type. The name argument is just used to set a name for the image file on the connecting client so that the cached file will have a correct name.