Develop Reference

"Magnific Popup" and leaving when hovering a div that opens a popup

After closing the popup, the div should be hidden (and when the pop-up is open it really hides), but when the pop-up is closed, it becomes visible.
// Magnific Popup v1.1.0 by Dmitry Semenov
(function(a){typeof define=="function"&&define.amd?define(["jquery"],a):typeof exports=="object"?a(require("jquery")):a(window.jQuery||window.Zepto)})(function(a){var b="Close",c="BeforeClose",d="AfterClose",e="BeforeAppend",f="MarkupParse",g="Open",h="Change",i="mfp",j="."+i,k="mfp-ready",l="mfp-removing",m="mfp-prevent-close",n,o=function(){},p=!!window.jQuery,q,r=a(window),s,t,u,v,w=function(a,b){n.ev.on(i+a+j,b)},x=function(b,c,d,e){var f=document.createElement("div");return f.className="mfp-"+b,d&&(f.innerHTML=d),e?c&&c.appendChild(f):(f=a(f),c&&f.appendTo(c)),f},y=function(b,c){n.ev.triggerHandler(i+b,c),n.st.callbacks&&(b=b.charAt(0).toLowerCase()+b.slice(1),n.st.callbacks[b]&&n.st.callbacks[b].apply(n,a.isArray(c)?c:[c]))},z=function(b){if(b!==v||!n.currTemplate.closeBtn)n.currTemplate.closeBtn=a(n.st.closeMarkup.replace("%title%",n.st.tClose)),v=b;return n.currTemplate.closeBtn},A=function(){a.magnificPopup.instance||(n=new o,n.init(),a.magnificPopup.instance=n)},B=function(){var a=document.createElement("p").style,b=["ms","O","Moz","Webkit"];if(a.transition!==undefined)return!0;while(b.length)if(b.pop()+"Transition"in a)return!0;return!1};o.prototype={constructor:o,init:function(){var b=navigator.appVersion;n.isLowIE=n.isIE8=document.all&&!document.addEventListener,n.isAndroid=/android/gi.test(b),n.isIOS=/iphone|ipad|ipod/gi.test(b),n.supportsTransition=B(),n.probablyMobile=n.isAndroid||n.isIOS||/(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent),s=a(document),n.popupsCache={}},open:function(b){var c;if(b.isObj===!1){n.items=b.items.toArray(),n.index=0;var d=b.items,e;for(c=0;c<d.length;c++){e=d[c],e.parsed&&(e=e.el[0]);if(e===b.el[0]){n.index=c;break}}}else n.items=a.isArray(b.items)?b.items:[b.items],n.index=b.index||0;if(n.isOpen){n.updateItemHTML();return}n.types=[],u="",b.mainEl&&b.mainEl.length?n.ev=b.mainEl.eq(0):n.ev=s,b.key?(n.popupsCache[b.key]||(n.popupsCache[b.key]={}),n.currTemplate=n.popupsCache[b.key]):n.currTemplate={},n.st=a.extend(!0,{},a.magnificPopup.defaults,b),n.fixedContentPos=n.st.fixedContentPos==="auto"?!n.probablyMobile:n.st.fixedContentPos,n.st.modal&&(n.st.closeOnContentClick=!1,n.st.closeOnBgClick=!1,n.st.showCloseBtn=!1,n.st.enableEscapeKey=!1),n.bgOverlay||(n.bgOverlay=x("bg").on("click"+j,function(){n.close()}),n.wrap=x("wrap").attr("tabindex",-1).on("click"+j,function(a){n._checkIfClose(a.target)&&n.close()}),n.container=x("container",n.wrap)),n.contentContainer=x("content"),n.st.preloader&&(n.preloader=x("preloader",n.container,n.st.tLoading));var h=a.magnificPopup.modules;for(c=0;c<h.length;c++){var i=h[c];i=i.charAt(0).toUpperCase()+i.slice(1),n["init"+i].call(n)}y("BeforeOpen"),n.st.showCloseBtn&&(n.st.closeBtnInside?(w(f,function(a,b,c,d){c.close_replaceWith=z(d.type)}),u+=" mfp-close-btn-in"):n.wrap.append(z())),n.st.alignTop&&(u+=" mfp-align-top"),n.fixedContentPos?n.wrap.css({overflow:n.st.overflowY,overflowX:"hidden",overflowY:n.st.overflowY}):n.wrap.css({top:r.scrollTop(),position:"absolute"}),(n.st.fixedBgPos===!1||n.st.fixedBgPos==="auto"&&!n.fixedContentPos)&&n.bgOverlay.css({height:s.height(),position:"absolute"}),n.st.enableEscapeKey&&s.on("keyup"+j,function(a){a.keyCode===27&&n.close()}),r.on("resize"+j,function(){n.updateSize()}),n.st.closeOnContentClick||(u+=" mfp-auto-cursor"),u&&n.wrap.addClass(u);var l=n.wH=r.height(),m={};if(n.fixedContentPos&&n._hasScrollBar(l)){var o=n._getScrollbarSize();o&&(m.marginRight=o)}n.fixedContentPos&&(n.isIE7?a("body, html").css("overflow","hidden"):m.overflow="hidden");var p=n.st.mainClass;return n.isIE7&&(p+=" mfp-ie7"),p&&n._addClassToMFP(p),n.updateItemHTML(),y("BuildControls"),a("html").css(m),n.bgOverlay.add(n.wrap).prependTo(n.st.prependTo||a(document.body)),n._lastFocusedEl=document.activeElement,setTimeout(function(){n.content?(n._addClassToMFP(k),n._setFocus()):n.bgOverlay.addClass(k),s.on("focusin"+j,n._onFocusIn)},16),n.isOpen=!0,n.updateSize(l),y(g),b},close:function(){if(!n.isOpen)return;y(c),n.isOpen=!1,n.st.removalDelay&&!n.isLowIE&&n.supportsTransition?(n._addClassToMFP(l),setTimeout(function(){n._close()},n.st.removalDelay)):n._close()},_close:function(){y(b);var c=l+" "+k+" ";n.bgOverlay.detach(),n.wrap.detach(),n.container.empty(),n.st.mainClass&&(c+=n.st.mainClass+" "),n._removeClassFromMFP(c);if(n.fixedContentPos){var e={marginRight:""};n.isIE7?a("body, html").css("overflow",""):e.overflow="",a("html").css(e)}s.off("keyup"+j+" focusin"+j),n.ev.off(j),n.wrap.attr("class","mfp-wrap").removeAttr("style"),n.bgOverlay.attr("class","mfp-bg"),n.container.attr("class","mfp-container"),n.st.showCloseBtn&&(!n.st.closeBtnInside||n.currTemplate[n.currItem.type]===!0)&&n.currTemplate.closeBtn&&n.currTemplate.closeBtn.detach(),n.st.autoFocusLast&&n._lastFocusedEl&&a(n._lastFocusedEl).focus(),n.currItem=null,n.content=null,n.currTemplate=null,n.prevHeight=0,y(d)},updateSize:function(a){if(n.isIOS){var b=document.documentElement.clientWidth/window.innerWidth,c=window.innerHeight*b;n.wrap.css("height",c),n.wH=c}else n.wH=a||r.height();n.fixedContentPos||n.wrap.css("height",n.wH),y("Resize")},updateItemHTML:function(){var b=n.items[n.index];n.contentContainer.detach(),n.content&&n.content.detach(),b.parsed||(b=n.parseEl(n.index));var c=b.type;y("BeforeChange",[n.currItem?n.currItem.type:"",c]),n.currItem=b;if(!n.currTemplate[c]){var d=n.st[c]?n.st[c].markup:!1;y("FirstMarkupParse",d),d?n.currTemplate[c]=a(d):n.currTemplate[c]=!0}t&&t!==b.type&&n.container.removeClass("mfp-"+t+"-holder");var e=n["get"+c.charAt(0).toUpperCase()+c.slice(1)](b,n.currTemplate[c]);n.appendContent(e,c),b.preloaded=!0,y(h,b),t=b.type,n.container.prepend(n.contentContainer),y("AfterChange")},appendContent:function(a,b){n.content=a,a?n.st.showCloseBtn&&n.st.closeBtnInside&&n.currTemplate[b]===!0?n.content.find(".mfp-close").length||n.content.append(z()):n.content=a:n.content="",y(e),n.container.addClass("mfp-"+b+"-holder"),n.contentContainer.append(n.content)},parseEl:function(b){var c=n.items[b],d;c.tagName?c={el:a(c)}:(d=c.type,c={data:c,src:c.src});if(c.el){var e=n.types;for(var f=0;f<e.length;f++)if(c.el.hasClass("mfp-"+e[f])){d=e[f];break}c.src=c.el.attr("data-mfp-src"),c.src||(c.src=c.el.attr("href"))}return c.type=d||n.st.type||"inline",c.index=b,c.parsed=!0,n.items[b]=c,y("ElementParse",c),n.items[b]},addGroup:function(a,b){var c=function(c){c.mfpEl=this,n._openClick(c,a,b)};b||(b={});var d="click.magnificPopup";b.mainEl=a,b.items?(b.isObj=!0,a.off(d).on(d,c)):(b.isObj=!1,b.delegate?a.off(d).on(d,b.delegate,c):(b.items=a,a.off(d).on(d,c)))},_openClick:function(b,c,d){var e=d.midClick!==undefined?d.midClick:a.magnificPopup.defaults.midClick;if(!e&&(b.which===2||b.ctrlKey||b.metaKey||b.altKey||b.shiftKey))return;var f=d.disableOn!==undefined?d.disableOn:a.magnificPopup.defaults.disableOn;if(f)if(a.isFunction(f)){if(!f.call(n))return!0}else if(r.width()<f)return!0;b.type&&(b.preventDefault(),n.isOpen&&b.stopPropagation()),d.el=a(b.mfpEl),d.delegate&&(d.items=c.find(d.delegate)),n.open(d)},updateStatus:function(a,b){if(n.preloader){q!==a&&n.container.removeClass("mfp-s-"+q),!b&&a==="loading"&&(b=n.st.tLoading);var c={status:a,text:b};y("UpdateStatus",c),a=c.status,b=c.text,n.preloader.html(b),n.preloader.find("a").on("click",function(a){a.stopImmediatePropagation()}),n.container.addClass("mfp-s-"+a),q=a}},_checkIfClose:function(b){if(a(b).hasClass(m))return;var c=n.st.closeOnContentClick,d=n.st.closeOnBgClick;if(c&&d)return!0;if(!n.content||a(b).hasClass("mfp-close")||n.preloader&&b===n.preloader[0])return!0;if(b!==n.content[0]&&!a.contains(n.content[0],b)){if(d&&a.contains(document,b))return!0}else if(c)return!0;return!1},_addClassToMFP:function(a){n.bgOverlay.addClass(a),n.wrap.addClass(a)},_removeClassFromMFP:function(a){this.bgOverlay.removeClass(a),n.wrap.removeClass(a)},_hasScrollBar:function(a){return(n.isIE7?s.height():document.body.scrollHeight)>(a||r.height())},_setFocus:function(){(n.st.focus?n.content.find(n.st.focus).eq(0):n.wrap).focus()},_onFocusIn:function(b){if(b.target!==n.wrap[0]&&!a.contains(n.wrap[0],b.target))return n._setFocus(),!1},_parseMarkup:function(b,c,d){var e;d.data&&(c=a.extend(d.data,c)),y(f,[b,c,d]),a.each(c,function(c,d){if(d===undefined||d===!1)return!0;e=c.split("_");if(e.length>1){var f=b.find(j+"-"+e[0]);if(f.length>0){var g=e[1];g==="replaceWith"?f[0]!==d[0]&&f.replaceWith(d):g==="img"?f.is("img")?f.attr("src",d):f.replaceWith(a("<img>").attr("src",d).attr("class",f.attr("class"))):f.attr(e[1],d)}}else b.find(j+"-"+c).html(d)})},_getScrollbarSize:function(){if(n.scrollbarSize===undefined){var a=document.createElement("div");a.style.cssText="width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(a),n.scrollbarSize=a.offsetWidth-a.clientWidth,document.body.removeChild(a)}return n.scrollbarSize}},a.magnificPopup={instance:null,proto:o.prototype,modules:[],open:function(b,c){return A(),b?b=a.extend(!0,{},b):b={},b.isObj=!0,b.index=c||0,this.instance.open(b)},close:function(){return a.magnificPopup.instance&&a.magnificPopup.instance.close()},registerModule:function(b,c){c.options&&(a.magnificPopup.defaults[b]=c.options),a.extend(this.proto,c.proto),this.modules.push(b)},defaults:{disableOn:0,key:null,midClick:!1,mainClass:"",preloader:!0,focus:"",closeOnContentClick:!1,closeOnBgClick:!0,closeBtnInside:!0,showCloseBtn:!0,enableEscapeKey:!0,modal:!1,alignTop:!1,removalDelay:0,prependTo:null,fixedContentPos:"auto",fixedBgPos:"auto",overflowY:"auto",closeMarkup:'<button title="%title%" type="button" class="mfp-close">×</button>',tClose:"Close (Esc)",tLoading:"Loading...",autoFocusLast:!0}},a.fn.magnificPopup=function(b){A();var c=a(this);if(typeof b=="string")if(b==="open"){var d,e=p?c.data("magnificPopup"):c[0].magnificPopup,f=parseInt(arguments[1],10)||0;e.items?d=e.items[f]:(d=c,e.delegate&&(d=d.find(e.delegate)),d=d.eq(f)),n._openClick({mfpEl:d},c,e)}else n.isOpen&&n[b].apply(n,Array.prototype.slice.call(arguments,1));else b=a.extend(!0,{},b),p?c.data("magnificPopup",b):c[0].magnificPopup=b,n.addGroup(c,b);return c};var C="inline",D,E,F,G=function(){F&&(E.after(F.addClass(D)).detach(),F=null)};a.magnificPopup.registerModule(C,{options:{hiddenClass:"hide",markup:"",tNotFound:"Content not found"},proto:{initInline:function(){n.types.push(C),w(b+"."+C,function(){G()})},getInline:function(b,c){G();if(b.src){var d=n.st.inline,e=a(b.src);if(e.length){var f=e[0].parentNode;f&&f.tagName&&(E||(D=d.hiddenClass,E=x(D),D="mfp-"+D),F=e.after(E).detach().removeClass(D)),n.updateStatus("ready")}else n.updateStatus("error",d.tNotFound),e=a("<div>");return b.inlineElement=e,e}return n.updateStatus("ready"),n._parseMarkup(c,{},b),c}}});var H,I=function(){return H===undefined&&(H=document.createElement("p").style.MozTransform!==undefined),H};a.magnificPopup.registerModule("zoom",{options:{enabled:!1,easing:"ease-in-out",duration:300,opener:function(a){return a.is("img")?a:a.find("img")}},proto:{initZoom:function(){var a=n.st.zoom,d=".zoom",e;if(!a.enabled||!n.supportsTransition)return;var f=a.duration,g=function(b){var c=b.clone().removeAttr("style").removeAttr("class").addClass("mfp-animated-image"),d="all "+a.duration/1e3+"s "+a.easing,e={position:"fixed",zIndex:9999,left:0,top:0,"-webkit-backface-visibility":"hidden"},f="transition";return e["-webkit-"+f]=e["-moz-"+f]=e["-o-"+f]=e[f]=d,c.css(e),c},h=function(){n.content.css("visibility","visible")},i,j;w("BuildControls"+d,function(){if(n._allowZoom()){clearTimeout(i),n.content.css("visibility","hidden"),e=n._getItemToZoom();if(!e){h();return}j=g(e),j.css(n._getOffset()),n.wrap.append(j),i=setTimeout(function(){j.css(n._getOffset(!0)),i=setTimeout(function(){h(),setTimeout(function(){j.remove(),e=j=null,y("ZoomAnimationEnded")},16)},f)},16)}}),w(c+d,function(){if(n._allowZoom()){clearTimeout(i),n.st.removalDelay=f;if(!e){e=n._getItemToZoom();if(!e)return;j=g(e)}j.css(n._getOffset(!0)),n.wrap.append(j),n.content.css("visibility","hidden"),setTimeout(function(){j.css(n._getOffset())},16)}}),w(b+d,function(){n._allowZoom()&&(h(),j&&j.remove(),e=null)})},_allowZoom:function(){return n.currItem.type==="image"},_getItemToZoom:function(){return n.currItem.hasSize?n.currItem.img:!1},_getOffset:function(b){var c;b?c=n.currItem.img:c=n.st.zoom.opener(n.currItem.el||n.currItem);var d=c.offset(),e=parseInt(c.css("padding-top"),10),f=parseInt(c.css("padding-bottom"),10);d.top-=a(window).scrollTop()-e;var g={width:c.width(),height:(p?c.innerHeight():c[0].offsetHeight)-f-e};return I()?g["-moz-transform"]=g.transform="translate("+d.left+"px,"+d.top+"px)":(g.left=d.left,g.top=d.top),g}}}),A()})
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8; }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-hide {
display: none !important; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!doctype html>
<head>
<style>
.div_show {
height: 33px; width: 198px; background-color: rgb(0, 123, 209);
position: absolute;
transition: bottom .3s;
bottom: -33px;
}
.hoverside:hover .div_show{
bottom: 0px;
}
.hoverside {
background-color: rgb(255, 255, 255);
width: 200px;
height: 150px;
border-radius: 3px;
border: 1px solid #dddddd;
float: left;
position: relative;
overflow: hidden;
}
.popup{
width: 400px;
height:150px;
background-color: #f5f5f5;
position: absolute;
bottom: 40%;
left: 50%;
}
</style>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.popup-content').magnificPopup({
type: 'inline'
});
});
</script>
<div>
<div class="hoverside">
<a href="#popup" class="popup-content">
<div class="div_show">
<p class="link">Click</p>
</div>
</a>
<div id="popup" class="popup mfp-hide">
<h3>Popup</h3>
</div>
</div>
</div>
Point to the area, the blue div appears. Make a click. A pop-up window appears and the blue div disappears. Ok, that's what I need. But when you close the pop-up window, the blue div will reappear. How to fix it?

use the default plugin css. after that just active the plugin. then do cuatomize what you need.
here are the repo http://dimsemenov.com/plugins/magnific-popup/

If you set to autoFocusLast: true last focused element before popup show up will be focused after popup close. You can set autoFocusLast: false for hiding the last focused element.
Example demo: https://codepen.io/rubel/pen/ZZQved
See more information: https://dimsemenov.com/plugins/magnific-popup/documentation.html#autofocuslast

Text flickers when replacing an image (css and jquery)

The transition of the text becoming visible over an image when hovering over the image, was smooth before I put the image and the text into one div. I put the image and text into one div so that I could position the text on top of the image. The transition is now shaky--do you know how I can fix this? Thank you.
$(document).ready(function() {
$("img").hover(function() {
$("img").stop().animate({
"opacity": "0"
}, "slow");
$(".text").css("visibility", "visible");
},
function() {
$("img").stop().animate({
"opacity": "1"
}, "slow");
$(".text").css("visibility", "hidden");
});
});
#image {
display: block;
margin: 0 auto;
height: 35%;
width: 35%;
padding-left: 5%;
overflow: hidden;
}
#imageblock {
position: relative;
overflow: hidden;
}
.text {
color: #000000;
text-align: center;
font-family: "Raleway";
font-size: 90%;
visibility: hidden;
position: absolute;
padding: 3%;
width: 100%;
bottom: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageblock">
<img id="image" src="http://2016.igem.org/wiki/images/8/81/T--Sydney_Australia--Peek_Banner.png">
<div class="text">
<h5>NBB4 ethylene</h5>
</div>
</div>

Bind the hover event to #imageblock instead of the images:
$(document).ready(function() {
$("#imageblock").hover(function() {
console.log("enter");
$("img").stop().animate({"opacity": "0"}, "slow");
$(".text").css("visibility", "visible");
}, function() {
console.log("leave");
$("img").stop().animate({"opacity": "1"}, "slow");
$(".text").css("visibility", "hidden");
});
});
#image {
display: block;
margin: 0 auto;
height: 35%;
width: 35%;
padding-left: 5%;
overflow: hidden;
}
#imageblock {
position: relative;
overflow: hidden;
}
.text {
color: #000000;
text-align: center;
font-family: "Raleway";
font-size: 90%;
visibility: hidden;
position: absolute;
padding: 3%;
width: 100%;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageblock">
<img id="image" src="http://2016.igem.org/wiki/images/8/81/T--Sydney_Australia--Peek_Banner.png">
<div class="text">
<h5>NBB4 ethylene</h5>
</div>
</div>
So what was going on? You bound the hover event on the image - and - you have an invisible text block covering part of the image. When you hover on the image somewhere in the middle, the hover event is fired making the text visible. Now that text covers the image making the image no longer hovered triggering the second event handler which makes the text invisible. The image is now hovered again and you have a flickers! Notice that there is no flickering if you mouse over around the edges of image i.e. the area not covered by text.

jQuery .toggle stacking styles

I have a problem where I'm using .toggle to slide elements up and down, the problem is when i try to move my cursor quickly over the items it gets messed up. The id of the element is removed and I get custom styling assigned by jQuery.
<div class="ui-effects-wrapper" style="font-size: 100%; border: none; margin: 0px; padding: 0px; width: 160px; height: 60px; float: none; position: relative; z-index: auto; top: -50px; left: auto; bottom: auto; right: auto; overflow: hidden; display: block; background: transparent;">Novi test</div>
How do I fix this? I've tried using .stop but it doesn't solve the problem. I've tried reducing the animation time but the problem persists.
.js code
$(document).ready(function(){
$('.journal-entry').hover(function(){
var name = $(this).attr('name');
$(this).find('div').stop()
$(this).find('div').toggle("slide", { direction: "down" }, 200).html(name);
}, function(){
$(this).find('div').stop();
$(this).find('div').toggle("slide", { direction: "down" }, 200);
});
});
HTML
<li class="col-md-3 journal-entry" name="Name of the img">
<a href="#">
<img class="journal-img" src="imgsrc">
<div id="journal-img-title">Novi test</div>
</a>
</li>

I fixed it by changing the selector and adding a class
$('.journal-entry').hover(function(){
var name = $(this).attr('name');
$("a",this).children('.titler').toggle("slide", { direction: "down" }, 200).html(name);
}, function(){
$("a",this).children('.titler').toggle("slide", { direction: "down" }, 200);
});

jQuery - Text and Image scrolling effects are not working

http://honghanhdinh.com/
I am currently developing my website and I am running into some troubles with some of the parallax tutorials I am learning.
As you can see, the plane and the words to my name "Hong" appears on on the opening page but the other 2 parts of my name "Hanh Dinh" only appears when beginning to scroll down. In addition, the plane also disappears upon scrolling and flys out from the right to the left.
I don't want the plane to appear upon entering the website but for it to naturally slide out to the left when scrolling down. I also want my full name "Hong Hanh Dinh" to appear upon entering the website--not just the Hong part.
I've tried many things to fix it but I think I'm missing something.
Here is the beginning of HTML code:
<BODY>
<!--Begin about info--!>
<MAIN>
<section id="bg" data-speed="10" data-type="background">
<div id="plane">
<img src="http://www.locanto.info/classifieds/images/airplane.png">
</div>
<div id="parallax2">
<h2 id="center" class="parallax2">Hong</h2>
<h2 id="left" class="parallax2">Hanh</h2>
<h2 id="right" class="parallax2">Dinh</h2>
</div>
</section>
Here is my CSS:
#bg {
background-color: #FFFFFF;
background-size
}
#parallax2 {
height: 800px;
margin-bottom: 600px;
overflow: hidden;
padding-top: 200px;
}
/* Parallax Scrolling text */
#center.parallax2 {
font-size: 175px;
color: #CC3333;
opacity: 0.5;
text-align: center;
left: 200px;
padding: 0;
position: relative;
bottom: 100px;
}
#left.parallax2 {
color: #336699;
font-size: 200px;
text-align: left;
left: 400px;
opacity: 0.75;
overflow: hidden;
position: relative;
}
#right.parallax2 {
color: #C5C3DE;
font-size: 250px;
text-align: right;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 1200px;
bottom: -300px;
}
This is the jQuery for the "Hong Hanh Dinh" scrolling:
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween(
'#parallax2',
(new TimelineLite()).append([
TweenMax.fromTo($('#left.parallax2'), 1, {
css: {
top: 200
},
immediateRender: true
}, {
css: {
top: -900
}
}),
TweenMax.fromTo($('#right.parallax2'), 1, {
css: {
top: 500
},
immediateRender: true
}, {
css: {
top: -1800
}
})
]), 1000 // scroll duration of tween
);
});
This is the jQuery for the flying plane:
$(document).ready(function() {
$(window).scroll(function() {
console.log($(this).scrollTop());
$('#plane').css({
'width': $(this).scrollTop(),
'height': $(this).scrollTop()
});
});
});
Please let me know if my error is in the CSS or in the jQuery. Thank you!

I think you could fix this by adding width: 0; and overflow: hidden; to your div#plane. Otherwise, follow these steps:
Step 1:
Remove the img tag from the plane div, it is not needed. Add the id to the img tag itself.
<img id="plane" src="http://www.locanto.info/classifieds/images/airplane.png">
Step 2:
#plane{
position: fixed;
right: -WIDTH OF IMAGE;
}
Step 3:
$(document).ready(function() {
$(window).scroll(function() {
$('#plane').css({
'right': $(this).scrollTop() - WIDTH OF IMAGE,
});
});
});

Your name "Hanh Dinh" does exist when it loads but it is out of our range of sight, change this line:
css: {
top: 200
}
To a number like -400 and you'll see it'll appear on screen.
(That is for Hanh, for Dinh you'll need a larger number like -900.

div popup not working

What I am doing wrong?
When you click on class divtop, it should show a div popup in the middle of the page. At that time back page should become not clickable. escape or a button in popup will close it.
<html lang="en" class=" en">
<head>
<title>My Test Popup</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.divtop
{
width: 800px;
height: 300px;
border:solid;
}
.divbottom
{
top: 400px;
}
.localmenu {
border: 1px solid black;
background: #fff;
margin-left : auto;
top: 50px; width: 300px;
padding-top: 25px;
margin-top: 100px;
height: 150px;
}
.appContent{
width: 800px;
border:solid;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.maincontent{
width: 100%;
}
</style>
</head>
<body>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
<div id="popup" style="width : 100%; height: 600px;display: none;">
<div class='localmenu'>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().css("top", "500px").animate({top: 50}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
});
});
</script>
</body>
</html>

Fiddle
I added some CSS to your #popup and it's now all in the CSS (not inline in the html). Changed also your jQuery animate to 50px, instead of just 50.
I think you have small adjustments to do to the CSS, like in .localmenu I'm not sure why you have both padding-top: 25px; margin-top: 100px;.
CSS
#popup {
position:absolute;
display: none;
float: left;
left:30%;
z-index:1;
}
#popoverlay {
position: fixed;
display:none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
jQuery
$(document).ready(function () {
$('.divtop').click(function () {
$('#popoverlay').show();
$('#popup').show().css("top", "500px").animate({
top: "50px"
}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function () {
$('#popup').hide();
$('#popoverlay').hide();
});
});
HTML
<div class="appContent">
<div class="maincontent">
<div class="divtop">Top</div>
<div class="divtop divbottom">Bottom</div>
</div>
<div id="popup">
<div class='localmenu'>Text in Div Popup
<br/>
<button id="btnHide">Close</button>
<br/>
</div>
</div>
</div>

To get it to work properly, even if there is a vertical scroll bar, you have to use position "fixed". Place popup as a direct child of body and make it's position: fixed, and width and height 100%. Place localmenu as a direct child of body as well. Working example at jsbin.
Html:
<div id="popup">
<!--// This is to stop the user from interacting with the content in the back
// and to give a visual clue about that
-->
</div>
<div class='localmenu'>
<div>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
</div>
CSS:
//Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
#popup {
position: fixed;
width: 100%;
height: 100%;
display: none;
background: black;
opacity: .5;
top: 0;
left: 0;
}
//This is just to be able to center the actual menu
.localmenu {
top: 20%;
left: 0;
width: 100%;
position: fixed;
height: 150px;
display: none;
}
.localmenu > div {
border: 1px solid blue;
background: #fff;
margin-left : auto;
margin-right: auto;
width: 300px;
height: 150px;
}
Javascript: (This is mostly the same, although I removed the animate, because I don't know exactly how it works and it needs to end at 'top: 0'. As localmenu and popup are seperate, we show them seperate as well.)
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().animate(200);
$('.localmenu').show();
//$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
$('.localmenu').hide();
});
});

To block the div tags at the back from being clickable:
Add a div with the following style in your HTML. Im gonna call it overlay.
.overlay {
width: 100%;
height: 100%;
background-color: #000;
left: 0;
opacity: .8;
position: absolute;
top: 0;
z-index: 10000;
display: none;
}
This will essentially cover up your page when shown up.
To center your popup:
I added some extra styles to #popup and removed some from .localmenu. You were missing position: absolute and z-index, added those in. (z-index of popup must be > z-index of overlay)
#popup {
background: #fff;
position :absolute;
left : 40%;
width : 300px;
height: 600px;
height: 150px;
display: none;
z-index: 10001;
}
.localmenu
{
border: 1px solid black;
}
Then, in your JS,
In your animate method, I changed 50px to 30% to center div#popup
Added code to hide and show .overlay along with #popup.
After the changes,
$(document).ready(function () {
$('.divtop').click(function () {
$('#popup').show().css("top", "500px").animate({
top: "30%"
}, 200);
$('.overlay').show();
});
$('#btnHide').click(function () {
$('#popup,.overlay').hide();
});
});
Demo
http://jsbin.com/olasog/1
Code
http://jsbin.com/olasog/1/edit

Try this:
$(document).ready(function() {
$('.divtop').click(function() {
var div = $('.appContent');
$('.localmenu').css({'margin': '200px auto'});
$('#popup').show().css({top: "500px", position: 'absolute', width: div.width(), height: div.height()}).animate({top: 0}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('.mainContent').css("background-color", "");
$('#popup').hide();
});
});