WevDAV-js update

I’ve recently updated my JS bookmarklet webdav-js and added in some new features including tracking the history state, back button support and proper navigation.

The main thinking behind the bookmarklet is to enable easy manipulationĀ of WebDAV shares without leaving the browser. This bookmarklet allows you to, at the click of the button, browse and upload to WebDAV shares, all within the browser. I’m working on copy/move functionality but currently it supports the basics.

It’s available on github and you can dragĀ the bookmarklet here directly to your bookmarks bar:

Continue reading “WevDAV-js update”

Running CSS animations when the element is shown

Not a unique idea at all, many existing libraries out there, but I wanted a very basic jQuery plugin that I controlled entirely with CSS animations and classes being applied when the user scrolled to (or past) the element, along with a few key features: chaining animations to run in sequence, customisable delays and customisable visibility offsets.

Some code snippets from the example page. The get started, all you need to add to your page is:

then you can add the following classes to your page and the animations will work when the user scrolls to them:

All delays are relative to the first element shown with a data-animate-chain attribute, so when this first element is shown, the timeouts are set up for all other elements with the same data-animate-chain attributes.

The CSS is pretty straightforward and some basic example animations are defined in animations.css

The simplified example above controls the basis for the plugin, first all elements with an animate-on-show class are set up with a 1s animation. Then the child classes, in this case fade-in are defined with an initial state, and how it should end once the animation is applied (.animated). The plugin essentially just applies the animated class to each element that is deemed visible and CSS does the rest. The additional chaining happens at the same time along with accounting for delays.

There are some global settings you can define, including vertical adjustments for some classes. For example slide-in-from-below:

is configured with an initial state of 400px below the target end location, this means we have to adjust our offset by 400. The $.AnimateOnShow.settings.custom object handles this:

If you’re adding in other animations that adjust the vertical position, be sure to add these to your version of the plugin or change in your page’s script via $.AnimateOnShow.settings.custom['your-classname-here'] = <adjustment>.

Hope this saves someone some time if they want to do something similar!

I’ve made it a fairly customisable package although it does currently rely on jQuery as the site for which this was originally developed already had it.

There’s a demo page that includes download links and you are free to use this code however you see fit!

jQuery Parallax: In action

A lot of the traffic I get to this blog is related to the jQuery Parallax script I wrote quite some time ago. Looking at the code now, I don’t think I’d change too much about it, perhaps use .on('mousemouse', ...) instead of .mousemove(), but mostly it seems to serve it’s function quite well. Since the only real functions being called are .mousemove() and .css() it should still be working with the latest versions of jQuery and unless they decide to majorly change the API, it should continue to work too!

Since my example was on a fairly empty page, I thought I’d link to a couple of sites that are using it in the real world:

If you’re using the script and think your sites is a good example of utilising the parallax effect, please leave me a message!

jQuery Ajaxify Lite

I’ve been using the ajaxify plugin for a while now and felt it needed an update.

Since .live() is supported for more events now, I thought it was time to get it working how I always wanted it to work.

Using the same syntax on links as before, you can specify the target div, using the target=”” attribute and the url is automatically extracted from the href=”” or action=”” attribute meaning you can keep your code simple and valid but have easily Ajax populated content, as since I’m using .live() any future links/forms that match the original selector will continue to be ‘ajaxified’.

There’s a demo here and source code too, as ever.

Also available through Google Code.

simpleGallery 0.2 – Minor updates

I’ve updated the gallery script I created in July. I’ve re-factored the code into a static class for easier modification and have created a config.ini settings file, to save modifying the script itself.

New features:

* Image titles
* Separate configuration
* Standard mode with safe URLs as well as mod_rewrite enabled ‘nice’ URLs
* Added ‘..’ parent folder to galleries

The demo page has been updated and the script is available to download here.

jQuery – Persistent Input Labels

Do you forget whats supposed to go in the field the second you tab onto it?

Are you concerned your users will too?

Never fear! This simple plugin places an element of the same type underneath the current element and shows the contents of the title attribute (or whatever attribute you decide to use) as a label until you type text into the box!

It’s a very early version, and probably has a few bugs, but I’ve implemented enough to make it fairly useful I think. Unfortunately when you resize a textarea in webkit, it doesn’r fire the resize event, so I’ve added a workaround using mousemove (I tried to only capture mousemove if a mousedown had been detected, but to no avail…)

You can see a demo here, and get the files here.

Dropdownify – Minimal effort dropdown

So recently I was asked to change a navigation style of an existing site to drop-down menus.

Simple, I thought, just use one of the many existing drop-down plugins. I tried many, but most seemed to use hardcoded styles and I had a few problems (some of which I encountered again, writing this).

So I’ve made this, I think it’s fairly robust, but I’m sure there’ll be problems with embedded objects (flash) and select boxes (in <= IE6), but for my needs, it sufficed, so I thought I'd share, in case anyone else needs a simple script to manage drop-downs. To use, create a nest of elements like this:

or something similar (any elements, should work) and call:

Which should create a simple drop-down.

There are a couple of examples, one for jQuery and one for mootools, and the files can downloaded here and here.

I did encounter a problem with IE, mainly due to z-index faults, so with HTML code like the following:

I used the following CSS: