Here is a video player in HTML 5 that reads from an external XML file. It 'easy to set up, only to act on the XML file to add or remove video from list. For each item in the XML file you can add a title, description and the locations of video files (formats mp4 and ogg). Moreover, in the XML file we can configure the size of the video. ...
Read more ›
I created a video player using the iframe which provides YouTube with youtube-player class. This video player is in HTML 5 and Javascript (jQuery). It loads standard feeds from YouTube and displays a list of videos based on some criteria: Most Viewed, Top Rated, Recently Featured, Most Discussed, Top Favorites, Most Recent and Most Responded. Very helpful when working with JavaScript, HTML 5 video player an ...
Read more ›
Here is a mobile RSS reader that loads the feeds in real time. Technologies used: Mobile JQuery, Jquery, JFeed, HTML 5 and PHP. ...
Read more ›
In this example we see how to set a background image to 100% with JQuery We'll see how to make sure that the background image is resized to properly resize the browser window. Additionally, this script allows you not to alter the image size when resizing and then make sure that the image is not distorted or stretched. It works for both horizontal and vertical images. It 'a script that I used to spend with F ...
Read more ›
I created a simple list selected with jQuery. Each selected element is distinguished by an animation of background color and text color. To manage the transition of color, I used the JQuery plugin JQuery color. Let's see the code I used. ...
Read more ›
This is the first part of a series of tutorials covering the JavaScript API of Google Maps. In this case we see how to view a Google map with JavaScript. How to center the map on the basis of an address. My example is driven from an XML file that contains some addresses. This file is loaded with JQuery Ajax to populate a select list (or combobox). Based on user selection from the list, the map will be updat ...
Read more ›
HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" /> <script type="text/javascript" src ...
Read more ›
I created a horizontal scroller that displays the last few tweets of Twitter account. The tweets are loaded by calling the Twitter API. The technologies used are JQuery, HTML and CSS. Also a PHP file executes the call to the Twitter feeds (because permission problems). HTML We have a call from the onLoad of the body to a Javascript function that resides in the file called loadTweets last_tweets.js. In the b ...
Read more ›
I created a simple image gallery with HTML, jQuery and Ajax. This gallery is managed by a simple XML file (images.xml). Since I come from the world of Flash / Actionscript I am use to manage the contents of applications from an external XML file. What do you think? The following lists the main steps to build this gallery. ...
Read more ›
Without the help of an established domain hosting company, starting your own website can be an extremely difficult task. However, experienced and respected hosting companies such as Network Solutions offer numerous services and benefits that make the web design process as easy as possible for the average Internet user. One of these benefits, specifically useful for people who desire particularly smooth and ...
Read more ›
To create a shadow text effect in CSS, the properrty text-shadow was introduced in the draft of the CSS3 text module. Unfortunately, this css3 property is not yet part of the specifications and is not supported by all browsers (see CSS3 text-shadow property ). In the meantime, let's see how to recreate the same effect using only css2.1 rules. First with a duplicate content of the text, then instead creating ...
Read more ›
The margins collapse is part of the specifications for the box model and the use of vertical margins . Often this 'phenomenon' is ignored, because of the use of other properties which prevent the collapse, but every so often, it can create a puzzling result that could be considered as an error of interpretation. The margins collapse happens when adjacent vertical margins (margin-top and margin-bottom), with ...
Read more ›
After the example of a vertical css news accordion, this a new example of css accordion in horizontal. This css example displays a div element on opening and a serie of links viewable on the hover state like a horizontal slide. Each link contains more inline elements: b: the name of the links img: the background image em: the semi transparent background (using the property css3 opacity) of the text content ...
Read more ›
Free example of a horizontal menu created using only css without the use of images with a tab system opened on hover state. ...
Read more ›
This monthly calendar created using only css properties displays the days of the month classified from sunday to saturday with the relative event on the hover state. 1. The html structure to create the monthly css calendar The basic html structure consists of a main div with a unique id (<div id="calendario_css">) which contains all the necessary elements to create the monthly css calendar. ...
Read more ›
