Explore the Premium Content

User Controlled Styles with JavaScript and CSS Part Three

Welcome to the third and final part in this series; in parts one and two we created the test HTML page, a series of CSS files and the JavaScript code needed to make it all work at a basic level.  This part of the tutorial is going to look at the method by which we are going to ensure that when a user visits our site and makes some style choices, those choices remain if they navigate away from the site and then later return.

As we left things in part two, the page itself was working and the style control panel could be used to easily change the font size and theme of the page.  Visitors also had the opportunity to create a printer-friendly page consisting of just black and white styles.  Before we look at saving visitors style choices, we're just going to tidy a couple of things up.

We didn't go back to the HTML file and add the relevant event handlers or ID attributes in part two, but if you went ahead and did this anyway, you may have noticed when switching to the print medium style that the controls div loses its background colour and the link text changes to purple to denote a visited link.  This is only a trivial problem admittedly, but to me it just doesn't look professional.  You can fix it by adding the style rules to be applied when no colour stylesheet is in force to the userControlledStyles.css file.

Read More

User Controlled Stylesheets with JavaScript and CSS Part Two

In part one of this tutorial we looked at the HTML and initial CSS required for coding the basic page and the style control panel, and styling them in the desired theme.  In this part we're going to look at extending the CSS to encompass all of the different style choices that visitors could make, as well as the JavaScript that functions as the mechanics behind the page and powers mechanisms like the opening and closing of the style control panel and the actual application of the visitor's choices.

The JavaScript is also going to be used to remember each visitor's style options so that when they return to the site, the choice they have made on their last method are applied again.  Dynamically generated sites often use a database to store this information on the server, but if you don’t have a database-driven site, you can achieve the same functionality using purely client-side techniques.

Beginning the JavaScript

The first thing we need to do is to create a function that controls the opening and closing of the style control panel.  To do this, create the following function in a blank page of your favourite text editor:

function openCpanel() {

  document.getElementById("cpanel").style.display = "block";

}

That's all there is to it.  We're also going to need a very similar function that closes the control panel once the visitor has made their selections:

Read More

User Controlled Stylesheets with JavaScript and CSS Part One(updated)

A mark of distinction on websites is a facility that allows visitors to change the appearance of the pages they view on your site; personalisation goes a long way. One thing that it is very easy to do is to allow visitors to change things like the font size, the background and border colours or the colour theme in general.  Although some of this functionality, life changing the font size for example, is already a control within the browser that the visitor can set any time they want, it is still useful to have something right there on the page so that the visitor doesn't have to go off hunting through menus to find the setting.  Additionally, creating a single panel containing just the controls to change the visual settings of the site allows you to centralise this feature and make things even easier for your visitors.

Everything we need to do can be done with the use of simple HTML, JavaScript and good old CSS.  We will also be keeping to standards as much as possible, making sure our code is valid and compatible with the most widely used browsers around.  There are several different components that we will need to look at; initially, we'll need a space in which to keep the various style controls, but because this may be a little large, we don’t want it on screen at all times so we'll need a method of opening and closing the control panel.  Secondly we need to look at the method for the actual changing of stylesheets to reflect the choices made by visitors.  Finally, we need to come up with a method of keeping the settings on each page of the site that the visitor moves to, and of storing the choices made so that the same visual settings are applied when they return to the site.  This part will look at the HTML and initial CSS, while the next part will focus on an extension to the CSS, and the JavaScript required for making the page work.

Read More

Search Your Site with JavaScript, XML and CSS part Two

In the first article we look at all of the associate technology; the XML file, the CSS file and the containing HTML file.  In part two, we are going to focus mainly on the JavaScript, with perhaps a little bit more CSS and a few HTML updates towards the end.  Most of the code in this article will be JavaScript, but there will also be elements of the DOM that we'll use as well.  Getting familiar with DOM scripting is an excellent road to learning the basics of AJAX but it shouldn't be confused with AJAX because it lacks some of the fundamental methods involved such as the use of the xmlHTTP object. 

The JavaScript

The first thing we want the search script to do is to open the XML file to get the list of URLs that should be included in the search.  As those of you that read the article on generating a sitemap will know, this is easily done with a very small cross-browser function.  In a text editor, start with the following:

var searchword;

var doc;

var urls;

var controlvar;

var urldata = new Array();

A set of global variables, which we'll make use of in several of our functions, and an array, the use of which will become apparent towards the end of the JavaScript file.  The first function, to be called on the main search pages onload event, will be as follows (readers of my previous tutorial will find this very familiar!):

Read More

Which CSS and When – Understanding how styles are applied

Once you get beyond the basics of CSS, it can seem a bit intimidating. Cascade and specificity seem like obscure concepts if all you want it to do is get a design working.

But, learning how browsers apply stylesheet rules is an important tool, once you understand how the rules are applied, you can manipulate styles much more powerfully.

In this tutorial we’ll look at the various ways that web browsers choose to apply stylesheets, and look at some of the tricks you can use to take advantage of the way CSS works.

Quick Refresher

Before we start it’s worth noting that this tutorial assumes you know the basics of how styles are applied. Particularly it’s important you understand CSS Selectors, you know that:

#content h2{ font-size: 0.8em;}

Means apply a font size of 0.8em to any h2 that is inside the page element with the unique id of content. Typically content might be a div, but it could be any type of HTML element.

And you’re also aware that:

.highlight strong {color:red;}

Any strong element inside another element with the class highlight applied to it.

The Process

This tutorial is about understanding methods that browsers use when applying your styles to a web page. It takes you step by step through the process, so you’ll be better able to diagnose why a particular style isn’t sticking.

This working out of which rule applies is called cascade, and is the cascading part of CSS.

Read More

Search Your Site with JavaScript, XML and CSS Part One

Any site that is popular with users of the 'net, while unique and individual in certain aspects, will share particular attributes with other popular sites; aside from interesting or useful content, they're likely to feature things such as an easy to use navigation model, a sensibly laid out sitemap, and the ability to search for specific information or content (there are other things as well, this isn’t everything you need to cover!).  The ability to perform searches for specific information is especially important for larger sites and dynamic sites, which often implement the search via server-side technology.  Having a decent and dependable search engine on smaller sites need not be a pipedream either however so don't think that for smaller sites it isn't necessary to include a search facility.  Making things easier for visitors should be right at the top of any web designer's list of priorities because if no concern is given in this area, there won't be any visitors!  If you don’t have access to server-side technology such as PHP or ASP.NET you needn't worry as during the course of this article I'm going to show you how easy it is to create a purely client-side search engine that will happily search any number of pages for words entered into a simple text box.

Read More

A Search Engine Friendly Navigation Menu with CSS and JavaScript Part 2

Welcome to part two of this tutorial.  In the first article we created an HTML based navigation menu and a CSS file to control its appearance.  This article will look at creating the behaviour with some very simple JavaScript.  This behaviour will ultimately make the whole menu function as we want it to.  One of the benefits of this navigation menu is that the top level menu links will all still work if JavaScript is switched off on the client-side.  The second level elements won’t work of course, but this doesn’t have to mean that these pages are unreachable; you can just hard code some basic links to each of the sub-pages on the ‘index’ page for each of the directories.  But for those that have JavaScript switched on, we can do the whole drop-down thing.

Read More

Understanding Web 2.0 Interfaces

Understanding Web 2.0 interfaces

The term Web 2.0 has been adopted to cover a new breed of web applications that use innovative architectures and toolkits to build very responsive applications that are focused on users. Flash, Flex and Ajax applications are examples of this new approach.

Because of the rich interfaces used by this type of application, they are often referred to as Rich Internet Applications (RIAs). This term was originally coined by Macromedia in relation to Flash, but has since been adopted to refer to any rich Web 2.0 interface.

Many Web 2.0 developers are drawing their inspiration for Web applications from desktop applications. Desktop applications are generally more responsive and provide a wider range of controls and visual effects than traditional Web applications. One of the challenges for developers is to increase the responsiveness and enhance the interfaces of Web 2.applications. This implies a need for new components and interface elements.

In this article, I want to look at the key points to consider when working with Web 2.0 interfaces and examine how they differ from those in Web 1.0 applications.

Specifically, I’ll look at:

  • The difference between Web 1.0 and Web 2.0 interfaces
  • The concept of a single screen application
  • Web 2.0 interface elements
  • User interactions with Web 2.0 interfaces
  • Usability and accessibility

I’ll start by looking at what’s changed between Web 1.0 and Web 2.0 application interfaces.

Read More

Web 2.0 application architecture

Web 2.0 application architecture

Web 2.0 introduces Web developers to a range of newer approaches in application development. These include new technologies, new architectures and new toolkits for creating Web applications. For example, Flash and Flex allow developers to create rich internet applications that use the Flash Player. The Ajax approach allows Web applications to load data in the background while the user carries out other tasks.

In this article, I want to cut through some of the hype and look at some of the key points about Web 2.0 application architectures. We’ll see how this architecture differs from Web 1.0 applications and look at some of the key points for developers to consider.


Read More

Web 2.0 for developers

Web 2.0 is one of those terms that’s used without many people understanding what it actually means. Web 2.0 describes an alternative approach to the Web that is different from traditional sites and applications. You can think of it as a second generation of Web sites and applications. O’Reilly first used the term in 2004 after a conference brainstorming session held with MediaLive International.

A common phrase in the Web 2.0 world is “the Web as a platform”. Web 2.0 emphasises the Web as a platform for sharing data and for social interaction. Approaches such as wikis, tagging and blogging are very much part of the Web 2.0 world.

Developers have a particular interest in creating Web 2.0 applications and sites and in the new tools and approaches available. You may have heard of the term Rich Internet Applications or Ajax. Developers can use these approaches to create Web 2.0 applications that rely heavily on technologies such as XML, XHTML, CSS, RSS, Web services and Flash.

In this article, I’ll give you an overview and outline of what Web 2.0 means both in general and for Web developers. I’ll cover the technologies that are usually considered part of the Web 2.0 movement and look at some examples of where it is used in practice. By the end of the article, you should have a better understanding of what Web 2.0 means although we won’t get our hands dirty with any code.

Read More

The Other Navigation Bar

In my last article, I took you through the creation of a Dreamweaver 8 Navigation Bar and how to use it to create a usable navigation bar with this built in feature of Dreamweaver.  The Navigation Bar has greatly improved in the current version of Dreamweaver; nevertheless, it is not my tool of choice for navigation for a couple of reasons.  First, it requires images for the buttons; therefore, those images all have to preload or the navigation bar will be slower than molasses.  There was a time when 99% of all rollovers involved images and that is fine.  However, today, there is a much better way to create navigation that loads quickly and still looks professional and that involves the use of CSS for navigation and rollovers. 

 

Because all states of every button are just text, there is nothing out there that can load more smoothly or faster.  Once you get a handle on CSS, you can create a navigation bar quickly that is flexible and can serve more than one purpose.  If you read my previous article, you saw how I created images for the buttons in a panel and then sliced it in Fireworks.  It worked great on the vertical navigation, but if you tried to apply those buttons to the horizontal view, it looked awful.  I will admit that was partly due to the way that I quickly created and sliced the Fireworks PNG .. had I made the buttons all even height-wise, it would have looked much better.  My bad! 

 

HOWEVER. When you create your navigation in text and use CSS to style it, you can create a vertical navigation bar that can quickly be converted to a horizontal one with the click of a style rule.  There is no guesswork involved; no need to worry about uniform size.  Since the font is uniform, the style rules put everything in place for you .. just like that!

Read More
Older articles