I will take a deeper look at this later, but for now, I can tell you that the generated content triangles don’t have to be positioned separately for each of their parent lists. You can use a single positioning rule for both of them, because they are positioned relative to their parent. It’s just a matter of making your rule work like this (imagine that these two “list items” are actually children of two different-sized parent lists):
[ parent item one ]
[ parent item two ]
These items have a width to them, they also can be styled as being the parent of any positioned children. So your little triangle can have the rule:
position: absolute;
top: 0px;
font-size: 10px;
right: -14px;
And now it hangs off the right of its nearest positioned parent element. It doesn’t matter how large or small that parent is, a child positioned this way will always be 4 pixels to the right of the parent.
[ parent item one ] >
[ parent item two ] >
Sorta like that.
Walter
On Mar 30, 2015, at 1:14 AM, Peter Laundy email@hidden wrote:
Here is a test page showing the approach WaltD suggests. It works to be able to size the triangles independently from the type as I need. Below is a link showing this working.
http://www.brockmanfamilyfarming.com/newsite/testpage-disclose
But a couple of issues emerged.
FIRST ISSUE
As shown, I have two dropdown menus. Their titles (Site Page and Page Section respectively) are different widths, requiring the CSS generated triangle after each to be in a different horizontal absolute position. Therefore, I needed to create two different instances of dropdowns (#PagesNav and #SectionsNav) to specify the correct triangle position for each.
I need to have only one dropdown menu show at a time, and I can’t get this to work. The code provided to be used for this purpose through uncommenting is designed to work when the disclosures are both within the same run of disclosures. But in my case I have two independent runs to position the triangles differently. Uncommenting this code for #PagesNav or #SectionsNav causes one dropdown to disappear properly but not the other. Uncommenting both breaks the basic functionality of #SectionsNav. (In the example included I activated the one-at-a-time code for #PagesNav but not for #SectionsNav.) Is there a tweak to the JavaScript code to use to solve for this problem?
SECOND ISSUE
The dropdown menu behavior I am trying to match window-shades down into position like the “read more” code I started with, but with the approach I show here the dropdown simply appears and disappears. Is there a Javascript alternate I could use to get the window-shade effect and be able to size the triangles separately from the type?
ISSUE THAT NEITHER THE “READ MORE” OR “DISCLOSURE TRIANGLE” APPROACH ADDRESSES
The triangle actually rotates in position in the dropdown menu behavior I am trying to match, rather than jump from up arrow to down arrow. Doing it this way would also allow me to match the isosceles shaped Unicode triangle, which unfortunately is only available pointing down but not up.
Many thanks in advance for your help!
This looks really nice!!! Would it be possible to post the related freeway file for having a deeper look and understanding of what is going on there?
Thank you so much,
Chris
Chris, I can post a FW7 file showing how I made the above. Will do when I get it as resolved as I can.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options