Articles > Snippet

CSS

A quick and simple CSS3 accordion menu!

Introduction ... Building on my previous tutorial, I thought it would an idea to show how to apply what we learned to the most basic of website features, the menu! I would strongly suggest reading my previous tutorial as we'll be jumping in at the deep end here. Once again, no JavaScript was used in the making of this tutorial! Every website has a menu, and there are lots of different styles that you can use. One style that is quiet popular in web applications and mini-sites is the accordion menu. The accordion...
CSS

CSS3 Stitched Effect

When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s. Luckily web developers can do some amazing things with CSS3 that give a page, or content within a page, that extra "pop" needed to make things stand out and look great without making the site look busy and thrown together. The next time you need to call attention to something on a page, try this cool effect in CSS3 that makes it look like an element has been sewn onto the...
CSS

CSS for Twitter-Like Hover Effects

Here's a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on! Twitter uses this effect with their sharing links on a tweet. When you hover over an individual tweet, the reply, retweet and favorite links appear, like this: But then when you place your cursor over one of the links, it becomes underlined, while the others remain revealed, but not underlined, like this: In this example we'll create the same effect. We'll use...
CSS

CSS for a Multi-Colored Link ‘:hover’

This is a cool CSS effect to use with links. We can create a link that will change to two different colors when you hover over it. In order to achieve this effect, we use span tags in the links and our CSS will look like this: a.twocolors span.red { color: #000; text-decoration: none; } a.twocolors:hover span.red { color: #FF0000; text-decoration: none; } a.twocolors span.blue { color: #000; text-decoration: none; } a.twocolors:hover span.blue { color: #0000FF; text-decoration: none; } and then...

Check for Internet Connection in a UIWebView iPhone App

This is an important part of programming a UIWebView iPhone App, the App Store will turn down your app if you cannot check for internet connectivity! The code below checks for Internet connectivity (from Wi-Fi AND wireless network), and if there is no connection, we throw a UIAlertView notification with a button that closes the app: (note: we place this code in the viewController.m file) //No Internet Connection error code -(void)webView:(UIWebView *)myWebView didFailLoadWithError:(NSError...
PHP

Code Snippet to Find the Number of a Certain Value in an Array (PHP)

I recently developed an application that sent variables into a mathematic function. This function needed to have a numeric count of the exactly how many zeros there were in a certain array. For this snippet, we can use both numeric and text based arrays. I printed it using this code: Our two example arrays will be: $array_num = array(1, 1, 1, 2, 3, 4, 4, 4, 4, 4, 5, 6); $array_text = array(apple, apple, apple, orange, banana, banana); We then put this array into array_count_values() $count_array_num =...

Code Snippet: Keep Sidebar Elements in View When Scrolling

Whether it is a list of products you are promoting, published ads or other elements on the sidebar, you will likely want to have these elements in view at all times even when scrolling. By using JQuery, you can make this possible. To do this, use the code snippet below: //keep element in view (function($) { $(document).ready( function() { var elementPosTop = $('#sidebar-ads').position().top; $(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $(document).height(),...

Create Animated Scrolling Presentation Decks Using scrolldeck.js

The scrolldeck.js library is probably one of the best ways out there to implement a scrolling presentation deck. All you have to do is build a web page with each slide as a div. It requires JQuery, Scrollorama, scrollTo, easing & scrolldeck  JS scripts to function. After linking all of the above scripts, create the slide deck on the document ready event and configure the settings as shown: $(document).ready(function() { var deck = new $.scrolldeck({ buttons: '.nav-button', slides: '.slide',...
Load more
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress