![]() ![]() If set to 0, the frame attribute is set to void. border Deprecatedĭefines, as a non-negative integer value (in pixels), the size of the frame surrounding the table. Use the background-color CSS property instead, as this attribute is deprecated. The value is an HTML color either a 6-digit hexadecimal RGB code, prefixed by a ' #', or a color keyword. bgcolor Deprecatedĭefines the background color of the table. Use the margin-inline-start and margin-inline-end CSS properties instead, as this attribute is deprecated. The possible enumerated values are left, center, and right. Specifies the horizontal alignment of the table within its parent element. They are documented below for reference when updating existing code and for historical interest only. The following attributes are deprecated and should not be used. Allowing cross-origin use of images and canvas.HTML table advanced features and accessibility.From object to iframe - other embedding technologies.Assessment: Structuring a page of content.The 'wholeContainer' DIV wraps the entire periodic table. The between the two element blocks puts the Lanthanide block on a new line. The "Lanthanide" div has CSS that positions it left so it lines up vertically correctly. Other than that, the two spry:regions that output the elements are the same. (The 'element DIV' is the Div tag that contains the data for a single element. Other classes are used for positioning things correctly within the element Div. This will allow us to color the different element types using a data reference, since the value of the data reference and the class name are identical. We have a set of class names that are named after the different 'Element_Types'. 'atom_functions.js' contains the 3 extra functions used for filtering the data.Ī big part of the functionality depends on class names.'SpryTooltip.js' provides the code for the Tooltip widget.'SpryHTMLDataSet.js' provides the functionality for using HTML tables as data sets. ![]() 'SpryData.js' is the main Spry functionality file.'atom.css' contains the bulk of the CSS used in the page functionality.Setting up the pageĪs with all Spry pages, we need to attach files so we can get started. Using a HTML table made it easy to add columns for additional data points and to find elements quickly. We also use 'Group', 'Period' and 'Element_Type' for additional functionality, explained later. We use 'No' (atomic number) frequently as a unique ID. The header row is used as the data reference names used throughout the page. The data table, located at the bottom of the page, is a straight HTML table: No The tooltip widget is used with a detailregion to provide additional information when mousing over an element. These class are also used to highlight the different sections of the table via the links. We then use Spry:repeats and regions, plus a good use of CSS classes to position things to they look like a periodic table. HTML tables are easier to create and edit than XML and you can use visual editors to modify them. This allows the page to load faster, allows the page to degrade gracefully and gives search engines content to index. The actual data source table is on the same page. ![]() The Spry Periodic Table uses an HTML data set to populate the periodic table. Since this demo gets away from our common use patterns, it may serve to expand the ways in which Spry can be used on pages. This document will go through the code section by section and explain the thinking and methods behind the code. The Spry Periodic Table takes advantage of many Spry techniques that the Spry community might be interested in. Spry Periodic Table Case Study Spry Periodic Case study ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |