Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Thursday, May 22, 2008
Development & Programming
Combining CSS and JavaScript to Save Page Space
Display only the information your visitors need
Overview
Real estate on a website has become a valuable commodity. Website owners and designers are faced with the challenge of providing enough content to satisfy their visitors, while also maintaining the visual appeal and usability of the website. On one end of the spectrum is a web page with tons of content, which requires that the user scroll almost endlessly down the page to find what they are looking for. On the other end is a webpage with mere links to more information, which relies on the user to click more to find what they are looking for. Somewhere in the middle is the ideal web page layout, where users have access to the information that they are looking for on the page, without having to use the scroll bar excessively to find it.
For example, imagine your typical Frequently Asked Questions page, which is usually a pretty long page. Many site owners provide a list of the questions covered on the page at the top, with links that jump to the appropriate part of the page when clicked. When combined with a “back to top” link, or some other method of easily returning to the top, this is a very effective way to communicate. Or, as another example, take a common checkout form on a shopping cart. Typically there will be a section for the user to input their billing information, as well as another section for them to input their shipping information (should the two differ). In most cases, the shipping address will probably be the same as the billing address, however the user still is presented with this section of the checkout form, even though they won’t use it.
While neither of these examples are very critical, they do illustrate the varying demands placed on webpage real estate by users. In this tutorial we will explore a method of “toggling” content on a web page in order to make better use of the space available. Rather than displaying the shipping address section of a checkout form by default, why not have it only display if the customer’s shipping address is different from the billing address? This would save space on the checkout form, which can reduce the number of visitors that abandon the checkout process.
We will combine HTML, JavaScript, and CSS to accomplish the goal of hiding part of a form in this tutorial. We will first start with our HTML, creating a form that is structured in such a way that we will be able to hide a section of it (the shipping information) from our users when they visit the page. We will then write a small JavaScript function that will control the CSS display property of that section of our form. Our goal is to create a form that is compact, simple and easy to understand that can also expand on demand. Users that have a different shipping address than their billing address will be able to enter their information just as anyone else would. However, those who do not require this added functionality will never even know it was there.
This tutorial is aimed at exposing the kinds of functionality that can be achieved by combining the tools available to a web designer. With a growing emphasis on website analytics to determine user behavior and conversion bottlenecks, eliminating problematic sections of a website has become a growing concern. By understanding the problems that visitors are having, and armed with the tools available to correct them, we can begin to devise solutions that will accommodate users better and make a website more efficient.
Instruction
Our first step in this tutorial is to create an HTML document that has a form in it. However, we also need to create a CSS document that will provide styles for this HTML page, as well as a Javascript document that will hold our JavaScript functions. It is important to create these external documents so that our code does not go into the actual HTML page. I will be calling my files "index.htm", "styles.css", and "scripts.js".
Now let's build our HTML page. We will do a very simple form to demonstrate how to hide certain elements. Before that, let's create the head section of our HTML document and link in our external files:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Javascript Tutorial</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="scripts.js"></script>
</head>
<body>
</body>
</html>
As you can see, I have included a link to the stylesheet as well as a reference to our external script document. Now let's add a simple form into the body of our document. I will be simplifying this form to concentrate on the Javascript, but you can add more form fields as needed:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Javascript Tutorial</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="scripts.js"></script>
</head>
<body>
<form>
<p>Billing Address: <input name="bill_address" type="text" id="bill_address" /></p>
<p><input name="ship_toggle" type="checkbox" id="ship_toggle" value="checkbox" />
My shipping address is different than my billing address. </p>
<div>
<p>Shipping Address: <input name="ship_address" type="text" id="ship_address" /></p>
</div>
<p><input type="submit" name="Submit" value="Submit" /></p>
</form>
</body>
</html>
As you can see, not the prettiest form in the world. However, we have the basics. We have a billing address field, which represents the section of the form that will be visible at all times. We then have a checkbox so that the user can enter a different shipping address than their billing address. Below that, we have the input area for the billing address, which represents the section of the form that will toggle visibility (notice that section is contained in a
The goal here is to make the field for "shipping address" invisible when the user first gets to the form. After all, it is only needed if there is a different shipping address, otherwise it is simply taking up space. So let's apply some styles to this page to get it to do just that. First, I need to assign an ID to our invisible section, which I will call "toggle". Change the
<div id="toggle">
and we are done. Now let's make a style declaration in our stylesheet that will make this section invisible when the page loads in a browser. Put the following style declaration into our "styles.css" document:
#toggle {
display: none;
}
If you preview the HTML document, you will notice that the second input text field does not appear. That is our goal, however, we want it to appear if the user checks the box indicating that they have a different shipping address. To do this we will need to write a JavaScript function that will be called whenever the checkbox is clicked. Open up our "scripts.js" document and put the following in it:
function toggle( targetId, sourceId){
target = document.getElementById( targetId );
if (sourceId.checked){
target.style.display = "block";
} else {
target.style.display = "none";
}
}
Let's go through this and see what we are doing. First, we define a function called "toggle" which will be expecting two variables to be passed to it- the targetId, and the sourceId. We pass these variables to the function rather than coding them inside the function so that we can use it in many places if we would like. By simply passing a different targetId or sourceId we can change the behavior of the function.
Next we define a variable called "target", which gets the element in our HTML document with the "id" that matches the targetId variable passed to the function. We will end up passing the "id" of the DIV element that we want to toggle, as it is the target of this function (since the function will be acting on it). Next, we have an "if" statement that looks at the checkbox. This statement checks to see if the checkbox is checked or un-checked. Again we are passing the "id" of the checkbox to the function, identified by sourceID.
The "if"statement declares that if the checkbox is checked, then display the targetId element by assigning it's CSS display property to "block". However, if the checkbox is not checked, then hide the targetId element by assigning it's CSS display property to "none", as it was when the page first loaded in. This seems easy enough, and in fact that was the hardest part.
The last thing that we need to do is to call that JavaScript function when the checkbox is clicked. There is an event handler called the "onClick" handler that allows us to assign functions to it. Essentially we are saying that whenever someone clicks this checkbox, run this JavaScript function. So let's add this to the checkbox HTML code, by making the following changes:
<input name="ship_toggle" type="checkbox" id="ship_toggle" value="checkbox" onClick="toggle('toggle', this);" />
As you can see, we have added the "onClick" event handler, which tells the browser to run the toggle() function. You will also notice that I have passed the variables needed to the function. Since the
Upload these files and preview in a browser, and you should see a very simple form with a checkbox that toggles the shipping addesss section. Experiment with different elements to get the results that you are looking for. An example of this technique can be seen on our newsletters page, where the signup forms toggle when needed.
If you have any questions or comments about this tutorials, please visit our Community Forum and provide a post under the "eCommerce Instruction" topic. I welcome discussion and will respond as quickly as I can.
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Wednesday, February 01, 2006
Comments:
I wish all tutorials of this nature were so easy to understand. Clear and concise explanations. Very nice.
Posted by: Nitewolf
Wednesday, March 28, 2007
I want know one thing in Javascript, please. When one starts to download a file, it shows a window like "save as" and "open" and "cancel". How is this done? Please email me, at fines_2006@rediffmail.com
Thank you,
Srikkanth
Posted by: srikanth
Thursday, June 21, 2007
I liked what you present, but how can the CSS work like validator on aspx page? Actually I am looking for way to replace calling validators (onclick, onchange or onblure) by just apply css for it.
Posted by: Black Angel
Thursday, October 04, 2007
The most clear tutorial, very helpful. Thanks a lot .
Posted by: Julia
Wednesday, January 30, 2008
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
Finally found simple and clear example how to implement toggle functionality.
Thanks a lot.
Posted by: Vadim
Friday, February 23, 2007