• 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: elements

elements

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

Removing, Replacing and Moving Elements in jQuery

8 June 2010 / 5 Comments

Removing, Replacing and Moving Elements in jQuery

In Adding Elements to the Page in jQuery, you explored a number of ways to add new HTML elements — such as paragraphs and images — to a page. In this tutorial you learn how to manipulate existing elements in the page, including:

  • Removing elements from the page using the empty(), remove(), detach() and unwrap() methods
  • Replacing elements with new elements by using the replaceWith() and replaceAll() methods, and
  • How to move an element from one parent element in the page to another.

Once you’ve read this tutorial, you’ll have mastered all the jQuery techniques you need to manipulate elements in the DOM.

[Read more…] about Removing, Replacing and Moving Elements in jQuery

Using foreach to Loop Through PHP Arrays

27 May 2010 / 2 Comments

Using foreach to Loop Through PHP Arrays

Often you need to move through all the elements in a PHP array so that you can do something with each element’s value. For example, you may want to display each value in an HTML table, or give each element a new value.

In Counting PHP Array Elements Using count(), I showed how you can use a for loop along with the count() function to loop through an array. However, there’s a much easier way to loop through arrays: the foreach construct.

In this article you learn the basic syntax of foreach, and see how to use it to loop through both indexed and associative arrays.

[Read more…] about Using foreach to Loop Through PHP Arrays

Retrieving Page Elements via the DOM

31 October 2008 / Leave a Comment

In the last DOM article, you learned that the DOM represents the contents of a Web page as a “tree” of JavaScript objects. By accessing the parts of the tree, called the nodes, you can read existing page content, alter content, and even add new content from scratch.

In this article you’ll learn how to locate and retrieve the elements of a Web page using JavaScript and the DOM.

[Read more…] about Retrieving Page Elements via the DOM

Introducing the JavaScript DOM

3 October 2008 / Leave a Comment

The Document Object Model lets you access and manipulate the contents of Web pages using JavaScript. By using the DOM, you can do wonderful things like:

  • Create tabbed Web pages
  • Create expandable/collapsible (“accordion”-style) Web page elements
  • Generate Web page content dynamically (on the fly)

In this introductory article, you learn about the concept of the DOM, and how it’s used to access Web page elements from within JavaScript.

[Read more…] about Introducing the JavaScript DOM

Sorting JavaScript Arrays

27 May 2008 / 2 Comments

Previously we looked at the basics of JavaScript arrays, and showed how to manipulate the elements within them. In this tutorial, we take a look at how to sort array elements. You learn how to reverse the order of an array; how to sort an array alphabetically; and how to sort an array’s elements into any order you like.

[Read more…] about Sorting JavaScript Arrays

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