© 2007 Fred Ryals Conditional Content – A Dynamic HTML Demonstration Fred Ryals Senior Web Developer Leading Edge Design & Systems Severn, Maryland

© 2007 Fred Ryals About Me  ’70s – Business / Info Systems  ’96 – web & interactive multimedia Authorware 3.5 – 5.0 variety of web tools  ’03 – joined Leading Edge  ’04 – MMCP, Dreamweaver MX 2004  ’05 – AAMMUG

© 2007 Fred Ryals Session Overview  Traditional FAQ, TOC, list. etc  Make it dynamic with JavaScript hand-coding Dreamweaver code snippets  No script / no problem expand content by default hide if scripting is supported

© 2007 Fred Ryals Traditional FAQs Pages  Common features flat page link down scroll up Question 1 Question 2 Question 3… Question 1 Answer 1. Question 2 Answer 2. Question 3… Answer 3.

© 2007 Fred Ryals Today’s Project Demonstration

© 2007 Fred Ryals New Speakers Page Demonstration in Dreamweaver

© 2007 Fred Ryals Insert Snippets  Snippets > JavaScript > starter script Starter Script  Snippets > JavaScript > readable MM functions Show and Hide Layers Find Object

© 2007 Fred Ryals Modify Target Attribute in Snippet  Original – visibility reserves space for hidden element  visible  hidden  Modified – display compresses space  block  inline  none

© 2007 Fred Ryals Modify onClick Actions  Add links to display bio & photo Speaker Name  Add links to hide details [ hide ]

© 2007 Fred Ryals Preview New Page Demonstration in Dreamweaver

© 2007 Fred Ryals No JavaScript = No Dynamics  JavaScript disabled or not available  Add two elements in head Start with all elements hidden.conditional{display:none;} Use a tag to contain style tag conditional {display:block;}

© 2007 Fred Ryals Finished Page Demonstration

© 2007 Fred Ryals Questions ?

© 2007 Fred Ryals Thank you!