Skip navigation

CQ5

cowls Calculating status...

Currently Being Moderated

How to create a parsys in an overlay

Jul 24, 2012 8:06 AM

Tags: #websites #5.5 #page #parsys #cq5.5

Hi

I am trying to create a dynamic header such that:

User mouse overs a navigation header item and a div is overlayed underneath the navigation bar containing 3 columns of links for that particurlar section.
This div also contains a 4th column that consists of a parsys component.
Author can drag and drop components onto that parsys.

However, due to the nature of the header overlay, (mouseenter and mouseleave JQuery events trigger the overlay to show or hide), when I hover over the parsys (inside the overlay) a mouseleave event is triggered on the container div and the header closes.

This seems to be because the parsys is contained in a separate div at the bottom of the page with id CQ and is dynamically positioned in place. This means when I mouse over the parsys, I am mousing out of the header.

Is anyone aware of a method to do this, or an example of where something similar has been done before?

Thanks in advance

691 Views 2 Replies Latest reply: orotas, Jul 24, 2012 11:55 PM

Replies

Currently Being Moderated

1. Sham HC,

Jul 24, 2012 4:18 PM in reply to cowls

Report

I am confused, could you please simplify & update with simple use case/diagram covering your use case.

|
Mark as:
Currently Being Moderated

2. orotas,

Jul 24, 2012 11:55 PM in reply to cowls

Report

I have never see something like you are describing, generally because even if you could avoid the issues with the new bar being in a differnet element it just will be a hard to author content in the hidden area (drag drop isn't going to work very well for example).

In the past when I have had similar requirements I tended to take one of several approaches depending on the preference of my authors and the specifics of the page layout.

Create an Edit & Design mode version of the view - in this scenario either by printing out different CSS/JS, or printing out different markup based on the WCM Mode I make the hidden div always visible, shut off the mouse events, and push down the content under the div rather than over laying. This means that in edit or design mode the layout isn't an exact replica of the publish mode, but it is very clear what the authorable code goes and you avoid any weirdness related to your mouse events.
In Edit and Design mode remove the mouse over triggers and add some sort of button that will show/hide the hidden div. This gets you a little closer to our publish user experience but should reduce some of the weirdness related to the mouse events.
Author the content on another page - use something like a teaser page to author the content, and then have your dynamic header component dialog allow the author to point to this other page. Then you grab the content from that page (there are a number of ways to do that). This option is useful if the content in your header is shared across many pages.

There are I am sure others, but those cover the common variations.

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points