Pipes Output http://pipes.yahoo.com/pipes/pipe.info?_id=a5e67ec6024feb24f1f5a78ee33fe991 Thu, 20 Jun 2013 08:01:54 +0000 http://pipes.yahoo.com/pipes/ http://www.dynamicdrive.com/style/csslibrary/item/responsive_2_column_form/ This is a clean, two column form that's also responsive, turning into a single column spanning the entire width of the page when the window's size is 480px or less. The two column design and large controls are meant to make the form more inviting to fill out, by breaking up the text input fields into two columns, thus appearing less overwhelming to complete Thu, 13 Jun 2013 03:49:25 +0000 http://www.dynamicdrive.com/dynamicindex1/sidetogglemenu.htm Side Toggle Menu lets you add a side bar menu to your page that slides in from the left or right edge of the browser window. It supports two types of unveiling- either by nudging the rest of the page and making room for itself, or overlaying the page (and not displacing its neighbours). Sun, 02 Jun 2013 12:37:00 +0000 http://www.dynamicdrive.com/dynamicindex17/carddeckslideshow.htm This content slideshow script utilizes CSS3 transform to rotate and "unhinge" each slide to show the next, similar to a stacked pile of cards. At the heart of it all, however, is a versatile slideshow that supports both auto and manual mode, persistence of the last viewed slide, inline or ajax content, and more. Mon, 06 May 2013 18:00:00 +0000 http://www.dynamicdrive.com/style/csslibrary/item/swinging_keyframe_animation/ Using CSS3 keyframe animations, we can control the exact style of an element at any point in time. Here we use keyframes to create a swinging effect, by modifying an element's rotation gradually over time until resting position, or 0 degrees. Fri, 26 Apr 2013 08:58:50 +0000 http://www.dynamicdrive.com/style/csslibrary/item/flipboard_css_buttons/ Flipboard creates a series of CSS buttons that flip horizontally on themselves when the mouse rolls over them, creating an elegant, eye catching effect. It employs CSS3 transform and transitions to do the heavy work. Tue, 16 Apr 2013 05:57:00 +0000 http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm In mobile browsers, sub menus now disappear when user tabs anywhere outside the menu. Only .js file changed from v3.02. Sun, 24 Mar 2013 18:37:00 +0000 http://www.dynamicdrive.com/style/csslibrary/item/rollover_text_menu/ This CSS menu creates the popular rollover text effect of text sliding up to reveal a duplicate of itself when the mouse rolls over a menu item. Sun, 24 Mar 2013 17:55:00 +0000 http://www.dynamicdrive.com/style/csslibrary/item/split_drop_down_menu/ Using a combination of CSS2 selectors, pseudo classes, CSS3 transitions, plus a tough of JavaScript, we arrive at a CSS based split menu button, even sans images! Wed, 06 Mar 2013 04:59:00 +0000 http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm Updated to v2.0 with various improvements, from optional rollover arrow images, ability to show sub menus onclick (instead of on hover), lazy initialization of sub menus (more efficient if you have lots of sub menus), and last but not least, better mobile devices support. Mon, 25 Feb 2013 18:37:00 +0000 http://www.dynamicdrive.com/style/csslibrary/item/animated_ul_background_effect/ This CSS example demonstrates animating the min-width property of an element to create a stretching background effect. Here we use the technique to add a nice rollover effect to UL lists, so the user can easily home in on a particular list item just by rolling the mouse over it. The animation uses CSS3, which works in IE10+, FF, Chrome, and Safari. Fri, 22 Feb 2013 19:13:00 +0000 http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm Updated onChange event handler, plus added section on integrating Youtube videos inside the slides. Thu, 24 Jan 2013 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm Added onChange event handler, , plus added section on integrating Youtube videos inside the slides. Thu, 24 Jan 2013 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex1/ddscrollspymenu.htm For long pages with lots of content, keeping the user oriented and knowing where within the page he/she is at all times can be challenging. DD ScrollSpy Menu solves this problem, by letting you create a menu whose menu items are automatically highlighted based on the portion of the page the user is currently viewing. Sat, 29 Dec 2012 01:15:00 +0000 http://www.dynamicdrive.com/style/csslibrary/item/vertical_css3_shadow_menu/ This vertical CSS Menu uses CSS3's ability to define multiple/ inset shadows (so the shadow grows inwards) on an element to create menu items with a bevelled left edge and a growing inner glow when the mouse rolls over them. Mon, 17 Dec 2012 22:55:00 +0000 http://www.dynamicdrive.com/style/csslibrary/item/customizing_order_list_style_using_css/ Styling the automatically generated number counters in ordered lists () can be challenging. This CSS code demonstrates one way to do it by getting rid of the default ones first, then using CSS generated content to create custom counters instead. Mon, 03 Dec 2012 21:13:00 +0000 http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm Featured Image Zoomer has gone v2.0, and with it, brings multi-zoom capability! The new feature lets you easily preview and zoom in on a group of related images, such as those for a product. Cool! Fri, 30 Nov 2012 01:15:00 +0000 http://www.dynamicdrive.com/style/csslibrary/item/3d_depressible_button/ CSS can be used to really jazz up a plain looking link and create an awesome "call to action" button, as in the case of our 3D depressible button here. Sun, 04 Nov 2012 22:29:00 +0000 http://www.dynamicdrive.com/style/csslibrary/item/pure_css3_push_down_panel/ This is a CSS3 push down panel that when clicked on reveals some content, pushing the rest of the page's content down in the process. The entire interface is created using CSS only, using a combination of CSS3 shadows, round borders, and CSS2 generated content. Fri, 26 Oct 2012 20:47:00 +0000 http://www.dynamicdrive.com/dynamicindex5/scrolltotoplink.htm This is a no fuss script for automatically scrolling the page back to the very top when invoked. For long pages, having a scroll to top link makes good usability sense, and with this script, it's dead simple to add one to your pages. Thu, 18 Oct 2012 01:15:00 +0000 http://www.dynamicdrive.com/dynamicindex1/splitmenubuttons.htm Added option to hide top level menu automatically onMouseout, hide menu when user clicks on a menu item within it. Thu, 04 Oct 2012 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htm Version 2 release. Adds support for templating of entries' output, search and replace via regular expressions of any RSS field. Thu, 20 Sep 2012 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex1/splitmenubuttons.htm Added ability for a button to have no drop down menu, but retain the same style as ones that do. Tue, 21 Aug 2012 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex1/splitmenubuttons.htm Split Menu Buttons combine the sleek aesthetics of menu buttons with the versatility of drop down menus to create a navigational interface that captures the best of both worlds. Fri, 10 Aug 2012 01:15:00 +0000 http://www.dynamicdrive.com/dynamicindex17/ajaxsidepanel.htm Ajax Side Panel script fetches a page using Ajax or IFRAME and displays it in a slide out panel. Mon, 07 May 2012 01:15:00 +0000 http://www.dynamicdrive.com/dynamicindex11/scrollc.htm Adds mousewheel support, ability to disable "overscroll" behaviour of scrollbar. Mon, 19 Mar 2012 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm Added option ("scrolltoheader") to scroll to the expanded header in question after it expands (useful if a header contains long content). Thu, 16 Feb 2012 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex1/flexdropdown.htm Script now dynamically adds a class of "selected" to the anchor link while its drop down menu is expanded, for easy styling of the anchor link during its "open" state. Mon, 28 Nov 2011 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex17/jquerycustomscrollbar/index.htm jQuery custom scrollbar script lets you replace the default scrollbar of overflowing content with a custom image based one instead. Both horizontal and vertical scrollbars are supported. The script once initialized also exposes several public methods for dynamically scrolling to particular points within the content. Fri, 21 Oct 2011 01:15:00 +0000 http://www.dynamicdrive.com/dynamicindex11/scrollc.htm There are plenty of situations where the default scrollbar of the browser doesn't quite cut it in terms of style or footprint. Well, Slick Custom Scrollbar lets you replace the default browser scrollbar on long content with a custom one instead, styled using pure CSS. Mon, 03 Oct 2011 20:15:00 +0000 http://www.dynamicdrive.com/dynamicindex11/stickycontent.htm This simple script lets you stick any content on the page once the user scrolls past it so it remains in view even afterwards. It does this by cloning the element first before giving the newly minted element a CSS position of "fixed". Thu, 15 Sep 2011 20:15:00 +0000 http://www.dynamicdrive.com/dynamicindex16/autosaveform.htm This useful form script automatically saves the contents of a form periodically as the user types and recalls them in the event of an accidental page refresh or even browser closing. Similar to how GMail automatically saves the contents of your draft email, it's an excellent feature to add to forms that expect a lot of content and where losing them can cause a lot of headache for the user filling the form out. Mon, 08 Aug 2011 15:37:00 +0000 http://www.dynamicdrive.com/dynamicindex1/ddmegamenu.htm DD Mega Menu is a drop down menu system that supports arbitrary sub menu layouts, such as multiple columns of links, even arbitrary rich HTML. Furthermore, it supports nested mega menus, so one mega menu can contain links that in turn trigger another mega menu to drop down. Mon, 13 Jun 2011 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex17/dropinbox.htm Ensure that particular content on your page gets the attention it deserves, by dropping it into view, using this script. The content for each drop in box can either be defined inline on the page or inside an external file. And to ensure the whole affair doesn't become a nuisance, the script lets you control the frequency of the box's showing in a myriad of ways, such as once per browser session or once every x minutes, hours, or days. Tue, 10 May 2011 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex1/gooeymenu.htm jQuery Gooey Menu uses the popular "lava lamp" effect to create CSS menus with a moving gooey background effect. Whenever the mouse moves over a menu item, the desired style that indicates the selected menu item follows the mouse to that item, smoothly highlighting the currently active item. Fri, 08 Apr 2011 10:37:00 +0000 http://www.dynamicdrive.com/dynamicindex17/html5notepad.htm Sticky Note lets you displays floating content anywhere on the page that remains in view even when the page is scrolled. Each sticky note content can be defined either inline on the page, or inside an external text file and fetched via Ajax instead. Tue, 15 Mar 2011 01:37:00 +0000 http://www.dynamicdrive.com/dynamicindex17/stickynote.htm Sticky Note lets you displays floating content anywhere on the page that remains in view even when the page is scrolled. Each sticky note content can be defined either inline on the page, or inside an external text file and fetched via Ajax instead. Tue, 08 Feb 2011 18:37:00 +0000 http://www.dynamicdrive.com/dynamicindex11/googlemapselector.htm This jQuery script lets you easily embed a Google Map on your page that supports switching between multiple addresses. A two column layout is presented by default, with the list of desired addresses on the left column and a Google Map on the right. Tue, 18 Jan 2011 13:37:00 +0000