grey background

Freeway
1

Hi,

Is there a way to get the same effect like lightbox. I mean the grey transparent background. I want to click on a button, make the background grey with layers still on top of it.

Thnx.

David

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

2

Do you mean that you want to just affect the background of your page leaving selected content unchanged with no Lightbox popping up?

David

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

3

The way that most lightboxes do this is they place a DIV over the top
of the page and give it a semi-transparent PNG background. Then the
visible elements are positioned above that DIV. The whole thing is
usually magicked into existence using JavaScript.

You can make such a DIV using the Fixed in Window setting in the
Inspector, then place the layer at the top left of the screen and make
its dimensions 100% width and height. Unfortunately, this will fail in
all but the very latest versions of IE, and the PNG won’t be
transparent in any version of IE, so you will have an opaque
background cover. There are work-arounds for both of these problems.
Here’s how I handle this in the lightbox I’ve used in a couple of
recent projects:

…the important part is inside the if(Prototype.Browser.IE) test block.

Once you have your layer, you would use Target Show/Hide layer to make
it initially hidden and to trigger it to appear.

Walter

On Nov 26, 2010, at 11:15 AM, david Verbruggen wrote:

Hi,

Is there a way to get the same effect like lightbox. I mean the grey
transparent background. I want to click on a button, make the
background grey with layers still on top of it.

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

4

Hi Walter

I can get the code to create the page_overlay but I cant work out how to make it appear - is there more you can share with us to implement that part.

I have not drawn a page_overlay div - just using the code in Protaculous.

D

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

5

If you have use the code I posted earlier, then the way to get that to
appear is to use $('page_overlay').show();

So if you have a button somewhere and you want clicking it to cause
the overlay to appear, you would note the ID of that button, and then
inside Protaculous, you would add an observer for the click event on
that item:

$('yourButton').observe(
	'click'.
	function(evt){
		$('page_overlay').show()
		evt.stop();
	}
);

And naturally, change the yourButton part to match your button’s ID.

Walter

On Nov 26, 2010, at 3:06 PM, DeltaDave wrote:

Hi Walter

I can get the code to create the page_overlay but I cant work out
how to make it appear - is there more you can share with us to
implement that part.

I have not drawn a page_overlay div - just using the code in
Protaculous.

D

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

6

Thanks Walter - I will have a go with that

D

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

7

OK - got this to work but I had to take out

evt.stop();

So I now have

if(! $('page_overlay')){
  //create the overlay
  var overlay = new Element('div',{id:'page_overlay'});
  $$('body').first().insert(overlay);
  overlay.setStyle('position:fixed; height:100%; width:100%; background: rgba(0,0,0,0.7) url(/images/ajaxloadreverse.gif) no-repeat center 150px; top:0;left:0; z-index:1000; display:none');
  //pretend that IE is a worthwhile browser
  if(Prototype.Browser.IE){
    overlay.setStyle('position:absolute; background:url(/images/ajaxloadreverse.gif) no-repeat center 150px; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000); zoom: 1;');
    var h = document.viewport.getScrollOffsets()[1];
    overlay.setStyle({"top":h + "px"});
    Event.observe(window,"scroll",function(evt){
      var h = document.viewport.getScrollOffsets()[1];
      overlay.setStyle({"top":h + "px"});
    });
  }
  overlay.update('<div id="content_area" style="position:relative; margin:120px auto; padding:20px 40px 30px; background-color:#fff; width:50%; height:50%; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px;"></div>');
  overlay.observe('click',function(evt){this.hide();});
}
$('button').observe('click',function(evt){$('page_overlay').show();});

While this works with your generated ‘content_area’ can I use it to work with a specific Div (like ‘mycontent’) which is already on the page.

David

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

8

Sure. Are you trying to show a bunch of different hidden elements on
the page one at a time? Here’s how I would do that.

First, don’t use Freeway’s techniques to hide the elements. Give them
all a common classname, and then use Prototype to hide them:

$$('div.hiddenStuff').invoke('hide');

That grabs all of the DIVs that have the class ‘hiddenStuff’ applied
to them and hides them at page load.

Then, make a link to each of these hidden DIVs, using the ID as the
URL and a classname so you can act on them all together: <a href="#hiddenDivOne" class="lightbox">One</a>

And then, to put it all together:

document.observe('click', function(evt){
	var elm;
	if(elm = evt.findElement('a.lightbox')){
		evt.stop();
		$('page_overlay').show();
		var box = elm.href.toString().split('#').last();
		$('content_area').update($(box).clone(true).show());
	}
});

I haven’t tested that, but it should get you pretty close. If you
really just want to do this on one DIV, you don’t have to go through
all of those extra steps, just make sure that you know the ID of the
DIV you want to have appear, and give your trigger link an ID, too.

$('hiddenDiv').hide();
$('trigger').observe('click',function(evt){
	evt.stop();
	$('content_area').update($('hiddenDiv').clone(true).show());
});

One thing that occurs to me is you’re going to have to remove any
positioning from these hidden elements, or else they will materialize
inside the lightbox overlay with a hefty x/y offset. I think there’s
an Action for that, but you’ll have to hunt. In a pinch, Source Code
Snooper applied to each hidden element will do the trick. Remove the
top and left properties, and set the position to relative.

Walter

On Nov 26, 2010, at 8:41 PM, DeltaDave wrote:

While this works with your generated ‘content_area’ can I use it to
work with a specific Div (like ‘mycontent’) which is already on the
page.

David

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

9

Thanks Walter - working on it.

D

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