[Pro] Pull ups?

Freeway
21

I should design each tab in a separate HTML or graphic box and use FWP to adjust the size and margins for each?

I am not sure that I understand the question.

The Tabs are individual html items (Divs) inside a container Div called ‘shell’ but it could be called anything you want if you adjust the code to suit. The size and margins are just part of the creation/design process.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

22

Dave, I’m finally going to attempt this, but I’m a little unsure of the steps involved. I reviewed your notes, but I’m unclear on how you are you grabbing the images you used?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

23

Oh wow, Historical Me owes you a huge tune-up. This is an awful approach to this problem (way too much repeated code) and I can see I was just beginning to learn Prototype at the time I wrote this.

To answer your question, though, the selector is based on the name of the outer HTML box that the individual tab images are within. In Dave’s example, it’s named ‘shell’, which you would find by clicking once on the box and looking in the Name/ID field of the Inspector. (Title in FW < 6.)

Walter

On May 29, 2013, at 8:41 AM, RavenManiac wrote:

Dave, I’m finally going to attempt this, but I’m a little unsure of the steps involved. I reviewed your notes, but I’m unclear on how you are you grabbing the images you used?

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

24

Here’s a much more concise bit of code to do the effect of pull-up tabs:

var tab = 30; //height of the tab to reveal
var restore = function(evt){
  evt.element().morph(this.tabbed, {duration: 0.6});
};
var reveal = function(evt){
  evt.element().morph('margin-top: 0', {duration: 0.6});
};
var setup = function(elm){
  elm['tabbed'] = 'margin-top: ' + (elm.getHeight() - tab).toString() + 'px';
  $(elm).setStyle(elm.tabbed);
}
$$('#item1 div').each(setup).
invoke('observe', 'mouseenter', reveal).
invoke('observe', 'mouseleave', restore);

Note the third-to-the-last line. That’s where you would set the ID of the container box holding your tabs. Here, it’s #item1, yours will be something different, unless that was the first box you drew on the page and you never bothered to change it.

Instructions to apply the effect:

  1. Draw an HTML box JUST large enough to hold all of your tabs when fully revealed. In the Measurements section, make sure that the height, Max-height, and Min-height are all set to the exact height of your full-size tabs. Set the Overflow to Hidden.
  2. Double-click inside the parent box and choose Insert / HTML Item from the main menu. Make this inline element the size of a fully-revealed tab. Style it as you like, or insert an image within it (inline or drawn-child) to create the tab. Set the Float to Left. Copy and paste additional child tabs inline within the parent box. Once you have all of them in place, and you’ve closed up any gaps, make your changes to each to give them their unique content.
  3. Use Protaculous 2, applied to the page, with Scriptaculous checked (and effects checked, as is default).
  4. Paste the code above into the DOM Loaded Observer editor field (button in the Protaculous 2 Action interface).
  5. Edit #item1 to match your item’s ID.
  6. Edit the first line of the script to your desired tab height in pixels.

Walter

On May 29, 2013, at 8:55 AM, Walter Lee Davis wrote:

Oh wow, Historical Me owes you a huge tune-up. This is an awful approach to this problem (way too much repeated code) and I can see I was just beginning to learn Prototype at the time I wrote this.

To answer your question, though, the selector is based on the name of the outer HTML box that the individual tab images are within. In Dave’s example, it’s named ‘shell’, which you would find by clicking once on the box and looking in the Name/ID field of the Inspector. (Title in FW < 6.)

Walter

On May 29, 2013, at 8:41 AM, RavenManiac wrote:

Dave, I’m finally going to attempt this, but I’m a little unsure of the steps involved. I reviewed your notes, but I’m unclear on how you are you grabbing the images you used?

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

25

Nice. Thanks Walter.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

26

So, if I’m understanding this correctly, I need to set this up similar to a Carousel?

In other words, the inline HTML box, which is where my tabs will display, will be within my FWP web page. However, the actual tabs will be in an HTML container off the page. Is that correct?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

27

Not quite. It’s actually pretty simple construction. You need to draw a box where your tabs will appear, and then you need to put the tabs inside of that box as inline children. The outer box must be large enough to show the tabs fully exposed, and it must be set to Overflow: hidden. When the tabs are “shoved” out of view by the top margin attribute, they will be clipped off by their parent. So in that way it is similar to how Carousel effects work – the overflow:hidden “clips” the element so only part of it shows.

http://scripty.walterdavisstudio.com/peekaboo

File is here: http://scripty.walterdavisstudio.com/peekaboo/peekaboo.freeway.zip

Walter

On May 29, 2013, at 2:14 PM, RavenManiac wrote:

So, if I’m understanding this correctly, I need to set this up similar to a Carousel?

In other words, the inline HTML box, which is where my tabs will display, will be within my FWP web page. However, the actual tabs will be in an HTML container off the page. Is that correct?

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

28

Walter, you are the best. Thank you sir. :slight_smile:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

29

Walter, I noticed that when you run your mouse back and forth sometimes the boxes flash. Is there anyway to prevent that?

Also, on an iPhone you can raise the boxes with a click, but you cannot lower them by clicking on the same box. Any way around that?

Thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

30

I noticed that flashing as well. I need to take a closer look at enabling a timer in this function, because it needs to respond to a more deliberate hover rather than the stray events created by moving the mouse elsewhere. I don’t have time to look into that at the moment, but maybe it will occur to me later. It’s an issue with many mouseover handlers.

Yes, there isn’t a mouseout event on the iPhone at all, because there isn’t a mouse. You could create a handler for the ontouchend event that could close the element if it’s open, but you’d have to be careful how you apply that. If there is content inside the tab that your users need to touch, then this could booby-trap that interaction.

Something like this:

var restore_if_open = function(evt){
  if(parseInt(this.getStyle('margin-top'), 10) == 0)
    this.morph(this.tabbed, {duration: 0.6});
};

//at the end of the invoke chain, exchange the trailing semi-color for a dot, and add

invoke('observe', 'touchend', restore_if_open);

That’s not tested, but it might work. If it doesn’t, then exchange the touchend for a touchstart and see if that does it. It’s a tricky thing, intercepting these generated events. Apple helpfully maps the mouseover to the click event, I’m not sure what it does with the native touch events when it does so. If it swallows them, which seems logical, then the first of these should work. Finally, you may end up using the click event instead. That will close the tab if you click on it, in either in a desktop or a mobile browser. Because the click event that iOS “shims” into the mouseover is not a native click, it shouldn’t be captured by this handler, but again, that’s something to experiment with.

Walter

On May 30, 2013, at 9:38 AM, RavenManiac wrote:

Walter, I noticed that when you run your mouse back and forth sometimes the boxes flash. Is there anyway to prevent that?

Also, on an iPhone you can raise the boxes with a click, but you cannot lower them by clicking on the same box. Any way around that?

Thanks!

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

31

Walter, will this only work with layered items?

Here’s where I am with it so far, but I’m trying to use inline boxes. http://rcb.idealynx.com/index.php

Thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

32

No, you’ve just not adjusted the JavaScript to match your HTML. You have named your outer (clipping) box box-wrapper, but the JavaScript is still set to work on my page, where that box is named item1. Look for the word item1 in the JavaScript, and change it to box-wrapper.

Walter

On May 31, 2013, at 11:31 AM, RavenManiac wrote:

Walter, will this only work with layered items?

Here’s where I am with it so far, but I’m trying to use inline boxes. http://rcb.idealynx.com/index.php

Thanks!

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

33

I just did, but I’m having problems with the nested inline boxes.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

34

You have everything styled correctly, as far as I can see. My example uses inline boxes as well, so that’s not the real problem.

Walter

On May 31, 2013, at 11:46 AM, RavenManiac wrote:

I just did, but I’m having problems with the nested inline boxes.

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

35

I’m getting closer, but I’m still having problems.

For some reason I can’t get box1-copy, box2-copy, and box3-copy to butt up agains the image above them. Plus, there’s too much of a gap above the popup boxes. I want the popups to overlap the text above.

What should I do?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

36

You can add negative margin to that box-wrapper to pull it up over the content above it. As long as there are no links in that area (because this technique will keep those from being clickable) that will work fine and give you the look you want. Note that Freeway won’t let you enter a negative margin, so you will use the Extended interface to do this:

  1. Click once on the box-wrapper element, and open Item / Extended
  2. Click on the DIV Style tab.
  3. Click New, and enter Name: margin-top, Value: -200px

(Adjust 200px to whatever distance you need to close up.)

Walter

On May 31, 2013, at 12:33 PM, RavenManiac wrote:

I’m getting closer, but I’m still having problems.

For some reason I can’t get box1-copy, box2-copy, and box3-copy to butt up agains the image above them. Plus, there’s too much of a gap above the popup boxes. I want the popups to overlap the text above.

What should I do?

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

37

Thanks Walter, but I’m not sure if this is going to work. The mouseover is affecting other elements with the box1 parent element, including box1-title and box1-copy.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

38

Okay, easy fix. This is happening because you are inserting more than one level of div here. So to fix that, make this line:

$$('#box-wrapper div').each(setup).

read like this:

$$('#box-wrapper > div').each(setup).

That little right-caret means only apply to direct child divs in box-wrapper, not all child divs anywhere below that point in the page hierarchy.

Walter

On May 31, 2013, at 12:57 PM, RavenManiac wrote:

Thanks Walter, but I’m not sure if this is going to work. The mouseover is affecting other elements with the box1 parent element, including box1-title and box1-copy.

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

39

Worked great! How about the flashing issue? How can we fix that?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

40

I haven’t had a chance to look at that. Basically, I want to start a timer when you mouse over an element, and if you’re still moused over the element when it finishes, then the effect fires. It’s not much of a timer, about 20 or 30 milliseconds, but that’s what it takes to make the effect really solid.

Walter

On May 31, 2013, at 1:14 PM, RavenManiac wrote:

Worked great! How about the flashing issue? How can we fix that?

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