background preloader

PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane

PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane
Advertisement a jQuery plugin which slides a webpage over to reveal an additional interaction pane by Scott Robbin Download PageSlide Now If you've ever used the mobile version of Facebook, or Path,then you've probably seen something akin to PageSlide in action. Clicking on a button or link slides the page over to reveal a hidden pane,one that usually contains secondary navigation, a form, or additional information. There are several ways to use PageSlide, some of which are shown below.Additionally, there is a responsive demo which shows how PageSlide can be used as a mobile solution. Slide to the right, and load content from a secondary page Slide to the left, and display hidden content from this page in a modal pane Modal This slide uses "modal" option set to "true". Where can I get it? If you are interested in learning more about PageSlide, it's recommended that you view the project on GitHub. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built.


How to make a ghost button in CSS3 With Halloween just a few days away, this seems like the perfect time to explain how to create an incredibly simple ghost button, in pure CSS. These buttons are referred to as ghost buttons because they have just an outline and let whatever is behind them show through. They’re incredibly popular with startups, because they have a minimal simplicity that fits that style of site. They’re also super easy to make, and can add real impact with just a few lines of CSS. To build one, the first thing you need is a simple link in HTML.

slabText – a jQuery plugin for creating big, bold & responsive headlines I’ve been wanting to attempt a port of Erik Loyer’s slabtype algorithm for quite some time now and seeing Paravel’s fittext jQuery plugin, in combination with a gloriously hassle-free lunch hour gave me the impetus to attempt it. This is the result – resize the browser viewport to see the effect in action. So what does the script do again? Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text. Many, many more examples can be viewed further down the page.

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.

Sliding Boxes and Captions with JQuery One Mighty Roar Jarek Kubicki ArtistMore Work Kamil Smala ArtistMore Work Martin Stranka jQuery Quicksand plugin Quicksand Reorder and filter items with a nice shuffling animation. Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again.

floatlabels.js by Clubdesign Wait. Floated Labels? The Float Label Pattern found his success after Brad Frost wrote a blog post about Float Label Patterns. mb.extruder You can have a direct link, a link with a panel, just a panel or a disabled voice. It can be set on top or on left of your page; and if you have mor than one extruder (only on left) they are automatically positioned one behind the other. The TOP extruder positionFixed param is set to false, so it scrolls with the page; the LEFT extruders positionFixed param is set to true (the default value), so they kip their position even when page scrolls. You can disable or anable dinamically each voice of your extruder using the $.fn.disableExtruderVoice() or $.fn.enableExtruderVoice() methods. You can open or close any extrude panel invoking: $.fn.closeMbExtruder() or $.fn.openMbExtruder() methods. Try now:

10 Best Responsive Content Sliders for Develoepers Use of Responsive content sliders is getting more and more popular amongst developers as they enable website designers to display content in a more organized and interesting manner while still maintaining their creative design over the orthodox slider design. Most image and content sliders are customizable and provide features and options that enhance the look and feel of a website. In this article I have gathered 10 best responsive content sliders which will help you to organize your website data and let you achieve stunning creative looks for your websites. 1.

Contextual Slideout Tips With jQuery & CSS3 Martin Angelov By now, you’ve probably heard about Adobe’s new CS5 software pack. Also, you’ve probably seen their product pages, where they present the new features of the suite. 20 Top jQuery tips & tricks for jQuery programmers. jQuery Tips Tricks Following are few very useful jQuery Tips and Tricks for all jQuery developers. I am sharing these as I think they will be very useful to you. Disclaimer: I have not written all of the below code but have collected from various sources from Internet. 1. Optimize performance of complex selectors Query a subset of the DOM when using complex selectors drastically improves performance:

Vertical Sliding Info Panel With jQuery This is an example of simple page that's centered and has a vertical sliding panel on the far right (try it! click on the 'infos' tab that's on the right!). We used jQuery to create this sliding panel (and CSS3 rounded corners because it looks cool) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Desingineer in the Making : ngAnimate Your AngularJS Apps with CSS3 and jQuery Fallbacks ngAnimate Your AngularJS Apps with CSS3 and jQuery Fallbacks Update (2013.05.24): This article is now basing on AngularJS 1.1.5. AngularJS is a high-level, relatively new JavaScript MVW Framework that’s being powered by some fairly advanced computer science ideas typically unseen in the frontend development landscape - which leads to a logical conclusion that documentations and examples regarding certain parts of AngularJS can be pretty scarce at this moment. Take animations in AngularJS as a perfect example. As you may have already know, AngularJS ditched the familiar practice of manipulating DOM through jQuery in order to boost code testability, so up until now, animations in Angular were accomplished primarily through some fairly complicated ngClass manipulations, which could fall short when you want to create really complex effects or simply would like to have a more fine-grained control over the behaviors. To begin with, you will need to use the unstable branch of AngularJS.

Expanding Fullscreen Grid Portfolio Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image. View demo Download source Each item has a little slideshow of thumbs which will be animated to the right position once the portfolio item gets “expanded”. If you know Flipboard for the iPad, then you might recognize this effect we got inspired with.

Related:  jQueryjQueryjquerySlide Paneljquery