Jquery

jQuery.lazyLoader, Semantic, organic responsive images?

Respons-ish-ness

I’m often a bit of a purist, but as I age, I’m realising more and more the history of the web, much like most other histories is a pretty messy pit of layers laid on top of layers. After reading this revolutionary email from the birth of the img tag, I’m reminded we’re just working on the next layer so it’s probably going to be messy ;).

I have been reading this evening over people’s thoughts about how we tackle responsible responsive images and there seems to be no perfect method. In fact many of the methods currently being seen have major gotchas. It just feels like we are far from getting a stable way of providing responsive images using the img tag.

jquery thoughts releases responsive

jQuery.unparam plugin

I have just created a simple jQuery plugin to add the opposite functionality to the jQuery.param function. It will turn a set of url parameters back in to an object. Here’s the usage at the moment.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

it("should get basic query string vars from full url", function() {
    expect(jQuery.unparam('https://davetayls.me/?foo=one&bar=two'))
    .toEqual({
        foo: "one",
        bar: "two"
    });
});
it("should get basic query string vars from just query params", function() {
    expect(jQuery.unparam('foo=one&bar=two'))
    .toEqual({
        foo: "one",
        bar: "two"
    });
});

You can get hold of it on the Github repo

jquery code releases

JavaScript headaches with responsive layouts

It’s always nice to start another responsive project, each a little more daring than the last. I’m still in the infant stages with these projects as I find that I’m lacking some good tools to make the process easier. I’ve created a a simple responsive device browser which simply gives an at a glance impression of how a responsive site will look at the various screen widths.

I’m finding one of the biggest challenges is catering for the user to be able to resize the browser window once it has been loaded. One may think that this isn’t likely to happen very often. Especially not to the extent where it starts off less than 480 and increases to above 768. This is exactly what happened on my last project where someone’s browser settings opened certain links in a new window which happened to be tiny. They then realised they wanted it larger and maximised the window to find that most of the functionality hadn’t been initialised because the JavaScript turned on only the small touch device functionality on load.

jquery thoughts responsive

jQuery.kinetic plugin gives you drag scrolling with mouse and touch

I have released another jQuery plugin which gives you drag and throw functionality inside an scrollable container just like you expect on touch devices. This has the added bonus of allowing this sort of interactivity within an overflow whithin safari on iPad and iPhone.

Demo

I have added a demo and a list of options on https://davetayls.me/jquery.kinetic/.

This is still a work in progress, It only scrolls horizontally at the moment. Please let me know of any issues you might find. You can log them on github

releases jquery