I’ve had a quick look at this, and one thing that is going to make it more difficult to simplify is the manner in which you have constructed things. You have the InfoPanel providing the rounded corners and white background, and then inside that you have the InfoWrapper, and inside that the various CateringWrapper/CateringTitle9/CateringCopy9 elements. I fiddled a bit with the Safari Web Inspector, and got very confused how to make the whole thing disappear in one pop. Even if I hide every element inside the InfoPanel, you still see an empty white round-rect panel on screen.
I’ve said this before, and I will probably say it a few more times: it is considerably simpler* to create a highly-styled page using code alone than using a WYSIWYG tool like Freeway, which cannot read your mind or understand your design intent. Freeway is an impossibly wonderful sketching tool, and in the hands of someone who understands the shortcuts it takes, a capable production tool as well. But you will end up with code that is difficult to modify or extend without having a deep understanding of how it “thinks” about a page layout.
Imagine this code instead:
<div id="catering_panel" class="info-panel hidden">
<h2>CATERING</h2>
<p>You can use your own caterers, ... etc ... </p>
<p><a href="#helpanchor"><img src="cateringuparrow.png"></a></p>
</div>
Which then uses this CSS:
.info-panel {
border-radius: 9px;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 400;
color: #999;
text-align: center;
padding: 20px 40px;
overflow: hidden;
background-color: #fff;
}
.info-panel h2 {
color: #393939;
font-family: Montserrat, sans-serif;
font-size: 18px;
}
.hidden {
display: none;
}
That should be invisible and occupy no space on the page, so the rest of the contents appear snug to the bottom of the toggle-icons. When you hover over an icon, your script would remove the hidden classname, and the panel would appear and take up space, moving the rest of the page out of the way so it could be read. All of the panels would sit in your page code one right after the other. Since they are hidden, they don’t occupy any space visually, and only one of them is ever shown at a time.
Imagine if the catering button had the ID catering_button and the classname info-button. Then the following Prototype JS would do the switcheroo:
// assuming you would add this with Protaculous 2, which will write the correct
// dom:loaded listener wrapper around this code
// first, hide the info panels if they aren't already
$$('.info-panel').invoke('addClassName', 'hidden');
// next, set an observer function to show the correct panel
// naming is important, we use one function for everything!
document.on('mouseenter', '.info-button', function(evt, elm){
// get the first part of the button ID to know which panel to display
var panel = elm.readAttribute('id').split('_').first();
// hide all the panels again
$$('.info-panel').invoke('addClassName', 'hidden');
// show the chosen one
$(panel + '_panel').removeClassName('hidden');
});
That’s really it.
Make sure that all of the other buttons and panels match name-wise, and there’s nothing extra to write. Simpler HTML means simpler JS. The result is more maintainable and easier to read than ten copies of one function that differ by a few characters each, or a towering stack of nested DIVs.
Walter
*By simpler, here, I mean elegant and simplified code to produce complex-looking results. Not necessarily easier, but very definitely easier to extend later.
On Apr 19, 2016, at 4:42 AM, Dave Dunning email@hidden wrote:
On 18 Apr 2016, 9:35 pm, waltd wrote:
You can do almost anything you want with JavaScript. Can you post a link to your page, and include the other buttons/divs so we can see what you’re trying to accomplish?
One thing I recommend when you want to automate something like this is to follow a very strict naming convention, something like button_1 which triggers toggle_1. When you do that, you can make shortcuts in the JS code to write out a bunch of functions in one loop, or make a single function which can toggle N objects (where N can become a very large number without causing any pain).
Walter
On Apr 18, 2016, at 1:21 PM, Dave Dunning
Hi Walter, link to page is: http://www.stundesign.co.uk/bickhambarn/new/we-can-help.html
Currently I have it working with rollovers and Target Show/Hide Layers but was wondering if possible using the show/hide div toggle as I’d be able to size the divs to suit the content.
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options