596

jQuery Marquee Plugin with CSS3 Support

Please check github for details about new updates.

Also the plugin is now hosted on jsDelivr.com(CDN).

Recently I been working on a project where a static text message needs to be animated 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 →

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 →

8

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 →

15

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 →

97

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 © 2017 — musings of Aamir Afridi