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...
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...
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...
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 =...
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(),...
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',...
Responsive designs are all the hype in Web development communities nowadays. With videos becoming an important marketing tool on many websites, there is a growing need to incorporate responsive videos into these designs. Responsive videos are elastic and are especially favored where web pages will be viewed on different screen sizes using a variety of browsers. Using the HTML5 video element however is not enough when handling video embed code that uses iframes and objects tags. Using the HTML5...
Many websites nowadays make use of sliders to highlight different content or pages but these slide shows usually appear at the top of the home page. Anyone who deals with content knows the power that images have to keep a reader engaged. In fact, most content creators try to scatter images throughout their text for this very purpose. But what happens if you marry the two concepts together? Taking the slide show concept and inserting it into the content of a web page... Begin by opening up the HTML of your...