We Keep Coding

Body lock fullscreen section with slides

I have a one page website with sections. Using Swiper + body-scroll-lock to lock a middle section while the user swipes through the slides.
If user scrolls down the body lock should be active until last slide and vice versa if the user scrolls back to the top of the page.
// body lock while going down
window.addEventListener("scroll", function() {
var elementTarget = document.getElementById("the-dashboard");
if (window.scrollY > elementTarget.offsetTop + elementTarget.offsetHeight) {
$('html').addClass('no-scroll') // locks
}
});
// SWIPER
var leftSwiper = new Swiper(".swiper-container-left", {
direction: "vertical",
mousewheel: {
invert: true,
mousewheelReleaseOnEdges: true
},
allowTouchMove: false,
initialSlide: 3
});
var rightSwiper = new Swiper(".swiper-container-right", {
direction: "vertical",
mousewheel: true,
mousewheelReleaseOnEdges: true,
pagination: {
el: ".swiper-pagination"
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
rightSwiper.on("reachEnd", function() {
$('html').removeClass('no-scroll') // unlocks but the first lock still active and locks it again
});
Problem:
Unable to unlock screen again since user has "passed" the top of the div and not i.e "touched" the top of the div with window top.
Possible Solution:
A good way to body lock a section while reaching its top until the Swiper "reachEnd" event is triggered.
VIEW PEN: https://codepen.io/rulloliver/pen/LYPyxaM

A javascript solution can be found on this pen using mousewheel events: https://codepen.io/kaido24/pen/pozpGwR
Code:
window.addEventListener("scroll", function() {
$target = $("#swipes");
if (window.scrollY > $target[0].offsetTop && window.scrollY < $target[0].offsetTop + 150) {
$('html').addClass('no-scroll');
}
else {
$('html').removeClass('no-scroll');
}
});
var leftSwiper = new Swiper(".swiper-container-left", {
direction: "vertical",
/** mousewheel: {
invert: true,
mousewheelReleaseOnEdges: true
},
**/
allowTouchMove: false,
initialSlide: 3
});
var rightSwiper = new Swiper(".swiper-container-right", {
direction: "vertical",
/** mousewheel: true,
mousewheelReleaseOnEdges: true, */
pagination: {
el: ".swiper-pagination"
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
leftSwiper.on("slideNextTransitionStart", function() {
rightSwiper.slidePrev(500, false);
});
leftSwiper.on("slidePrevTransitionStart", function() {
rightSwiper.slideNext(500, false);
});
rightSwiper.on("slideNextTransitionStart", function() {
leftSwiper.slidePrev(500, false);
});
rightSwiper.on("slidePrevTransitionStart", function() {
leftSwiper.slideNext(500, false);
});
rightSwiper.on("reachEnd", function() {
});
rightSwiper.on("reachBeginning", function() {
});
var waiting = false;
$(window).bind('mousewheel', function(event) {
if ($('html').hasClass('no-scroll')) {
if (event.originalEvent.wheelDelta >= 0) {
if (waiting == false) {
l = leftSwiper.slideNext();
if (l == false) {
$('html').removeClass('no-scroll');
console.log('top');
console.log($(window));
} else {
waiting = true;
setTimeout(function () {
waiting = false;
},500);
}
}
}
else {
if (waiting == false) {
var r = rightSwiper.slideNext();
if (r == false) {
$('html').removeClass('no-scroll');
} else {
waiting = true;
setTimeout(function () {
waiting = false;
}, 500);
}
}
}
}
});
$(document).on('mousewheel', function() {
$(document).trigger('mousewheel');
});
(not by me)

Fancyapps overlay not showing

We are loading fancybox css file dynamically after page load and try to open fancybox with overlay active and custom html content.
Sometimes overlay doesn't appear. If we try to open fancybox with a delay, probability of getting no overlay is decreasing, but it is not totally gone away.
I have already created an issue for this problem: https://github.com/fancyapps/fancyBox/issues/1126
That's how we initialize fancybox:
var fancyboxParams = {
minHeight: 10,
width: params.width || 'auto',
height: params.height || 'auto',
autoSize: false,
autoWidth: params.width ? false : true,
autoHeight: params.height ? false : true,
autoHide: params.autoHide,
topRatio: params.topRatio || topRatio,
leftRatio: params.leftRatio || leftRatio,
title: title,
helpers: {
title: (title && params.windowStyle !== 'seamless') ? {
type: 'inside',
position: 'top'
} : null,
overlay: (params.overlay != "false") ? {} : null
},
content: notificationBody,
fixed: false, // HADDITION - scroll with the page 16.10.2015
wrapCSS: (params.cssClass || "") + " " + "fancybox-" + (params.windowStyle || "seamless"),
beforeShow: function () {
cssCode && $('<style />').html(params.cssCode).prependTo(this.outer);
try {
javascriptCode && eval(javascriptCode);
beforeShow.call(this); // change context
}
catch (err) {
$.fancybox.close(true);
}
},
afterClose: function () {
$(".fancybox-segmentify").remove();
}
};
if (params.isModal == 'true') {
fancyboxParams.closeBtn = false;
fancyboxParams.closeClick = false;
fancyboxParams.keys = null;
if (fancyboxParams.helpers.overlay) {
fancyboxParams.helpers.overlay.closeClick = false;
}
}
$.fancybox(fancyboxParams);

How to disable onload on this js

I'd like to disable onload the popup and show it only after clicking an url link (onlick="echoSec()" ).
I did the 2nd step, so after pressing the button it works good, but it shows at the page load too. I don't want that.
There is no onload function in the code.
Could you help me?
/*
* Project: jQuery echoSoc - Social Sharer init
* Description: echoSoc is light weight jQuery Plugin for Social Shares.
* Author: dvL-den
* License: Copyrights dvL-den. All rights reserved.
*/
;(function ($, window, document, undefined) {
// Create the defaults once
var pluginName = 'echoSoc';
var defaults = {
title : 'echoSoc Social Sharer',
facebook_button : true,
facebook_url : window.location.origin,
twitter_button : true,
twitter_url : window.location.origin,
twitter_message : 'echoSoc Social Sharer Tweet Message!',
google_button : true,
google_url : window.location.origin,
timeout : 30,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 60,
cookie_expire : 30,
close : false
};
// The actual plugin constructor
function EchoSoc(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
EchoSoc.prototype = {
init: function () {
// Plugin HTML Structure
$('body').append( //-->
'<div class="echoSoc_wrap">' +
'<div class="echoSoc_frame">' +
'<div class="echoSoc_title" />' +
'<div class="echoSoc_content">' +
'<div class="echoSoc_description" />' +
'<div class="echoSoc_countdown" />' +
'</div>' +
'</div>' +
'<div class="echoSoc_overlay" />' +
'</div>'
// <--
);
// Title as Text or as Image
$('.echoSoc_title').html(this.options.title);
// Countdown Structure
if (this.options.timeout > 0) {
$('.echoSoc_countdown').html(this.options.message + ' or wait <span />' + ' ' + 'seconds.');
} else {
$('.echoSoc_countdown').html(this.options.message);
}
$('<div />')
.addClass('echoSoc_buttons')
.appendTo('.echoSoc_description');
this._echoTrigger();
if (this.options.timeout > 0)
this._echoTimeout();
if (this.options.close) {
$(document).on('keydown', function (e) {
if (e.keyCode == 27) {
$('.echoSoc_wrap').fadeOut();
}
});
$('.echoSoc_overlay').css('cursor', 'pointer');
$('.echoSoc_overlay').on('click', function () {
$('.echoSoc_wrap').fadeOut();
});
}
},
_echoTrigger: function () {
if (!$.cookie('echoSoc')) {
$('.echoSoc_wrap').show();
$('.echoSoc_frame').fadeIn(500);
$('.echoSoc_overlay').fadeIn(100);
this._echoCenter();
this._echoSwitcher();
this._echoAsync();
this._echoEvents();
}
},
_echoSwitcher: function () {
if (this.options.facebook_button) {
$('<div />')
.addClass('echoFacebook')
.css({ 'width': '48', 'height': '20' })
.appendTo('.echoSoc_buttons');
$('.echoFacebook').append('<fb:like href="' + this.options.facebook_url + '" send="false" layout="button_count" width="50" show_faces="false" colorscheme="light"></fb:like>');
}
if (this.options.twitter_button) {
$('<div />')
.addClass('echoTwitter')
.css('width', '58')
.appendTo('.echoSoc_buttons');
$('.echoTwitter').append('Tweet');
}
if (this.options.google_button) {
$('<div />')
.addClass('echoGoogle')
.css('width', '32')
.appendTo('.echoSoc_buttons');
$('.echoGoogle').append('<g:plusone size="medium" href="' + this.options.google_url + '" callback="googleCB"></g:plusone>');
}
var socButtons = $('.echoSoc_buttons').find('div').length,
socNumber = $.trim(socButtons).slice(0, 1),
socSort_one = $('.echoSoc_buttons > div').eq(0),
socSort_two = $('.echoSoc_buttons > div').eq(1),
socSort_three = $('.echoSoc_buttons > div').eq(2),
buttons_wrap = $('.echoSoc_buttons');
if (socNumber == 3) {
buttons_wrap.css('width', '85%');
socSort_one.add(socSort_three).css('display', 'inline-block');
socSort_one.add(socSort_three).css({
'position': 'absolute',
'top': '10px',
'overflow': 'hidden'
});
socSort_two.css({
'position': 'relative',
'margin': '0 auto',
'overflow': 'hidden'
});
socSort_one.css({ 'left': '0' });
socSort_three.css({ 'right': '0' });
}
else if (socNumber == 2) {
buttons_wrap.css('width', '50%');
socSort_one.add(socSort_two).css('display', 'inline-block');
socSort_one.add(socSort_two).css({
'position': 'absolute',
'top': '10px',
'overflow': 'hidden'
});
socSort_one.css({ 'left': '0' });
socSort_two.css({ 'right': '0' });
}
else if (socNumber == 1) {
buttons_wrap.css('width', '50%');
socSort_one.css({
'position': 'relative',
'margin': '0 auto',
'overflow': 'hidden'
});
}
else {
buttons_wrap
.css('text-align', 'center')
.text('Error! Enable at least one Social Button!');
}
},
_echoTimeout: function () {
$('.echoSoc_countdown')
.find('span')
.addClass('timer')
.text(this.options.timeout);
var countdown = $('.timer'),
seconds = $('.timer').text(),
that = this,
timer = setInterval(function () {
countdown.text(--seconds);
if (seconds === 0) {
clearInterval(timer);
that._echoClose();
}
}, 1000);
},
_echoDestroy: function () {
$('.echoSoc_wrap').fadeOut(500);
},
_echoClose: function () {
this._echoDestroy();
if (this.options.reopen_task) {
var that = this;
setTimeout(function () {
$('.echoSoc_wrap').fadeIn(500);
that._echoTimeout();
that._echoCenter();
}, this.options.reopen_time * 1000);
}
},
_echoCenter: function () {
function reposition () {
var str_wrap = $('.echoSoc_wrap'),
str_frame = $('.echoSoc_frame');
str_frame.css({
top: Math.round(
str_wrap.height() / 2 -
str_frame.outerHeight() / 2 -
parseInt(str_frame.css('margin-top'), 10)
),
left: Math.round(
str_wrap.width() / 2 -
str_frame.outerWidth() / 2 -
parseInt(str_frame.css('margin-left'), 10)
)
});
}
if ( $('.echoSoc_wrap').length ) {
reposition();
$(window).on('resize', function () {
reposition();
});
}
},
_echoAsync: function () {
if (this.options.twitter_button) {
if (typeof (twttr) != 'undefined') {
twttr.widgets.load();
} else {
$.getScript('http://platform.twitter.com/widgets.js', function () {
twttr.ready(function (twttr) {
twttr.events.bind("tweet", twitterCB);
});
});
}
}
if (this.options.facebook_button) {
if (typeof (FB) != 'undefined') {
FB.init({ status: true, cookie: true, xfbml: true });
} else {
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
FB.init({ status: true, cookie: true, xfbml: true });
});
}
}
if (this.options.google_button) {
if (typeof (gapi) != 'undefined') {
$(".g-plusone").each(function () {
gapi.plusone.render($(this).get(0));
});
} else {
$.getScript('https://apis.google.com/js/plusone.js');
}
}
},
_echoEvents: function () {
var cookie_sum = parseInt(this.options.cookie_expire, 10);
window.fbAsyncInit = function () {
FB.Event.subscribe('edge.create', function(response) {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
});
};
googleCB = function() {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
};
twitterCB = function () {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
};
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new EchoSoc(this, options));
}
});
};
})(jQuery, window, document);
my html is only :
<a href="" onclick="echoSoc()" class="box_single_ability">
And this js is also included in index.html file
<script>
$(document).echoSoc({
title : '<h3>title</h3>',
facebook_button : true,
facebook_url : 'https://www.facebook.com/',
twitter_button : true,
twitter_url : 'twitterurl/',
twitter_message : 'Checking out this jQuery echoSoc plugin for social sharing by #Nenad_Novakovic (dvLden).',
google_button : true,
google_url : 'googleurl/',
timeout : 2,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 1,
cookie_expire : 30,
close : false
});
</script>

It has to do with when this.echoTrigger(); is being called. So, either remove that from init (not sure if that's the behaviour you want), or don't do your initialization step (the html snippet you posted) until a click happens. Currently init is being called

I am developer of this one and I know it's not built to function this way. However you can accomplish that by removing plugin call from your page(s) and move it within click event of desired button as triggerer.
HTML
<button type="button" id="echoSoc-trigger">Trigger Plugin</button>
jQuery
$('#echoSoc-trigger').on('click', function () {
$(document).echoSoc({
title : '<h3>CPA Elites - Viral Plugin</h3>',
facebook_button : true,
facebook_url : 'http://dvL-den.net/',
twitter_button : true,
twitter_url : 'http://dvL-den.net/',
twitter_message : 'Checking out this jQuery echoSoc plugin for social sharing by #Nenad_Novakovic (dvLden).',
google_button : true,
google_url : 'http://dvL-den.net/',
timeout : 30,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 60,
cookie_expire : 30,
close : false
});
});
This way it will work fine and it will call the plugin only when you click specified button, obviously.

Script that calls a jquery function before the library load

I have problems with a Jquery function.
I get the jquery library from google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
First, I put the following the code on a .js
(function($){
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend ({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each (function () {
$(this).bind('click', function(e) {
var submitBtn = $(this);
if($(this).attr("jconfirmed")){
submitBtn.removeAttr("jconfirmed");
}else{
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer]=function() {
$( this ).dialog( "close" );
if (thisHref!=null){
window.location = thisHref;
}else{
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer]=function() {
$( this ).dialog( "close" );
submitBtn.removeAttr("jconfirmed");
};
var content='<p>'+theOptions.question+'</p>';
if(theOptions.checkboxText!=undefined){
content='<p>'+'<input type="checkbox" id="cbox">'+theOptions.checkboxText+'<br/><br/>'+theOptions.question+'</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function() {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
And, in a jsp file call the function.
<script type="text/javascript">
$(document).ready(function() {
$('.confirm').jConfirmAction();
});
</script>
But i have the following error in console:
Uncaught TypeError: Object [object Object] has no method 'jConfirmAction'
I tried to fix this by putting the function code in the same jsp, between <script type="text/javascript"></script>. That works for some pages, but in others pages have the same error. Is there a way to call the function only if jquery has been loaded?

Wrap your entire JS code with document.ready()
$(document).ready(function () {
(function ($) {
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each(function () {
$(this).bind('click', function (e) {
var submitBtn = $(this);
if ($(this).attr("jconfirmed")) {
submitBtn.removeAttr("jconfirmed");
} else {
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer] = function () {
$(this).dialog("close");
if (thisHref !== null) {
window.location = thisHref;
} else {
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer] = function () {
$(this).dialog("close");
submitBtn.removeAttr("jconfirmed");
};
var content = '<p>' + theOptions.question + '</p>';
if (theOptions.checkboxText !== undefined) {
content = '<p>' + '<input type="checkbox" id="cbox">' + theOptions.checkboxText + '<br/><br/>' + theOptions.question + '</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function () {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
});
Include all your JS files at the end of the file and try again, and one side note ? use '!==' to compare variables with 'null' and 'undefined'

How can I know when imgAreaSelect is closed?

This is my imgSelectArea code:
ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
handles: true,
autoHide: false,
minChars: 0,
autoFill: true,
selectOnly: true,
mustMatch: true,
instance: true,
onInit: function (img, selection) {
$("#tagBox").css('display', 'none');
},
onSelectEnd: function (img, selection) {
$("#tagBox").show();
var x1 = selection.x1;
var y1 = selection.y1;
var x2 = selection.x2;
var y2 = selection.y2;
var position = $('#<%=imgMain.ClientID%>').position();
}
});
This works fine but I want to know when imgSelectArea is closed i.e when you click on overlay area, I want to get notified. I couldn't find this in documentation.
This is the documentation link:
http://odyniec.net/projects/imgareaselect/usage.html#callback-functions
Has anybody got around this issue?

Ok, I haven't got a working dev environment where I am so I can't test this but...
In jquery.imgareaselect.js (I'm using v0.9.8) around line 421:
function cancelSelection() {
$(document).unbind('mousemove', startSelection)
.unbind('mouseup', cancelSelection);
hide($box.add($outer));
setSelection(selX(x1), selY(y1), selX(x1), selY(y1));
if (!this instanceof $.imgAreaSelect) {
options.onSelectChange(img, getSelection());
options.onSelectEnd(img, getSelection());
}
/*ADD THIS LINE*/
options.onCancelSelection(img);
}
Also, around line 461, add a default, empty function:
...
onInit: function () {},
onSelectStart: function () {},
onSelectChange: function () {},
onCancelSelection: function () {}, /* Add This line */
onSelectEnd: function () {}
}, options));
You should then be able to register an event handler as usual...
ias = $('#<%=imgMain.ClientID%>').imgAreaSelect({
...
mustMatch: true,
instance: true,
onInit: function (img, selection) {
$("#tagBox").css('display', 'none');
},
onCancelSelection: function (img) {
/*Do something*/
},
...
});
That's about the best I can do in notepad/ie. If it's still an issue tomorrow, I'll have a go with a dev env.