hello, my name is Aamir Afridi ...

a front-end developer at tes.co.uk, London. I write about JS, jQuery and geeky stuff...

142

jQuery Marquee Plugin with CSS3 Support

Please check github for details about new updates.

Recently I been working on a project where a static text message needs to animate similar to non-standard HTML marquee tag.

Googling gives me quite few jQuery plugins but they got so many options and complex html layout/structure was needed for the plugin to work. I decided to make a simple jQuery plugin which can scroll the text either left, right, up or down.

Github:

Continue Reading →

4

Twitter REST API 1.1 to create Twitter Apps using PHP & Javascript

Since twitter has released their new REST API (v1.1), there are some changes which affects quite alot of twitter apps developed based on older API. To prevent malicious use of the Twitter API and gain an understanding of what types of applications are accessing the API, twitter has put some restrictions. Here is list of changes according to twitter offical blog:

  • required authentication on every API endpoint
  • a new per-endpoint rate-limiting methodology
  • changes to our Developer Rules of the Road, especially around applications that are traditional Twitter clients.

I am going to show you how can you use new twitter API (v1.1) to develop jQuery plugins or any Javascript apps. After having a look at different approaches, I found quite a simple solution which I will explain in this post.

Twitter API PHP

Make sure you have hosting that supports PHP. Next go to twitter-api-php and download the files OR simply click here to download the files.

Next create a folder called twitter or anything you want on your server and upload all the files after unzipping it.

You can delete all files safely and leave TwitterAPIExchange.php & index.php.

Create a twitter APP

Login to twitter and than navigate to the twitter apps site.

Click ‘Create New App’ button provided on the top right hand side.

Enter the name of your application e.g ‘My first app to test v1.1′

Similarly enter description and the website URL where from where you will be accessing the twitter api.

Note: In the website you don’t need to provide full path to twitter folder you created in previous steps. It should look like http://www.mydomain.com.

You can leave Callback URL empty for now.

Click ‘Yes, I agree’ checkbox and finally click ‘Create your twitter application’ button.

Continue Reading →

0

Pure CSS toggle-based Responsive Unlimited Levels Menu

This is a brief tutorial to show you how to create a simple CSS-only responsive menu. You can find ready-to-use menus if you google for ‘pure css responsive menu’ and you will find variety of ways but most of them involves Javascript. I am going to use an approach which doesn’t require Javascript (unless you want to support older browsers).

Responsive CSS Menu

We will cover these steps:

Continue Reading →

0

Controlling CSS animations with Javascript

Recently I been working on adding new features to my jQuery marquee plugin. I was trying to add CSS3 animation support to the plugin so it performs better as jQuery animate change the CSS property inside a loop to complete animations.

For example animating something using jQuery animate:

See the Pen wdcIl by Aamir Afridi (@aamirafridi) on CodePen

If you inspect the above green box in developer toolbar and than click it, you can see that jQuery changes the margin-left inside a timer i.e setInterval. To check the code, see this.

Coupled with a touch of JavaScript, CSS animations and transitions are able to accomplish hardware-accelerated animations and interactions more efficiently than most JavaScript libraries.

Many animations in your JS app will affect the performance and will make the animations slower and jerky. So why not use CSS3 animations where browser supports it and use jQuery animate as fallback? or better not to use animations at all where you can avoid so older browsers can perform well.

Continue Reading →

5

JS/jQuery Code Snippets

Some common Javascript snippets I use in my projects. If you got something useful, please share in comments section.

  1. Check if element has scrollbar

    I was working on a project where I need to add jQuery UI resizable to a list but I have to check if it has a scrollbar. I endup with a tiny jQuery plugin

    Usage

  2. setInterval and setTimeout

    Whenever you use setInterval make sure you clear it just incase if it never gets cleared.

  3. Strip out duplicate items in an Array

    Usage

  4. Check if a value is in an Array

    Continue Reading →

4

Simple javascript files loader for embeddable javascript application

Problem:

To develop a large scale javascript application, embeddable to pages, the first problem I faced was including large number of javascript files in the page. So like google or yahoo applications you simply include one javascript file and after few lines of javascript to start the application, otherwise you will end up with something like this:

You might have a simple, advanced and other versions of your application and the end user will have to figure out (or you have to explain) which files need to be included for different versions of applications. Also it looks ugly and meaningless for the enduser to include a big list of javascript files.

You can simply include all your javascripts in one big file and minify it, but

  • Sometime you want to keep your javascript libraries separate from your code
  • Also you might want to include different number of javascript files depend on which features user want to use. You will never want to load all javascript files if user want to embed just a simple/basic version of your javascript application.

Append script tags to head?

You might be thinking why don’t make an array of javascript files name, loop through this array and than for each file name, make a script tag and append it to the head tag. Well this is the solution but you might be loading external javascript files or host your javascript files outside on a CDN and some javascript files will load slower than others. Your javascript code might be depended on other javascript files, for example if you are loading jQuery library and than all your jQuery plugins, you might get an error “jQuery not defined” in your plugin files because jQuery might take longer to load than your plugins. So your plugins will load first and jQuery will still be loading so it will break your application.

jQuery’s getScript method can be used to load ONE javascript file at a time. You can use it inside a ‘for’ loop and use getScript’s callback to include the next script in an array of script file names. But you would never like to include a whole jQuery library just for this purpose (when you are not using jQuery anywhere else in your application).

Solution:

My idea to embed javascript application is include a single javascript file. Call a function and pass the type of application as argument. The function should make a list of javascript files to include, depend of the type of application and once all js files are loaded, call a callback function. Something like:

Demo

Continue Reading →

7

jQuery equal height columns plugin

Problem:

Recently I have been working on a project and I came across an issue where I have to display ‘Featured products’ in 4 columns with a ‘Read more…’ link at the end of each product details. The number of lines for these 4 columns were not equal and so was not looking clean. To demonstrate, I will take the following example where we have 3 panels/columns with unequal height (live demo):

Solution:

I wrote a small jQuery plugin (only 696 bytes) to achieve 2 main goals:

  • Make these panels of equal height by identifying the smallest height among these panels and than reduce the text in other panels to make it of equal height to the smallest.
  • and add an option to put three dots at the end of the paragraph if its not ending with a full stop.

It should also gracefully degrade if no Javascript support is available on the browser i.e people with Javascript disabled on their browsers will see the panels with unequal height.

Continue Reading →

13

Openlayers draggable popups

Problem:

Recently I have been working on Openlayers, vector features where the user can draw different vector features on the Openlayers map and than show the results like area covered or radius of the polygon drawn.

The best way I could found was to use Openlayers Popup but in this case a ‘draggable popup‘ so that user can drag this information popup around to see the map and features around. I didn’t find any built-in property to do so, so I tried jQuery-ui draggable plugin to drag the popup. It worked fine other than, when you double click the popup and the popup will stick to your mouse pointer forever and there is no way but to refresh the page to get rid of it. Here is the code I was trying:


Live Demo of the problem

Continue Reading →

89

jQuery-ui Scrollable tabs plugin

Updates October 27, 2011

Since this plugin doesn’t work with newer versions of jQuery UI, I am not supporting this anymore. Instead I decided to work on a newer and improved version which is half done with most of the features but still need to be improved.

Also one of my friend mekwall (a jQuery guru) :) has written an extension for jQuery-UI tabs for the same purpose which he named Jizmoz Tabs.

Problem:

jQuery UI tabs is one of my favorite jquery plugin I use in most of my projects. It is so simple to use and it degrade gracefully. It has some very nice features and the events are really helpful.

However while I was working on a project where all the tabs contents are dynamic i.e user perform a search and than the results will be grouped up in tabs but the problem was that you never know how many tabs do you need as it can be just 1 or it can be 50+. The problem is that you should know the number of tabs so you can give a width to the wrapper so all tabs can fit in one row.

Unfortunately in my case I could not use it because I cannot give the wrapper a width of like 1000px for many tabs. If you give the wrapper a fixed width, the tabs will try to adjust it self in as many rows as it can to adjust all the tabs, something like this:

Continue Reading →

Copyright © 2014 — musings of Aamir Afridi