We Keep Coding

Disable body scrolling on element

I created a floating sticky bootstrap panel at the bottom right of the screen. It look like a chat support like intercom. When I'm scrolling on the panel the body will scroll too. And it's really weird when I'm scrolling on mobile because I display the panel in full screen and we can scroll on the body while the panel is in fullscreen.
So I put pieces of code in my JS to enable / disable the body scrollbar :
if (...) {
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'scroll');
}
...
It works and it's overkill I think but I don't found better. But I have another problem. If I go on my mobile the chrome address bar will be hide when I scroll on the full screen panel and it's really ugly because the panel will be redrawed every time.
Do you know a better way to disable body scrolling when the cursor is on certain element (a magic css property ?) and disable auto hiding address bar of browsers ?
If you go on intercom with your mobile it's exactly what I want.

if you need to totally enable or disable scroll you must use this way:
if (...) {
$('html, body').css({ overflow: 'hidden', height: '100%' }); // to hide
} else {
$('html, body').css({ overflow: 'auto (or) scroll', height: 'auto' }); // to show
}
you must include html as just only body is not enough. Hope it helps.

How do I apply a browser-position to my code?

Earlier today I asked a question about my webpage being very 'jumpy'.
I've posted a test version of my webpage here: http://armandbakx.nl/
And a codepen can be viewed here: http://codepen.io/anon/pen/GpmQoY
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.content-container').addClass('no-scroll');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.content-container').removeClass('no-scroll');
$('.overlay').removeClass('opacity');
}
The idea of the page is that you click on an image (in this case a red square), resulting in a hidden container showing, which can be scrolled through, containing more information and images about this image.
However, when you click one of the squares, and the container and overlay show, the other images (squares) move. It was suggested to me that in my show function I should try and keep track of the position my browser was in when this container opened. Then in my hide function, return the browser to that position.
Truth to be told, I am not good with JavaScript AT ALL, so I'm pretty much clueless as to how I should apply this. I'm having more issues with this webpage and I have to fix them fast, hence I'm asking again. Could anybody help me with this?

From what I can tell, your squares are moving around because of the .no-scroll class. If I remove it, everything appears to work correctly.
try this:
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.overlay').removeClass('opacity');
}

In your show function, you can retrieve the scroll position before the Text is shown.
scrollHeight = $(document).scrollTop();
In your hide function, set the scroll position to the value you got previously.
$(document).scrollTop( scrollHeight );

Scroll a div from everywhere

I do not know how to describe my concern and thats why I could not find anything on Google. I want to draw a div is focused at page call immediately and if you press the scroll wheel to scroll this div also. Whether you are with the mouse over the div or outside.
sorry for my bad english, google translator .... embarrassing ^_^
Update: https://github.com/brandonaaron/jquery-mousewheel Thank you... thats worked on all browser but not on the ipad... is it possible on ipad? –

If you want to scroll the div even if the mouse is else where on the page try this plugin https://github.com/brandonaaron/jquery-mousewheel. Here is an example assuming your div has an id of content:
$(function() {
var $target = $('#content');
$("body").mousewheel(function(event, delta) {
$target.scrollTop($target.scrollTop() - (delta * 30));
event.preventDefault();
});
});
Quick fiddle: http://jsfiddle.net/5h47wygo/

Try using JQuery. On document ready you focus on the div. You make the div scrollable by setting the overflow property in css.
JQuery:
$(document).ready(function(){ $( "#scrollable_div" ).focus(); }
CSS:
#scrollable_div {
overflow: scroll;
}

jQuery dialog UI get closed when click on title

I'm using this below code for one of my website. I know there have lot of ways to create a dialog boxes. But for a some reason, I need to follow these structure.
//On click trigger a popup box
$('#terms').click(function(e){
popupBox(e);
});
//Create a Popup Box
function popupBox(e){
e.preventDefault();
$('body').width($('body').width());
$('body').css('overflow', 'hidden');
$('<div id="popupbox" title="Terms and Conditions"><!-- popupbox - Edit by Yesh --></div>').appendTo('body')
.html('<div><h1>Lorem Ipsum Title</h1></div><div><p>Lorem ipsum dolar sit amet </p></div><div><small>Read it before accept</small></div>')
.dialog({
modal: true, title: 'Terms and Conditions', zIndex: 9999, autoOpen: true,
width: '60%', resizable: false,
close: function (e) {
e.preventDefault();
$(this).remove();
$('body').css('overflow', 'auto');
},
});
}
Problem is when I click on the Title. It's get hidden (not closed). So, how to fix it?
Here my JSFIDDLE is working fine.

The problem is related to vertical scrolling.
You're probably scrolled down on the page when you open the dialog. When you then click the title bar of the dialog to drag it, the dialog jumps further down the page, usually hidden from view. The only way to get it to close is to press Esc. Your JSFiddle doesn't show the problem because it's not vertically tall enough to require scrolling.
Here's a modified version of your JSFiddle with vertical space added to illustrate the problem.
The solution, as described in this post, is to change the style of the dialog from position: absolute to position: fixed:
.ui-dialog { position: fixed; }
Here's another JSFiddle with the problem fixed.

It is near impossible to answer when there is no way to reproduce the issue you are facing. Try narrowing your problem down:
What browser are you using? Is the behaviour consistent on all browsers?
If the problem doesn't reproduce in jsfiddle, maybe the problem is not the code you put in jsfiddle. Try giving it more code from your page until the problem shows itself - then remove as much as you can to isolate the bug.
So in short, show us more code.

LightBox bug on opening

Hi while developing a lightbox for a website it seems I made an error in the creation of my code somewhere.If I click the lightbox two times it works normaly and everything is well.But when I try to open it a third time a bug seems to interfere.I have posted the code for the entire website on jsFiddle :
http://jsfiddle.net/Ywpdh/
Pay attention only on the "Login" button on the top right corner.When the Login button is clicked the lightbox appeares you can close it by clicking on the top right rectangle.The bug only appeares after the login button is clicked a third time.At this point the small rectangle seems to behave as if it's container is given the overflow:hidden property something that is not true.I have tested the code on all modern browser I get the same bug.Can someone please tell me what's going on?

Using firebug, the conatiner does get overflow: hidden when the exit div is clicked the 2nd time.
After reducing the code and commenting out It was the animation of width and height that are causeing the problem.
searching google for jquery aminate caused overflow: hidden i came accross this SO post
jQuery .animate() forces style "overflow:hidden"
So it appears you have to reset the overflow yourself
Updated your Fiddle
function lighbox(){
var width = $(window).width() / 2 - ($('div.lightbox').width() / 2);
var height = $(window).height()/2 - ($('div.lightbox').height() / 2);
var body = $('body');
body.css('overflowY','hidden');
$('div#bg-lightbox').fadeTo('slow',0.9)
$('div#lightbox').css({
'left':width,
'top':height,
'overflow': 'visible' // *** added this line
}).stop()
.animate({
'width':'+=500px',
'height':'+=250px',
'left':'-=300px',
'top':'-=200px',
'opacity':'1'
}, 'slow' , 'swing')