Javascript Dock Complete
Since I started working with this project, I've been plugging away with it trying this and that, and didn't originally have a home for it. I had a test page set up to show the latest version of it, and that was about it. Now that it's done (at least done for the time being), I have found a home. In the early stages of forming Fuzzy Coconut, one of the working titles was "Unladen Swallow." I registered unladen-swallow.com at that point, and put up a simple splash page with a list of links on it. It occurred to me that that would be an excellent place to show the new script. Unladenswallow.com is the new home for this script. Give it a quick look!
Apart from IE6's inability to handle transparency in png files (that's why IE6 users see a blue matte behind the icons), there is still one minor glitch that I'm not certain how I want to approach. In order to maintain accessible mark-up, I've chosen to leave text within the links in the Dock. In case a visitor is using a browser that doesn't have the ability to execute this script (e.g. Internet Explorer 5 for Macintosh), the links will still be visible as text links. The side effect to this approach is that some browsers render the dock a little bit high in the window when the page is first loaded. There are a few ways to solve the problem, and I'm currently weighing the options, the worst of which being reverting to a previous, less accessible model.
I have tested the script and found it to function similarly in the following browsers: Internet Explorer 6 for Windows, Firefox 1.0 for both Windows and Macintosh, and Safari 1.2. There were a few discrepancies along the way, and since I've taken the time to leave entries about the various steps of the project, it seems appropriate to enumerate the difficulties and point out a few things about the script.
One of the barriers in this script is that IE6 uses a different Javascript Event Model than modern browsers do. In layman's terms that means when you put your mouse over a link and expect the link to do something (trigger an event), a modern browser will tell Javascript, "This link says do this!" where as IE6 tells Javascript, "Something said do this!" That's why if you examine my script you'll see that I had to fork the code to sniff out the event source for IE6 users. Similarly, IE6 has a different means of reporting the cursor's position on the screen, and there's another code fork when finding the cursor position.
The most interesting stumbling block that I encountered wasn't with IE6 as odd as that might seem. It was with Safari. Safari doesn't like to fade in elements while something else is happening. For that matter, Safari doesn't like to do much of anything while something else is happening. As a result of this, Safari may be slightly slow to show the text while you move your cursor over the links. Also, while attempting to fade the text in, Safari would often begin the fade and then just stop fading. The end result was ghostly transparent text, and I was displeased with its appearance. My fix for this was to fork the script so that Safari doesn't try to fade in the text, it simply sets makes it appear and disappear.
Now that I've finished the script, I plan to let more people know about it and get feedback from a broader audience. There will undoubtedly be nuances in various browsers, and I can work on those as I encounter them. If you fine a bug and you'd like to report it, please report which operating system you are using, and which browser as well as the browser version. I'd greatly appreciate it.
- under:
- Web Development
- Posted on
- 2005-04-04
Comments:
What is Fuzzy Coconut and Unladen Swallow? They look like cool projects. Also i was wondering if i could maybe use that script on my site?
Put extremely loosely, Fuzzy Coconut is a web design collaborative project that has plans to evolve into a much larger organization. Unladen Swallow was one of the names that we were thinking about using, but later we decided to use fuzzy coconut in its place.
Yes, alden, you may use the script on your site, all I ask is that you leave the credit (which is at the top of the script as a comment) undisturbed.
Are you hiring yet?
"For that matter, Safari doesn't like to do much of anything while something else is happening. "
aha! this may help me solve my problems with my site...
damn safari! damn your "javascript console"!
Answer me these questions three
1) What is your quest?
2) What is your favorite color?
3) What is the airspeed of an unladed swallow?
your "about" page is you rambling on about some of your ideas
Tell us what the fuck this site is and what your trying to do as a whole. It seems like a cool idea after you do some digging and fig. out your objective.
hmm
I suppose you've got a point. I'll have to alter that.
Why do I have such trouble trying to use it?
Looking through the source, I have so much trouble, and cannot apply my own images.
Could someone help me out?
You need to copy the css and the js files to your server and be sure to update the links to them in the head of your html.
(if you don't rename the css or javascript, just be sure they're in the same directory as your html file.)
Also in that directory, create a directory called "icon" in that directory, put the images you wish to use in .png format.
The javascript crawls the dock when the page loads, and examines each link's title attribute to determine which image to use. So if your link has a title of "My Page", the icon will be icon/mypage.png. The script just takes the title, strips out all the non-alphanumeric characters, converts it to lowercase and uses that for a filename.
Another example from unladenswallow.com is the link with the title of "the Gippy Pages". The script converts that to icon/thegippypages.png
So, in summary, you need the directory that the page is in. It will contain index.html, dock.css, dock.js, and page.css (page.css can contain whatever you want. It's meant to be the stylesheet for the rest of the page). Here's a snap shot of what I mean:
That's really all there is to it, just copy the files, and name your icons appropriately based on the title of each link, and you should be good to go!
Thank You!
Very Usefull!!!
Very nice page navigation tool. :-)
what is this site all about?
hi I really love this I am kinda of planning to use it. I manged to fix the PNG issue In IE. here's the code
//create the icon "your Code"
var a = document.createElement('img');
a.setAttribute("src",itemImage);
a.setAttribute("alt",itemName);
a.style.width = a.style.height = minZ + "px";
//Added Extra Lines by Bluesaze to correct Png issue in IE correctly
//include a blank Gif File In the Icon folder
if(IEeM)
{
a.setAttribute("src","icon/blank.gif");
a.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, , sizingMethod='scale', src='" + itemImage + "')" ;
}
thats it hope it helps. I am trying to make it work by docking it on a header page of a webpage no luck so far. the Dock icons start moving even if the mouse is below the whole Dock. could you tell me how to rectify this thanks a lot. really appreciate the work you have done.
Check this out
http://lojjic.net/script-library/OSXBar-test.html
I'm glad that the MS filter works! I was afraid that it couldn't resize the transparency masks quickly enough.
I'm not sure about the issue you are having, I never got around to trying this on the top of page before, but I'd be happy to look at your page.
If I had to guess, it's probably function getMouseXY(e) { ... } I haven't tested it, but here's my suspicion:
if(dockX && dockArray) {if(tY<dockY && tX<dockX && tX>widthX) {
...
that's the code that figures out where the mouse is. It only checks that the cursor's Y position is below the top of the dock (since it's on the bottom, the cursor cannot be lower). If you check that the cursor's Y position isn't higher than the dock's offsetHeight, it should remedy the problem.
Again, I didn't test it, but here's my guess at a line to add the above snippet:
if(dockX && dockArray) {if(tY>document.getElementById('dockContainer').offsetHeight) { return; }
if(tY<dockY && tX<dockX && tX>widthX) {
...
I don't know if that'll do it without testing, but I'd bet it's that or something real similar.
hey thanks for the quick reply i tried adding the snippet you provided and its not working. Guess I wil have to keep trying to make it work . I'll let you know if there is any success.
I found another example of a osX Dock as good as your with a few extra gimmicks. I havent played around with it much yet. To be frank I am not much of a javascript expert.
http://www.productwatch.org/blog/dock/demo.html
sorry about the blank post in the Dock scripts section please detete them. for some reson I was not able to post the fix that I made
ok so I am posting it here
ok here's the Fix I got it working at last.
dockY && tY dockX && tXhttp://www.geocities.com/bluesaze/show/bindex.html
sorry about the previous posts please delte them I dont know why but I am unable to post the Fix that I came
up with. Something to do with the comment box. So I posted the fix at my blog here it is
http://www.bluesaze.com/wp/archives/74
Now everthing is working fine when I run your code using your layout it works just fine.
But as soon as i put in my layout. the script calculates the Zooming wrongly . Here’s what i mean.
http://www.geocities.com/bluesaze/show/bindex.html
oops. Yes, there was a bug with the <code> tag in the comments section, it was eating your comments, and it has been repaired (I hope). I'll remove your comments that were mangled
It's great to see it working on your page how you want it, and I'm glad that you found a fix!
I think I ought comment the code better and change a few things around to make it easier to re-use.
yeah some more explanatory comments Would be very useful. Though I figured out now how it works. But it would be useful for others.
I came here via google hoping to find a good JS Dock, seems like the demo link is down though :( Any alternatives out there?
heh, sorry about that. I updated the url.
it used to be unladed-swallow.com, now it's unladenswallow.com with no hyphen.
This article is closed to further commentary. But you can always contact me directly.