CSS Javascripts Tips and Tricks
- FitVids.js
- A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
-
![Thumbnail for Convert a Menu to a Dropdown](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_twJ9Wj7FgW2zF1GJjfgRQcRkhR_PPatth1gByjQv2J4KTGIHxIHXaKnHWBM7C_niib0JE672HfcmVwbCa6g9NIEvvOvWQq9ejyhpI_l381cIWm5mFMFMzBlebZdwrjOii_geENDwLl56VZTyIRQulnpjxbOSU7sqeI-Q=s0-d)
- Convert a Menu to a Dropdown
- We'll create a dynamic menu that converts to a dropdown when viewed on a small screen.
-
![Thumbnail for Better Linkable Tabs Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sbYZkgW8hoPdsPcKAcaU6tci2oTLroY1odLAE6pqSzWyzrlmPIEQOnciteUFmpb3b9bIc4THocH_YdNjn3weI8nRsD_Zst2effeMEuN3YibTyhX0iiiy0xljZS1OkC4T38RqHHWpVpIWRfzDXRG-U9eCeW1ywg=s0-d)
- Better Linkable Tabs
- Each tab will have it's own URL for linkability and we'll solve a few common problems that come up.
-
![Thumbnail for AnythingSlider Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v2cseXqq5aQXkKgCr18b7OOVERUwm60d8s5OB4FloRDRkru7eTVdSTZ_AK62o6OIMO1FkraVcVeCjqpK8-1KF7KL2FZ9ZQFIR2gacqW7jm7oLBydP94UUIGNQCB73noipN3h1izKcvb7iwljPZjRfYIfw=s0-d)
- Anything Slider
- jQuery-based slider with lots of features: hashtag linking to direct slides, "infinite" sliding, easing, dynamically built (any number of slides), multiple navigation systems, API, and more...
-
![Thumbnail for Slide to Unlock demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_utz9OOQ9mt83yK0Xe1zLURVEVgP6CYxb5RsPCWJI5a_h5TNmvNx4YL_uCw7qSgOiQ3mVIGKvLwQtWSbLYEtPo0WNg4j5uH_kc7opLSRXHmX77PC26Ix9h4TfM-TIOYkqv9SkJCP_QMMzh-CyA=s0-d)
- Slide To Unlock
- Like the iPhone's homescreen, the slider must be dragged from left to right to unlock. That part works with JavaScript (even on mobile with touchevents!) but the coolest part is the moving gradient highlighted text. WebKit only.
- Download Files View Demo
![Thumbnail for Organic Tabs demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sq-JD1tV__12vWhlmFEGvuORzyoZStINjgRAxA0vXSfh5Q8ZT6HKVmc1O0gOkKJrc4zcQFsbxkFX0DSsyrKl9QUDOyLhLXR1NSYkWN1puSb3vd07limKUPL9PpMsu58aYe8q39YE6_U1KaaIosWz4=s0-d)
- Organic Tabs
- Click the tabs to swap out content below, but the area fluidly adjusts in size to the new content, rather than jerk up or down.
-
![Thumbnail for Google Maps Slider demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tPw_VHeWNJnkMa1-dVPjZVorI0lC4KMExVt6LtsHGbCbE3XADs1PvJlqHYBJscNGY0kXVRMhNqiFAZYP0sPc14C0ImSepIwOgl64kOXS-IAKg65I_2-asDbdKOqP7EjE7tWXUFd2CvO2-kDTKusDQahc2gjEQ=s0-d)
- Google Maps Slider
- Roll over different locations and see the Google Map slide to center that location, as well as show a custom pin.
-
![Thumbnail for jQuery Sprite Accordion Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_szVG1auHweMMG77blR6LpiRWMYgTkIb08Dk7IeN78PSFlLONF4I7YKrIxblwDR0DKt_-aTcDG4WcSyogWfGyG6qmj_kytbaYb10p4KEhiq_h3g3Wg0xDBA2e1aUWnIntLwhBw2e4adnGtcSWq8L_A5B6vmIg=s0-d)
- jQuery Accordion Widget with CSS Sprites
- There are four buttons on this example, each of which has three states. That would normally be 12 images (thus 12 server requests), but thanks to the CSS sprites technique it is only one. The technique is demonstrated practically in the form of an accordion widget.
- Download Files View Demo
![Thumbnail for jQuery Sprite Accordion Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tqOOJLl-ULI3NiWwrUCnfNv45x9-ig7qv3Y5hinbC7_fp17t63J90ryeplm7aEK8dq0l4ZKmxZHwz_MQGbUXrh4wwtAnM-bTebqFngVfhCgZVED9EZnVltsX7KUJ5Zd-RltggJFXTJ-uKekWNwrBBrigqF-w=s0-d)
- Radio Buttons with 2-Way Exclusivity
- A group of radio buttons with horizontal exclusivity.
- Download Files View Demo
![Thumbnail for Anything Zoomer demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_unbFUKepr_0oaWEVFJRY7E4wlSFQekl3FXmAPbjZ81iHO40UnIj-25J-R52xNYQpPe3Rgks8ONm85HIEvChh-FMcJKG-00IeLWuIctAvFS-WEk7rBnm5XcbbFpcqIFMHtVYCmr-ZRqXOhQe0Ils43VoRc=s0-d)
- Anything Zoomer
- A small area, a hidden large area, and a pop-up zoomer to "reveal" the larger area as your mouse scrolls over it. [jQuery plugin]
-
![Thumbnail for Value Bubbles for Range Inputs demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u0TG_JnY77OL13ERIvx1JqMm_OahLsPEG2WCvNwCmyG1flKC59k6CQojiHNECwNmloL1BZnujTAvYj4DVdw9h-nnORa17MCKD9StUXuJdSrpW4ra_fLGbH3gIc4AdKb-93PB9wqNydpv_6jfO75A=s0-d)
- Value Bubbles for Range Inputs
- Range inputs (by default) don't offer any user feedback of what their current value is, or their value as you move around the handle. This JavaScript adds a small output bubble above the handle to show that information.
-
![Thumbnail for Middle Box Links demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tD843Pc7Si6eu_Uu3kgixNYDTkmrhxZh-9FwH6R_4il_mTeoJrCeLngswR9Wli6HtFQTkkiyFHn5WKvK-13ZK6L9inYsirwH6fKyln0REBnjXGcehLTx4fQa4qhpedXI1HvqLk1DeX1jt-lmpva5OweQ=s0-d)
- Middle Box Links
- Rolling over a widget darkens it and appends a link directly in the middle.
- Download Files View Demo
![Thumbnail for Filtering Blocks demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sh3YI8yllGYXgDsNOfjQ_Gdntw2QQjpzNpYQ5ijczTVHJhZmgVatMr8dso4_DdKDkckrCrYyn3yYYpYOH_M8fhE3xMrY3zdzaYOq8rkfLthBiU4oyZgge5GjA-Sn7Y2QRYS7Kto1vouHHoNtTd0N6p6asu=s0-d)
- Filtering Blocks
- Choose from a series of links to filter "results" below.
- Download Files View Demo
![Thumbnail for Unique Twitter Page](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uuNb87P0djlTvJ0RVoBY-58RjE0hAiQDhw4J7aCEz1UZUx2yAlHWgs0Q-SZAnpYIU7CRJIlJjt81JxLlfUdIYMH4P-KeavA5eUemgFgJaShvkVrGXmyByIxQ9chMsaP70DPGuI6LkdghTdC5Nkgb-c=s0-d)
- Unique Twitter Updates Page
- Twitter provides a simple little javascript snippet for placing your recent tweets on any webpage. This is a little static webpage that makes use of that snippet and puts a unique design around it.
- Download Files View Demo
![Thumbnail for Persistent Headers demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_svgkxeJnxiSa6BdIY6fbF0yZTCJG7QQI4LI7WpFU2_nJwkQwfGjkXzEtqoMjuhMK97uY4kkLZBrjeZDILBVDkvgRR_j6_v4VTWz84lowNfdZRB76i5UYmL6-wdOTB1Ehcoxd4Qm-sLLiTI7kC1v2gZuDj5bSk=s0-d)
- Persistent Headers
- This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you've scrolled past that relevant section.
- Download Files View Demo
![Thumbnail for Moving Boxes demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tY685703MRMsyAPeEDN9GhmpQLsX5_Kakx_zsNPD0JBgGAvvhqTyHxPHOMr2qyKZXnau_ZOT9_m7RkXRnFCHalFY4m8duD7h26DK50jxCEl6tbk6s_w13Tn2FUqntczRXYmjr2Sf3UqzuGxsQnwTk=s0-d)
- Moving Boxes
- jQuery powered slider-thingy. Boxes slide by left and right by clicking the tabs, clicking the next box itself, or using the keyboard. They also "zoom" in and out.
- Download Files View Demo
![Thumbnail for Grid Accordion Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uI0O2inhb4Z_23E1tLk0DVuhNmR6vXbIyeYD1ik9zosiy-jm-bJHudOOYxfL2dh_z07it2fiozUC5PnOmK8__inInjEkdcuCQ0zx5F5PMJRGRNtlCY03j2RVMydeKWGdEWBApg0iMeIehkhRGwFQR-IA=s0-d)
- Grid Accordion
- A grid of cells expand both vertically (like a regular accordion) as well as horizontally to display the content they contain.
-
![Thumbnail for Slot Machine Tabs Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_udJ1dnK1iFdFbGY2SBNi4z6hD1OI7GP9e7NZ45v991lEBDPUw5uaVBX52Er_rylvJEqPo7qf7SaW9ltylM3gZJZFciyEb4uohv9jGnUztGy86JNwR9z8iZhEkKk9CI3qhVmrvKDsud0XYSjmGpCVs=s0-d)
- Slot Machine Tabs
- Three columns in each content box rotate like a slot machine to reveal the content in the next content box when a new tab is clicked.
-
![Thumbnail for jquery magic line demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vBHeMrMRvR4K5zUbRhQr-5FDMPXvVroebIHiIInzvm8a3XYNg29oyphPpZ6S5XL3JSG2mRKTEZkW63Z2g1rCIA-YRKXN14El1X4n1ZGfUFyQte9p4aot2QOX_UdLdvTqlItlidywBqDg2_Lp4tfyWChuJR-Q=s0-d)
- MagicLine Navigation
- Slides a highlight (underline or background) to a new navigation item (and back) when they are hovered over. Optional color fading.
- Download Files View Demo
![Thumbnail for Simple jQuery Dropdowns demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uKzS2xkf8ttEMuIzkfXunsTHB-pmTu0XUr5ftfJL7zWCGlU0QDZBmTbl-ujhrLHTc_x9SSPgJQawQ95Snl5sBqwbS0dEtMvZClQMzRXs6JAvsY34oyrptDI7PKfR7zC8c_kGxy1NujVbpbzCwFKhfpracadTLd4dao5w=s0-d)
- Simple jQuery Dropdowns
- Very simple, minimally styled, jQuery powered dropdown menus. Cross browser friendly and maintains navigation "trail". Each "level" is clearly marked in the CSS.
- Download Files View Demo
![Thumbnail for Featured Content Slider Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tVrpIvZTOlQj3sEz7WgzPr5R_VG1xma1fCG90knlj7qcXzq-lImxILTG1VHADfjup9pqqPB-PkwVE76-qjKu7IRrcG-QHbxhJB89xADDyWRE71E_1hOInZ_oWe5Pz5O4LZe08buCXUDEQniPOKJVUTPW529Nmo41Cykw=s0-d)
- Auto-Playing Featured Content Slider
- This is an alteration based on the jQuery "Coda Slider" plugin. Each "slide" can be any kind of html content whatsoever, or be a full-size image with an overlay. Each slide also has a unique thumbnail which can be clicked to go to the corresponding slide, with an arrow above it to indicate the active panel. And... its auto-playing!
- Download Files View Demo
![Thumbnail for View Source Button Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t4PfMNt4XSAwndivSf2zgy9GgpIUoIP7KudWQ5ft2kkcWMLYOUYyLlLMmRExYvL14FSHqWm7XLGQ2MtA3mTX1ubYGQ4z08IofuT7IpEqVJCPhv7_aT21hSxFolvNCQkNYKp7ugzCCtOZKogsaWmQ=s0-d)
- View Source Button
- Using jQuery, Code Prettify, and CSS3 :target, we can make a button that pops up a nice looking view of the current pages source code.
-
![Circulate Demo Thumbnail](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vqsVJtjNwVZqpgvOzDkxBulw0OomdR8STtu9uOPB22ywG417Bl-_5U1KHTdf_NIrEoiKmZpWplwcp4fvJvEZ7OPPZEOuoFf0_HERWfBgxQPUkxHjBiVgS2-OBoMc7CH7mj0lLi0JOPebjXLdoo=s0-d)
- Circulate
- jQuery plugin to animate something in a circle.
- Download Files View Demo
![Thumbnail for Dynamic Order Form Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tlvB3MIjUNPpEjLwGOzHN3sbt1-svF_edqalxuGDJpkUDRKF0eel6goc9gkC942DkhHECn-LgcTLgy-wfb8ZqUzc9Pi7X_Py4zkbFwVW_Zqz3BeOkOZ4Q-7whSq-__UT0YVqjD26i8j390i0C5=s0-d)
- Custom Order Form
- jQuery is at it again handling all the calculations in this simple order form.
- Download Files View Demo
![Thumbnail for Start Stop Slider demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sjOFgLecEF8X4YkeSTOpUstujeaZ6_HIew4mgs7PruM4mFQQoyarulbcK2luKviD2oZwQWcJqa2ESDvNv8GAZReKbfWbq42hxRFthrdynb22aU3ekUMaYZPsatMzF90Vyz4GqjI8rtE815Fa4sz4i3h3zgUQ=s0-d)
- Start/Stop Slider
- This is a jQuery based slider which auto-detects the number of "slides". There are multiple animations per slide, which auto-plays, but has a start/stop button. Very easy to adapt.
- Download Files View Demo
![Thumbnail for Play Sound on hover demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vO6z9CoI5_7HeXIPirpcKRPSLoKqT19AqkjW_YifMlmRlpFBeaGMGEiCJLZUfyTZjmQ08tUeshvlizyuGrFVHrx7qJSIMLiS3srnXcPu7uuaaFUtApI0gMSyUWz371qAyT15ixI-Kpp9WdmB1pL0g9=s0-d)
- Play Sound on :hover
- Play a sound when the mouse hovers over an element. Shows different techniques using jQuery and HTML5 audio.
- Download Files View Demo
![Thumbnail for Social Page Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s7dgMOCfYVcRG1e7787NdyyRxamCfUMr2Oe3f_FHE4jYu52erQQSvd4yf6jpByu1e1aFwFBTRM6_VXljnx_DhqaYlZOUFGz4yAdPsi3KUwBd0foCgCIUZGDdahCPD_LXrBixmWcsVLPoxOJFJ_5Vk=s0-d)
- Your Own Social Home
- Many of the webs "social" sites offer up API's to get data out of them for use on your own sites. Sites like Flickr, Twitter, and ScrnShots offer up these API's in JSON format which makes it really easy for us to grab and display this information on any ol' static page. This example uses jQuery to grab and display the info. Should be fairly easy to alter to pull your own stuff.
- Download Files View Demo
![Thumbnail for Revealing Photo Slider Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uhOMIS7YD3uX3NXas9FZLfgmB7KPhPfY8ONKTi17kpWsEp2HP9iVGken7zH5x-BXMyN1qK7oyn3bPFsGr4p0d1AZCSLSzSNjV7VHzks2Ivzd0yXJbnIWBUKVUKyI_LMb-nGf46uzkpQLdxEfmcgbnVxUjZwpjvQ6QK=s0-d)
- Photo Revealer
- A line of cropped photo thumbnails on a string. Clicking the "More Info" button expands the photograph to full size and reveals additional information about the photo. Photos are loaded on page load so there is no waiting after the click. Uses jQuery.
- Download Files View Demo
![Thumbnail Animated Knockout Letters Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vnjUV6JCEt21AxwBHvJxRng5NOe7JMnPaa1sAS_7CD4V6_LXykfYRzemvtpRf9iGN6mPg3pEGifPpz8UjhIVvr_7D3S2ADuyfkvHaagmtK-jFFHdfET5vla1qSo2JoU0WfC5wCGufwlsdyB2hvq_mZCT9ib9btWEQOFxs=s0-d)
- Animated Knockout Letters
- Knockout letters animate themselves into place. Uses jQuery.
- Download Files View Demo
![Seminar Registration Tutorial Demo Thumbnail](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s82M6ly7vwAIWMIgZFZZZkxZqavw3RNgazV-WNPAX0x9XH7n8qXSRy_Slr8-6nklYXRF2vW3wQgxU5V9GV-Xo-sBgT31bMeJEXUzFMzu2ine27IKWdX82WDDVca6mJ0T51MGbi-T2T_e4QRrACXQsMsVTDrJ_gvIw=s0-d)
- Step-by-Step Seminar Registration
- As different "steps" of the registration process are completed, the current step gets check off as done and the next step lights up. Includes some very basic form validation.
- Download Files View Demo
![Thumbnail for Indeterminate Checkboxes Demo](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vAZ8OCAqFlpDy7N1lhzH-2ySxgvIHmeZAuJoKhlXt_hDkfPU6FtbzcXuDOSOf991nS3W_PufYNMzLW3CKChG_89FBvy1ZZNmWfgg0WeCVTO0HA9bIsFUyAqOiLK_4LviR_43pxcKb1VrAJYbzbPzIzJkIsHTZJp7zWfs8=s0-d)
- Indeterminate Checkboxes
- Checkboxes actually have three visual states: checked, unchecked, and indeterminate (even back to IE 6). The indeterminate state can only be set by JavaScript. This demo is of a set of nested checkboxes, a common use case for this third visual state.
-
No comments:
Post a Comment