How To Code Snippets & Web Design Help
Welcome To Picnic Website Code Tutorials. This website's sole purpose is to display code in a fun, attractive, and organized fashion. I am a fellow Web Designer like yourself. My long term goal is to educate myself, and document within this website, every possible and conceivable question, and its answer, I or others may ask of me, either now or in the future, so I never have to Google for another answer ever again. Admittedly, a lofty goal, however succeed or not, this page represents my attempt.
Whether you’re a novice or an experienced Web Designer, you will likely find this website to be an invaluable resource. Within its confines you will find many of the more commonly sought after code snippets, tutorials, and their demos you'll routinely need to either get started, or to simply build on what you've already achieved. I went to great effort to make these code examples as easy as possible to understand, and even easier to implement and use in your own projects. No lectures, no run-on stories, just code, displayed in a clear and concise manner. I don't bore you with my life story before giving up the goods. In short, there's no hand holding, I skip straight to the point. Additionally, all the demos are done with as little style as possible so there is no other code to get in the way of your understanding. I alone, work very hard on this website and all it contents. Therefore, positive feedback is always much appreciated. If you found a particular tutorial or demo to be helpful, please share the love on facebook, twitter, or other. Thank you - have a great day.
Newest Entries
- Start Your PHP Developer Business
- Code A Website That Satisfies Clients
- jQuery Version VS Plugin Fix
- Tor Browser U.S. IP Address
- Adobe Flash Failed To Initialize Fix
- Inline Block Remove White Space
- Hide div with query string & JS
- CSS3 Wiggle On Hover
- Cool CSS3 Hover Effect
- CSS3 Box Shadow Effects
- phpBB SEO Title
- How To Breadcrumb Navigation
- phpBB Remove Index From Title
- Output Ampersand as Ampersand
- Sticky JS
- Simple URL Canonicalization
PHP
- How To Breadcrumb Navigation
- PHP Display Current Date & Time
- One Webpage PHP Contact Form
- Simple PHP Captcha
- Simple PHP HoneyPot
- Form To Email - The Ultimate Guide
- PHP In HTML In Wamp
- IE PHP Browser Sniffer
- Automatic Copyright Date Update
- PHP Includes
- Contact Form Validation & Security
Photo Galleries
- CSS3 Polaroid Photo Gallery
- Pure CSS Lightbox
- The Fancybox Photo Gallery
- The Photo Gallery
- THE JAMIE RUTH
- CSS Scroller
- Body Scroller
- Simple CSS Popup Image
CSS Nav Menus
- jQuery Slick Animated Menu
- CSS3 Mega Drop Down Menu
- Compilation
- Sprites Navigation Menu
- CSS Mega Drop Down Menu
- Flyout Menu
- Tabed Menu
- Slide-In Menu
- Drop Line Menu
- Drop Down Menu
jQuery Plugins
- Sticky JS
- jQuery CSS With Delay
- jQuery Random Image
- jQuery open Links In New Window
- jQuery Show Description OnClick
- jQuery Rhythmic Heart Beat
- Repeating jQuery Animation
- jQuery Add & Remove Class
- jQuery Back To Top Of Page
- jQuery Animate/fadeIn
- jQuery Wiggle Plugin
- jQuery Horizontal Website
- jQuery Fancybox
- jQuery Validation
- jQuery Ajax Submit
- jQuery Animated Hover
- jQuery In Field Label
- jQuery Photo Gallery
- jQuery Custom Select
- jQuery Fading Tabs
CSS
- Inline Block Remove White Space
- CSS3 Wiggle On Hover
- Cool CSS3 Hover Effect
- CSS3 Box Shadow Effects
- CSS3 Full Size Background Image
- CSS3 Slide Out Image
- CSS Shapes
- CSS3 Faux Columns
- CSS Small Caps
- HEX To RGBA Color Chart
- How To Double Border/Border Radius
- CSS3 Sticky Footer
- CSS3 Transparent Border
- CSS3 Equal Height Columns
- Simple CSS3 Accordian
- CSS3 Image Replacement
- CSS3 Blinking Image w/ @keyframes
- CSS3 Polaroid Frame
- CSS3 Cheat Sheet
- CSS Blockquotes How To
- Vertically Center Unknown Height
- .clearfix 2012 and Beyond
- CSS3 Animated Tooltip
- Vertically Liquid Round Corner Box
- Modern CSS Opacity
- Vertical Text
- CSS Popup Menu
- Cross Browser CSS Ellipsis
- CSS Content Swap
- Irregular Shaped Anchor
- CSS Sticky Footer
- Centered Navigation Menu
- Image Replacement (Updated)
- Four Sided Plug-n-Play Shadow
- Image Map With CSS Tooltips
- Shadowed Borders
- CSS Opacity Made Simple
- Break Long Strings of Text
- CSS Tooltip Extravaganza
- Linked Image Swap
- CSS Equal Height Columns
- Containing Floats
- Drop Shadow
- Rounded Corners With Pure CSS
- Rounded Corners With CSS & Images
- CSS Button
- Nested Lists
- Highlight Current Page Plus
- Displaying Code Examples
- Vertical & Horizontal Centered Div
- CSS Custom Cursor
- 100% Height, Sticky Footer, & Centered
- Initial CSS Settings
HTML
- Output Ampersand as Ampersand
- Initial html Settings
- Under Constrution Page
- Code Converter (< > to < >)
Photoshop Screencasts
- Create Sprite Navigation Image
- Create A Tapered Shadow
- Change Color Of An Image
- Remove Red Eye
- Create Rounded Corner Images
- How To Slice-Up Images
- Create A Perfect Circle
- Give Image Rounded Corners
- Add Borders To An Image
- Create A Gradient Image
- Add A Drop Shadow To An Image
- Create A Shadow
- Create A Shadowed Border
SEO
- How To Generate Free Traffic
- Buy 20 PageRank 8 & 9 Backlinks
- Free Dofollow Backlinks
- Google's 2013 Socialism Update
- 50 Ways To Build Backlinks
- Googles New PageRanking Algorithm
Guest Posts
- Tech Changed The Gaming Market
- Code A Website That Satisfies Clients
- Start Your PHP Developer Business
- Software Solutions With Robust Functionality That Require No Programming Skills
- Why Study Online?
- Diploma Courses Available In Australia For International Students
- Four Types of Services Provided by the Compliant Learning Resources
- The Web Developer’s Guide to building profitable apps
- Guide to Outsourcing Web Development in 2022
Javascript
- Hide div with query string & JS
- Hide Email From Spambots
- Style Sheet Switcher
- 40+ Ways To Hide Email Address
- Gracefully Obfuscate Email Address
- Add HTML With JS/No doc.write
- Add CSS With Javascript
- Vanishing loading.gif
- Multilingual Website
- Smooth Scroll To Named Anchor
- Format Phone Number
- Clear Input On Click
- Automatic Copyright Date Update
- Float Pusher
- Accessible Pop-up Window
- Highlight Current Page With JS
- Swap Panels With JS & CSS
- Rounded Corners With JS 2
- Rounded Corners With JS 1
- Equal Height Columns
- Maximum Textarea Characters
- Simple Form Validation
- Open off-site links in new window
IE Specific
- Safe IE CSS Hacks
- Target IE Only (Updated)
- min/max height & width in IE6
- How To Feed Rules Only To IE
- IE6 :hover on non <a> via javascript
- IE6 :hover on non <a> via expression
- Position Fixed In IE6
Flash & Music
- Play Sound onMouseOver
- Embedding Music On Your Website
- Embed Valid Flash With Object Tag
Helpful Tips
- jQuery Version VS Plugin Fix
- How Pseudo Class Selectors Target
- Button With No URL
- Remove Gap Under Image
- Prevent IE6 From Expanding
- Float Fact
- Position Absolute Trick
- The IE6 a:hover Bug
Website Templates
- Style: Easy
- Style: Sharp
- Style: Practical
- Style: Clean
- Style: Centered
- Style: Contemporary
- Style: Fixed|Fluid|Fixed 5
- Style: Fixed|Fluid|Fixed 4
- Style: Fixed|Fluid|Fixed 3
- Style: Fixed|Fluid|Fixed 2
- Style: Fixed|Fluid|Fixed 1
All Things www/MSC Help
- Tor Browser U.S. IP Address
- Adobe Flash Failed To Initialize Fix
- How To Delete Saved Usernames
- How To Change IP Address
- What's My IP Address?
- Create Virtual Host In Wamp
- Restore Dreamweaver Layout/Panels
- Disable Dreamweaver Code Warnings
- Disable Firefox Close Tab Dialog Box
- Adobe Reader Failed To Initialize Fix