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:
Related
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 have been searching about this problem from last week...all I could found is this " overflow-x :hidden "
Here is my site : seriesratings.com
when I open it in my iphone, it shows me horizontal scrollbar.
I tried this already:
html,body{overflow-x:hidden;overflow-y:scroll}
someone has told me this "You have inline styles all over your html that will not be properly fixed by using css"
I can not change style now because site is fully developed.
does someone has any other way, like hide horizontal scrollbar with jquery or JS or any other code.
At the sg-site-header-1 I found a H1 with an A tag in it, this thing causes the horizontal scroll-bar, why should you make a color #blank? This is not working, then make is display: invisible or something like that. Hopefully this will work for you!
#dutchsociety Thanks A Lot, you saved me, If you have time can you tell me how did you find out the solution to the problem, so I can do it by myself..
I opened my element inspector in Google Chrome and deleting sections of the website. So on that moment I deleted the header and saw that there was the long sized H1.
I'm trying to resolve a problem that I encountered with the creation of a tooltip interface in a website I'm developing. I constructed the tooltips with help of HTML, CSS and JavaScript. The script is pretty simple as you can see in the fiddle underneath, and is based on a toggle behaviour, on witch a trigger element open a pop-up tooltip.
jsFiddle
Now! My problem is that i can't figure out how to place the trigger on the top of everything so they are not hidden by the pop-ups! Let me explain. Since the pop-up, even when they are off, sometimes cover the trigger elemets they (the triggers) just result not clickable. is like they are hidden behind invisible pop-ups. Here is a link of how is right now online.
http://271116.lucamule.com/studio-1
I hope you can see the problem! Does anyone know how to resolve this?
You've changed the .pop-ups to "block" as soon as it initializes. $("div.pop-up").css({'display':'block','opacity':'0'})
If you want to show/hide, I would recommend using .fadeIn/.fadeOut: http://api.jquery.com/fadein/
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.
First off, please excuse my English as it is not my first language.
I have encountered a very weird issue in an online store I am working on. It only happens in Chrome and I simply couldn't figure out what's going on and it's driving me crazy :(
This is the website I am talking about:
heavenlynature.co.nz
To replicate the issue (please bear with me), you need to add a couple of individual items to the shopping cart (at least 2 different items, then click the shopping cart icon (heavenlynature.co.nz/cart), shrink the browser viewport just below the first line of item, like the image below:
http://francisthedesigner.co.nz/images/test/2.png
Then drag the scroll bar downwards, you will find a block of div blocking over the top of the text/image (please try refreshing until the issue appears as sometimes it appears to be loading correctly), like the image below:
http://francisthedesigner.co.nz/images/test/3.png
But as soon as you highlight the page or hover over the div it just disappears. Now this only happens in Chrome and Firefox doesn't seem to replicate this issue.
It seems to happen only in the checkout screens, really losing it trying to make this work, any help will be greatly appreciated :)
Unfortunately even after following your instructions i couldn't replicate your issue. Can you please try to go on your Chrome under Tools/Extensions and disable them all?
Can you also try to replicate this issue from an other computer?