First of all, I really do not know how to describe my problem. So, I ask you to check my JSFiddle Code Playground at the beginning.
https://jsfiddle.net/coming123/q46tjuev/
To see the problem, I want you to run this playground with a low width. Then, click to the "navbar-toggler" on the top left, which is provided by Bootstrap4's itself and a little bit desiged by me. When you click it, the navbar will be appeared from top to bottom on the right side. The problem appears at this point.
This navbar make the background became higher and makes the other contents move to bottom side. Scroll the page and you will see a bug appeared. background became higher but the parallax effect has been broken. Now you should make the area resized by pulling or pushing from sides. Just a little resizing will make this bug fixed. What I afraid is on mobile phones, you can not resize the browser. So the bug will not be fixed. Also I do not want it to be fixed by this way. I did not get why this problem appears.
I tried to make the div reloaded when you click the navbar-toggler but nothing has been fixed.
document.querySelector("button").addEventListener("click", () => {
var container = document.getElementsByClassName("top");
var content = container.innerHTML;
container.innerHTML= content;
console.log("Done");
});
Any suggestion?
Related
Im trying to add a button/tab on the bottom right corner of the page. That when clicked slides up a window. I've seen this somewhere but i can't get it to work.
I found my answer shortly after. If you're looking for the same, this thread might help:
HTML CSS/JS Bottom navbar Sliding Up
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 am having a weird problem and cannot even diagnose what is causing it. I am working on my professor's website: jurgec.net
The problem is only on the mobile website. If you click one of the links such as "I am an undergraduate student" then scroll down a little bit, and then press back, the website doesn't fully land at the top of the page. You can see a bit of the yellow page at the bottom.
I have a feeling its because each section's height depends on the browser's screen size. And since on mobile chrome, scrolling down causes the URL bar to disappear, it changes browser's height hence ruining the size of the website's sections.
Any help is greatly appreciated!
This is because the back button returns you to the previous "state" of the website you were at. If you scroll down it's going to go to that part where you were when you made the Click.
Does $(document).ready() functions fire after a back button press?? If they do (not sure at the moment) you could do something like this.
$(document).ready(function(){
scroll(0,0)
});
Which if that works shouldn't really affect you because on initial page load you are already at (0,0) so you wouldn't notice any jumping. Not sure if this would work for you, but good luck!
I am trying to set up a simple example with Bootstrap's affix.js.
However, the problem is that the item which I am trying to have sticky jumps off the screen with a negative top as soon as it switches from affix-top to affix. And it never recovers from there.
I set up a small jsfiddle, which illustrates the issue: https://jsfiddle.net/mjg12uep/6/
I have done it successfully on another project, but can't for the heck of it figure out what is going on here.
When playing around a little bit more, I realized that it works when I add position: relative to .affix-top. I suppose without that, the javascript was not sure where to "anchor" the element, and pushed it off screen. I have updated the fiddle accordingly.
Please have a look at my sample page.
On that page notice the portion with the gibberish text. This is the "content part" which is meant to be scrolled. All other parts are supposed to be fixed.
If you move your mouse over the left navigation or the header and try to scroll, then naturally nothing happens.
How do I make the content part scroll even when the user's mouse is over the header or left navigation or any other fixed parts?
PS. I am trying to imitate Google Plus here. They seemed to have a scroll listener, but the Javascript code is too mangled for me to understand.
I was wrong in my previous conclusion that Google+ is using Javascript for this.
Yesterday broke down their site into pieces using Firebug. Now it is clear that they too are using position: fixed for fixed parts.
Here is my updated sample page. Notice that now we can use keyboard arrows too to move the page up or down. This page is not using any Javascript.