Other options Note: Style switcher.

Slides:



Advertisements
Similar presentations
HTML 5 and CSS 3, Illustrated Complete Unit L: Programming Web Pages with JavaScript.
Advertisements

Chapter 4 Planning Site Navigation. 2 Principles of Web Design Chapter 4 Objectives Understand navigation principles Build navigation schemes that meet.
Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.
AJAX (Asynchronous JavaScript and XML) Amit Jain CS 590 – Winter 2008.
Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,
Agenda What is AJAX? What is jQuery? Demonstration/Tutorial Resources Q&A.
Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.
JQuery CS 268. What is jQuery? From their web site:
JavaScript and The Document Object Model MMIS 656 Web Design Technologies Acknowledgements: 1.Notes from David Shrader, NSU GSCIS 2.Some material adapted.
JavaScript & jQuery the missing manual Chapter 11
JQuery Page Slider. Our goal is to get to the functionality of the Panic Coda web site.Panic Coda web site.
McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Dynamic Action with Macromedia Dreamweaver MX Barry Sosinsky Valda Hilley.
Echo2 Java AJAX Web Framework Petar Milev. Contents 1.Introduction to Echo2 2.Echo2 Target – Business Web 3.Why Choosing Echo2? 4.Live Demo 5.How It Works?
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1.
Forms and Applications Web Design Professor Frank.
Interacting with a Web Page using JavaScript Mat Kelly GTAI Presentation January 10, 2014.
Title, meta, link, script.  The title looks like:  The tag defines the title of the document in the browser toolbar.  It also: ◦ Provides a title for.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Integrating JavaScript and HTML5 HTML5 & CSS 7 th Edition.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
The Document Object Model. The Web B.D, A.D. They aren’t web pages, they’re document objects A web browser interprets structured information. A server.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 16 Introduction to Ajax.
IT204 - Web Scripting and Authoring I Introduction to Dreamweaver Unit 6.
Accessible DOM scripting with ARIA Léonie Watson
PHP Form Introduction Getting User Information Text Input.
AJAX Live Regions & Accessibility by Charles L. Chen.
HTML Form Widgets. Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back.
Advanced DHTML, Dynamic CSS. Animating an object Take a look at script to move an object from corner to cornercorner to corner You should have the basic.
Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1.
JQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal.
The Web Wizard’s Guide To DHTML and CSS Chapter 6 Understanding Events.
HTML JAVASCRIPT. CONTENTS Javascript Example NOSCRIPT Tag Advantages Summary Exercise.
Widgets in Web Design: Where Spry Can Take You Joyce Porter Weber State University Ogden, UT.
HTML Forms.
Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.
Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.
JavaScript & Introduction to AJAX
John Foushee Andrew Hulbert Brian Louden. What is the Hawking Toolbar?  Short Description  Project Goal Allow Users to Access Web Content and Browser.
Chapter 10 Dynamic HTML (DHTML) JavaScript, Third Edition.
JQUERY AND AJAX
Adding Interactivity Comp 140 Fall Web 2.0 Major change in internet usage –From mostly static pages Text Graphics Simple links –To new paradigm.
JavaScript JavaScript is a programming language that web browsers understand. You can use it to make your web pages interactive by: Responding to user.
Section 10.1 Define scripting
Web Community Manager Managing the Section Workspace, Basic Workshop Today’s Trainer: Your Name Your Title.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Google Web Toolkit Tutorial
Brian McCallum UWS, Web Services Unit 15 November 2011
User Interface Design and Usability jQuery, jQuery UI & jQuery Plugins
Section 17.1 Section 17.2 Add an audio file using HTML
Ajax Control Toolkit.
Application with Cross-Platform GUI
Introduction to Programming the WWW I
Section 10.1 YOU WILL LEARN TO… Define scripting
Introduction to JavaScript
The Web Wizard’s Guide To DHTML and CSS
Bootstrap Components Reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
Tutorial 6 Creating Dynamic Pages
Chapter 13 Adding Slide Transitions
Exercise 47 - Skills Use the Spry framework to add interesting interactive features to a Web site. Spry widgets allow you to create objects such as menu.
Teaching slides Chapter 6.
Web Design and Development
Javascript and JQuery SRM DSC.
Advanced DHTML, Dynamic CSS
Introduction to JavaScript
[Robert W. Sebesta, “Programming the World Wide Web
Chapter 4 Planning Site Navigation
Creating and Sending Saved Messages
CONTENTS     Enter text Enter text Enter text Enter text
Presentation transcript:

Other options Note: Style switcher

Navigation/Menus You've seen the version I added from webbedenvironments. Other sources (OpenCube) are probably more promising Note the event handlers, how visibility is changed, use of position:relative, contextual links (a.menulink:hover).. Other options such as slide-in, tabbed (try Spry accordion widget)

Content Several ways to add, update content on the fly using AJAX (Asynchronous JavaScript And XML) apps. These depend on document.getElementById(objectID).innerHTML=pageRequest.newText Also can control form options based on what user inputs, or create dynamic type ahead text in forms Same principles use AJAX to get text for dynamic popup messages (if not working see demo on webbedenvironments site)

Style Controls This chapter has another option for changing the style of a whole page. This is actually a fairly simple script (no AJAX) that uses ids in the style tags to import a new sheet <style id="style1" tpe="text/css"> @import url(style1.css); </style>