Articles tagged with jQuery

Jelly and Micecream.com

Over the last few months I have been wanting to polish up some existing skills and learn some new ones. Over this time I haven't had much time to work on projects that had the scope to play around with these skills so I decided to find a simple project that I could use as a test bed. Since the vet had recently estimated my cat's age I decided on a cat age calculator.

Does the internet need more cat based websites? Probably not, but the internet loves cats and I needed a project. The project needed a suitable name and so jellyandmicecream.com was born.

I prototyped the basic functionalities and interactions in javascript and jQuery. It could have continued as a js only app but I made the decision to move the calculations to the backend so that I could use some server side languages. I did consider creating a Rails app for the project, but not knowing enough about ruby or rails I decided it would be better to work ...

Read post... Posted in 'Projects'

Creating a chrome extension - an update

Since I wrote my last post on creating a chrome extension , there have been a few changes to how the extensions are built - mainly that the manifest version has changed to version 2. The original post is still fine, but there are a few tweaks needed. This post is mean mainly as an update to the original, so rather than rehash the old content too much I will skim over the basics quickly.

  • Create a folder for your plugin - name it after your extension so you can find it later!
  • In a text editor create 4 documents.
  • Save them as manifest.json, background.js, background.html and customStyles.css
  • Create a 20px x 20px png file using your favorite image editor!
  • Get a copy of jQuery . and add it to the folder.

manifest.json

 {
  "name": "plugin name",
  "version": "0",
  "description": "What do I do as an extension",
  "background": {"page": "background.html"},
  "manifest_version": 2,
  "browser_action": {
    "name": "Manipulate DOM",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery-2.0.2.min.js", "background.js" ],
    "css": ["customStyles.css ...
Read post... Posted in 'Web development'

A Responsive Image jQuery Plugin

There are a whole variety of ways that responsive images can be accomplished, but as of yet there is no perfect way of doing it without using a combination of .htaccess, javascript or css. My solution is no different and uses javascript (in the form of jQuery) as the coordinator of the images.

responsiveBreakpointJQ works by specifying the images that will show if the screen of the device is big enough. The data-XXX values are how the appropriate image is specified. If a screen is wider than the XXX value then that image is selected as the best one for the job.

 <img src="small.jpg" data-480="medium.jpg" data-960="large.jpg" alt="Image Alt text" />

If you would like to read more then take a look at the responsiveBreakpointJQ project on github . If you feel you can make it better then be my guest :D

Download the jQuery Responsive Breakpoint Image Plugin from git hub to checkout the code: https://github.com/Designer023/responsiveBreakpointJQ

Pros:

  • Can add as many breakpoints as needed.
  • Breakpoints ...
Read post... Posted in 'Web development'

Creating a chrome extension that uses jQuery to manipulate the DOM of a page

There are plenty of tutorials and guides on how to make a chome extension and there are hundeds for jQuery manipulation of the DOM. There are also a few about using jQuery in a chome extension, but only for the popup window. There seems to be a lack of using jQuery to actually do something on a page.This is something that too me a while to get my head around and a bit of googling to figure out, so now it's time to share.

Create a folder for the extension files. It's probably best to name it after your extension so you can find it later on.

In a plain text editor such as Notepad, Textmate or TextEdit create 3 blank documents. You can save the files as manifest.json, background.js and background.html. Using your favorite image editing software create a png icon with a transparent background (20px x 20px should be ok for now). Chome should scale the icon for the different areas it shows. Later we can create ...

Read post... Posted in 'Web development'