Nowadays, it might be accurate to say that screen real estate is worth more than actual real estate.
As web developers, we spend precious time laying out our pages, using every UI concept in the book to conserve space, while trying to maintain a user's focus on the task at hand. There are many techniques to use — Lightbox, Carousel and Tabs to name a few — and today I hope to offer up another: jQuery pageSlide.
jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or "throwing") content aside to reveal a secondary content pane.
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.
<script type="text/javascript"> $(document).ready(function() { $('a.pageslide').pageSlide({ width: "300px" }); }); </script>
Similar to Lightbox, pageSlide has two major advantages:
- The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand.
- Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.
Can I See It In Action?
Of course, you can! Click for a pageSlide demo.
Where Do I Get It?
I've setup a GitHub project for jquery-pageslide. Note: It's just a rough outline of how the plugin should function and in not production-ready yet. I've intentionally left it as a simple skeleton so that others may participate in the design and implementation process. Comments and suggestions, either here or on the project page, are welcome and appreciated.
Great plugin, Im thinking to use it in a future web site. Thanks.
Poppycock indeed!
On the other side of the big pond here but very impressed nonetheless. I’ve seen a lot of plugins that slide over boxes of content, but never the whole page. I like this idea!
Really neat. Thank you.
I will definitely keep an eye on the project. It looks really useful and I’m probably going to use it in the future.
It’s nice to have another UI convention for supplemental information available for use where appropriate. As for returning to the main content, it could be more intuitive if a thin expand/contract button was at the division between the page and the sidebar as an alternate means to close it. Something like the one seen in this screengrab:
http://cannonballinteractive.com/temp/expand_ui.gif
The plugin could potentially allow developers to specify whether the sidebar goes off screen completely when closed (as it does now) or leaves that thin strip visible.
How do you revert from the page slide? When you try the demo out it you can’t go back without refreshing. Is it as easy as setting a link with certain class? Very cool though - the way the page slides off to the side is pretty slick. Have users been reacting to it well? Neat stuff thanks for releasing!
Very neat effect!
I just found this on hackernews, after spending last night writing a script that does almost the exact same thing.
My next chore was to figure out how to have the slid-wrap as scrollable content.
Any ideas on that one?
Of course, it needs to be fixed initially so that when the user slides, you aren’t half way down the slide page, but what I’m thinking of doing is to swap the fixed position to the main body, and then allow the slide to be scrolled.
cool!
Nothing happening on the demo page…
(FF3/Ubuntu)
Nice!!
It can be very useful!
Fran.
Im shocked at how well this works, it feels right - the slide draws your attention to the desired area and you click back on the content to carry on.
The reason why im shocked is that it’s just a glorified show/hide side panel - but the key thing is the slide animation of the main content that’s what takes your attention.
Lovely work!
I will definitely put this to use, as such adding short brief notes i have in my app.
Thank you so much.
Awesome jQuery plugin.
There is a tiny bug it it though. If the browsers height is less than that of the content in the slide out there is no way to scroll that content (only the main content). I am not sure an easy fix. This seems to be a problem with a lot of the page level animation plugins.
Tested in FF 3.0.5 on Ubuntu 8.04 on this page with a browser hight of about 150px.
Wow this is cool!
This is a really innovative effect. I wonder, instead wrapping the body content with a DIV and then setting it to position:relative and then giving it a negative left position. Could you instead set a negative left margin? I was playing around with it in Firebug and it seemed to work well. If you could use negative margin-left instead, it would make it much easier to implement since it could be dropped in without needing extra container markup. You may have already tried this, however.
Scott,
Looks very interesting, thanks for the plugin!
Btw, its working perfectly locally, but the demo page points to the “secondary_page”.
-gc
nice work Scott
This is excellent! Definitely a pleasant way to display help content, for example.
One thing you may want to consider is delaying the panel from sliding in until the ajax content is loaded and, in the meantime, add the option to append a spinner to the link (or some other loading indication).
Other than that additional functionality, I think you’ve got yourself a winner!
The demo doesn’t seem to work for me in Win32 Firefox 3.0.5.
Pageslide demo is not working for me in Firefox 3.
Never mind. The page has to completely load or you get the contents of the hidden column in a separate page. The woes of dialup.
Personally, I’d call it “shenanigans”.
Very interesting concept. Stoked to see how folks integrate this into their sites.
That’s smooth!
Ha, nice impactful effect. When posting a jQuery plug in, it’s helpful to outline the options and what they do.
Additional options that might be helpful:
Toss in a jQuery selector for a “close” button within the panel that slides in.
Disable clicking on body to close the slider
The direction the slider comes from
I’ll try and poke around with it, but I always feel bad editing someone else’s code
Love it! Clean & Simple.
Hey, this is great stuff. I see a lot of potential for it, especially for opening image photo and art galleries on my site.
Questions……
How do you make the page slide down from the top or the bottom or left side of the browser window? I checked out the code download you provided but do not see any instructions or variables on changing these things. I am not a coder, but know just enough about copying and pasting code and making tweaks to get things right. Are there tweaks to making this happen?
Thanks
Preston
Nothing appearing for me - Mac OS X Leopard, FF 3.0.5, All scripts enabled.
I see a major flaw with this… if you click before the page loads then you have a real problem. I guess this is the same for all jQuery cos of the documentLoad… but it’s something we need to think about with page load times + amount of content + graphics!
Lpm?
Cool, but isn’t there a way to slide it back?
I like the effect. Do you plan on adding history/back button support to slide back?
It looks like the demo is not working. I found no javascript in the page.
Didn’t do anything.
I like the effect, but how is this better than just sliding out the side panel above the existing content? That is, not pushing content to the left beyond the view of the user, but rather just covering content on the right with a sliding/fading block?
Nice work…
Well..Few ideas we can slide the secondary content up,down,left,right…
Nice idea Scott, I could definitely see us using it.
Nice thing. But it looks buggy in iPhone Safari browser. (When clicked sliding panel appears on top of the page) If it could be fixed for that platform it might be a must have feature.
Very impressive work Scott! I will add to my UI belt.
Just one thing, when trying first time I failed at finding the way to return to the main content area. After a few seconds I clicked on it and I got back to it.
Maybe some sort of visual clue for users to go back could help.
Cheers,
Hi Admin,
This is really amazing for displaying ads or some important content. I will surely use this on my new website.
doesn’t work ff3 pc
Not so complex
But usefull.
That’s what I am searching. Tahkns.
The demo you have linked to seems to be simply the secondary “pane” and not the demo itself?
Nice idea, I’ve been wanting to do this with complete pages (ie., and AJAX call for the previous and next page in a URL schema) and I’m intrigued to know if this might be adapted for that purpose.
Oh no, my bad, I’d got JS disabled after testing a page, sorry!
Nice plugin
No workie in ie(6)
works great in firefox.
Nice plugin. Interesting to setup options for page display (in my case).
I was wondering how could I close the slide manually?
Do I have to call _closeSlide?
By the way I tried to set this on my app but the content of the “page slide” went at the bottom of the page. I have to set some CSS?
I think I had some conflict with other plugin. The firebug-http-observer.js displayed the GET of JS script (in FIrebug console) and I had 2 errors in my code.
If I remove the script call : $(’a.pageslide’).pageSlide({ …}); everything is fine.
My app is a rich backend. I use :
jquery.form-minified
jquery-jtemplates
ui.datepicker-minified
jquery.cluetip
jquery.livequery.min
jquery.contextmenu.r2.packed
jquery.tablednd_0_5
jquery.pagination.js
jquery.pageslide-0.2
jQuery thickbox
I would really like to have configuarble options for slide in any random direction.
nice plugin
very useful
score. I like it and will use it in a photographer’s gallery type thing.
That was awesome! Great work, I could use that!
Great!
Hello,
The transition is really jumpy and it pushes the main content off of the left of the window.
Thank you,
Todd W.
very nice, tnks for your tip
Awesome design. Great work!
This is awesome I have a feeling we are going to see it every where in a little while. Neat post.
Great job it’s pretty sleek. Have to say that I had to click a couple of times around to return to the main area, not really sure what to suggest but overall its a great idea, Thanks for sharing!
It looks nice only i think that you should make it get over the main content. It’s kind of weird that it moves everything to fit that other box in there.
Very nice work!
Thanks for this nice plugin.
Could you please update the demo page, as it don’t have the example.
That’s pretty neat. I can think of so many potential uses for it. I’ll have to keep this in mind while designing now
Hey its very nice Piece of code!!!
I am really very impressed congrats!!!
Except that this page is horribly broken in IE6
Something you would have already gotten from others. Where is the link to send it back..
I find that really nice ! for instance to display the definition of a word in a text.
The demo shoves the content of this page to the left with no way to get it back (FF3/Mac).
Hi, the effect don’t work in IE6. Do you will fix it?
Nice! I think it’s good for site’s context-help. There isn’t visible horizontal page slider, which is also a plus. Thanks.
Thanks for this, I really like this effect and have a upcoming project that it will be perfect for.
I’m loving it, but is there anyway to use a hidden in page div rather than using ajax?
Thanks again!
Wow… gonna use this in my new coming project!!! Thanks for sharing this… thanks.
Hey Scott,
This is exactly what I’ve been looking for. However, is there a way to put a link inside the slide which closes it? I’ve found users are getting confused by having to click in the body of the original page to return.
Thanks,
JK
Love Your pageSlide idea. One question… any idea why it seems to call (document).ready twice?
Does the wrapAll do this? Any idea how to get around that?
cute! and sexy! …for portfolio site
and how to make the slide is out from top or bottom page?
Hi,
PageSlide seems to be very interesting. The effect is nice, ergonomy is okay. But it seems to have some troubles in IE6.
I’ll keep an eye on the project, thx.
Nicolas
Love the concept, I have been looking for something similar for a while. This plugin is incouranging me to learn a language that was not all so foriegn, but onw I knew took time to learn. With this plugin- as well as other, I will dive into jQuery.
Enjoy
Demo is not working :(O
that’ s so interesting
Forms does’nt work with page-slide, i guess thats because this line:
$(”#pageslide-slide-wrap”).click(function(){ return false; });
can you help me?
nice work! ty
nice tutorial. thanks.
any way to get this working with IE 6 ??
Very nice jquery demo. I see the code to trigger the pageslide. How do I trigger it to close? I realize a click on the main content will close it again, but that’s not an obvious “close” behavior. Very nice work though.
Great entry! I will definitely be using this in a project!
Great concept! It would be nice to have a “close” or “slide back” button in the example.
One issue I do see, is the fact that the original content is hidden behind the left border when the new content is out. Do you think it would be better rather than to slide the initial content left, to slide the right border of the initial content left, allowing content to re-appropriate space for itself? Leverage the benefits of HTML documents as well.
Nice work!
This effect seems not well working in IE6.
The block injected by ajax appears in the bottom of the page.
Too bad, the effect is nice.
Nicolas
Hi All,
Oy, I have to apologize: I just realized that Wordpress was moderating all comments to this blog (it’s a new install), so none of these had been approved until today. I’m sorry, it wasn’t my intention to moderate the comments with this heavy of a hand.
I’m in the process of moving this site to a faster server, then will return to answer your questions. Thanks so much for the great feedback and words of advice.
-Scott
The problem I am having is that other ajaxed content is being pulled into the slider area when any link is clicked. Any way to tell it to just pull in content from just a certain href?
in regards to comment #79
I changed return false to true and everything now works perfect. In a quick test I couldn’t find an usability issue (text can still be highlighted etc.), please comment if you think otherwise.
# 49 - old:
$(”#pageslide-slide-wrap”).click(function(){ return false; });
# 49 - new:
$(”#pageslide-slide-wrap”).click(function(){ return true; });
If you want some kind of “close” link change:
# 75 - old:
$(”#pageslide-content”).html(data)
.queue( function() {
settings.loaded();
$(this).dequeue();
});
oops pressed enter… now again
If you want some kind of “close” link change:
# 75 - old:
$(”#pageslide-content”).html(data)
.queue( function() {
settings.loaded();
$(this).dequeue();
});
to #75 - new:
$(”#pageslide-content”).html(data)
.queue( function() {
settings.loaded();
$(this).dequeue();
}).prepend(”schließen“);
—-
If you changed the code to that from my previous comment that’s all you need.
not my day -.-
“schließen” means “close” in German - change this string to your needs…
This is so awesome! I would love to start using it straight away. Unfortunately it is not compatible with IE6
Will have to wait ;(
Great plugin though, will be waiting for updates.
How can i fix script work on IE6?
Hi, is there any updates for IE6 Compatibility Issue?
Hi, in secondary page there is a form but isn’t working the PostBack event. Is there a way to fiz this?
Great plugin, but without IE6 support, we can’t use it.
I love the plugin, Thank you so much.
I want to create sliders which trigger by clicking on a specific text of lists within a accordion.
For example, like in the iphone how contact app slides horizontally and click top left button to go back to the previous menu, except within an accordion menu.
Could you please, please help me?
I agree with Chocksy, comment #58. Pane should slide over, not push.
Nice though.
I implemented something similar recently on one of my client’s websites.
Just so you know.. we don’t say poppycock in the UK.
Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
It does not work on IE6
Damned
thanx..its great bur i’hve some trouble…
i want to use it to show full page…so,i want that when thw link is clicked,page slides and show widt %100 of other page…
i change in js codes up,changed width but it wasnt how i wanted..
and the second is whem its clicked second page’s bg img isnt shown…only bg color code is working…
how can i fix these?
My portfolio using pageSlide
http://www.axblue.com
very useful plug in… thanks!
Awesome Plugin , I will use it next time for my app.
Great thing for me to use on the About me link. Thnx!=)