red

There is a rough sample of what's going on at saczee.com/ZTEST/build20-11.html Pay little attention to the code, though. It deliberately violates "best practices" and is less than half done. It simply gives an idea of what the mega-menu structures are intended to do. Also keep in mind, the positions and sizes of the mega-panels are not fixed - and will change from edition to edition (of an online newspaper). The solution, if there is one, must be something that works independent of other features of containers and their styling. It needs to pretty much confine itself to matters of visibility in hovered and toggled states and invisibility at other times. Setup: Its a routine inline-block navbar. there's underlayment containers for certain function and class switches on the list-items themselves for certain functions (on/off/active/dropdown/etc...) nothing special. the anchors are kept relatively clean and have no function except those without submenus - they serve as links - the others just serve as titles for submenus. Straightforward to that point. There are also two primary types of li links - ones that will have dropdown menus of some sort, others that will have mega-menu like panels that use divs as their principle content containers rather than ul/li submenus. Problem: The problem is handling the event actions on the list items. In particular, the gaps or deadspace if one is in hover mode. The mega-panels may be absolutely positioned anywhere on the page. So, when one hovers a navbar link the panels appear, but in traversing to the panel one must pass through unhovered-space (containers that are not associated (often cannot be) with the navbar structure at all. I can get the panels to appear, I can move them around and size them as I wish. I cannot manage to 1) keep them visible when leaving the link to go to them, 2) keep the link hover style active when I leave the list-item. My visibility is controlled with opacity, visibility and overflow and the panels put in block mode when visible (for a variety of reasons I do not wish to use negative margins or display:none properties to handle visibility.)What I've looked at a lot of toggle featured solutions like bootstrap and such. don't want to use them. Other simpler solutions I've seen with jquery, js and css combinations just miss what I'm trying to accomplish. I'm guessing some combination of css and js will do the trick, but I've no js experience. What I'd settle for: To be able to hover from the li to the separate div panels without losing the hover effect on the link or the visibility of the mega-panel. When the pointer is on the panel, both visibilities should remain. Then, when the hover is removed from the panel the panel should become invisible again and the style on the link go back to its unhovered state. What I'd like is: on hover the link styling for hover lights up and the mega-panel appears (stays on as long as the link is hovered. One can then travel to the panel and both elements remain in hover state. if one then clicks either the link or the panel, both are toggled and retain the hovered state visibility. If either are then clicked, then the panel becomes invisible and the link loses its hover styling when the pointer leaves it. I figure the thing takes a combination of js and css classes to put on the event initiators and their targets. If anyone has seen this somewhere or has/can create something like that, my thanks in advance. I haven't found anything like it elsewhere.

Thanx Dave. I hope you had this on hand, and didn't have to make it up special. The question I have is about cookies. I don't want to store anything longer that the visitor/s session to the site (though that may include their visit to other pages) - the announcement window will only appear on the single 'home page'. After the visitor ends the session, the information should disappear. If they come back, they'll just have to see the announcement again. (we've promised our users there would be no cookies.) Will setting the expire time to '0' or '1' do that? or do I need to do something else for it to persist only for the session?I take it the "opacity" and "filter" properties are what control the transparency of the background. Thank you - I learned something and it doesn't look too complicated. There seem to be a lot of things in css now that weren't available a few years ago. I'll have to do some more reading about the newer stuff. I'm curious about the div order in the markup. The overlay (i gather that's the window structure) comes after the text paragraphs. does that mean the text is seen "behind the window" -- my naive intuition says the text would normally go on top? (but I'm really ignorant, so...) thanks much.

I need a window on loading a page. No need to build one for me if someone knows where there's a script that is relatively safe and simple (as possible). I have no java, limited css, Here's what I'd like: - when I have an announcement to make, the window will superimpose on the page (i can activate when needed or comment out when not in use). - it should be css styleable in general features - height/width/position, fonts/sizes, color, borders, that sort of thing) - should have one of those 'x' close options in its upper right corner; [Optional, but nice:] -- has a semi-transparent background (can see page behind it) -- i'm guessing that takes some of those vendor selectors (-webkit/-moz...etc.) & some kind of rgb/gradient thing which is beyond my current css knowledge set;-- times-out, so that after say n-seconds it will fade out if the user doesn't close it or click a link in the message. That's about it. I know there must be some good ones around, but I wouldn't be able to tell which are safe and reliable. If anyone knows/can point me in the right direction, much obliged -- red.

okeydoke - just a bad idea. sorry to bother.

yeah, not making myself too clear. I'm using 'layout' in the general sense (not the one that's argued about endlessly all over the net - 'layout', 'semantic', 'content', 'form', etc. blah...) Just the sense in which all the different "coding compartments" have to cooperate to make it all work. In that, the order of parts of the markup are as relevant as the cascade of css, and so forth. I mean "layout in the sense of saying in a nonspecific way "I'm trying to have a layout that looks like this, and accommodates that, and such -- not particular code problems, but more generic questions about approaches that aren't hinged to some particular problem, but a host of problems in getting the over-all result one wants.Let me put it this way. Foxy. You've seen some of the direction I'm trying to go with my layout. But I wouldn't at all feel comfortable expanding the discussion into matters of how a newspaper is actually composed and what its coding has to respond to in making that process easy to manage, as well as present correctly to the viewer. Instead, the important specific problem solving is what seems to me the current set of forums are for -- a dropped-float here, a breaking text there, a button to toggle somewhere else. All good, and mostly what the current forums are about -- and thank goodness for me they are. But what I'm talking about is more the difference between specialists who work on parts of a body, and your primary care physician who is more attuned to the whole body and what it needs to do. Given the response, I'm probably wrong -- it was just a hunch anyway. I only know, after days of reading, I'm suspecting my whole approach to taming my layout may be wrong, but its not something I find there's any place here to inquire about.

What would people think about a forum to discuss general layout approaches and solve general layout problems? Not that it wouldn't have specific coding and script solutions suggested for specific layout issues; but that we might be a little freer to discuss overall layout designs and how they might best be approached? Something less restricted to particular types of coding problems, too (css, html, js, etc.)I've had fantastic help here solving some vexing problems. But I also know that my layout is only about 59% of what I really started out wanting it to be.. I don't really feel free to discuss these more general types of issues in forums more focused on specific problems.Maybe its just a personal thing with me? What do others think?

I did find that its the column1-2 box that's masking the rest the page when i turn off the floats on that and the target article. If i apply a negative z-index to the column block the page reappears. but, of course, the target column and target article disappear. I don't know if that helps. I don't understand what's happening.

perfect.

As I guessed, there were more little float problems - worked them out. But one, in particular seems plain weird. It's a new, simpler layout for inside pages -- 2 columns and a side bar - same wrap&nest arrangement - an outer-wrap, left/right panels and inside that column boxes and then article boxes. the last 2-column/single-article container on the page I wanted to have wrap around the previous, longer right column above it (like wrapping text around a right-floated image.) What happened was that the last box on the page, a 2-column block with a single article in it, was doing the dropped-float thing and wouldn't wrap up the left side. So I tried all the possible combinations of floating left & right but it still stuck there. I have two global r rules governing floats. for all columns and articles: .column1-2 {float:left;clear:none;}article {float:left; clear:none;} now if I remove one or the other of these rules in any order nothing happens, the page stays visible, but the float stays stuck. So I removed both of them, thinking the containers (relative block/ clear none structures) were staying 'stiff' as a unit, and wouldn't wrap. When I did that, the final article wrapped all right, but the rest of the page disappeared! So, ok, something I don't know about, Some global effect of stopping the floating on the page makes things haywire. So next I applied the no-float rule just to that final column/article I'm trying to get to wrap, thusly,.nofloat{float:none; clear:none; color:green;} I applied this rule just to the markup of the one column (the color just to make sure the rule was applied) <div class="column1-2 nofloat "> <article class="nofloat"> <p class="slug-continue1"> &etc... if I apply the nofloat rule to one or the other, the page is visible but the text acts like a dropped float. if I apply it to both, the rest of the content on the page is hidden, but the target text wraps fine.a sample test is at http://saczee.com/floattest.html -- if you scroll down you can see the 2-column block neatly wrapping around an invisible page.

Yes, I see. Not that I know spit about js, but I coded in C and Pascal and Lillith & such, and the structures are familiar. I'll light it up tomorrow and see how it works (you've been right on the money so far, so I've no doubt it does the trick). Don't quite understand why the order of the hidden/visible button declarations should be important, but I take your word they are. &ya, display:none redundant. A habit from the old days (real old days) when I coded critical VLIS systems on which people's lives depended. We'd reassert global statements all over the place just to be damn sure that some random glytch happened, it didn't propogate. I should drop it, but some habits are hard to break ran in to a strange little anomaly about floats that may/may not interest you. I'm going to post it on my other post on 'dropped floats' -- foxy helped me with the last one. either or both of you may know what's 'bugging' me on the new wrinkle. So thanks again. I do think you should publish the toggle solution widely. a lot of people seemed to puzzle it and give up. later. (my profile looks the same, boring cameo of a nobody - that's me!

yes, thank you, that seems to work. I also found that slightly decreasing the width of the 2-column block helped some. It was pinching column3 between itself and the parent panel. I take it that its always good to leave a little wriggle room when doing these side-by-side floats. It still intuitively puzzles me a little though. I would have thought that a sibling box, sensing insufficient space remained to the right, would have floated itself to the next available left-top flow position of its parent rather than clinging below its sibling. Well I'm sure I'll encounter other puzzles, it's all very new to me. But you got me over the first big hurdle. (and I do like that f12 dom inspector, you put in my toolbox in the other post. It's way cool, and helpful.

Problem: contained boxes will float horizontally, but will not rise vertically into spaces large enough to accommodate them.- relatively positioned floats that stick to the bottom of an existing box (column) and refuse to float into available space. layout: a simple responsive, 3-column (left) + right sidebar layout that mimics common newspaper layouts. uses: main page wrap, left/right panel divs, left-panel gets 3 column containers sized to fit side-by-side in which each will contain some n-number of separate articles. some articles (columns) will span 2 or even 3 columns in the layout (interrupting the flow of the other columns. dummy boxes and horizontal spacers will be used to roughly make up for this column height unevenness - but will never be exact. Boxes are all relatively positioned, left floats. Widths are sized to insure they all fit in the left panel. heights will be auto since the lengths of incoming articles will be unknown. For the layout, heights are fixed to help visualize the boxes.In this simple test, columns1-2 are filled first with a 2-column block; Column 3 is then filled with slightly longer article than the adjacent block. Then column 1 and 2 are floated and meant to occupy the space to the left of column3 below the col1-2 block. They float left, but refuse to float to the top of the empty space. I've tried resizing to insure a fit. combinations of right/left floats and altering div orders (which I wish to avoid if I can). no dice. A simple test of this layout is at http://saczee.com/newfrontpage-layout.html[ideally, I wanted to create a layout that one could simply put incoming articles into assigned auto-height columns and have them take their place in the correct column with its top floating to the bottom of any previous article, regardless of its order in the markup (as long as the divs had proper column selectors and attributes). With the interruption of some articles that span columns this became impossible for me at my skill level. If anyone knows a layout that accomplishes that in a relatively straightforward way, let me know.

Hmm, thanx for the tool tip. Didn't even know that was there. Useful. &ya, it's "z-index" isn't it. slipped my mind, & I've been using z-index for years. Ah, where did I put my Aricept?

understood. It's fine for me when no data is sent from either button on check->uncheck on the visible one - I simply treat empty data returns as a 'not checked'. I've tested it on all four cases (both-checked/only one-checked/both=unchecked/ and they all return correct data via my fm php. As I said, The only problem I can see is the need to double click the second button if the first has been toggled. And that, I take it, has to do with the script not knowing (preserving) which button the data came from. So I'm still wondering if the simple and most straightforward way to handle that is either an If/else in the script that identifies which button is being toggled (by its name attribute?) or using separate identical functions called by the respective button to be toggled. If that's doable, then I favor the if/else method, since you could also replace the if/else with a case stmt. and set up as many toggle buttons as you wish. I hope I've been clearer than mud in my description - I underscore, I've no java skills under by belt, none. nada, zip.p.s. yes, thanx, I caught the doubled 'id=' and corrected. On the old "browsers issue, it may seem cold but I frankly don't much care about providing for old browsers. Updating them is free and people who don't want to should expect that things may not work. More recent versions, yes. But certainly not IE 6, 7 & blah. I just can't be bothered and I think we're just wasting a lot of time with a bunch of hacks to appease someone's nostalgic fixations. Others may do as they wish, but I've enough trouble trying to build a responsive, fluid layout just for more recent versions. I'm satisfied with that.For Anyone Interested:.Feel free to use my form or parts and the techniques discussed here as you wish. Its public domain as far as I'm concerned. But do credit Sacred Member for his one-button toggle solution. Its the first I've seen that actually did the trick. The label wrapper technique I used to align labels was from someone online, but I can't recall who or where. I much prefer it to the css solutions I've seen - they are simply too specific and require too much fiddling and code to be practical for me. Here I part with the semantic purists. The markup wrapping works on any form that needs label alignment, it only takes an extra line (the <span>), and is easy to do in any context. When css can do that, I'll reconsider (though I do use a little css for borders, font and control sizing and stuff like that) Anyway, here's the form I've got to date, just modify for your needs/content:<div id="form1"> <form id="contact" method="post" name="email" target="_blank" action="put your action target here" > <input id="email" name="EmailAddr" type="email" value="email address (required)" placeholder="email address (required)" size="40" /> <br /><br /> <label for="subscribe" class="label-wrap"> <input id="subscription" class="left" name="subscribe[0]" type="radio" value="new subscriber" onclick="dothis(this)" > <span> yes, put me on the Z-notify email list.</span> </label> <br /> <input name="subscribe[0]" type="hidden" value="add to subscriber list" style="display:none;"> <label for="submission" class="label-wrap"> <input id="submission" class="left" name="submission[0]" type="checkbox" value="guidelines requested" /> <span>yes, send me infomation on submitting articles.</span> </label> <br /> <input name="submission[0]" type="hidden" value="guidelines requested" style="display:none;"> <label for="z-helping" class="label-wrap"> <input id="help" class="left" name="z-helping[0]" type="checkbox" value="info requested" /> <span>yes, send me information on helping Z.</span> </label> <input name="z-helping[0]" type="hidden" value="send info on helping Z" style="display:none;" <br /><br /> <textarea id="feedback" name="comments" cols="28" rows="5" placeholder="Enter your feedback/comments here"></textarea> <br /> <label for="permission" class="label-wrap"> <input id="permission" class="left" name="permission[0]" type="radio" value="given to use comment" onclick="dothis(this)" /> <span>double-click if you permit Z to quote or use your comment in letters to the editor</span> </label> <input name="permission[0]" type="hidden" value="given to quote or use comment" style="display:none;" /> <input id="sendform1" name="send" class="submit" type="submit" value="SUBMIT" /> </form>plus SM's script and whatever extra hidden fields you need for your input.

If I put a couple of properties in the style section of my html page, they work fine. If I take those same two rules and put them at the beginning or end of an external stylesheet (which is otherwise working fine) they do not work. Some conflict somewhere -- and no, putting "!important" or the display property on them doesn't help either. Identical css, just placed in different locations. ( If I put it on both the html and the external css, it also works -- as I expected it would). Here's the snippet: its to permit visible box borders in selected text..story.box{ /* limit to selected story */ margin:0; padding:.5em; border:1px solid black; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; index:100; }.text.box { margin:0; padding:2em; border:1px solid black; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; index:100; } and the markup to invoke it is simply: <div class="story box">