This is a multi layered issue, not sure if it'll fly if I ask it all, but the issue I'm having is Lightbox related.
I am trying to get it working, when I click on an image, the img lightboxes open, but even with 'disableScrolling': true, it doesn't work. body does get overflow: hidden; from that lightbox option, but the page still scrolls.
So, I've got to figure out a hacky fix. I tried this js but it's not working:
$( ".smile-thumb-container" ).click(function() {
if($('body').hasClass('lb-disable-scrolling')) {
$('html').addClass('lb-overflow-fix');
} else {
$('html').removeClass('lb-overflow-fix');
}
});
I'm basically trying to say when I click on an img, body gets .lb-disable-scrolling. This is from Lightbox itself, now, I want to say when I click on the div that holds the img to check if <body> has .lb-disable-scrolling, which it'll have because lightbox does this. If body has that class, add a class to <html> called .lb-overflow-fix. When I close the img, <body> loses .lb-disable-scrolling so html should remove .lb-overflow-fix too.
.lb-overflow-fix in my css is overflow: hidden; I'm not sure why it works on <html> and not <body>.
I know actual sites aren't ideal, but I can't even get it working in a fiddle properly, so I have to assume my js is incorrect. This is the site the issue is on.
Because you set this CSS:
html {
overflow-x: hidden;
}
This changes how vertical scrolling is handled by default, and the result is that it's your <html> node that handles it, rather than the <body> node.
Remove that overflow-x: hidden; from the <html>, and suddenly your site works as intended.
It is a bad idea to hide horizontal overflow anyway, so I'd recommend not trying to.
Related
I have a problem. I have an Instagram feed by Instagrams API, which pulls image, likes, comments and description. The description under the image is shorted by this css:
#instagram-feed .meta-data p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #000;
}
I have also added a script which creates links on hashtags, so you can click them directly in the feed.
This works great. Until you are starting to tab the page. Since the text/hashtags is hidden after one row, it is still in the HTML-structure, just not visible.
So what happends when I am tab the the page and get to the Instagram feed is that the tabindex finds the hidden hashtags. But they are invisible. Only the focus frame shows around the hidden hashtags.
tabindex="-1" removes element from tabindex which I want to add to overflowing/hidden links, but I can't do this manually since the description is dynamically created. I need better CSS (If possible) or somekind of jQuery. But I have no idea how.
So my question is, how do I remove hidden links from tabindex? :)
Edit:
Trying this to see what elements is inside or outside the parent:
http://jsfiddle.net/fprm7mgd/8/. The link inside the third paragraph should be red.
On the site the position().left; in the third p is something like 670px, when running console.log. But in reality the a is about 130px right from its parent left side. It seems like position().left; goes from parent div, not from parent p...
The solution is to add... position:relative ... to the paragraphs.
position().left use its offset element, which in this case is <html>. In other words, position().left works exactly as position: absolute in CSS. If the parent is not position: relative it counts from the <html>-element.
Solution: http://jsfiddle.net/fprm7mgd/47/
I had no problems adding a Facebook/Twitter sharing buttons but right now Google+ is driving me crazy, WHEREVER i put this code on my page (using Bootstrap grid), i get a 2-3 pixels on the right creating an horizontal scrollbar:
<div class="g-plus" data-action="share" data-align="left" data-annotation="none"></div>
Plus Script code at the bottom of my page:
<script src="https://apis.google.com/js/platform.js" async defer>{lang: 'fr'}</script>
Any idea how to fix it? I've tried to put my div in another div with fixed width and stuff like that but no effect, the script is replacing the div and forcing all css regardless my attempts ... i have no idea what is replacing the original div and how to work on it.
I'm a bit lost here, help welcome, thanks.
I had a similar problem and this worked for me:
iframe[id^="oauth2relay"]{
display: none!important;
}
Taken from this tutorial: https://www.youtube.com/watch?v=4vYfnZ_XB8M
Try inspect the button and find out which element has the scrollbar and add this CSS on it.
overflow: visible;
this solved my problem
iframe[id^="oauth2relay"] { position: fixed !important; }
G+ button adds an iframe.
I have an HTML Document that looks a bit like this, only is far more complex and harder to control:
<body>
<div id="title">This div does not do anything, just stays at the top.</div>
<div id="container">
<div id="navigation">Some navigation</div>
<div id="content">Most of the content</div>
</div>
</body>
Then I have a stylesheet that includes the following:
#container
{
height: auto !important;
overflow: visible !important;
overflow-x: auto;
overflow-y: scroll;
position: relative;
width: auto !important;
}
This all works absolutely perfectly. The title section stays at the top of the page, the container div becomes scrollable if the content is long enough to need to scroll, otherwise it doesn't.
The problem is, that I am then using Javascript to add a whole lot more stuff to the content div. This means that the content div is getting longer than the page after it has loaded and this seems to mean, in IE8 at least, that the scrollbars on the container never get activated, so once the Javascript added content falls off the bottom of the page it becomes inaccessible.
It doesn't help that the minute I start tinkering with the IE developer tools, the scrollbars vanish altogether and I can't make them reappear, so it becomes somewhat hard to test.
I know IE8 has some issues with overflow-y.
You should try with this maybe.
-ms-overflow-y: scroll;
Hope that helps.
Hard to say if this will work without seeing more code, but why not remove the styles from your css and add them with javascript, once the content has loaded.
The solution that has worked was a simple hackaround of resizing the element with JavaScript to match the size it actually is once I have added the extra data to it, like this:
document.all['container'].style.height = document.documentElement.clientHeight+"px";
Of course, this doesn't entirely circumvent the problem- for that we need a new function:
function resizeResults()
{
var resultPanel=document.all["container"];
var topPanel=document.all["title"];
var newHeight= document.documentElement.clientHeight;
newHeight -= topPanel.clientHeight;
resultPanel.style.height=newHeight;
}
Then we can use window.attachEvent("onresize", resizeResults); to ensure that we don't lose the scrollbar or have it otherwise messed around when the user changes the window size.
Just remove the styles you have given for the element to make it scroll before loading ajax content to it.After loading ajax content then add those attributes again.
This is about the jQuery plugin ConceptMap:
https://github.com/allain/JavaScript-Concept-Map
There is also a rewrite of this plug-in by KNV:
https://github.com/knv/jquery-conceptmap-plugin
These plug-ins draw "concept maps." both demos show the maps at the top of the screen. however, if you put any html elements above the div container holding the map, the elements on the map get all messed up- their positions do not shift properly within the browser window in response to the html elements added at the top of the page.
I've tried contacting both developers for a fix but no response. I've messed around with the javascript code in these plug-ins with no success. anyone out there able to fix it? to reproduce the problem i'm seeing, all you have to do is download either plug-in package and edit the demos. just add an <h1> or any other html element to the top of the page above the <div id="container"> element. you'll see the map gets messed up after that.
thanks
J
the problem in http://knv.github.com/jquery-conceptmap-plugin/textarea.html
is in css,try use
#container {
background-color: #EEEEEE;
position: relative;
}
insteadof
#container {
background-color: #EEEEEE;
}
it must fix your problem, tell me if it is ok 8)
I have a HTML which has lot of content and a vertical scrollbar appears as soon as the HTML is loaded. Now from this HTML a full screen IFRAME is loaded. The problem is when the IFRAME is loaded, the parent scrollbar still persists, I want to disable the scrollbar when the Iframe is loaded.
I tried:
document.body.scroll = "no", it did not work with FF and chrome.
document.style.overflow = "hidden"; after this I was still able to scroll, and the whole iframe would scroll up revealing the parent HTML.
My requirement is, when the IFRAME is loaded, we should never be able to scroll the entire IFRAME if the parent HTML has a scrollbar.
Any ideas?
If you want to use the iframe's scrollbar and not the parent's use this:
document.body.style.overflow = 'hidden';
If you want to use the parent's scrollbar and not the iframe's then you need to use:
document.getElementById('your_iframes_id').scrolling = 'no';
or set the scrolling="no" attribute in your iframe's tag: <iframe src="some_url" scrolling="no">.
with css
body, html {
overflow: hidden
}
The following JavaScript could work:
var page = $doc.getElementsByTagName('body')[0];
To disable Scroll use:
page.classList.add('noscroll');
To enable Scroll use:
page.classList.remove('noscroll');
In the CSS file, add:
.noscroll {
position: fixed!important
}
add this css
body.disable-scroll {
overflow: hidden;
}
and when to disable run this code
$("body").addClass("disable-scroll");
and when to enabled run this code
$("body").removeClass("disable-scroll")
I know this is an ancient question, but I just thought that I'd weigh in.
I'm using disableScroll. Simple and it works like in a dream.
I have had some trouble disabling scroll on body, but allowing it on child elements (like a modal or a sidebar). It looks like that something can be done using disableScroll.on([element], [options]);, but I haven't gotten that to work just yet.
The reason that this is prefered compared to overflow: hidden; on body is that the overflow-hidden can get nasty, since some things might add overflow: hidden; like this:
... This is good for preloaders and such, since that is rendered before the CSS is finished loading.
But it gives problems, when an open navigation should add a class to the body-tag (like <body class="body__nav-open">). And then it turns into one big tug-of-war with overflow: hidden; !important and all kinds of crap.
Answer :
document.body.scroll = 'no';