Please take a look at this site: removed per request
When you click Learn More, the Fancybox lightbox window pops up and looks fine, but when you click the right arrow on the lightbox, a scrollbar shows up for just an instant (it reaches all the way to the top of the doctor's picture). This is happening on Chrome and Safari.
I can't figure out what code to write to not show that scrollbar. The content will never be long enough to need a scrollbar (except on mobile, etc). Another option would be to just have the scrollbar stop at the top of the content container (not go all the way up to the top of the dr's picture). Please help if you can; it would be much appreciated!! I'm a newb to jQuery/Javascript. Thank you!!
You can try to solve this with CSS. Set overflow: hidden on the container div. This will hide any content that overflows the container, so use with care.
Related
When using Codepen on a mobile device (with the pen in fullscreen mode), the menu stays fixed at the top of the page while the rest of the content scrolls behind it. On inspecting the element, there does not seem to be any position:fixed or position:absolute being set nor any inline styles being written by Javascript. I can't see any properties which would seem to be defining this behaviour.
So how have they made the menu sticky like this? And if you were able to find out: how did you find out? As a junior dev it's just as helpful to know the way a solution was found as it is to know the solution :)
Could you show us at least a screenshot of what you are trying to reproduce and a sample of what you have tried so far ?
If you looked a little more in detail, you'd see that the view is inside an iframe, so the scrolling actually occurs inside the iframe, that's why the menu holds still on top. You could have noticed that the scrollbar is actually inside the iframe too.
See the image below:
I'm creating my web-page by using fullpageJs https://alvarotrigo.com/fullPage/ plugin, and trying to make accordion FAQ page.
Basically the accordion refers to https://bootsnipp.com/snippets/QXdqR
The problem is when accordion exceeds the page height, the scrollbar doesn't work properly. (I'm activating "scrollOverflow" option)
Here is my current jQuery:
$(document).ready(function() {
$('.accordion').find('.accordion-toggle').click(function() {
$(this).next().slideToggle('600');
$(".accordion-content").not($(this).next()).slideUp('600');
});
$('.accordion-toggle').on('click', function() {
$.fn.fullpage.reBuild();
$(this).toggleClass('active').siblings().removeClass('active');
});
});
I just added $.fn.fullpage.reBuild();, trying to solve the problem.
However, I'm still stucking with three problems below;
It works only when the scrollbar is originally shown in the screen. (When "Q" content exceeds the height of screen)
Whole accordion move to unpredicted position after opening & closing answer.
(This happens when scrollbar originally isn’t displayed on the screen and then exceeds the height when the accordion opens. (This is hard to explain in words, and I hope the explanation makes sense…))
It seems adding $.fn.fullpage.reBuild(); makes the page slow to load. (especially on mobile). Is there any way to solve this?
By the way, I could get an ideal result when I resized browser each time after opening & closing answers.
...That’s it.
I would appreciate it very much if someone taught me any suggestions.
Try this:
$('#fullpage').fullpage({
scrollOverflow: true
});
I'm currently trying to implement a feed of posts, where clicking on a post would open a modal. I'm using angular as a frontend framework and decided to use the bootstrap modal, since it works well with angular. Problem is, that the modal forces the body to scroll to top when showing. This is ofcourse not ideal when scrolling through a feed.
The css line below is the culprit. Why this causes the problem to occur, i do not know, but i kind of need the scrollbar to be always showing. Loaading of dynamic content would otherwise make my layout jump around.
html {
overflow-y: scroll;
}
Removing this line is fine right now, but i need to find a fix soon, as the layout would jump horizontally when loading new content, if the scrollbar is not always visible and then suddenly appearing. Does anyone have any clue as to why this causes the problem, and how i can possibly fix it?
Sounds like the modal is the problem. Make sure your modal or its outer-most container has position: fixed, as it sounds like it is disrupting the flow of the <body> element.
I'm using mootools to create a scrollbar for content example code can be seen here
http://jsfiddle.net/scottmwilliams1/jSZDJ/1/
At the moment the scrollbar appears whatever the length of the content. I need to change the code so that the scrollbar disappears if the content is short and doesn't require scrolling. Mootool version needs to remain the same. Can anyone help. Thanks
Like this? http://jsfiddle.net/CqrFp/
I updated your fiddle implementing that feature.
Try to remove some text and see how the scrollbar disappears.
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!