Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post

    jQuery Tools - Overlay Problem

    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);
    Last edited by ajhauser; 08-23-2012 at 05:35 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,387
    Thanks
    11
    Thanked 565 Times in 558 Posts
    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);

  • #3
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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!

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,387
    Thanks
    11
    Thanked 565 Times in 558 Posts
    What is that .overlay() plug-in method doing?

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

  • #5
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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.

  • #6
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    I'm sorry I don't follow.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •