Difference between revisions of "16 May 2007"

From Organic Design wiki
(Research: Fast DOM querying)
m ({{:Sortable tables example}})
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{news|title=Fast DOM querying|img=|msg=
 
{{news|title=Fast DOM querying|img=|msg=
−
A number of development threads we've been working on recently have run into trouble with the JavaScript not being able to easily obtain the necessary selections of nodes from the browser [[w:Document Object Model|DOM]]. These DOM queries are usually similar in nature to a CSS selector requirin for example a selection of all nodes contained within an element of specified tag-name, and having a ''class'' of ''id'' attribute of a specified value. Often it would be convenient to actually use CSS syntax to specify a selection statement, and have a DOM-node-list returned containing all matching elements in the document. Many other people have been having similar problems with the limited selection abilities of the basic DOM methods and have come up with a number of open source solutions.
+
A number of development threads we've been working on have recently run into trouble with the JavaScript not being able to easily obtain the necessary selections of nodes from the browser [[w:Document Object Model|DOM]]. These DOM queries are usually similar in nature to a CSS selector requiring, for example, a selection of all nodes contained within an element of specified tag-name, and having a ''class'' or ''id'' attribute of a specified value. Often it would be convenient to actually use CSS syntax to specify a selection statement (eg. ''a.new, a.ext, #portal a:hover''), and have a DOM-node-list returned containing all matching elements in the document. Many other people have been having similar problems with the limited selection abilities of the basic DOM methods and have come up with a number of open source solutions.
 
*[http://slayeroffice.com/code/getElementsByWhatever.html getElementsByWhatever]
 
*[http://slayeroffice.com/code/getElementsByWhatever.html getElementsByWhatever]
 
*[http://simonwillison.net/2003/Mar/25/getElementsBySelector getElementsBySelector] ''- Simon Wilson''
 
*[http://simonwillison.net/2003/Mar/25/getElementsBySelector getElementsBySelector] ''- Simon Wilson''
Line 8: Line 8:
 
}}
 
}}
  
−
{{news|title=MediaWiki Sortable Tables|img=|msg=
+
{{:Sortable tables example}}
−
It says in [[M:Help:Sorting]] that [[w:MediaWiki|MediaWiki]] version 1.9.x now has native support for sortable tables. But actually the method they're using is fully a [[w:client-side JavaScript|client-side JavaScript]] solution developed [http://www.joostdevalk.nl/code/sortable-table here] by [http://www.joostdevalk.nl/about-me Joost de Valk]. So by adding the source code to your [[MediaWiki:Common.js]] article (and enabling it by setting ''$wgUseSiteJs'' to true in your [[MW:LocalSettings.php|LocalSettings.php]] file) any wiki can do it. this will compliment the new [[MW:Extension:Display Filter|display filter]] and [[MW:Extension:UploadCSV|upload CSV]] extensions perfectly. The following example also demonstrates another useful feature which is the alternate striped background colours making the table much easier to read, these stripes are maintained regardless of the sorting order of the table.
 
−
 
 
−
{{{!}} class="sortable" id=foo style="border: solid 1px #aaa"
 
−
{{!}}-
 
−
! style="background: #ccc;" {{!}}City
 
−
! style="background: #ccc;" {{!}}January<br/><span style="font-size:90%;">(Low)</span>
 
−
! style="background: #ccc;" {{!}}January<br/><span style="font-size:90%;">(High)</span>
 
−
! style="background: #ccc;" {{!}}July<br/><span style="font-size:90%;">(Low)</span>
 
−
! style="background: #ccc;" {{!}}July<br/><span style="font-size:90%;">(High)</span>
 
−
{{!}}-
 
−
{{!}}[[Amman]]{{!}}{{!}}4&deg;C{{!}}{{!}}12&deg;C{{!}}{{!}}18&deg;C{{!}}{{!}}32&deg;C
 
−
{{!}}-
 
−
{{!}}[[Baghdad]]{{!}}{{!}}0&deg;C{{!}}{{!}}16&deg;C{{!}}{{!}}24&deg;C{{!}}{{!}}43&deg;C
 
−
{{!}}-
 
−
{{!}}[[Cairo]]{{!}}{{!}}8&deg;C{{!}}{{!}}18&deg;C{{!}}{{!}}21&deg;C{{!}}{{!}}36&deg;C
 
−
{{!}}-
 
−
{{!}}[[Damascus]]{{!}}{{!}}0&deg;C{{!}}{{!}}12&deg;C{{!}}{{!}}16&deg;C{{!}}{{!}}36&deg;C
 
−
{{!}}-
 
−
{{!}}[[Dubai]]{{!}}{{!}}15&deg;C{{!}}{{!}}23&deg;C{{!}}{{!}}30&deg;C{{!}}{{!}}39&deg;C
 
−
{{!}}-
 
−
{{!}}[[Jerusalem]]{{!}}{{!}}5&deg;C{{!}}{{!}}13&deg;C{{!}}{{!}}17&deg;C{{!}}{{!}}31&deg;C
 
−
{{!}}-
 
−
{{!}}[[Riyadh]]{{!}}{{!}}8&deg;C{{!}}{{!}}21&deg;C{{!}}{{!}}26&deg;C{{!}}{{!}}42&deg;C
 
−
{{!}}-
 
−
{{!}}[[Tehran]]{{!}}{{!}}-3&deg;C{{!}}{{!}}7&deg;C{{!}}{{!}}22&deg;C{{!}}{{!}}37&deg;C
 
−
{{!}}}
 
−
*See [[M:Help:Sorting]] for details about syntax and usage
 
−
*Get the JavaScript code from [http://www.joostdevalk.nl/code/sortable-table www.joostdevalk.nl/code/sortable-table]
 
−
}}
 

Latest revision as of 13:09, 19 June 2007

Warning.svg This is a blog item that needs to be converted to the new Bliki format


Fast DOM querying

A number of development threads we've been working on have recently run into trouble with the JavaScript not being able to easily obtain the necessary selections of nodes from the browser DOM. These DOM queries are usually similar in nature to a CSS selector requiring, for example, a selection of all nodes contained within an element of specified tag-name, and having a class or id attribute of a specified value. Often it would be convenient to actually use CSS syntax to specify a selection statement (eg. a.new, a.ext, #portal a:hover), and have a DOM-node-list returned containing all matching elements in the document. Many other people have been having similar problems with the limited selection abilities of the basic DOM methods and have come up with a number of open source solutions.

Warning.svg This is a blog item that needs to be converted to the new Bliki format


MediaWiki Sortable Tables

It says in M:Help:Sorting that MediaWiki version 1.9.x now has native support for sortable tables. But actually the method they're using is fully a client-side JavaScript solution developed here by Joost de Valk. So by adding the source code to your MediaWiki:Common.js article (and enabling it by setting $wgUseSiteJs to true in your LocalSettings.php file) any wiki can do it. This will compliment the new display filter and upload CSV extensions perfectly. The following example also demonstrates another useful feature which is the alternate striped background colours making the table much easier to read, these stripes are maintained regardless of the sorting order of the table.

City January (Low) January (High) July (Low) July (High)
Amman 4°C 12°C 18°C 32°C
Baghdad 0°C 16°C 24°C 43°C
Cairo 8°C 18°C 21°C 36°C
Damascus 0°C 12°C 16°C 36°C
Dubai 15°C 23°C 30°C 39°C
Jerusalem 5°C 13°C 17°C 31°C
Riyadh 8°C 21°C 26°C 42°C
Tehran -3°C 7°C 22°C 37°C
Retrieved from "https://organicdesign.nz/wiki/index.php?title=16_May_2007&oldid=72035"