i want to annimate 3 divs when the user scroll down the page, i followed many ttorials, it didn't work any suggestions how to do it, because the divs haz a defined css classes this is the divs . i wante them to fade up or down or any cool anniation how to acomplish this . please .
<section >
<div class="container">
<h1> PRODUITS </h1>
<div class="row">
<a href="pehdeauFrame.php">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">Tubes PEHD pour Eaux </h4>
<img id="imgeaudiv" src="assets/images/diveau.jpg">
</div>
</div>
</div>
</a>
<a href="pehdTelecomFrame.php">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">PEHD pour gaine Fibre Optique</h4>
<img id="imgeaudiv" src="assets/images/divtelecom.jpg">
</div>
</div>
</div>
</a>
<a href="http://www.mansouriplast.com/">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">Tubes PVC</h4>
<img id="imgeaudiv" src="assets/images/divpvc.jpg">
</div>
</div>
</div>
</a>
</div>
</div>
</section>
I suppose you can find out how to make it on this website:
https://css-tricks.com/aos-css-driven-scroll-animation-library/
This javascript will allow you to move a div.
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
and this will allow you to make an object appear (fade) on scroll:
$('.back-to-top').css({"display": "none"});
jQuery(document).ready(function() {
var offset = 25;
var duration = 300;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
So, what you may want is:
$('#mudivsho').css({"display": "none"});
jQuery(document).ready(function() {
var offset = 25; /* pixels you have to scroll to the div show up (fade) [you can change] */
var duration = 300; /* Duration of the fade (you can change) */
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('#mudivsho').fadeIn(duration);
} else {
jQuery('#mudivsho').fadeOut(duration);
}
});
jQuery('#mudivsho').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
See if this works.
you can animate like this.
$("document").ready(function(){
$(window).scroll(function(){
$("#mudivsho1").animate({left: "10%",top: "30%",width: "20%",height: "30%",margin: "0 10%"}, 500);
$("#mudivsho2").animate({left: "50%",top: "50%",width: "40%",height: "30%",margin: "0 20%"}, 500);
$("#mudivsho3").animate({left: "100%",top: "70%",width: "80%",height: "30%",margin: "0 30%"}, 500);
});
});
Demo: http://codesheet.org/cs/ZWLNfwqa
Related
I want to trigger a JQuery event when the user scrolls across a div for the firs time.
I have tried using waypoint. It is not working. Here is the code, it gives no error.
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
}
})
HTML code:
<body>
<!-- main content -->
<div id="push"></div>
<section class="grey darken-4 valign-wrapper">
<div class="container valign">
<div class="col s12">
<h2 class="center-align white-text">Hey!</h2>
<div class="divider"></div>
<p class="center-align white-text flow-text developer"></p>
</div>
</div>
</div>
</section>
<div id="main">
<div class="container" style="padding-top:8px">
<h2 class="center black-text darken-4">Profile</h2>
<h4 class="center teal-text darken-4">
I love to Code <a class="pulse btn-floating"><i class="material-icons">favorite</i></a>
</h4>
<div class="divider"></div>
<div class="row" style="padding-top:5%">
<div class="col s4">
<h4 class=" teal-text darken-4">About me</h4>
<p class="flow-text me" style="font-size:20px">
</p>
</div>
<div class="col s4">
<img src="Images/Aarth.jpg" alt="" class="circle responsive-img">
</div>
<div class="col s4">
<h4 class="teal-text darken-4" style="padding-left:11%">Details</h4>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Name:</strong>
<span class="name "></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Age:</strong>
<span class="age"></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Location:</strong>
<span class="location"></span>
</p>
</div>
</div>
</div>
</div>
</body>
Here are the approaches I have used till now, but nothing worked
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
Help would be great!
To use waypoints, bear in mind there needs to be enough scroll room for the top of the "main" div to hit the top of the viewport. This will vary depending on the size of the browser window the user has open. You can set a % offset from the top of the viewport to make it trigger when the element is a certain distance from the top.
If your "main" div is the last element, you can also use the special "bottom-in-view" offset to make it work once the scroll hits the bottom of the page, even if the top of "main" can't reach the top of the viewport:
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
},
offset: "bottom-in-view"
});
All of this information is available in the documentation. See http://imakewebthings.com/waypoints/api/offset-option/ for more details
I am unable to get the height of my navigation.
Attempt #1:
$("#process-link").click(function() {
$('html, body, #project-container').animate({
scrollTop: $("#process-work").offset().top
}, 2000 + $("nav#primary").height());
});
Attempt #2:
var headerHeight = $("nav#primary").height();
$.address.change(function(evt) {
var target = "#" + evt["pathNames"][0]; //Get the target from the event data
// If there's been some content requested go to it…else go to the top
if(evt["pathNames"][0]) {
var scrollToPosition = $(target).offset().top - headerHeight;
$('html, body, #project-container').animate({ 'scrollTop': scrollToPosition }, 600);
} else {
$('html, body, #project-container').animate({ 'scrollTop': '0' }, 600);
}
return false;
});
Attempt #3
$(function() {
$('#process-link').click(function() {
$("html, body, #project-container").animate({
scrollTop: $( "#process-work" ).offset().top + $('nav#primary').height()
}, 2000);
return false;
});
});
HTML
<nav id="primary">Content</nav>
<div id="arrow-nav" class="container-full clearfix">Content</div>
<div id="project">
<div id="project-container">
<div class="container">
<section>
<p class="sm-title">Client:</p>
<h2 id="project-title"></h2>
<p id="project-description"></p>
<a id="process-link">View Process <i class="fa fa-long-arrow-right"></i></a>
<div class="row">
<div id="process-work">
<div class="col-6 fixme">
<h2 id="process-title">Process Work</h2>
<p id="process-description"></p>
</div>
<div class="col-6">
<div id="process-wireframes" class="owl-theme owl-carousel"></div>
</div>
</div><!-- end process-work-->
</div>
</section>
</div>
</div><!-- end project container -->
</div><!--closes project-->
I'm trying to make it so once #process-link is clicked it slides you to #process-work and calculates the height of nav#primary and #arrow-nav and offsets accordingly.
This javascript currently achieved what I wanted to do. I grouped all div elements into one called #project-content and calculated the height of that plus the nav. Because the page is fixed it was causing issues.
HTML
<div id="project-content">
<p class="sm-title">Client:</p>
<h2 id="project-title"></h2>
<p id="project-description"></p>
<div style="background:#919191" class="hr"></div>
<a id="project-link" target="_blank">View Website <i class="fa fa-long-arrow-right"></i></a>
<a id="process-link" data-type="slideTo" data-target="process-work">View Process <i class="fa fa-long-arrow-right"></i></a>
<div id="project-tag"></div>
<div id="project-images"></div>
</div><!--end project content-->
Javascript
$('#process-link').click(function() {
$("html, body, #project-container").animate({
scrollTop: $('nav#primary').height() + $("#arrow-nav").height() + $("#project-content").height() + 30
}, 2000);
return false;
});
Look at the OP to see the divs that also exist in the document and what I am calculating. #project-container has padding-top:60px; which I think also affected the offset, which is why I added 30.
I created an onboarding walkthrough tour for use in a SaaS App that is being loaded with A/B testing software. The tour automatically begins on initial page load. The user can close the tour at any time. I have used localStorage so the browser will recall at what point the user exits the page and that tour will start again at the further point in the tour. I also have a "replay" button that is disabled when the tour is running and enabled when the tour is finished or closed. The replay button's selector is ".tstour-replay". I am animating the movement of the tour steps by adding a class that is using CSS3 #keyframes rules and then delaying the removal of the class so that the animation will repeat if the user goes back and uses that Next animation again. Those are referred to as "popover-ani1", "popover-ani2" and so on.
I am having an issue that is not consistently happening so I cannot find a pattern that explains why it's happening. Sometimes, the Next and Back buttons of the individual tour modals, referred to in the code as #popoverid1, #popoverid2, and so on or #popoverback1, #popoverback2, and so on, will be disabled. They do not respond to clicks and they both have CSS hover effects that do not work properly. However, the close button, .popover-close, always works. I cannot figure out why sometimes the Next and Back buttons are just completely unclickable and lose their interactivity while the Close button is always fine.
I am fairly new to JavaScript and jQuery.
Here's my JavaScript code:
function tourFunction() {
$(".tstour-replay").addClass("tstour-replay-disable");
$("#tstour-start").click(function(){
//if clicked, do nothing
});
$("#popoverid1").click(function() {
$(".popover1").addClass("popover1-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover1").removeClass("popover1-ani");
}, 250);
});
$("#popoverid2").click(function() {
$(".popover2").fadeOut(50);
$(".popover3").delay(50).fadeIn(50);
});
$("#popoverback2").click(function() {
$(".popover2").addClass("popoverback2-ani").delay(200).fadeOut(50);
$(".popover1").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover2").removeClass("popoverback2-ani");
}, 250);
});
$("#popoverid3").click(function() {
$(".popover3").addClass("popover3-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popover3-ani");
}, 250);
});
$("#popoverback3").click(function() {
$(".popover3").addClass("popoverback3-ani").delay(200).fadeOut(50);
$(".popover2").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover3").removeClass("popoverback3-ani");
}, 250);
});
$("#popoverid4").click(function() {
$(".popover4").addClass("popover4-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popover4-ani");
}, 250);
});
$("#popoverback4").click(function() {
$(".popover4").addClass("popoverback4-ani").delay(200).fadeOut(50);
$(".popover3").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover4").removeClass("popoverback4-ani");
}, 250);
});
$("#popoverid5").click(function() {
$(".popover5").addClass("popover5-ani").delay(200).fadeOut(50);
$(".popover6").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popover5-ani");
}, 250);
});
$("#popoverback5").click(function() {
$(".popover5").addClass("popoverback5-ani").delay(200).fadeOut(50);
$(".popover4").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover5").removeClass("popoverback5-ani");
}, 250);
});
$("#popoverid6").click(function() {
$(".popover6").addClass("popover6-ani").delay(200).fadeOut(50);
$(".popover7").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popover6-ani");
}, 250);
});
$("#popoverback6").click(function() {
$(".popover6").addClass("popoverback6-ani").delay(200).fadeOut(50);
$(".popover5").delay(250).fadeIn(50);
setTimeout(function() {
$(".popover6").removeClass("popoverback6-ani");
}, 250);
});
}
function tourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
$(".tstour-replay").addClass("tstour-replay-disable");
$(".popover1").fadeIn("fast");
});
}
function disableTourReplay() {
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
}
//END FUNCTIONS
$(".popover-btn-start").click(function() {
$(".tour-container").fadeOut();
$(".popover7").fadeOut();
$(".tstour-replay").removeClass("tstour-replay-disable");
$("#tstour-start").click(function() {
//if clicked, do nothing
});
tourReplay();
});
$(".popover-close").click(function(){
$(".tour-container").fadeOut();
$(".popover").fadeOut();
tourReplay();
});
//BEGIN FUNCTION TRIGGERS
var trigger_flag = localStorage.getItem('tstour');
if (!trigger_flag) {
disableTourReplay();
$(".popover1").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '1') { //clicked next1
disableTourReplay();
$(".popover2").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '2') { //clicked next2
disableTourReplay();
$(".popover3").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '3') { //clicked next3
disableTourReplay();
$(".popover4").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '4') { //clicked next4
disableTourReplay();
$(".popover5").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '5') { //clicked next5
disableTourReplay();
$(".popover6").fadeIn("fast");
tourFunction();
} else if (trigger_flag == '6' || '7') { //got to last popover, finished tour or closed out
tourReplay();
}
//END FUNCTION TRIGGERS
//BEGIN LOCAL STORAGE SET
$(document).on("click", "#popoverid1", function(e){
localStorage.setItem('tstour', '1');
});
$(document).on("click", "#popoverid2", function(e){
localStorage.setItem('tstour', '2');
});
$(document).on("click", "#popoverid3", function(e){
localStorage.setItem('tstour', '3');
});
$(document).on("click", "#popoverid4", function(e){
localStorage.setItem('tstour', '4');
});
$(document).on("click", "#popoverid5", function(e){
localStorage.setItem('tstour', '5');
});
$(document).on("click", "#popoverid6", function(e){
localStorage.setItem('tstour', '6');
});
$(document).on("click", ".popover-btn-start", function(e){
localStorage.setItem('tstour', '7');
});
$(document).on("click", ".popover-close", function(e){
localStorage.setItem('tstour', '7');
});
And here is the HTML
<div class="tour-centered">
<div id="tstour-start" class="tstour-replay">How Does This Work?</div>
<div class="popover popover1">
<div class="popover-right">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Employees On Your Calendar</div>
<div class="popover-body">Here's Jane Deaux, a sample employee. I preloaded some events for her in your calendar.</div>
<div class="popover-footer">
<div class="popover-progress">1 of 6</div>
<div class="popover-buttons">
<div class="popover-next" id="popoverid1">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover2">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Calendar Events</div>
<div class="popover-body">Notice Jane's name on the calendar. Each listing is a scheduled or pending calendar event.
<br />
<br />Hover your mouse over her name to quickly see the event details.</div>
<div class="popover-footer">
<div class="popover-progress">2 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback2">Back</div>
<div class="popover-next" id="popoverid2">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover3">
<div class="popover-above">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add a New Calendar Event</div>
<div class="popover-body">Double-click on any day to create a new calendar event. Use Jane to try it out and deduct hours from her time-off banks.
<br /><br />Give it a try. I'll wait right here until you're done.<br /></div>
<div class="popover-footer">
<div class="popover-progress">3 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback3">Back</div>
<div class="popover-next" id="popoverid3">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover4">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Create More Calendar Events</div>
<div class="popover-body">Great job! You can also click this icon to create more calendar events.</div>
<div class="popover-footer">
<div class="popover-progress">4 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback4">Back</div>
<div class="popover-next" id="popoverid4">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover5">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Customize Your Calendar</div>
<div class="popover-body">Visit Preferences to customize your calendar event codes, create time-off plans, and much more.</div>
<div class="popover-footer">
<div class="popover-progress">5 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback5">Back</div>
<div class="popover-next" id="popoverid5">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover6">
<div class="popover-below">
<div id="popover-close" class="popover-close">
</div>
<div class="popover-content">
<div class="popover-title">Add More Employees</div>
<div class="popover-body">When you're ready, add more of your employees and create calendar events for them.
<br />
<br />The more employees you load and track, the easier it is to avoid scheduling conflicts.</div>
<div class="popover-footer">
<div class="popover-progress">6 of 6</div>
<div class="popover-buttons">
<div class="popover-back" id="popoverback6">Back</div>
<div class="popover-next" id="popoverid6">Next</div>
</div>
</div>
</div>
</div>
</div>
<div class="popover popover7">
<div class="popover-content-final">
<div class="popover-title-final">Ready to Take Back Your Time?</div>
<div class="popover-btn-start">Start Tracking!</div>
<div class="popover-help">
<a href="https://tracksmart.zendesk.com/hc/en-us/requests/new" target="_blank">
I Need Some Help
</a></div>
</div>
</div>
</div>
I am using the jQuery Isotope and Swipe plugin for a Photo gallery. I want to reload all the items when i close the gallery Swipe but there is a problem. All the items aren't reload very well and when i try to select a new category of items, they just split far from the others. I try lot of things like isotope('reloadItems'), isotope('reLayout') but without success.
I don't know where the problem come.
This pages will show you what i mean : http://digitale-photographie.fr/portfolio.php
Also, code samples:
portfolio.php
<div id="sort">
Tous
Soirée
Mariage
Portrait
Grossesse
Publicité
Industrie
</div>
<div id="photogrid">
<?php
for ($j=0;$j<=$i-1;$j++)
{
$image_mini = '<img src="photos/portfolio/thumbnails/'.$tab_image_mini[$j].'" />';
echo '<div class="thumbnail '.$tab_class[$j].'" data-background="photo.image.large"><a class="thumb">'.$image_mini.'</a></div>';
}
?>
</div>
<div id="mainimage">
<div id='photos' class='swipe'>
<div class='swipe-wrap'>
<?php
for ($j=0;$j<=$i-1;$j++)
{
echo '<div class="img '.$tab_class[$j].'" data-image="photos/portfolio/zoom/'.$tab_image_zoom[$j].'" data-width="1024" data-height="702">
<div class="ui photoinfo hidden">
<!-- Photo Title & Description -->
<h2 class="phototitle">Runaway...</h2>
<!-- Metadata -->
<ul class="metadata"></ul>
</div>
</div>';
}
?>
</div>
</div>
<div class="ui button backbutton hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
<p>Retourner à la galerie</p>
</div>
<div class="ui photonav button prev hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
</div>
<div class="ui photonav button next hidden">
<div class="chevron">
<div class="upper"></div>
<div class="lower"></div>
</div>
</div>
</div>
js code
$(document).ready(function() {
$(window).load(function(){
var $container = $('#photogrid');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('#sort a').click(function(){
var selector = $(this).attr('data-filter');
/*$('.img').isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});*/
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
});
// hide photo view with back button
$('.backbutton').click(function() {
// Hide photo layer and current photo
mainimageElement.removeClass('visible black');
$('.ui').addClass('hidden');
if (isTouchDevice()) {
headerElement.removeClass('hidden');
}
$('#photogrid').isotope( 'reloadItems' ).isotope();
mainimageElement.removeAttr('style');
thumbnailElements.removeAttr('style');
sortElement.removeAttr('style');
headerElement.removeClass('opaque');
setHeaderOpacity();
// put selected thumbnail back in its place
retractThumbnail(selectedThumbnail);
retractThumbnail(selectedSort);
setTimeout(function() {
// animate in other thumbnails
var delay = 0;
thumbnailElements.each(function() {
delay = delay + 10;
var $this = $(this);
setTimeout(function() {
$this.removeClass('background');
}, delay);
});
}, 1)
});
Thanks for helping :)
How do I get the middle block (the block where it says: "hallo") like the image:
How it is:
How I want it:
jsfiddle + script: http://jsfiddle.net/mWmsU/
html:
<div id="container">
<div class="overlay"></div>
<div class="btnbar">
<div class="btn" id="it1"><div class="btnp" id="txt"></div><h2>Knopje 1</h2></div>
<div class="btn" id="it2"><div class="btnp"></div><h2>Knopje 2</h2></div>
<div class="btn" id="it3"><div class="btnp"></div><h2>Knopje 3</h2></div>
<div class="btn" id="it4"><div class="btnp"></div><h2>Knopje 4</h2></div>
<div class="btn" id="it5"><div class="btnp"></div><h2>Knopje 5</h2></div>
<div class="btn" id="it6"><div class="btnp"></div><h2>Knopje 6</h2></div>
<div class="btn" id="it7"><div class="btnp"></div><h2>Knopje 7</h2></div>
</div>
<div class="largebar">
<div class="pointer"></div>
<div class="largebarcontent">
<h1 id="title">Hallo</h1>
</div>
</div>
</div>
It should like a littlebit like ios home screen
Use this... and see the HTML and CSS of the demo...
$(function(){
var currentItem;
var plusLeft;
$(window).bind("resize", resizeWindow);
resizeWindow();
// $(".overlay.largeOpen").css("height", $("body").height());
$(".btn").click(openItem);
$(".overlay").click(function(){
$(currentItem).css("z-index", 9);
$(".row").css("padding-bottom", 0);
$("#"+currentItem.id + " h2").css("visibility", "visible");
$("#container, .overlay").toggleClass("largeOpen");
$(".btn").click(openItem);
});
$("#txt").text(window.innerWidth);
function openItem(){
currentItem = this;
$('html,body').animate({
scrollTop: $(this).position().top
}, 700);
$("#container").toggleClass("largeOpen");
$(this).parent().css("padding-bottom", 100);
$(".pointer").css("left", $(this).position().left+plusLeft);
$(".largebar").css("top", $(this).position().top+117);
$(this).css("padding-button", "117px");
$(this).css("z-index", 101);
$("#"+currentItem.id + " h2").css("visibility", "hidden");
// console.log($(this).css('z-index') == 10);
$(".btn").unbind('click');
}
function resizeWindow(e) {
if(currentItem){
$(".pointer").css("left", $("#"+currentItem.id).position().left+plusLeft);
$(".largebar").css("top", $("#"+currentItem.id).position().top+117);
}
$(".overlay.largeOpen").css("height", $("body").height());
if(window.innerWidth <= 320) plusLeft = 9;
if(window.innerWidth > 320) plusLeft = 20;
}
});
And see this DEMO