I'm using the Perfect Scrollbar jQuery app (http://www.yuiazu.net/perfect-scrollbar/) for this site:
http://thehummingbirdplace.com/
The scrollbar shows up when you hover over the News section, but it won't scroll down to reveal the content. I've used this scrollbar before successfully, so I'm stumped as to what is different now. I haven't been able to replicate this on a simpler page, when I experiment on another page it either works or just vanishes, so I'm not sure why it is successfully showing up, yet not scrolling on the main page.
I've tried taking out the second use of jQuery on the page too, just in case, but I get the same result.
Any help would be appreciated!!
The error was in the set up for the jQuery.noConflict(); command and has now been fixed
Related
While working on a web project, I suddenly noticed a random horizontal scroll pop-up near the banner area. I tried checking on the dev tools to see what was causing it but I couldn't find any lead. As you can see in image 1, the horizontal scroll pops up, but once you scroll down just a little bit. It starts to disappear (seen on image 2).
I hope someone can help me with this. This site needs to get deployed soon as it has a deadline.
While disabling the horizontal scroll is quite easy to implement, it is not recommended to use overflow-x: hidden;.
There is always a reason to why the site shows a horizontal scrollbar. I'd suggest finding out what exactly causes that behavior and rather fix it properly than trying to "hack" your way around it by disabling horizontal scrolling in itself.
You can simply add overflow-x:hidden using css but I must say it is not a good way of implementing it. There is a reason browsers has horizontal scroll.
So I suggest to find out the issue in your code, probably there should have a min-width or a fixed width in some element which cause to show a horizontal stroller in smaller device width.
So go to inspect elements and delete each of the wrappers one by one until you get the horizontal stroller disappear. This is the easiest way I follow to find the element which has the issue.
Firstly i must say i am a complete novice in programming! That said, i need some help regarding an issue that seems for me impossible to solve.
What i need is a menu that on a single page remains fixed in the same position, (i'm not that sure but the idea is similar to a sticky menu that wouldn't be at the top) from which it's possible to scroll down to each page section with an anchorlink. I tried to use "scroll to page id" but sometimes it gets stuck, or doesn't even scroll down and worst of all, once the page scrolls the menu is gone. image for reference.
I've been looking for days through plugins, stickymenus and other stuff but still haven't found the right solution. Any suggestions?
You can define your areas as sections instead of "page ids". After that is simple to navigate through those.
The Bootstrap Scrollspy is a nice way to do that simple: Bootstrap Scrollspy example
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
The website I've been working on has this odd, and seemingly non-consistent issue, and it only appears to happen on Google Chrome.
My main content section will, occasionally, product vertical and horizontal scroll bars.
When I open the page as a file, the scroll bars pop up intermittently upon opening the page, and refreshing the page. They usually do not show up, but every couple of refreshes or so, they will pop up.
When I run the page locally using NGiNX, the scroll bars will pop up upon opening the page, but disappear when I refresh and no amount of refreshing will bring them back. If I click back and forth between two different test pages I have set up, the scroll bars stick around. Only upon hitting reload, do they disappear.
I have not seen the issue when I run it from my temp free webhosting site, Zymic. I was actually not even going to worry about it because it didn't show up when it was live, but when I noticed the issue popping up from my locally ran web server, I figured I should look into this.
I have no idea where to start looking for what may be causing the problem, but I'm providing a video that will clearly show the issue, and a link to my current live site. Based on reports of others and my own experiences, the issue will not show up from the live site, but it will give access to all of my current code (current-ish, I'm in the midst of trying some things out) and I will happily provide any specifically requested pieces of code. I would try and supply the bits right away that might be causing the problem, except that I have no idea :\ But if I narrow anything down, I will include that bit of the code along with what I've discovered.
Short 58 second video of the problem: http://youtu.be/K7tjGJ8hIV0
Live site (issue should not occur from this link): http://jrltest.zxq.net/
Thank you all very much!
This is caused by your overflow:auto; style on your #maincontent div. Just change the style to overflow:hidden; to make the scrollbars disappear permanently.
Automatic overflow will work by doing nothing with the overflowing content if it fits in the container, but if it overflows by even a bit, it inserts scrollbars to allow the user to scroll. In your case, Chrome will probably recognise a single pixel of overflow, so insert scrollbars. This probably has to do with caching and image-loading. What I think is that if the image is already in the cache, Chrome knows exactly how big it is, and it knows the image will fit in the container, but when it's not cached yet, it reserves some space for the image to load in, and since that space is apparently slightly larger than the actual image, it will take up some extra space.
Check if body value for you is set to overflow:hidden;
If it is, than change it ;)
The same Issue occurred to me while coding in Next.js
just set overflow: hidden; for the Html tag in the global.css file.
Have a look at Facebook's message module. When you're looking at a conversation you see a list of messages contained in a div. The list is "scrolled down to the last message" when you load the page. Scrolling up (using your scrollbar to the right) takes you upwards in the list, showing you older messages.
Trying to dissect this from the code isn't an easy task, at least not for me, but I have noticed that the header containing the name of the person you're talking with and some buttons has the style position:fixed.
If someone could provide some insight as to how this feature is done or provide links to a tutorial/explanation of it I'd be very happy.
Thanks
I haven't had a look at their code however the simplest answer I can think of is that the main page container is set with position: fixed; and the message section is simply positioned as a normal element on the page.
This would give the illusion that the scroll bar only scrolls the message portion when infact the page is scrolling as normal, just with the container staying in place.