Jan 162013
 
  • fixed for jQuery v1.9, which no longer supports $.browser : I used $.browser to set the image loader to native javascript for browsers other than Safari and Opera, but for jQuery v1.9+ it will now use the jQuery loader by default for all browsers. This can still be overridden from the options
  • added a permanentLabels switch option (off by default) which keeps the labels (if enabled) on permanent display
Share
Aug 092012
 

Very basic example of how it’s possible to manipulate menu items by destroying the Dock (requires v2.0+), changing it, and then re-initialising it. I’ve used a list, but the same principles apply for non-lists. Note that care needs to be taken with styling in order to get seamless transition between docked and undocked!

Share
Jun 252012
 

Can CSS do what jqDock does?

Short answer : No.

CSS3 provides for some animation techniques that were previously the exclusive domain of Javascript. However, browser support for these new techniques is varied and incomplete, and legacy support in older browser versions is obviously compromised. As an example, let’s take a look at the CSS3 transition style, since that is the one that is most likely to be able to replicate what jqDock provides…

The transition style is currently supported (ie. at the time of writing) by the latest versions of Firefox, Chrome, Safari and Opera; it is not supported by IE9. So, if you want cross-browser standardisation then it’s game over right there.

Of course, there are ways around this, such as using a polyfill to compensate for IE. But then you’ve forsaken pure CSS and you’re merely substituting one piece of Javascript for another.

Let’s assume that IE can now handle the transition style (IE10?), so we’re now on a level playing field as far as latest-version browsers are concerned : How can you guarantee that all your site visitors are going to be using these latest versions? You can’t. So we’re back once again to the question of cross-browser standardisation.

Let’s now assume that you’re happy to have a non-animated fallback for any browser that can’t handle transitions

These examples have no Javascript acting on them at all; it’s pure CSS.

First off, I’m sorry if you can’t see any animation when hovering over the images but I’ve already explained why that might be the case.

With the CSS solution there is no sense of proximity, or mouse position within an element. This means that hovering over an image will only change the size of that specific image; none of its neighbours will be affected. Whether this is the effect you want for your dock is a decision only you can take, however it does have one major advantage : you always know the maximum dimensions of the dock. Also, designating an active item, ie. one that is initially expanded, and returns to expanded when the cursor moves off the dock, is perfectly feasible with the pure CSS solution, whereas with jqDock it is problematic.

One possible limitation with CSS transitions driven by cursor position (ie. using :hover state) is that they are not interruptable. You can’t stop a transition part way through (without using javascript) because the :hover state is either on or off, and in both cases you have definitive targets (the pre-defined expanded or contracted dimensions of the relevant image). Obviously, if you don’t need jqDock’s ability to freeze a dock then it’s not a problem.

Styling in general is much the same between CSS and jqDock : you can put borders and backgrounds on just about anything, and you can always add elements to the CSS solution if need be. If you don’t have specific label structures (like extra SPAN elements) within your anchors, CSS can create labels from anchor titles (for example). If that doesn’t provide enough of a base for your desired label styling then you may have to put dedicated label structures inside the anchors, particularly if you want to center labels that have background or border styling.

If you can put 2 images into your anchor then getting the CSS to swap them in and out on hover is no problem, so that solves any small-versus-large image quality problem.

Conclusion:

If you are willing to sacrifice proximity expansion, and you have no need to suspend or interrupt any animation, then pure CSS can provide a very reasonable alternative to jqDock.

But, unless you don’t care about Internet Explorer, and non-current versions of some other browsers, you are going to need javascript of some sort to make it work consistently across browsers!

Share
Apr 122012
 

Oops! I’ve just noticed a wee bug in v2.0.0 of jqDock, regarding the new noAntiFlutter option.

jqDock has had some anti-flutter code in it for a while, and I was asked to provide a means for disabling that code … which is why the noAntiFlutter option was introduced in v2.0.0. The intention was to keep the default options all working as before, ie. leaving noAntiFlutter turned Off (the default) would still run the anti-flutter code; and only by specifically turning noAntiFlutter On would the anti-flutter code be by-passed.

Unfortunately, I have somehow got the option back-to-front. Sorry! This means that in order to run jqDock v2.0.0 with the same anti-flutter code as previous versions had by default, you actually need to turn noAntiFlutter On!

The simplest way to do this is to modify the jqdock defaults immediately after the script has been loaded, which avoids having to change any individual Dock options you may have set up, eg:

My sincere apologies for any inconvenience this may cause, and I’ll fix it in the next version asap.

Edit:

If you want to do it in a way that doesn’t require the inserted code to be removed if/when you upgrade to the next jqDock release, you can expand on the code above by testing for the version…

Share
Mar 192012
 

Full Change Log.

This is a fairly major release in that it jumps a whole load of jQuery versions and is now only compatible with jQuery v1.7+! I’m very sorry if this prevents anybody from upgrading from jqDock v1.9 but I felt that I had to take to the plunge sooner or later, and I chose sooner.

I’ve changed the version numbering to the more standard Major.Minor.Patch format, so that when/if the jQuery plugins site gets going again I will be able to meet their requirements for inclusion.

There are no bug fixes in this release, just some additional options that have arisen from enquiries and comments I have received, and also from my own experience. One thing I have incorporated is the ability to run jqDock on lists, although it’s fairly rudimentary and could have been done by anybody with a decent knowledge of jQuery : it simply creates a new, jqDock-compatible structure from the list and uses that instead of the list. Please check the documentation! Continue reading »

Share