We Keep Coding

How avoid horizontal html scrolling when a layer is show

I have a div .layer that darkens the entire page to highlight a modal, but when I trigger the event there is a problem to occupying 100% of the screen, and is that the scroll bar of the original browser is deleted
Is there any fancy way to make the div .layer, when is visible, keep the original bar scroll of the page?
In smartphones / tablet I do not find any problem when shooting the event .layer").show(); but on desktop screens the original scroll bar of browser is eliminated and the whole html document moves to right, taking its place.
What would be the correct way to avoid html to the right?
Thanks in advance!
HTML:
<div class="layer"></div>
<div class="open-modal">Open</div>
<div class="modal">
<div class="close-modal">Close</div>
</div>
CSS:
html {width:100%;min-height:100%;margin:0 auto;top:0;left:0;padding:0}
body {top:0;left:0;margin:0;padding:0;min-height:100%}
.layer {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
min-height:100vh;
background:rgba(0,0,0,.9);
z-index:2
}
.modal {display:none;z-index:1}
SCRIPT:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer").show();
$("body").css("overflow","hidden");
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
$("body").css("overflow","");
});
});

You need to get rid of your use of "overflow". I've included a link below to the Mozilla Developer Network docs for "overflow", but below is a quick quote explaining what's happening.
"hidden
Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container."
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Also, after one cycle of clicking Open and Close, if you were to click Open again, the word Close won't show up. That's because you're not using the .show() method to show that text upon clicking Open. Updated JavaScript below.
JavaScript:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer,.close-modal").show();
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
});
});

Delay in bootstrap toggle menu

I have built a menu bar using bootstrap. In the responsive mode, when the toggle menu is activated, the menu list items comes up quickly while the background container comes with a delay. Similarly when the toggle mode is deactivated, the container disappears while the menu items disappear with a delay. I have uploaded a video of this issue here: Video
Kindly, please let me know how to solve this problem.

It is because your #custom-collapse in the main navigation section of your css has the overflow set to visible remove that and it should work fine.
#custom-collapse {
border: none;
box-shadow: none;
}
If you put the overflow to visible to remove the scrollbar you should maybe try
.navbar-collapse.in {
overflow-y: visible;
}

Affix Bootstrap falling onTop of Sub Navigation instead of above, Bootstrap

I cannot share the link to the webpage at the moment for confidental reasons but I will describe my issue as much as possible with the required code.
I am running the affix javscript from Bootstrap 3.3.6 and have built the page on anchor points so that the the menu stays affix right above a sub navigation.
My order of elements are:
[MAIN]
[HEADER]
[CAROUSEL]
[NAV]
[ABOUTBOX]
[CONTAINER/ROW]
[SUBNAV]
[LIBRARYBOX]
[CONTAINER/ROW2]
[SUBNAV2]
[CONTACTBOX]
[CONTAINER/ROW3]
[SUBNAV3]
[FOOTER]
[/MAIN]
The Affix JS I am using
//AffixJS
var tfv=$('#carousel-nmhead').offset().top+$('#carousel-nmhead').height();
$('#navbar-main').affix({
offset: {
top: tfv,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true));
}
}
});
CSS
.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
.affix-top {
position: static;
}
.affix-bottom {
position: absolute;
}
The Issue
Essentially the nav drops correctly right above my sub navigation as planned once the "affix" class is set
The moment it is still on "affix-top" then on the first click/interaction with the menu - the nav overlaps the sub navigation and it is only on the subsequent click that the nav will reposition itself anew
Attempted solutions
Add
negative margins/paddings,
create new anchor divs within the main 3 content divs
tried debugging this different or fixed heights on the containers instead of min-height 0 !important;
other minute misc. troubleshooting
gone through google dev tools to inspect and play around with the JS HTML and CSS but no luck
I am the only one working on CSS/JS at the firm and the only colleague with similar exp cannot comprehend why the Affix is not working on the first click/interaction with the nav but only on the subsequent ones
If you click on ABOUT (nav has About/Library/Contact as links) the page bounces down to About and if you click ABOUT a second time it scrolls up and since that is when the affix commences, the sub navigations suddenly pops out underneath.
Afterwards with the "affix" class set if you click on LIBRARY or CONTACT then you correctly bounce between them showing the sub navigation each time.
However if you click on ABOUT anew then the state goes back to the top of the page and you have click on the button twice again so that the sub navi pops out underneath
If this can't be trouble shooted without code I'll try to make a blank page so that we can clearly see the impact
Thanks a lot!

I had a similar issue with an affix not updating until I clicked somewhere in the body. I fixed it by adding $(element).affix('checkPosition')

Bootstrap 3 Modal with texarea inside. When tap/focus on textarea, the background scrolls to top. Only in iOS 8

I'm using Bootstrap 3.2.0.
I can show the modal just fine and the background stays in place. The modal contains a textarea. When I tap or focus on that textarea and the virtual keyboard comes up, the background scrolls to the top.
This only happens with iOS 8 and not iOS 7.
It's like iOS 8 wants to put whatever is focused on in the middle of the screen and it scrolls until that element is in the middle. It scrolls up and up and up until it hits the top THEN pulls the modal down a little.
Very frustrating. Has anyone experienced this yet? Any solutions?
Update: I'm thinking it has to do with the fact that the modal is fixed position and not absolute. iOS wants to put the focused element in the middle of the screen so it scrolls the viewport or document up until the element is in center but scrolling does nothing because the element is position fixed.

The solution for me was to set the modal involved to position:absolute; (by default it is position: fixed;) and instead of placing the modal at the bottom of my HTML by appending it to the body, I appended it to the parent element of the button that I clicked to show the modal. I also needed to ensure that the element that I was appending the modal into had a position of relative.
CSS
.modal.fade.my-special-modal {
position: absolute;
/* 'top' is not required but I did it for my taste */
top: 15px;
}
.my-special-modal-container {
position: relative;
}
HTML
<div class="my-special-modal-container">
<button>Show the modal</button>
<!-- js will inject the modal here -->
</div>
Thanks to #Christina for helping me discover this solution.

you can add this property globally:
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
}

jQuery Back-to-Top + StickyFloat + Fade-In on Scroll

I'm currently using jQuery Stickyfloat for a "back to top" button on a page that has alot of content. It works perfectly, however, the link is visible at the top when the user goes to the page. I would like it to be hidden on page load and when the user scrolls down (around 400px), it becomes visible and initiates the stickyfloat. When the user scrolls back up to the page, the link goes away.
The jQuery:
$('a#back-to-top').stickyfloat({duration: 150});
The HTML:
<div id="content">
// Content goes here
Top
</div>
The link is absolutely positioned to the main content div. The CSS:
#content {
position: relative;
}
a#back-to-top {
position: absolute;
top:0;
right:0;
}
How would I go about doing this?

You want to hide the floating element initially via CSS. You can probably initialize the stickyfloat like normal. Then you want to attach a handler to the scroll event of the element being scrolled (BODY, DIV..).
In the handler you want to check the scrollTop of the element. Once it reaches your desired height, fadeIn the floating element.
Vice-versa for hiding it.
.floating-element
{
display:none
}
$('el').scroll(function(e){
// check target.scrollTop...
// fade in target
})