jQuery Tools - Overlay Problem

ajhauser · 08-23-2012, 05:06 PM

Hey all,
I am completely new to jQuery - meaning I am flying by the seat of my pants here. I am in the process of cleaning up a website and getting things that another "web guy" put in place actually work.

On this page, we have a navigation bar with some animation, and I am trying to add an overlay effect for videos as well. I added the minimum amount of jQuery stuff (which I will add at the end of this post) to get it to function as you can see here. Just click on a link titled "presentation":

http://030ba35.netsolhost.com/resour...by-product.php

So far it seems to be working - however, I am not sure how I can add a "dimmed background" div to show up when a video pops up, styled like the one below?

Code:

<div style="position: absolute; top: 0px; left: 0px; width: 2000px; height: 1500px; display: block; opacity: 0.8; z-index: 9998; background-color: rgb(0, 0, 0);" id="exposeMask"></div>

It looks like there needs to be something in my jQuery tools file called "exposeMask" - but I'm not sure. This page shows one in use:

http://jquerytools.org/demos/overlay/styling.html

The reason I am only loading up a bit of the jQuery tools file, is because it seemed to conflict with this fie for some reason, and broke the navbar annimation:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

So, if I need to add in something to enable the dimmed background effect, I guess I am just looking for some guidance as I am completely clueless at this point.

Thanks very much.

My jQuery Tools file:

Code:

(function(a){a.tools=a.tools||{version:"v1.2.7"},a.tools.overlay={addEffect:function(a,b,d){c[a]=[b,d]},conf:{close:null,closeOnClick:!0,closeOnEsc:!0,closeSpeed:"fast",effect:"default",fixed:!a.browser.msie||a.browser.version>6,left:"center",load:!1,mask:null,oneInstance:!0,speed:"normal",target:null,top:"10%"}};var b=[],c={};a.tools.overlay.addEffect("default",function(b,c){var d=this.getConf(),e=a(window);d.fixed||(b.top+=e.scrollTop(),b.left+=e.scrollLeft()),b.position=d.fixed?"fixed":"absolute",this.getOverlay().css(b).fadeIn(d.speed,c)},function(a){this.getOverlay().fadeOut(this.getConf().closeSpeed,a)});function d(d,e){var f=this,g=d.add(f),h=a(window),i,j,k,l=a.tools.expose&&(e.mask||e.expose),m=Math.random().toString().slice(10);l&&(typeof l=="string"&&(l={color:l}),l.closeOnClick=l.closeOnEsc=!1);var n=e.target||d.attr("rel");j=n?a(n):null||d;if(!j.length)throw"Could not find Overlay: "+n;d&&d.index(j)==-1&&d.click(function(a){f.load(a);return a.preventDefault()}),a.extend(f,{load:function(d){if(f.isOpened())return f;var i=c[e.effect];if(!i)throw"Overlay: cannot find effect : \""+e.effect+"\"";e.oneInstance&&a.each(b,function(){this.close(d)}),d=d||a.Event(),d.type="onBeforeLoad",g.trigger(d);if(d.isDefaultPrevented())return f;k=!0,l&&a(j).expose(l);var n=e.top,o=e.left,p=j.outerWidth({margin:!0}),q=j.outerHeight({margin:!0});typeof n=="string"&&(n=n=="center"?Math.max((h.height()-q)/2,0):parseInt(n,10)/100*h.height()),o=="center"&&(o=Math.max((h.width()-p)/2,0)),i[0].call(f,{top:n,left:o},function(){k&&(d.type="onLoad",g.trigger(d))}),l&&e.closeOnClick&&a.mask.getMask().one("click",f.close),e.closeOnClick&&a(document).on("click."+m,function(b){a(b.target).parents(j).length||f.close(b)}),e.closeOnEsc&&a(document).on("keydown."+m,function(a){a.keyCode==27&&f.close(a)});return f},close:function(b){if(!f.isOpened())return f;b=b||a.Event(),b.type="onBeforeClose",g.trigger(b);if(!b.isDefaultPrevented()){k=!1,c[e.effect][1].call(f,function(){b.type="onClose",g.trigger(b)}),a(document).off("click."+m+" keydown."+m),l&&a.mask.close();return f}},getOverlay:function(){return j},getTrigger:function(){return d},getClosers:function(){return i},isOpened:function(){return k},getConf:function(){return e}}),a.each("onBeforeLoad,onStart,onLoad,onBeforeClose,onClose".split(","),function(b,c){a.isFunction(e[c])&&a(f).on(c,e[c]),f[c]=function(b){b&&a(f).on(c,b);return f}}),i=j.find(e.close||".close"),!i.length&&!e.close&&(i=a("<a class=\"close\"></a>"),j.prepend(i)),i.click(function(a){f.close(a)}),e.load&&f.load()}a.fn.overlay=function(c){var e=this.data("overlay");if(e)return e;a.isFunction(c)&&(c={onBeforeLoad:c}),c=a.extend(!0,{},a.tools.overlay.conf,c),this.each(function(){e=new d(a(this),c),b.push(e),a(this).data("overlay",e)});return c.api?e:this}})(jQuery);

devnull69 · 08-24-2012, 09:02 AM

For a simple task as a dimmed overlay you will mostly need CSS (which should put the overlay to position: fixed; left:0; top:0; width: 100%; height: 100% and a high z-index so that it can resist scrolling).

The overlay DIV itself can already be available in HTML, preferably at the end of the page. You can test it with display: block to see that it is actually working, afterwards you just add display: none to its CSS.

On some action (your decision) you simply call this code:

Code:

$('#overlay').show(200);

ajhauser · 08-25-2012, 12:01 AM

Awesome - so I think I'm well on my way here... all I have set up at this point is the following code to make the overlay initiate on my click:

Code:

$(document).ready(function() {
	$("a[rel]").overlay();
	$("img[rel]").overlay();
});

So both anchors and images can use the overlay effect. What is the correct way to add in what you mentioned to this chunk of code? I have no idea what the syntax is - but I think this is what I'm trying to add:

Code:

$('#FullScreenDimmedOverlay').show(200);

My display:none div is set up as follows in the CSS file:

Code:

#FullScreenDimmedOverlay {
	position: fixed;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	background-color: #F00;
	z-index: 9000;
	display: none;
}

Thanks very much!

devnull69 · 08-25-2012, 06:36 AM

What is that .overlay() plug-in method doing?

The CSS for the overlay should have an opacity (e.g. 0.7)

ajhauser · 08-26-2012, 08:13 PM

Well, I'm not entirely sure... this is the chunk that I got from jQuery Tools that makes it work:

Code:

(function(a){a.tools=a.tools||{version:"v1.2.7"},a.tools.overlay={addEffect:function(a,b,d){c[a]=[b,d]},conf:{close:null,closeOnClick:!0,closeOnEsc:!0,closeSpeed:"fast",effect:"default",fixed:!a.browser.msie||a.browser.version>6,left:"center",load:!1,mask:null,oneInstance:!0,speed:"normal",target:null,top:"10%"}};var b=[],c={};a.tools.overlay.addEffect("default",function(b,c){var d=this.getConf(),e=a(window);d.fixed||(b.top+=e.scrollTop(),b.left+=e.scrollLeft()),b.position=d.fixed?"fixed":"absolute",this.getOverlay().css(b).fadeIn(d.speed,c)},function(a){this.getOverlay().fadeOut(this.getConf().closeSpeed,a)});function d(d,e){var f=this,g=d.add(f),h=a(window),i,j,k,l=a.tools.expose&&(e.mask||e.expose),m=Math.random().toString().slice(10);l&&(typeof l=="string"&&(l={color:l}),l.closeOnClick=l.closeOnEsc=!1);var n=e.target||d.attr("rel");j=n?a(n):null||d;if(!j.length)throw"Could not find Overlay: "+n;d&&d.index(j)==-1&&d.click(function(a){f.load(a);return a.preventDefault()}),a.extend(f,{load:function(d){if(f.isOpened())return f;var i=c[e.effect];if(!i)throw"Overlay: cannot find effect : \""+e.effect+"\"";e.oneInstance&&a.each(b,function(){this.close(d)}),d=d||a.Event(),d.type="onBeforeLoad",g.trigger(d);if(d.isDefaultPrevented())return f;k=!0,l&&a(j).expose(l);var n=e.top,o=e.left,p=j.outerWidth({margin:!0}),q=j.outerHeight({margin:!0});typeof n=="string"&&(n=n=="center"?Math.max((h.height()-q)/2,0):parseInt(n,10)/100*h.height()),o=="center"&&(o=Math.max((h.width()-p)/2,0)),i[0].call(f,{top:n,left:o},function(){k&&(d.type="onLoad",g.trigger(d))}),l&&e.closeOnClick&&a.mask.getMask().one("click",f.close),e.closeOnClick&&a(document).on("click."+m,function(b){a(b.target).parents(j).length||f.close(b)}),e.closeOnEsc&&a(document).on("keydown."+m,function(a){a.keyCode==27&&f.close(a)});return f},close:function(b){if(!f.isOpened())return f;b=b||a.Event(),b.type="onBeforeClose",g.trigger(b);if(!b.isDefaultPrevented()){k=!1,c[e.effect][1].call(f,function(){b.type="onClose",g.trigger(b)}),a(document).off("click."+m+" keydown."+m),l&&a.mask.close();return f}},getOverlay:function(){return j},getTrigger:function(){return d},getClosers:function(){return i},isOpened:function(){return k},getConf:function(){return e}}),a.each("onBeforeLoad,onStart,onLoad,onBeforeClose,onClose".split(","),function(b,c){a.isFunction(e[c])&&a(f).on(c,e[c]),f[c]=function(b){b&&a(f).on(c,b);return f}}),i=j.find(e.close||".close"),!i.length&&!e.close&&(i=a("<a class=\"close\"></a>"),j.prepend(i)),i.click(function(a){f.close(a)}),e.load&&f.load()}a.fn.overlay=function(c){var e=this.data("overlay");if(e)return e;a.isFunction(c)&&(c={onBeforeLoad:c}),c=a.extend(!0,{},a.tools.overlay.conf,c),this.each(function(){e=new d(a(this),c),b.push(e),a(this).data("overlay",e)});return c.api?e:this}})(jQuery);

Kind of a mess...
This is the a link and an overlay piece that is "appearing"

Code:

<a href="" rel="#videoLightbox_a" >Presentation</a>

<div class="simple_overlay" id="videoLightbox_a"><a class="close"></a>
  <div class="VideoOverlay">
               	  <iframe src="http://player.vimeo.com/video/48086568?byline=0&amp;portrait=0" width="640" height="480" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  </div>
</div>

Hopefully that makes sense...
Thank you very much.

henryD6322 · 08-27-2012, 11:02 AM

Hi everyone, I actually know a little about overlays so I hope I could help in here. Overlays have disgusted me a lot and $('#overlay').show(200); actually solved it. If it does not, just manage to manipulate codes until the problem is overcome.

ajhauser · 08-29-2012, 08:23 AM

I'm sorry I don't follow.