Permanently disabling horizontal scroll? Out of ideas - javascript

Alright, I've pretty much hit rock bottom with this one. This mobile site keeps generating horizontal scroll bars every time I hover over a working link. When the navigation drawer is out, it ends up overriding the overflow property, which is breaking my site. Overflow:hidden; isn't really doing anything for me.
I have no idea where the issue is coming from, so all I can do is link the site and hope someone way smarter than me can help figure it out. In the meantime, is there any sort of jQuery hack to completely disable horizontal scrolling? I would even be okay with disabling scrolling all together when the nav drawer is out.
Heres the site http://www.helloimmatt.com
It's still in very rough shape, but resize down to mobile and pull out the nav drawer to see the issue. Thanks in advance, I'm stumped.

You can use following:
body {
overflow-x: hidden;
}
or
$("body").css("overflow-x", "hidden");
Also, you can try diable using JQuery (or javascript, if you like)
I made jsfiddle with example for you: http://jsfiddle.net/Kvn7t/1/

Related

How can I use sticky positioning whilst using Smooth Scrollbar?

Hi I'm currently working on a horizontal scrolling site. I am very much a noob when it comes to javascript but I found a codepen that I modified to suit my needs.
I would like the button element to position sticky within the div but I think due to the javascript in use sticky positioning does not work. I have had a look at the documentation and can't seem to see anything that would work, however, I am very much a novice when it comes to javascript.
button{ position: sticky; }
Would anyone be able to give me a few pointers?
Here is the codepen that I am working on
Based on this original codepen
The js it is using
I very much appreciate any help I can get thanks!

Navbar and slider layers difficulty

I'm having difficulty getting a navbar and a slider to work together. The problem is when it is in mobile view. If you click on the menu icon the menu item slide in from the side but the top ones are appearing stacked underneath the slideshow.
Here is a sample of it posted on my domain test page. http://ecfleming.com/test/index.html
I have tried using a z-index in the CSS as well as few other things. I suspect it might be something in the JavaScript, but I can not figure out what. Does anyone have any ideas of what I can try to fix this?
For a quick fix, you can add .cycle-slideshow { z-index:-1 }
Try not to hard code the height value of div id="header"
Fix the mobile view by removing the height 185px.

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

Sliding an element "up" over another as the user scrolls down, without fixed positioning?

The wording in the title is weird, apologies. It's hard to explain the effect.
I currently have this, it works best on Chrome:
http://mattluckhurst.com/dev/
My client wants each panel to slide up as the user scrolls down, covering the previous panel. I am currently accomplishing this by setting the "current" panel to have position:fixed and top:0 as soon as the page scrolls to it. The panels each have a z-index that corresponds to their vertical position on the page. So ideally:
You scroll down. when the next panel is halfway up the window, the scroll animates to get you all the way there, then that panel is snapped to the top so the next one can come in over it.
It's working pretty well in Chrome, but I am getting a lot of flickering and stuff elsewhere. Also on mobile it's a mess, but we really want a nice smooth swipe up down.
I know fixed elements can get pretty funky on mobile, so I am wondering if that is the problem, or if I should be using something other than just window scrolling for the animation / effect.
I see more complex parallax stuff all the time, so this should be pretty doable, I'm just not sure where to start.
Thanks for any help! Let me know if you need more info.
A few libraries that might help you:
https://github.com/dirkgroenen/jQuery-viewport-checker
https://github.com/janpaepke/ScrollMagic
https://github.com/matthieua/WOW
https://github.com/jlmakes/scrollReveal.js
https://github.com/Prinzhorn/skrollr

Bootstrap Carousel - Whole website jumps when image is changing

Hey lovely StackOverflow Community.
I have a problem with my website. I added the Bootstrap Carousel from getbootrap.com and it actually works very well. But there is one problem. Everytime the image sitch, my whole website goes up and down.
I don't know what could be the problem, cause i changed nothing on the code from getbootstrap.com :-/
Sorry for my bad english :D Hope you can understand my problem.
Overwrite the Bootstrap class. This will solve your problem
.carousel-inner>.item {
width: 100%;
}
My issue with the Carousel was not directly related to the image, but rather the content within it that was causing the shifting of the page. To avoid it while being elsewhere on the page, I just used JQuery to detect if I had scrolled past my carousel and to make it pause. I know its a workaround but its effective.
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('#slider').carousel('pause');
} else{
$('#slider').carousel('cycle');
}});
It is because it changes some class on the carousel items.
You can set a min-height to the carousel container (.carousel-inner) and it won't jump anymore.
Set the value that fits better your needs.
ALSO:
Seam like there is a little effect on the images, so that every time that an image change, it became a bit smaller. If you just want to avoid the all website jump, use what i said above, if you want to change the "change-of-size" behave, you need to check the class .next and (probably) .right/.left and see if there's a change of height. It is hard to inspect them from a live website, that why i'm telling you to check this from the code - Or upload the code if you prefer.

Categories