• 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
  • Services
    • WordPress Websites
    • WordPress Maintenance Package
    • WordPress Security Package
    • WordPress Turbo Tune‑Up
    • For Designers & Agencies
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Articles tagged: drag and drop

drag and drop

Drag-and-Drop with jQuery: Your Essential Guide

17 February 2011 / 128 Comments

Drag-and-Drop with jQuery: Your Essential Guide

Dragging and dropping can be a very intuitive way for users to interact with your site or web app. People often use drag-and-drop for things like:

  • Moving email messages into folders
  • Reordering lists of items
  • Moving objects in games around, such as cards and puzzle pieces

Drag-and-drop with JavaScript used to be very hard to do — in fact, getting a decent cross-browser version working was next to impossible. However, with modern browsers and a smattering of jQuery, drag-and-drop is now a piece of cake!

In this tutorial we’ll take a look at how to create drag-and-drop interfaces with jQuery, and we’ll finish with a complete drag-and-drop example: a simple number cards game for kids.

[Read more…] about Drag-and-Drop with jQuery: Your Essential Guide

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

11 June 2010 / 14 Comments

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery
View Demo »
Download Code

In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!

The aim is to make our table and photos look as realistic as possible. Here’s our desired feature list:

  • A wooden table background image for the photos to sit on
  • Each photo “floats” onto the table as it loads
  • Each photo is given a random position and orientation to create a “scattered” effect
  • The photos have a white border and drop shadow to add a 3D effect, and are ever-so-slightly transparent
  • Once on the table, a photo can be dragged around by using the mouse

Ready? Let’s go!

[Read more…] about Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

WinSCP Tutorial – How to Upload Your Site with WinSCP

17 May 2010 / Leave a Comment

WinSCP Tutorial - How to Upload Your Site with WinSCP

WinSCP is a popular free FTP program for Windows. An FTP program lets you transfer files between your computer and your Web server.

In this introductory tutorial, you’ll learn how to use WinSCP to upload your website’s files to your server.

This tutorial assumes you’ve already downloaded and installed WinSCP. It also assumes you’re using WinSCP with the “Commander” interface, rather than the “Explorer” interface. (To change interfaces in WinSCP, choose Options > Preferences, then click the Interface option and select either Commander or Explorer.)

[Read more…] about WinSCP Tutorial – How to Upload Your Site with WinSCP

What Is jQuery?

4 February 2010 / 2 Comments

jQuery logoIn this series of tutorials I’m going to explore jQuery — “The Write Less, Do More JavaScript Library”. If you code using JavaScript then you’ve probably already heard of jQuery — it’s by far the most popular JavaScript library in use today. For example, Microsoft, Twitter and ESPN all use jQuery on their sites.

To kick off the series, this article explains what jQuery is, and the kinds of things you can use it for.

[Read more…] about What Is jQuery?

FileZilla Tutorial – How to Upload Your Site with FileZilla

20 July 2009 / 1 Comment

FileZilla logo

In this tutorial you learn how to upload your website using FileZilla, the popular free FTP application. FileZilla is available for Windows, Mac and Linux. This tutorial features Mac screenshots, but the techniques also apply if you’re running FileZilla on Windows or Linux.

[Read more…] about FileZilla Tutorial – How to Upload Your Site with FileZilla

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-2022 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits