Removing scrollmagic from my website is breaking the scrolling - javascript

So I added scrollmagic to my website at the start of the project. However, I did not end up using scrollmagic and instead went with a different approach.
Now, when I try to remove scrollmagic from the website, it breaks the scrolling of the website.
If i try to remove the code in the HTMl where I link the scrollmagic files, the scrolling stops working.
If I try to remove the scrollmagic code from my js file, the scroll stops working.
Scrollmagic code is at line 1137 of the all.js file. Also, I can't just leave it in because it breaks scrolling on mobile.
Here's the project: PROBLEM FIXED
I would really appreciate it if someone could help me figure out what is breaking the scroll
Edit: I know my code is ugly and ineffecient, I'm still a novice and learning. All I need to know is how to fix the scrolling
Edit2: Fixed. It was the stupid css file of the multiscroll plugin causing the problem.

Related

How to realize horizontally scrolling to ID in Elementor?

currently I am creating a website with horizontal scrolling based on Elementor's official video tutorial. and the code they provide in the video description.
Unfortunately they didn't explain how to make the website scroll to anchor IDs. When doing so, either nothing happens or the page scrolls weirdly vertically and then horizontally to the desired section.
Do you have any ideas how to solve this issue? I'm glad for any ideas!
I already tried to add JS code snippets but nothing of it worked :(

How to change the Masonry width?

I'm currently working on a WordPress theme and I've run into a problem that I can't seem to solve. I've created a footer area for widgets and want to run Masonry on it. When there is no Masonry running, then the widgets align in 3 columns on a 1920x1080 screen, which is what I am aiming for, but when the Masonry is activated, then all the widgets crash into one column. I've tried a lot of searches, but can't seem to find someone running into the same problem.
Here's a website I had lying around that i could upload the theme to, so you can see the problem: https://youtube.akusasdesign.com/
And I've added the whole theme to Github, so that you can look through my code. Hopefully, someone will be able to help me, cause I've run completely out of ideas as to what is causing the problem.
Github: https://github.com/AkusasDesign/Akusas-Studio

Smooth Scrolling and Anchor Tags Issue

I am having a very odd issue and also finding it difficult to implement smooth scrolling on my single page website.
You can view my site HERE
Firstly, Is the strange anchor issue, when I click the link in the hamburger menu, the link appears in my address bar (which I would like to get rid of at some point) but when I scroll down the page it just keep being stuck on that div only I cannot scroll the page freely.
Secondly, I can't seem to implement any smooth scrolling techniques which I find on the net so far and I would really appreciate a little hint as to what I am doing wrong. I have tried to put name="" and rel="" into the <li> and <a> elements (adjusting the smooth scroll code accordingly but still nothing.
Please find reference HERE
I am a bit of a newbie with javascript so maybe i am not doing something simple here.
Thanks in advance!
Terry
After speaking to some other students I found that the issues is due to the html and body CSS. I needed them to both have height auto and min-hight 100%.
Although this still does resolve the issue with the revealOnScroll. I need to tweak this code I think as it isn't able to then calculate the offset().top

What is causing this simple animation script to animate improperly?

I cannot seem to figure out what is making this script go wrong...
You can find a properly animated version of the script here...
http://jsfiddle.net/tTJaM/21/
You may find the live project version here...
http://jsfiddle.net/tTJaM/22/
The live project is located at http://paysonfirstassembly.com/
As you can see, the animation does not have the same visual effect in the second link. The visual effect I wish to achieve is the one in the first link. I am willing to edit the script to do this, or make changes to the CSS that I did not make initially.
min-height:120px; in .dynPanelContent in your css doesn't let it work properly. But I don't really understand why... If you remove it, everything works at least here http://jsfiddle.net/tTJaM/22/
It looks like the min-height:120px; attribute of .dynPanelContent is what's causing it. If you remove that style, it does the rotation properly, but the boxes are no longer properly sized.
The slideUp function is an animation that modifies height, but not min-height. This is a known issue in jQuery and there's a wiki entry on Getting Around The Minimum Height Glitch

Page displaying sections using opacity, following #section and then do Javascript ScrollTo(0,0)

Here is my app - http://www.shalgreetings.com/ I am trying to override the scroll bar going down to a imagesection in CSS, so that whole app is visible with logo, header and other controls all the times when people navigate through different #sections. I am not sure where in the CSS, I am making the mistake as clicking on #sections traverses the page. Here is this app's original inspiration code, which has got this right.
Anyone can point me where the problem seems to be in the above app?
Edit - It was not a problem with CSS. Perhaps I am looking for a Javascript solution that would follow the link, but still ScrollTo(0,0).
There is no mistake in your CSS, the inspiration code "cheated" in a way: he used just a few photos so the viewport would never be too short to display everything. In the example you can make your window height short and it will exhibit the same problem.
You probably already know that you can solve this problem with a bit of javascript (onclick="return false;"). I'm afraid there is no pure CSS way from preventing this from happening.

Categories