How to show a Div & hide the rest, simultaneously

Encountered an interesting issue while working on the “Accordion Menu”

Problem : Multiple Divs get thrown up, when multiple links get clicked. The hierarchy of these Divs is determined by the Z-index. Divs with lower Z-index value, get hidden behind Divs with higher Z-index value. Either the navigation has to be “Modal/ Hub & Spoke” ( close a open-Div, before clicking on another link) or the THE INTERFACE needs to close a ‘previously shown Div’ and simultaneously show a relevant Div, whenever a link gets clicked. And How?

Solution : Realized that by default, all secondary Divs (ones on the east) need to be hidden.

Also realized that multiple JavaScript functions can be called simultaneously, from a link. All you need to do is separate them with a semi-colon ” ;”

javascript : HideAllDivsOnTheEast() ; ShowOnlyTheRelevantDiv()

While i do have a working example, its not yet time to go Open.

Look Ma, All App and No Code!

YUI simply rocks! Yahoo also serves up code for FREE! ( But err…. if you use code directly from Yahoo’s servers, you are likely to encounter some latency)

Here’s a wierd idea on what Yahoo can do next with YUI… Come up with

Build an WYSIWYG IDE (could be web based) based on YUI, for designers who cant hard-code and
enable them to build web 2.0 kinda front end apps ( atleast prototypes), by dragging and dropping components. ( Just like how Dreamweaver enabled designers to design HTML pages without writing code). Yahoo can also create readymade Web 2.0 app templates. What say?

Hide UnHide Divs using Display

Now that a simple layout using divs is created, its time to play hide and seek. See Example >>

Defined a variable “var = east” and assigned to “Div Id= east” using document.getElementById.”

The entire layout is split into multiple Divs like North, East, West and South.

And then the Plot thickens….

See another Example, where in, along with the Buttons, Text links are used to Hide UnHide Divs.
Other variation in this example is that according to the Hide/UnHide status, the corresponding button and text gets suitably hidden/shown.

Dojo Toolkit

Here’s some basic info about Dojo Toolkit.
Demos | Docs |

Dojo Toolkit

– Set of JavaScript Libraries
– Client side technology , works with any Server side technology

– Supports AJAX
– Hides XMLHttpRequest processing
– Handle browser incompatibilities

– Handles Asynchronous communication through XMLHttpRequest
– Invokes “Event Handles” before and after an event occurs
– Provides markup based UI constructions through widgets
– Support animation

– Dojo libraries are organized as packages

– JavaScript events drive UI
– Events trigger AJAX requests
– Events allow JavaScript components to interact with each other

Analysis of Application States

Keeping the Web in Web 2.0
An HCI approach to designing web applications

Analysis of application state and its representation in browser historyand bookmarks.

One of the disadvantages of AJAX is that browser history and bookmarks of classic web applications are broken if not implemented specifically

  • Only some elements of interaction state are recorded in browser history.
  • Only some elements are recorded in bookmarks.
  • Only some state changes create history.
  • When one element changes, it may reset other elements to their default values (it’s said to dominate those).
  • The default value of one element may depend on the value of another.
  • External factors can change the application state
  • Types of Application States :

  • Hard State : Change creates history entry.
  • Soft State : Change is recorded in history, but doesn’t create new entry.
  • Transient State : Not recorded in history.
  • External state : Not recorded in history either, but recorded elsewhere.
  • Designing Application State :

  • In classic web applications, design decisions are built into the browser.
  • In Ajax web applications, they are explicit choices by the developer:
    • Identify state elements.
    • Assign them to application state classes.
    • Decide their default values and dominance relationships.
    • Decide how to implement them

    Solution :

  • History: Store application state in browser history, and restore it on history navigation events.
  • Bookmarks: Store application state in a URL, and restore it when the URL is loaded into the browser.
  • See Example >>
    Observe how certain application states are stored in the URL.

    Event Driven Web Application Design

    Frontend engineering rocks right now. The era of boring web sites is over and we’re all into pushing the envelope, erasing boundaries and getting beyond whatever prevents us from building the next killer web application. New companies building quick-turnaround web products spring up like mushrooms and many an old convention of web design is cast aside to make way for quick prototyping and agile development.

    The real confusing part of it — at least to me — is that we don’t try out new ways to approach web application development. Instead, there seem to be two separate schools of development approach:

    * You either use a framework (like Ruby on Rails, Spring or Microsoft .NET) to build your web-app or
    * You build your web app with best-practices ideas coming from more traditional web design and/or application design.

    More on Event-Driven Web Application Design by Christian Heilmann.

    Project Woodstock goes Open

    Project Woodstock participants are developing the next generation of User Interface Components for the web, based on Java Server Faces and AJAX.

    This open source collaboration enables a community of developers & designers to create powerful and intuitive web applications that are accessible and localizable, and which are based on a uniform set of guidelines and components, to help ensure ease of development and ease of use.

    Preview and try example components
    Download Components

    Anatomy of an AJAX interaction

    1. A client event occurs
    2. An XMLHttpRequest object is created
    3. The XMLHttpRequest object is configured
    4. The XMLHttpRequest object makes an async. request
    5. The ValidateServlet returns an XML document containing the result
    6. The XMLHttpRequest object calls the callback() function and processes the result
    7. The HTML DOM is updated

    WTF? Ne comprene pas?

    Lets look at couple of examples to understand the flow.

    Example 1: Real Time data validation example.

    Real time data validation using AJAX example

    Example 2 : Real time server sided character counting

    my first example app using NetBeans

    Wanna dig deeper? Dig here then

    Related : AJAX Basics