Firefox | Web development blog, news and tutorials

Home > Tags > Firefox

Page 1

Animating Buttons with CSS3

CSS Aug 15, 2012 6 comments

Many of the emerging techniques in CSS3 are particularly well suited to interactive Web page elements such as buttons. In this tutorial we will explore using CSS3 properties including transforms, transitions, box shadows, backgrounds and rounded corners. We will be working with an anchor element, animating the button when it is in hover state. Most modern browsers support the bulk of the properties we will be using, but users with non-supporting browsers will still be able to see and interact with the button.

This is how the button will look in its initial and hover states, with a moment during the transition captured in-between:

Create Your Page and Link

Let’s start by creating an HTML5 page as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

In the body section, insert your anchor element inside a container element as follows:

<div id="container"> <a class="anim" href="index.html"> <img src="note.png" alt="link"/> <span>Music</span> </a> </div>

The anchor contains an image and some text in a span. We include a class name for the anchor, which we will use to identify it and its contained elements. The container element is really just there for the purposes of demonstration.

We will be using four images for the link button, so download them now, or use your own if you prefer. This image appears within the button and will be rotating on hover:

This is the main background image for the button:

These are alpha transparent gradient images we will display on top of the main background image:

Insert General CSS Properties

Before we get to work with animated properties, let’s get the basic CSS properties for the button sorted. In the style section of your page head, add the following to style the container element:

/*basic properties*/ #container { padding:20px; background:#FFCC00; width:300px; }

The color and width have been chosen to suit the images we are using, but feel free to alter them. Next style the link with basic properties:

/*link*/ a.anim { margin:auto; display: block; background:#FF0000; width: 200px; height:60px; text-align:center; text-decoration:none; color:#000000; font-weight:bold; font-family:sans-serif; font-size:large; border:2px solid #FFFFFF; }

These properties are all pretty straightforward – the dimensions are again chosen to suit the background image we are working with so you will need to alter them if you are using a different image. Let’s add another couple of lines in this section before we move on. With CSS3 we can use rounded corners, so before the closing bracket for the “a.anim” section:

/*rounded corners*/ border-radius:15px; -moz-border-radius:15px;

The border radius specifies the extent to which the corners should be rounded. The vendor prefix version is for older versions of Firefox. After this section, position the image within the link as follows:

/*position img*/ a.anim img { margin-top:5px; }

Now set the basic styling for the text inside the link:

/*link text*/ a.anim...

Kizi friv says: I like your content it useful for me and many others, thank you for sharing

Create Quick and Easy Progress Bar Charts with HTML5 and CSS3

CSS HTML Aug 1, 2012 5 comments

The official January 2011 launch of the robust HTML5 has brought with it a number of powerful coding elements. Among them is the <progress> tag, a very useful tool in putting together quick, attractive online presentations.

CSS3 provides a highly flexible methodology for customizing default HTML5 tags. At present, both technologies are undergoing considerable revision. ‘Pseudo-elements’, such as those prefixed by -moz- and -webkit-, were implemented within the CSS3 framework to allow web developers the ability to create new and experimental features targeted toward specific browsers.

Mozilla Firefox corresponds to -moz, while Google Chrome and Apple’s Safari fall under the auspices of -webkit. These two pseudo-elements are the most widely used.

Progress Chart

Charts and bar graphs have long been utilized for instant viewer comprehension of raw data, as opposed to only showing the statistical figures.

Say, for instance, that you wanted to display an easily updated progress report pertaining to the completion status on a number of ongoing company projects. Plugging the relevant data into the <progress> tag is an easy way to do so.

HTML5 coding:

<body> <strong>Project Completion Status</strong><br /> <br /> Project #1<br /> <progress id="bar" value="6" max="9"> <em>6 of 9 stages completed</em></progress> <br /> Project #2<br /> <progress id="bar" value="20" max="100"> <em>20% complete</em></progress> <br /> Project #3<br /> <progress id="bar" value="12" max="20"> <em>12/20 components completed</em></progress> <br /> Project #4<br /> <progress id="bar" value="4" max="8"> <em>50% complete</em></progress> <br /> Project #5<br /> <progress id="bar" value="9" max="10"> <em>9 out of 10 stages completed</em></progress>...

Java Interview says: Yeah, robust HTML5 has come around with some useful coding elements. Basically I am a man of JavaScript but after watching the...

Using Firebug to Improve your Web Design Skills

CSS HTML Jul 12, 2012 16 comments

Have you ever come across a beautifully designed website and wished you had X-ray vision to see how all those HTML elements on the site work? Have you ever wanted to see how a certain design might look on your site without actually changing the underlying code?

Well, you don’t have to wish or think anymore because a powerful and really useful browser extension called Firebug can help you do all that. Any designer or developer looking to experiment with different styles on a website in real-time needs this tool. The Firebug tagline, “Web Development Evolved” is exactly what the plugin has done in the Web development circles. It is a tool that non-developers will also find invaluable.

Edit Attribute Values

Firebug allows users to inspect <div> tags and change their attribute values. Any change made to the code is immediately visible on the browser window. Firebug works by allowing a user to either click on the browser window elements directly, which in turn, highlights the code that renders the element, or click on the code which highlights the browser elements. This is a useful functionality that allows a user to visualize and resolve float problems and padding or margin issues by simply changing the numeric values or properties associated with those elements.

Debugging JavaScript

Firebug JavaScript debugger allows you to pause executions and measure performance to find bottlenecks. Running inside the browser window has its advantages as well. To debug JavaScript with Firebug, simply launch the Firebug console and go to the “Script” tab from where you can set the “Breakpoints”. Navigate to the “Breakpoint” window on the right panel and click on the appropriate browser window element to activate the code. The execution should stop at the breakpoint that you set.

Similar to other debuggers, you can then use the buttons on the Firebug toolbar to “Continue”, “Step Over”, “Step Into” and “Step Out” during code execution. If you choose, you can let Firebug give you the option to break automatically when an error occurs so you can examine the conditions responsible for the error.

Edit HTML in Real-Time

If you are the sort of user or developer who likes to do quick in-browser tests without having to login or get authorization to access the HTML files, Firebug again comes to the rescue. The ability to edit HTML within the browser window is especially useful when working on a website you don’t own. Firebug allows you to add and remove HTML elements, class or ID to elements and add temporary inline styles. For example, you can test the styles below to see which works better on your site:

style = “color:#FFFFFF”

style = “color:#FFF000”

Always have an HTML editor handy to copy your code since Firebug does not allow you to save the changes. Once you refresh the page or click on a link, all the changes you have made disappear.

Editing CSS on the Fly

For Web designers, CSS is where all the action takes place and learning how to edit CSS properties gives you the ultimate control over how your website looks. Highlighting an HTML element automatically highlights its CSS on the left panel with the most recent declarations appearing at the top. Any inline styles will also be displayed at the top as “element.style”.

Firebug shows clearly what CSS properties are affecting the selected HTML element. Those that have been superseded by another declaration are crossed out, meaning that that rule has been overwritten by another rule which came after or has the ‘!important’ designation. That however, is not the end of the road. You can actually edit the CSS right inside the Style side panel.

CSS properties and values can be disabled or added that affect the web page in real-time. Any inline style that you add will not appear on the Style side panel but its effect will be visible on the browser window.

Try out Firebug and see how it works out for you. If you are like me, you can also use it to prank your friends by editing a popular web page and watching their reaction.

...

Black Book Operations says: This tool is indeed extremely handy. I used to only look at the sourcecode (which already helped out a lot of course) but with...

Creating A Web Page Calculator Using The HTML5 Output Element

HTML5 JavaScript Jun 19, 2012 3 comments

HTML5 includes a host of new input elements, such as the output tag. Using the output tag in conjunction with the “oninput” event listener, you can create simple or complex Web page calculators, giving the user instant results. The output tag allows you to build forms using semantic markup, since the element is specifically designed for displaying calculation results.

In this tutorial we will create a simple Web page calculator to demonstrate using the output element. Many of the new input elements are not well supported, but the output element is supported in all current major browsers except Internet Explorer. We will also be using the “oninput” event attribute, which is supported in all recent versions of the main browsers.

Create an HTML5 Page

Use the following outline to create your HTML5 page:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>

We have sections for styling and scripting in the head, and our form elements will sit within the body.

Create a Form

Let’s create our form. Start with the outline:

Our opening form tag has an ID for identification in JavaScript and an “oninput” event listener attribute. The browser will call the specified function when the user alters the form input values.

Add two input elements for numbers inside your form element:

Leave a space between these as we are going to add a further element next. Notice that the two input elements have number types and names for identification in the script.

Let’s allow users to choose which operator they wish to use in their calculation. Add a select element between the two number input elements:

You can use the HTML entity references “×” and “÷” for your multiplication and division signs.

The select element offers addition, subtraction, multiplication and division. To make sure the output element is updated when the user chooses an option, as well as when they alter the number input values, we add the “onchange” event listener attribute, calling the same function we call from the form “oninput” attribute. We are using incrementing integers as the values for the select options, so that we can tailor what happens each time the calculation is performed, making sure the output reflects the operator chosen.

Add an equals sign in a dedicated element so that we can style it effectively, after the second number input:

Finally, let’s add our output element, after the equals sign element and still inside the form:

Notice that the element has a name for identification in the script and a default value to display. The “for” attribute indicates which input elements the output relates to, using their name attributes.

Perform the Calculation

Now we can implement the JavaScript function for calculating results. In the script section in your page head, add the following function outline:

function updateOutput() { //calculate...

Tobie van Rhyn says: This is really great, just what I have been looking for. I would like to know how to add decimal places and not just round...

Hot deals

See all deals →

20 One-Page Responsive Templates with Parallax Effect - only $19!

3,000 Items! MEGA Design Bundle (worth over $1,000) - only $49!

Beautiful Solomon Font Family (12 fonts) - only $9!

1000+ Royalty Free Vectors + 50 Free Textures - only $17!

Allowing Users to Edit Text Content with HTML5

HTML5 Jun 6, 2012 14 comments

With HTML5, you can set any of your Web page text elements to be editable by users. Using the “contenteditable” attribute, you can instruct the browser to allow users to insert, delete and alter the text your page contains as they view it. There are many possible uses for this technique, such as allowing users to customize the way your pages appear to them each time they visit. In this tutorial, we will run through the basics of letting users edit your text content, including saving their edits for future reference using the HTML5 storage model.

Create a Page

You can add the techniques in this tutorial to any existing HTML5 pages you have. Otherwise, create your HTML5 Web page using the following structure:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>

You don’t actually need a script section to make elements editable but we are going to demonstrate storing the user edits, for which need some JavaScript.

Add an Editable Element

Add an editable element in the body section of your page using the following markup:

<div id="edit" contenteditable="true"> Here is the element's original content </div>

The “contenteditable” attribute is all the browser needs to know that users should be able to alter the content of the element. The ID attribute is for our JavaScript function. If you save and open your page in a browser now you will see that you can delete and edit the text content. Most browsers display a dotted border around an editable element while it is being edited.

Save User Edits

Let’s assume that we are making the element editable to allow users to dictate what text should appear within it when they next visit the page. Add a button in the body of your page, calling a JavaScript function to save whatever the element contains after user edits:

Once the user has edited the element, they can press this button to save their changes. You could alternatively carry out the saving automatically, detecting key presses and saving whenever the user edit occurs. Let’s also include an element to provide confirmation that the changes have been saved. On initially viewing the page, this element will display instructions:

<div id="update"> - Edit the text and click to save for next time</div>

When the edits are saved to HTML5 storage, we will update this text to let the user know.

In the script section in your page head, add the following function to process saving the user edits:

function saveEdits() { //get the editable element var editElem = document.getElementById("edit"); //get the edited element content var userVersion = editElem.innerHTML; //save the content to local storage localStorage.userEdits = userVersion; //write a confirmation to the user document.getElementById("update").innerHTML="Edits saved!"; }

This code retrieves the element content before saving it to the Local Storage object. The Local Storage object stores data that remains accessible on subsequent user visits. This will allow us to retrieve the information again if the user re-visits the page in future. If you only want to save the user edits for the current session, use the Session Storage object instead. Finally, the function writes a confirmation message to the page, to let the user know that their edits have been saved.

Now we need to handle the situation in which the user has visited before and has edits saved. Extend your page opening body tag as follows:

<body onload="checkEdits()">...

Travis Michael Heller says: I am trying to get store multiple values from different inputs with no successs.I have tried this many times and i just get more...

Manipulating HTML5′s native audio with JavaScript

HTML5 JavaScript Jun 5, 2012 2 comments

HTML5’s native audio element will be a great way to avoid having to rely on third party plug-ins like QuickTime and Flash. The latest web browsers like Chrome 10+ and Firefox 3.6+ are already there with imbedded javascript libraries which provide methods and properties for manipulating the <audio> element. In this post, we’ll examine a few of the most important methods and discover ways to use Javascript to run audio files.

NOTE: Although this post focuses on the Audio object, these methods and properties are the same for Video.

Audio Methods

.load();

Loads and re-loads the audio element for playback.

audioElement.load();

.play();

Starts playing the audio file.

audioElement.play();

.pause();

Pauses playback of the audio file.

audioElement.pause();

.canPlayType(type);

Checks with browser to see if type of audio file is supported.

audioElement.canPlayType('audio/ogg; codecs="vorbis"');

Audio Properties

.currentTime

Sets or returns the playback position in the audio file. Value is in seconds.

audioElement.currentTime = seconds;

.duration

Returns the length of the audio file in seconds.

var seconds = audioElement.duration;

.src

The url where the audio file exists.

audioElement.src = 'audio.ogg';

.volume

Sets or returns the volume of the audio file.

audioElement.volume = value;

NOTE: This is not an exhaustive list of methods and properties.

Putting It Together

Developers can use javascript to create audio elements on the fly and customize the user interface for interacting with these elements. Let’s take a look.

First, create a standard .htm document and copy in the below <script> section.

Now let’s review the javascript above line by line.

var audioElement = document.createElement('audio');

The first thing the page does when it loads is create the <audio> element and assign it to the audioElement variable. By assigning this object to the variable, the script’s functions can use it to reference and manipulate the object (element) during the page session.

audioElement.setAttribute('src', 'audio.ogg');

Next the ‘src’ attribute is assigned, telling the page where to find the audio file.

function PlayAudio() { audioElement.load; audioElement.play(); }

The PlayAudio() function loads and then plays the audio file. First the .load() method is called, and then once the audio file has finished loading, the .play() method is called to start the file.

function PauseAudio() { audioElement.pause(); }

The simple PauseAudio() function pauses the playback. If the PlayAudio() function is called again, the audio file will reload and begin playing the file from the start. However, you could use the .currentTime property to have the file begin playback at the time the PauseAudio() function was executed. Download the demo to view an example of how this can be done.

Support

What developers must keep in mind with the <audio> element is that it is not yet widely supported by browsers. In addition, various browsers only support certain kinds of audio file types. Check out my previous post for details about using HTML5’s <audio> element natively and how it is supported.

NOTE: The accompanying demo will only work in Chrome 10+ and FireFox 3.6+.

By getting creative with the audio’s javascript methods and properties, you can avoid relying on the clunky controls provided by web browsers and inject pizazz into your pages! In a future post, I’ll examine how to use the .canPlayType() method to determine what audio file is supported by the user’s web browser.

Happy Coding!

...

Richard Dickinson says: No demo to download.. :-( I added audio tags to html5 page with this script but no action?

Rotating Web Page Elements Using The CSS3 Rotate Transform

CSS May 14, 2012 one comment

With CSS3, you can rotate Web page elements by a specified number of degrees, clockwise or anti-clockwise. With a small amount of HTML and JavaScript code in conjunction with CSS declarations, you can also animate these rotations. In this tutorial we will work through the process of rotating an image element by varying amounts as well as animating the function, initiating the rotation on user interaction with the page.

Create a Page

Save a new HTML file in your chosen editor, using the following outline code for HTML5:

<!DOCTYPE HTML> <html> <head> <style type="text/css"> /*style declarations*/ </style> </head> <body>  </body> </html>

We will add the page elements in the body and the rotation style declarations within the dedicated CSS section in the page head.

Add Images to the Page

Add one or more images to your page. To demonstrate multiple amounts of rotation in CSS3, we can include the same image element multiple times, as follows:

Alter the image source attributes to suit an image file of your choice. The first image will be displayed as normal, with the remaining three displaying varying degrees of rotation. Notice that each image to be rotated has a unique ID attribute, so that the CSS code can identify it in order to apply the transform effect.

Style the Elements

Within your style section, add the following default styling declarations:

img { float:left; margin:50px; } .pics { clear:both; }

This styling will apply to all of the relevant page elements independently of any transform effects. Depending on the dimensions of your own image elements, you may need to alter the margin declaration so that the full image is still visible within the page after rotation.

Rotate the Image Elements

Add the following declaration to apply a rotate transform to the image element in your page with “rotate30″ as its ID:

/*rotate 30 degrees*/ #rotate30 { /*General*/ transform: rotate(30deg); /*Firefox*/ -moz-transform: rotate(30deg); /*Microsoft Internet Explorer*/ -ms-transform: rotate(30deg); /*Chrome, Safari*/ -webkit-transform: rotate(30deg); /*Opera*/ -o-transform: rotate(30deg);...