You’ve got a select. Maybe a whole bunch of selects, with a ton of options each (metric ton – let’s keep our imaginary hyperbolic units straight here); and these are meant to be complex interactive elements, with options made visible or not as some programmatic condition dictates.
Traditionally, if you wanted to selectively display options, you had to do it the hard way – remove the non-visible option nodes entirely. What, did you want to filter on some state information stored on the node? Too bad – you’ll have to keep track of the full structure outside of the DOM and filter on that, inserting or removing elements as needed.
This is sub-optimal. It’s much tidier if we can just set display:none on our options elements, and have them hidden like any other DOM element:
The above diagram shows two ways to place a grid on an HTML page. The <TABLE> version on the left is the old school way of managing layout. The web was positively littered with such code before widespread use of CSS (and browser manufacturer adoption of standards), which freed designers from use of tables or framesets for managing layout. The <DIV> version on the right is a sample of modern accepted practice, specifically in this example, using Bootstrap 3 styling.
You will find no one suggesting using tables for HTML layout (except when it comes to formatting HTML email. It’s ugly out there) today. Many a rant exists on the web exhorting all to separate presentation from structure, yet aren’t the two examples shockingly similar? Can the <DIV> version be that much better, when it looks like a one-for-one mapping of one element to another?
To answer the questions asked in the image, yes, the HTML on the left is bad layout and the sample on the right is OK. The reasons behind the answers come with an understanding of semantic HTML.
jQuery Mobile is a web application framework designed primarily for making sites interact well on smartphones and tablets. However, many of the features are useful for interaction across all devices. This series is focusing on the page transition effects included with jQuery Mobile.
In Part I of this series, I introduced a basic two page site and then integrated jQuery Mobile to create a sliding transition between the two pages. The first step was to include all page elements in the transition. The next step, which is covered in this post, is to perform the transition with some static content; some specific elements not included in the transition effect.