Ajax can bring a much more responsive and intuitive feel to web applications. However, many times developers overlook error cases when using Ajax. What if the request fails? In one particular case a user’s session may have timed out before they made an Ajax call. This post describes one such way of handling this in a somewhat friendly way.
(more…)
This has been done before with PHP (AJAX upload progress meter for PHP) etc but I needed something a little different because I wanted to upload a file and then have it loaded into a database. I looked around and found that someone had already made something that used the commons file upload package to do the upload part (AJAX Upload progress monitor for Commons-FileUpload Example). It wasn’t exactly what I was looking for but it a good start.
To understand the way this works I think it is easiest to break it down into parts:
I had someone ask me about fitting more images in a small area and the way flickr does their image scrolling came to mind. I wanted to see how hard it was to do and as it turns out it isn’t hard to do at all thanks to script.aculo.us.
I’m making this as simple as I can to illustrate just how nice the new tools like script.aculo.us are.
Step 1. You need a box and some images. You will also need to know the size of the images or at least the size of the largest one. In an attempt to keep this simple I’m going to assume all the images are the same size.
<div id="imageBox">
<div id="imageBoxInside">
<img src="http://blogs.missiondata.com/wp-admin/images/turtle_sm_1.jpg" />
<img src="http://blogs.missiondata.com/wp-admin/images/elephants_sm_1.jpg" />
<img src="http://blogs.missiondata.com/wp-admin/images/turtle_sm_2.jpg" />
<img src="http://blogs.missiondata.com/wp-admin/images/elephants_sm_2.jpg" />
<img src="http://blogs.missiondata.com/wp-admin/images/turtle_sm_3.jpg" />
<img src="http://blogs.missiondata.com/wp-admin/images/elephants_sm_3.jpg" />
<img src="http://blogs.missiondata.com/wp-admin/images/turtle_sm_4.jpg" />
<img src="http://blogs.missiondata.com/wp-admin/images/elephants_sm_4.jpg" />
<br/>
</div>
</div>
Notice from this code that we have an outer box and an inner box. We will next want to make the outer box smaller than the inner box so that only a few of the images can be seen at one time.
Step 2. To hide the extra images we give the outer box a set width, in this case I want to show only 2 images at a time and each image is 180px wide so I make the outer box 360px wide. Notice that the overflow is hidden. The hidden overflow is what keeps the images that are in the inner box but not within the outer box’s width hidden.
I’m using floats to lay the images out one next to the other. Because of this we need to give the inside box a large width so that it will not wrap the floated images.
<style type="text/css">
#imageBox { margin: auto; width: 360px; border: 1px #000 solid; overflow: hidden; }
#imageBoxInside { width: 10000px; } #imageBox img { float: left; padding: 0px; margin: 0px; }
#imageBox br { clear: both; }
</style>
Step 3. Now for the magic. You need the latest version of script.aculo.us because I use the Effects.Move function and they have changed Effects.MoveBy to Effects.Move only recently.
We now create two functions to move the images ether one step to the right or one step to the left. Each step is the size of a single image so the when one is hit it moves one image out of thew view and another image into view. As you can see from the following code this is extremely easy using the script.aculo.us library.
<script>
function moveToPrevious()
{
new Effect.Move('imageBoxInside', { x: 180, y: 0, transition: Effect.Transitions.sinoidal });
}
function moveToNext()
{
new Effect.Move('imageBoxInside', { x: -180, y: 0, transition: Effect.Transitions.sinoidal });
}
</script>
Step 4. The only thing that remains is to connect everything together. We add a couple links to move call the next and previous functions defined above.
< a href="javascript:void(0);" href="javascript:void(0);" onclick="moveToPrevious(); return true;"><img src="http://blogs.missiondata.com/wp-admin/images/previous.png" />
< a href="javascript:void(0);" href="javascript:void(0);" onclick="moveToNext(); return true;"><img src="http://blogs.missiondata.com/wp-admin/images/next.png" />
And that is all there is to it. See it in action!
Have you ever wondered what you can do if someone doesn’t have javascript turned on and it is needed on the page they are sitting at? Well here is the answer:
<html>
<head>
<noscript><meta http-equiv="refresh" content="0; RL=nojscript.html"/></noscript>
</head>
<body>
A javascript test.
</body>
</html>If the user doesn’t have javascript turned on they will be redirected to the page nojscript.html. It doesn’t work as well as having a page in between that does the detection but if you have to do it on the page you need the javascript on this is the way to go.