tab format for product info etc on with mal’s shopping cart actions on the same page. I am not looking for the bubbles - this is just an example i like.
I saw the previous thread in July - and I dont get how to do it… sorry.
Basically, you want to start with a structure similar to an accordion. Header, followed by contents related to that header, repeat until done. If you finish that, and post a link, I can give you some JavaScript to cause it to roll up into tabs. Be sure that the outer HTML box that contains the entire set of info has its height set to “undefined” by un-checking the height property in the inspector.
I did basic info for now if that is ok - i am waiting for copy from Mike.
I do also really like the original example that was given in the july thread of: http://www.panic.com/coda/
with the carousel action -
is that also “easy” - I know relative term…
Julie
On Dec 8, 2010, at 3:58 PM, waltd wrote:
Basically, you want to start with a structure similar to an accordion. Header, followed by contents related to that header, repeat until done. If you finish that, and post a link, I can give you some JavaScript to cause it to roll up into tabs. Be sure that the outer HTML box that contains the entire set of info has its height set to “undefined” by un-checking the height property in the inspector.
Carousel, with my Actions, is massively easy. For one thing, it’s all
draw it how you want it to look, where the tabs technique that I know
requires a bit of faith and careful typing, and is anything but WYSIWYG.
Walter
On Dec 8, 2010, at 4:13 PM, Julie Maxwell Allen wrote:
I did basic info for now if that is ok - i am waiting for copy from
Mike.
I do also really like the original example that was given in the
july thread of: Coda is now Nova
with the carousel action -
is that also “easy” - I know relative term…
Julie
On Dec 8, 2010, at 3:58 PM, waltd wrote:
Basically, you want to start with a structure similar to an
accordion. Header, followed by contents related to that header,
repeat until done. If you finish that, and post a link, I can give
you some JavaScript to cause it to roll up into tabs. Be sure that
the outer HTML box that contains the entire set of info has its
height set to “undefined” by un-checking the height property in the
inspector.
So please oh great one, the carousel and tab example on coda would be an awesome look to do
J
Sent from my iPhone
On Dec 8, 2010, at 4:52 PM, Walter Lee Davis email@hidden wrote:
Carousel, with my Actions, is massively easy. For one thing, it’s all draw it how you want it to look, where the tabs technique that I know requires a bit of faith and careful typing, and is anything but WYSIWYG.
Walter
On Dec 8, 2010, at 4:13 PM, Julie Maxwell Allen wrote:
I did basic info for now if that is ok - i am waiting for copy from Mike.
I do also really like the original example that was given in the july thread of: Coda is now Nova
with the carousel action -
is that also “easy” - I know relative term…
Julie
On Dec 8, 2010, at 3:58 PM, waltd wrote:
Basically, you want to start with a structure similar to an accordion. Header, followed by contents related to that header, repeat until done. If you finish that, and post a link, I can give you some JavaScript to cause it to roll up into tabs. Be sure that the outer HTML box that contains the entire set of info has its height set to “undefined” by un-checking the height property in the inspector.
Here’s the code you need to paste into Protaculous to get basic tabs
working:
Important notes:
You called your HTML box item9 (actually, Freeway did, and you never
changed that). So this code includes that reference, and if you change
the name of that box or you try this on another page where that name
isn’t what is automatically assigned, you have to remember to track
that change in both Freeway’s inspector and Protaculous’s Function
Body window.
You also didn’t disable the height on that box. Select item9, and in
the left tab of the Inspector, click on the little up/down arrow icon
left of the height field. This will gray back the field and any number
inside it, and will make the HTML that Freeway writes completely drop
the height property. This will be important once you decide to add
some background color to that box in order to set off your tab area
from the rest of the page. You want the tab area to expand and
contract to fit around whatever contents you place in each “tab” – it
just keeps the whole tab illusion working for your visitors.
Within the JavaScript code in the Gist above, I have referenced two
colors – light gray #ccc for the tabs and a sort of gray yellow #dd9
for the selected tab. You can and should change those to match your
design. I didn’t pull them out to be named variables, which would have
been nice, so that means that each color is declared in two separate
places in the code, and you would need to change it in both places in
order to preserve the illusion.
The way this code is written, you can have as many different
paragraphs between each tab header as you like, there’s no reliance on
there being a fixed number of headers to match a fixed number of body
paragraphs. The only thing that is assumed and not changeable without
different code is that there are ONLY h3 tags and p tags in your tab
area. If you want to add some photos, just be sure that you add them
as inline images floated within the paragraphs, otherwise they won’t
hide properly.
Walter
On Dec 8, 2010, at 4:58 PM, Julie Maxwell Allen wrote:
I will do that… Waiting from mike but I will throw something together
J
Sent from my iPhone
On Dec 8, 2010, at 4:54 PM, Walter Lee Davis email@hidden
wrote:
Could you put a more representative amount of text in here? Is this
really how much copy you need to hide away?
Walter
On Dec 8, 2010, at 4:13 PM, Julie Maxwell Allen wrote: