elements

Drag-and-Drop with jQuery: Your Essential Guide

17 February 2011 / 127 Comments

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.

Removing, Replacing and Moving Elements in jQuery

8 June 2010 / 5 Comments

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.

Using foreach to Loop Through PHP Arrays

27 May 2010 / 2 Comments

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.

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.

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.

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.

elements

Footer

Contact Matt

Follow Matt