Blog

  • Useful CSS Snippets

    Over the past few months I've been doing a lot of CSS and find myself Googling for older browser work around's and writing the same piece of code a lot. So I've put together a gist on github which I find really useful and of course it saves time. 

    Take a look and at the list I've put together, I'm hoping to be updating it all the time so you should see it getting better and longer.

    It would also be good to hear how you re-use code and what other things you think I should add.

    https://gist.github.com/3619120

  • IE7 z-index bug

    I've been doing a fair bit of CSS recently so to help with some of the browser issues I come across along the way, I'm going to write about them to remind myself and help anyone else who comes across the posts.

    A lot of sites these days have a nice looking drop down navigation and then some sort of content rotator/slider. How most of these features work is by displaying the dropdown list when you hover over the parent item, making sure that the dropdown has a high enough z-index to show above any other content it may sit above.

    This is all very good in modern browsers and works absolutely fine. But with IE7 this can be a issue especially when the menu is to overlap a rotator. Most jquery rotators position the containing element relative and child items absolutely to their container. And this is where the issue lies, IE7 has an issue that interprets setting the positioning of an element gives a new stacking context meaning no matter how high the z-index of your drop down menu is it will not be above the positioned element.

    The fix for this is to give the positioned element a z-index itself of 1, say. Which will ensure that the newly created stacking should be lower than your defined menu index. Another trick I've used is to ensure that the menu's parent element also has a higher z-index, this can also do the trick.

    For further reading see the highly voted post on stackoverflow 




  • First Knocokout.js application

    I recently spent a day at the Umbraco UK Festival and heard a great talk by Matt Brailsford on Knockout.js which inspired me to get around to learning some more about the library and completing some tutorials.

    After completing a couple of tutorials I felt comfortable enough to go ahead and try and put together a quick app. The idea was simply enter your age into a text box and the application would work out figures on how long you have been alive.

    But before I go through the steps a little background on Knockout.js for anyone who has not come across it before. Taken from the Knockout website: 

    Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

    Ok so let's look at implementing this demo application. For any development you need to include a copy of Knockout and if you plan to use any template's KO’s default templating engine is jquery.tmpl.js which requires jQuery.

    Lets look at the code then, firstly I defined the view model which included the calculations for working out how long you have been alive and then age observable property with a default value. I then activated Knockout by calling applyBindings passing in the view model.

    Now the view model is defined I needed to define the view which would contain a text box for the data entry and using a template for each of the calculation results.

    The text box is data binded to the age property and we have a for each loop for the calculations which users the 'resultsTemplate' which is defined inside the script tag as a <p> with the results of the passed in age multiplied by the calculation value.

    That's it we are done take a look at the results on the JSFiddle demo page. The data of the demo is not very accurate as I'm just using the users age but you can get the gist of what Knockout can do.

    So using not very much code at all we have created a small application that automatically updates based on the users text box input something which previously would have taken more code and not have been so easy to implement.

    Further Reading

    The tutorials and documentation and tutorials on the Knockout.js website are fantastic so definitely check them out http://knockoutjs.com/

    A video is available of the talk I mentioned earlier from Matt Brailsford at the Umbraco UK Festival which Is definitely worth a watch, he gives a good introduction to Knockout and talks you through the code for a simple to do list. http://umbracoukfestival.co.uk/video-and-pics/

    For further information on Jquery templates the plugin page is over on https://github.com/jquery/jquery-tmpl

  • Working with uCommerce and Umbraco

    We have recently pushed live our first e-commerce site being powered by the awesome Umbraco CMS and uCommerce . I've been using Umbraco for well over a year now and hoping that ill be able to write up some posts regarding Umbraco in the near future but this one is going to concentrate on the uCommerce package while it's fresh!

    uCommerce is available via the Umbraco package repository, all the information you need on getting the package installed and details regarding the available packages can be found at http://www.ucommerce.dk If you don't wish to start with a blank canvas there is also a starter kit available from the Our Umbraco project page http://our.umbraco.org/projects/website-utilities/ucommerce Once installed you will have a working shop up and running!

    Currently the starter kits comes with a bunch of xslt files for the numerous shop screens, but if you like me find the razor syntax easier to work with they are very easily converted.

    Now you have a working e-commerce site set-up it's time to configure the site to fit your need's. This is were working with uCommerce is an absolute pleasure the ease of the API along with customizable pipelines make it really easy to achieve whatever your requirements. Complete API  documentation can be found at http://www.ucommerce.dk/docs/ but with how straight forward the API is you'll find it pretty straightforward poking round with intellisense.

    Once you get to the stage of integrating with a payment provider you will find that uCommerce comes with built in integration with a number of providers including: PayPal, SagePay, RBS Wordpay and more.

    Summary

    My first experience of working with uCommerce has been fun and I would definitely recommend it to other Umbraco developers looking for an e-commerce solution. 

    I'm currently extending the back-office of uCommerce to add in some extra functionality around updating order status, exporting orders and further reporting. And that's the great thing about not only uCommerce but Umbraco in general it's extensible if you require it!


  • Tracking downloads in Google Analytics

    By default Google Analytics has no way of tracking users accessing downloads via your website. Page views is tracked by the javascript snippet Google provides that you add to your pages so when users open up a PDF document for example as the document obviously won't contain the tracking code this will not appear within your Analytics.

    There is a couple of ways to add this functionality to your site.

    Add a page view for a download

    To add a page view into your statistics for downloads you need to push a page view to analytics. I did this will a little bit of jQuery to grab the click event of links on my page which are accessing downloads. Say all your documents are inside a folder called downloads you could track them like

    
    
    $('a[href*="downloads/"]').click(function(e) { 
    //Add code here
     });

    This would kick in with the click of any links were the href contained 'downlaods/' you can then push the page view event to Analytics and even pass the Url of the requested download.

    $('a[href*="downloads/"]').click(function(e) {
    if (pageTracker) {
    pageTracker._trackPageview(this.pathname);
    }
    });

    The added if statement is to make sure the pageTracker call is available to us at the time of attempting to post the page view. Then we simply call pageTracker._trackPageview(this.pathname) passing in the url of the document the user is attempting to access.

    Track an event

    Instead of adding a a page view you may want downloads to show as a custom download event within your Analytics account. To do this we will use the exact same code to make the call when the user clicks on a link to a download.

    $('a[href*="downloads/"]').click(function(e) {
    if (pageTracker) {
    pageTracker._trackEvent('Documents', 'Download', this.pathname)
    }
    });

    This time we are calling pageTracker._trackEvent() passing in the category for the event, the action and the link url. More details on event tracking with Analytics can be found at http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html

    Summary

    As you can see it's real simple to extend on the superb functionality of Google Analytics to add in your downloads tracking. In some instances you may want to do both methods shown below at the same time a new page view and custom event for the download of a document.



  • Change is coming

    Over the coming weeks/months depending on how much time I have on my hands I'm planning to update this site along with the portfolio website to introduce a new design and incorporate them together.

    This has come about from reading numerous articles around fluid websites and basically just wanting the opportunity to play around with some of the new features of CSS3 and HTML5.


  • Portfolio Update

    I've just updated my portfolio website john-walker.co.uk with my latest projects from the last 6 months or so. Take a look any thoughts on any of the sites are welcome.

    Hoping to have some more sites/apps that I can add in the near future.


    John

  • Twitter Board

    I have just pushed live v0.1 of Twitter Board a simple jQuery plugin which users the Twitter JSON API to display a feed in a board layout.

    Take a look at http://john-walker.co.uk/twitter-board

    Any thoughts would be much appreciated.


    John

  • jQuery UI datepicker options (dob)

    On a recent development I wanted to use the jQuery UI datepicker to allow users to select their dob. With the standard implementation the user is required to use the forward and back arrows to switch through the available months.

    With a date of birth picker I want the user to be able to select the year and month with minimum clicks. Using the changeYear and Change Month options this will make them both a drop down list.

    $(".datepicker").datepicker({
    dateFormat: 'dd/mm/yy',
    changeYear : 'true',
    changeMonth: 'true'
    });

    As standard the datepicker only goes back 10 years so we also need to update this using the yearRange option.

    $(".datepicker").datepicker({
    dateFormat: 'dd/mm/yy',
    changeYear : 'true',
    changeMonth: 'true',
    yearRange: "-90:+0"
    });


    That's it the options required for a dob picker going back 90 years.

  • N2 CMS Get Items by detail

    When using N2 to produce a navigation tree or a list of content pages this can usually be done easily be using the children of a content item.

    But when adding a list of footer links I usually just hard code them but if a client then updates the page the url is broken. I have now been adding a boolean property to my base page item for 'Footer, show in footer' Now to display the list of footer pages I now needed the children which had the footer property set to true.

    To do this I used the code block below:

    var footerPages = N2.Find.StartPage.Children.Where(x => x.Details.ContainsKey("Footer") && (bool)x.Details["Footer"].Value == true).Select(x => x as N2.ContentItem);


    I can then simply just loop over the returned pages.

  • Portfolio website launched

    I recently pushed live my portfolio website which you can view at john-walker.co.uk

    The website was developed with: HTML 5, CSS, Jquery and Fancybox

    Let me know what you think

  • Adding Facebook comments to your site

    Steps to implement Facebook comments on your website.

    1. Register a basic Connect application.
    2. Follow the steps here to download the code for both the JavaScript SDK and comments box.
    3. Copy this code onto the section of your site you wish to display the comments.

    Optional steps

    1. Remove the xid tags from the fb:comments tag to allow the id to be defaulted to the current url.
    2. To enable anonymous comments load up your page with the comments box whilst logged into your developer Facebook account click Administer Comments and update the Allow Anonymous Comments section.

    All done!

  • jQuery Case Sensitive Selectors

    The other day I was working on some new functionality where the user was required to click a link and the content would open up in a Fancybox, I was started to cross browser test this functionality starting off in Firefox then Chrome moving on to IE where the link stop working correctly it took me a good while to notice that my class had a uppercase p "Popup" and my jQuery code had a lowercase "popup" soon as I made the change all was working correctly.

     Just thought I would share in case anyone else comes across the same issue and ends up spending a lot of time trying to work out the problem.

  • jQuery clickable div

    Came across issue today were we wanted to make the full contents of a <div> to be clickable to the user, at first we started looking at just simply wrapping the <div> with an <a> but that was nasty and not valid. So in the end we used some jQuery to simply make the <div> clickable.

    • First we select the div we want to be clickable and then add the pointer class so any user with javascript enabled will see the cursor as the hover the div.
    • We then add a click event to the div, and send the users browser to the url of the first a within the clickable div.
    • Code and example are shown below.

    Code

    $("div.clickable").addClass('pointer'); // Add pointer to div only if user has javascript enabled

    $("div.clickable").click(
    function () {
    window.location = $(this).find("a:first").attr('href'); // on click link to the url of the first link within selected element
    });

RSS Feed

 

Older Entries

Tags

Meta