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.
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?
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.
I split up the entire layout into Divs and named them as North, East, West and South. Used ‘North’ as a “Class” and the rest as “IDs”. Realized that for “Overflow” to work, height of the div needs to be defined in fixed units.
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.
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.