1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
//Mattress slider

            $('#mattress_slider').append('<a href="#" class="previous"><</a>');

            $('#mattress_slider').append('<a href="#" class="next">></a>');



            // How manay mattresses

            var mattress_count = $('#mattress_slider .product-list-item').length;

            var mattress_width = $('#mattress_slider .product-list-item').width();

            var slider_width = $('#mattress_slider').width();

            // How manay fit in slider

            var fits = slider_width / mattress_width;

            // How manay are missing

            var hidden = mattress_count - fits;



            // Adjust slider

            $('.mattress_slider').css({'width':mattress_count * mattress_width});





             // Position arrows

            $('#mattress_slider .previous').hide().css({'top':50, 'left':-34}).click(function(e){

                e.preventDefault()

                if(hidden < (mattress_count - fits)){

                    var passed = mattress_count - fits - hidden;

                    // Shift slider by one

                    $('.mattress_slider').stop().animate({'left': ((1-passed) * mattress_width)}, 500);

                    // Decrement hidden

                    hidden += 1;

                }

                // Show or hide controls accordingly

                show_hide_controls();

            })

            $('#mattress_slider .next').css({'top':50, 'right':-34}).click(function(e){

                e.preventDefault()

                if(hidden > 0){

                    var passed = mattress_count - fits - hidden;

                    // Shift slider by one

                    $('.mattress_slider').stop().animate({'left': -((1+passed) * mattress_width)}, 500);

                    // Decrement hidden

                    hidden -= 1;

                }

                // Show or hide controls accordingly

                show_hide_controls();

            })



            function show_hide_controls(){

                if(hidden == 0) $('#mattress_slider .next').hide();

                else $('#mattress_slider .next').show();



                if(hidden == mattress_count - fits) $('#mattress_slider .previous').hide();

                else $('#mattress_slider .previous').show();

            }

Check out this Pen!

Installing Bower

Bower is written in Node.js and therefore require Node package manager npm to install it. So first you will need to install Node.js, by choosing an installer on the Node.js download page.

Once Node.js is installed, simply run the following command:

Finding packages

There’s two ways of looking for packages:

Either search for packages using the command line tool:

Or alternatively, browse them from the online repository

Installing packages

Once you have found your favourite packages, run the following command within your project folder:

It may take a minute or so…

Please note that Bower will cache your downloaded packages in ~/.bower/cache so next time you run the install, it will use the cache version for a quicker install.

Though, if the packages have been updated and you want to download the latest, you can clear the cache:

Or if you wish to update your packages:

Building your assets

Grunt is wonderful tool build in Node.js which basically allows you to write a set of functions that will process your assets as required. You can for example command to jshint (check JS syntax), concat (Concatenated multiple files in one) and uglify (minify files) a bundle of JS files as required.

The list of plugins is long so check the Grunt plugin page to see what it can do. For the purpose of this article, I will demonstrate how to use Grunt for scaffolding the assets installed by Bower, and building a deployment methodology to manage our assets.

First we need to install Grunt, in a similar fashion as we did for Bower, using NPM:

Then, we need to create a package.json file to indicate which Grunt dependencies we need to install:

And install:

Then, we must create a gruntfile.js to config which action we would like Grunt to execute:

In this config, we specify which files to copy files from downloaded packages (copy), check for syntax (jshint), which file to concatenate (concat), which file to uglify (uglify) and finally which file to watch (watch).

To execute this command:

By default, grunt will run the ‘default’ tasks. So it is also possible to run a specific task for example:

The build command will pull the assets from the packages downloaded by Bower and set up a default starting architecture for the new project. So technically, it should only be run once.

Watch file changes

You can also watch you files, so if you change any of those files, then grunt will automatically re-run the config, which great to test development work.

So if you use something like CodeKit, then you won’t need it anymore!

Further reading

You can read the NPM Bower package instructions for an overview of all the commands or simply look on the Twitter Bower home page.

For Grunt, you can refer to their online documentation.

In order to pass in the required CRSF token for Django POST requests, we can config our Angular module to add the X-CSRFToken POST header parameter on every call. To do so, set a config on the app module that way:

In this scenario, the csrfmiddlewaretoken is output by the Django template context as an hidden input field.

Download the gist: ANGULARJS – Django CSRF Token header setup

Route path changes (or URL redirect)

Obviously in AngularJS, we don’t actually redirect the user but we change the url path (the one followed by #/) in order to load a different controller. It is quite simple to do, simply by giving a url parameter to the path() method:

Do not forget to pass $location in your controller arguments!

More in depth documentation is available on the AngularJS $location reference page

Passing data to a POST call with $http

The $http POST call on AngularJS will not automatically convert your data array to a set of parameter for the AJAX call. So you must encode the data array as follow (i’m using jQuery to do so):

$.param(data))

Example:

Related links

I found even more tips and tricks on this blog: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED

The main issue with IE7 is its lack of support for HTML5 tags, so we have to tag our AngularJS HTML template accordingly to make sure it will load our app.

So here’s how it got it to work:

Now I have seen many sites suggesting adding those attributes on the <html> tag, but for me it doesn’t work! So stick with the body tag and you should be a much happier person!

Then, we need to tag our ng-view accordingly as well:

Using the class binder is safer than trying to support for <ng-view>

Adding support for JSON

You will need to load this JSON polyfill for IE7 and IE8

http://bestiejs.github.com/json3/

Supporting for special tags

AngularJS developer site provides a great starting guide on adding support for special tags on IE7, so here’s a good way to start:

http://docs.angularjs.org/guide/ie

This is what they suggest:

Though I am not using it, I’d rather stick to the old fashion class binding system!

1. First of all, we need to setup the Facebook app canvas settings accordingly (in the advanced settings of the app):

2. Then using javascript we’ll ask Facebook to resize the frame automatically. Add the following code inside your page <head>:

3. Finally, we need to force our body and html tag to avoid scroll bars. In your style sheet add the following:

or inline with the html code:

This has worked for me to remove all the scroll bars. It’s working on the 18th of October, but because Facebook keep changing their code, it may change in the future.

Though, you may want to fetch specific kind of tweets to your website. I’m case I needed to filter by username & #tags.

First let’s download and embed the necessary code from here: http://elektronaut.github.com/jquery.livetwitter/

Follow the instructions (very simple) and then tweak you javascript embedding code:

The following code will filter tweets that contains (#tag1 OR #tag2) AND username.

It’s as simple as that.

Here’s a list of the search query criteria you can use with the search API on Twitter:

• term1 term2: search for tweets containing both term1 and term2 in any order
• term1 OR term2: search for tweets containing either term1 or term2
• “term1 term2”: search for tweets containing the phrase “term1 term2”
• term1 -term2: search for tweets containing term1 but not including term2
• from: to search only for tweets from a specific Twitter user (e.g. from:briansolis)*
• to: to search only for tweets directed to a specific Twitter user (e.g. to:briansolis)*
• since: to search only for tweets after a specific date in UTC (e.g. since:2010-03-30)
• until: to search only for tweets before a specific date in UTC (e.g. until:2010-03-30)
• filter:links to search only for tweets containing links
• source: to search only for tweets from a specific Twitter source (e.g. source:tweetie)
• lang: to search for only tweets in a particular language (e.g. lang:en for only English tweets, more info about languages here)

Happy tweeting.

Just give it a go!

http://jquery.malsup.com/cycle/

Example:

The first image

The second image

The third image

The code: