[Pro] Pull ups?

Freeway
41

Okay, sounds good.

Perhaps you can help me with this. I’m getting a gap in between the image (landowner in box1) and box1-copy. I can’t figure out how to get rid of the gap. I’ve tried every possible combination of clear and float I can think of, but nothing seems to work.

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

42

Walter, how can I have part of the box that pops up remain in the grass?

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

43

You need to pull the grass up over the containing block. If you have split up your elements like this:

tab-container
	tab/ tab/ tab/
/tab-container
grass
/grass

Then you would make the tab-container tall enough for its contents to appear behind the grass, and you would add negative margin to the top of the grass to pull it up above the tab-container.

Make sense?

Walter

On May 31, 2013, at 2:21 PM, RavenManiac wrote:

Walter, how can I have part of the box that pops up remain in the grass?

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

44

Can’t I just adjust how far the boxes pop up? I mean, what determines the top of the exposed popup?

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

45

The height of the popup box itself. You choose that by drawing it a particular height.

Walter

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

Can’t I just adjust how far the boxes pop up? I mean, what determines the top of the exposed popup?

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

46

Walter, here’s the popup code from the website I stole (sorry, borrowed) the idea from. Perhaps it’ll help with the timing problem we’re having:

/**
* hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
* 
* @param  f  onMouseOver function || An object with configuration options
* @param  g  onMouseOut function  || Nothing (use configuration options object)
* @author    Brian Cherne brian(at)cherne(dot)net
*/
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type=="mouseenter"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover)}})(jQuery);

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

47

On 31 May 2013, 6:28 pm, waltd wrote:

You need to pull the grass up over the containing block. If you have split up your elements like this:

tab-container
tab/ tab/ tab/
/tab-container
grass
/grass

Then you would make the tab-container tall enough for its contents to appear behind the grass, and you would add negative margin to the top of the grass to pull it up above the tab-container.

Make sense?

Walter

On May 31, 2013, at 2:21 PM, RavenManiac wrote:

Walter, how can I have part of the box that pops up remain in the grass?

But the grass image is a layered element that’s set to align to the bottom, which is why it moves up and down as the page content changes.

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

48

Walter,

Your iOS code worked great. Here’s the exact code I used:

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

You may want to confirm that I’ve entered everything correctly.

Now all I need is your help with the flashing problem (timer), figuring out a way to keep the tabs partially embedded in the grass (I didn’t really understand your tab, tab, tab post), and figure out why I have a lot of extra space between the image and text in each box.

I know you’re busy and I really appreciate your time with this.

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