• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Articles tagged: javascript

javascript

Hold That Website! 12 Things to Check Before Launch

27 January 2011 / 6 Comments

Hold That Website! 12 Things to Check Before Launch

After weeks of hard work, your new website’s ready to launch! It’s uploaded, you’ve set up the domain, and you’re ready to take the wrapping off and reveal it to the general public.

Before you hit the proverbial switch, however, it’s important to check that your site is functioning correctly — especially if you’re launching it with an expensive marketing campaign.

Here’s a list of some important things to look for when giving your site its pre-launch testing.

[Read more…] about Hold That Website! 12 Things to Check Before Launch

jQuery Mobile: What Can It Do for You?

5 November 2010 / 37 Comments

jQuery Mobile: What Can It Do for You?

jQuery has long been a popular JavaScript library for creating rich interactive websites and web apps. However, since it was designed primarily for desktop browsers, it doesn’t have many features specifically designed for building mobile web apps.

jQuery Mobile is a new project that addresses this shortfall. It’s a framework built on top of jQuery that provides a range of user interface elements and features for you to use in your mobile apps.

The framework is pretty cutting-edge at the time of writing — in fact, the first alpha version was only released last month — but it’s already possible to do some great things with it.

In this article I’ll look at some of the key features and benefits of jQuery Mobile, and show some examples of how this new framework can help you build top-quality mobile apps in next to no time.

For best results, you’ll probably want to view the examples in this article with a mobile device such as iPhone or Android. Alternatively, Safari on the desktop (with a narrow window width) makes a good substitute.

Let’s go!

[Read more…] about jQuery Mobile: What Can It Do for You?

Create Smooth Rotatable Images with CSS3 and jQuery

25 August 2010 / 19 Comments

Create Smooth Rotatable Images with CSS3 and jQuery
View Demo »

Download Code

With the advent of CSS3 transforms, we can do some nice tricks with elements in a web page, including rotation, scaling, and skewing. Once we start throwing jQuery into the mix too, we can start doing some really nice tricks!

In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page. You can try it out right now by clicking the “View Demo” button above. Hold down Shift, then click and drag on a photo to rotate it.

I’ve based the code on this photo light table tutorial that I wrote a couple of months ago. In that tutorial, you could drag photos around the table, and click a photo to view it in a lightbox. Now, with this latest addition, you can also Shift-drag a photo to rotate it smoothly about its centre. Nice!

I should point out that this tutorial won’t work in IE at all, since IE (as of version 8) doesn’t support CSS transforms. I suspect it might work in IE9, although I don’t have it to test with. It also won’t work in touchscreen mobile browsers (yet) due to the lack of a Shift key!

Here’s how to code this baby up. Bear in mind that we’re starting with the script from the last tutorial, so if you want to follow along then you can download that code and work from it.

[Read more…] about Create Smooth Rotatable Images with CSS3 and jQuery

Kitchen Table: Adding a Lightbox

1 July 2010 / Leave a Comment

Kitchen Table: Adding a Lightbox
View Demo »
Download Code

In Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery, we created a nice-looking “light table” of draggable photos. This is a fun, novel way to display a handful of images in an image gallery. However it would be nice if the user could click a photo to enlarge it.

In this tutorial you’ll learn how to enhance the light table by adding a lightbox to display a bigger version of a photo when it’s clicked. You’ll also display a caption for the image within the lightbox.

[Read more…] about Kitchen Table: Adding a Lightbox

Manipulating Element Classes with jQuery

12 May 2010 / Leave a Comment

Manipulating Element Classes with jQuery

In Manipulating Element Attributes with jQuery, you explored 2 jQuery methods for working with element attributes: attr() to read, add, and change attributes, and removeAttr() to remove attributes.

In this tutorial you’ll look at some jQuery methods for working specifically with the class attributes of elements:

  • hasClass() to check if an element has a certain class
  • addClass() to add a class to an element
  • removeClass() to remove a class from an element
  • toggleClass() to add a class to an element if it doesn’t already have it, or remove a class if it does

While you can use attr() and removeAttr() to work with classes, these class-specific methods are more useful because:

  • They’re easier to use on classes
  • You tend to work with CSS classes a lot with jQuery, and
  • class attribute values often contain multiple class names, making them more complex to deal with than most other attributes.

Let’s take a look at each of these methods in turn.

[Read more…] about Manipulating Element Classes with jQuery

10 Fantastic Free Web Page Editors

4 May 2010 / 9 Comments

10 Fantastic Free Web Page Editors

Every Web designer and coder needs a Web page editor to create and edit HTML, CSS and JavaScript code. Notepad (Windows) and TextEdit (Mac) are fine when you’re starting out, but you’ll soon want to graduate to something a bit more substantial.

There are hundreds of excellent editors to choose from — many of them paid — but what if you’re a coder on a budget? In this article I’ll take a look at some great free options out there.

[Read more…] about 10 Fantastic Free Web Page Editors

Manipulating Element Attributes with jQuery

19 April 2010 / Leave a Comment

Manipulating Element Attributes with jQuery

In Accessing Element Content with jQuery, you learned how to use jQuery to read and change the contents of HTML elements. This tutorial concentrates on reading and changing element attributes.

[Read more…] about Manipulating Element Attributes with jQuery

Adding a WYSIWYG HTML Editor to Your Site

17 December 2009 / 30 Comments

What is a WYSIWYG HTML editor?

A WYSIWYG (What You See Is What You Get) HTML editor is a JavaScript-driven Web form field that lets users enter formatted text, much like using a word processor. The editor then converts this formatted text into HTML when the form is sent to the Web server. Here’s what a WYSIWYG HTML editor looks like:

CKEditor screenshot
CKEditor is a popular JavaScript-based WYSIWYG HTML editor

Most WYSIWYG editors let you do at least the following:

  • Add formatting such as bold, italic, and underlining
  • Create headings (H1, H2 and so on)
  • Create links
  • Use different font faces, sizes, and colours
  • Insert bulleted and numbered lists
  • Create tables
  • Left-align, right-align, centre, and justify text
  • Embed images, Flash movies, and more
  • Edit the HTML directly if desired

Many editors take things further, allowing you to upload images, Flash movies and other files to the Web server, and browse files on the server.

[Read more…] about Adding a WYSIWYG HTML Editor to Your Site

HTML Comments

15 June 2009 / Leave a Comment

Like many programming languages, HTML lets you embed comments within your Web pages. A comment is a piece of text intended just for people to read; Web browsers ignore any HTML comments embedded in a page.

[Read more…] about HTML Comments

Manipulating JavaScript Arrays

19 May 2008 / Leave a Comment

My first tutorial on JavaScript arrays covered the basics: creating arrays, accessing the contents of arrays, array lengths, and looping through arrays.

In this tutorial, you explore arrays in more depth, and learn how to use various methods of the Array object to manipulate arrays.

[Read more…] about Manipulating JavaScript Arrays

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to Next Page »

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits