Site description
I have a page where a list of 10 div are showing at once while 100 are in the source document. On the bottom is a button that - if clicked - hides these 10 div and shows the next 10 div. The button itself is a styled link with href="#top" where the id belongs to my navbar on top.
Problem
If I use Chrome it doesn't jump to top every time I click on the button. Sometime it jumps and sometimes it just show the new divs without the jump to top.
What works
If I use Firefox there's no problem.
Question
How can I figure out where's the problem - I mean, could there be an error somewhere else in my code that leads to this behaviour (no jump to #top) - or is there an alternative way to tell the users browser to jump to top that I should or could use?
Instead of using anchors and links to them (because your anchors might change positions, or work different between browsers), you should use Javascript, using the window.scrollTo() function:
HTML
<button onclick="scrollToTop()">Go to Top</button>
Javascript
function scrollToTop(){
window.scrollTo(0, 0);
}
Note that scrollTo() takes two parameters; the top and left position to scroll to. Also scrollTo() is not animated, it will scroll instantly to the position that you set.
Related
This wasn't happening previously for me, but I updated to iOS 9.3 two weeks ago and now hidden elements on my web page are hidden when the keyboard is displayed or another input is selected.
Annoyingly a top fixed element is only hidden if the page is scrolled, and the bottom is always hidden. This seems to be a way to 'solve' the issues encountered with fixed elements being left in random positions on the screen when the keyboard is displayed, but now I've got a situation where the elements don't reappear reliably, meaning I lose my main navigation bar for my app.
Is there any way to disable this auto-hiding behaviour? I've created a barebones page that shows the behaviour here: http://128.199.171.247/test.html
I am basically at a dead end here and am hoping someone can point me in the right direction.
I have a simple Div that contains multiple divs, lined up horizontally. I have this Div set to 'overflow-x' so I can scroll it horizontally above the other items below it ( This is used for a navigation element )
When I 'touch scroll' to scroll the content tot he right or left it does not scroll ( Android works just fine ) I have tried everything I can think of but nothing seems to work. What is strange about this is I have a 'trunk' menu that slides out from the left and a top level Div shows itself, its just a fixed position div with a background transparency. Anyhow the strange part comes when I have that 'shown' the damn thing will scroll properly!
Now for the sake of time I was thinking well hell if I can get that to work I can just show a stupid div, set a touch event and go on my way, but the touch event seems to have a double click lag or something, just didn't work right so I ditched that. I started to back track up the dom tree to see if there was a css conflict but nothing would work. I have tried turning off just about every CSS element and still wont work. What is strange is that I have a 'main' container div all of my 'pages' load in this div ( single page app ) when I place it outside this div it will work as well but there is no style on this main container, so I have no idea why the scrolling Div would work outside that Div but not inside the div ( maybe I'm missing something with IOS? [ I should add the content gets loaded dynamically via JS ] )
Like I said its a whole bunch of weird going on and I'm not sure why this would be happening and it only seems to happen on IOS ( IOS 9 testing device )
Any advice as to what might be happening would be appreciated
Thanks!
The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
I've already modified the overflow: hidden, to be set to overflow: auto, and this works quite well in the .header-container, although it seems that although this fixes the problem, there is still the issue when this is set that the images (such as the iPad at the top of the page, then overlaps the next section below it).
Thoughts on how to make sure either the image extends the container so it doesn't run into the next one, or how to fix this once and for all?
Just a thought, could this possibly be the Javascript, as I noticed that the menu bar when scrolled down doesn't dissapear until hovering over an active/Javascript link in the nav bar.
Your support is greatly appreciated :)
If you put a console.log in your call:
if ($(window).scrollTop() > 500 && getScreenWidth > 767) console.log("true")
else console.log("false")
Do you see in your console log the value changing when you scroll down at your homepage? And is this the same output as on your bookkeeping-plans page?
and does it also appear if you remove the slideup and slidetoggle functions?
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
This is what I can think of that is conflicting your code based on what I see on your website
Situation:
iOS 7.1
VoiceOver is Enabled
Hyperlink (<a href="#content">) points to:
target element on the page (<div id="content">page contents</div> or <a id="content"></a>)
URL I'm investigating: http://www.yooralla.com.au/whats-on/yooralla-media-awards/yooralla-media-awards-judges-pack
What happens:
Select and activate the link
A border appears on the target element (which is halfway down the screen)
The page scrolls so that the target element is at the top of the screen, but the border stays halfway down the screen.
The closest element to the border is then selected and bordered, so reading starts halfway down the page instead of at the target element.
Closest reference that I can find to this issue is item 1 here, so maybe it is fixed in iOS 8.
But I'm trying to work out why it's happening and how to avoid it on as many devices possible. I've tried linking both to the main content div (which fills most of the page), and inserting an empty a tag, both of which behave the same.
EDIT:
I've tried to force the reading position by setting focus or scrolling with JavaScript, but VoiceOver still ignores this and reads from the wrong place.
I'm using Harvest's "chosen" plugin, and it's working fine until the browser window increases too far in width-- then for some reason it calculates that left should be -9000 and renders off screen.
Furthermore, I can no longer get it to close by clicking outside of the dropdown area.
Screenshot below-- what can be seen of the dropdown is circled in red. Has anyone else run into this problem?
I just realized what's going on.
When you're outside of the input/dropdown, the dropdown is still rendered, but given a left of -9000px.
My browser width is currently about 9400 px.
Still don't actually know why it's not closing, though.
EDIT: edited the src to use show/hide instead of left and it works now....