I have a div area that contains pagination, but for mobile devices to access the later pages the horizontal scrollbars do not show and the visitor has to use their finger.
I'm looking for a pretty simple solution, so I thought if I can detect if overflow has occurred a little image suggesting scroll with finger should be made visible.
Is this possible and does anyone have an example of how to write this?
Related
I don't know what this is called, but I've seen it on a few websites where when a div scrolls into view it flows to the top hiding the previous block (well scrolling out of view). It like a slideshow but vertically and shows the content. It's kinda like a normal scrolling web page but brings segments into view.
Does this make sense??
Does anyone know what this is called so I can Google how to do it in css or jQuery.
Thanks in advance
If I understand correctly your question you are searching for sticky position. You can see how to do it here: https://css-tricks.com/position-sticky-2/
I need to make my mobile screen scrollable. For that i am using css property named - webkit-overflow-scroll: touch . but the browser says it is "Unknown Property name". Can any body tell me what is it means ?? . if anybody knows the alternative to this Please tell me ?
All touchscreens are scrollable by nature.
-webkit-overflow-scrolling: touch;
Notice is different to yours (scrolling not scroll) is for 'lazy scrolling' which means rather than the default of stopping immediately when you stop the action with your finger it uses momentum so the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. It also uses speed to determine the momentum and time it takes to stop scrolling, kind of like in real life.
I am fairly sure you cant stop scrolling in css but think there are some techniques available using javascript. Here is a question on SO talking about disabling touch scroll but I presume thats not what you want? Disable scrolling when touch moving certain element
I'm using angular-bootstrap-calendar and am having a difficult time getting horizontal scrolling to work properly. The plugin's demo page has the same issue I'm experiencing.
To reproduce the issue, visit the demo page, click the Day view, and add a bunch of events so that they stack in columns horizontally. Once the horizontal scrollbar appears, scroll to see the event containers cut off (notice the sudden loss of styling behind the newly created events).
Screenshot of issue in the demo:
And the issue gets worse when vertical scrolling is introduced:
I'm assuming that this has something to do with the way Bootstrap renders its columns, but I haven't been able to solve this issue yet. Does anyone know how to get around this problem?
Edit:
Here is a video of the issue
This is very strange and I'm pretty sure it's to do with some sort of width issue in CSS, but as you start to re-size the browser, it adds this strange gap to the right (Which is off screen).
Here is the page in question
I've tried looking through the CSS and I can't exactly find anything, I keep going over and over it but it's not sticking out to me.
The website is WordPress driven, so most of the CSS is in theme.css and lessframework.css. The Sidebar is a fixed width at 202px and the Content is next to it, which has different width sizes based on what screen size. I'm pretty sure it's something to do with that but I just need a second opinion/set of eyes!
Can anybody help?
I hope im not bringing an old question back to life, but i find Firefox's developer tools have been invaluable in ascertaining, on-the-fly, what elements are actually displaying.
The easiest way is to right click on the area in question, and choose the last option 'Inspect Element'. This will open up the source and CSS console and displays the elements current id/class and style.
To go one better, once the console is open, click on the 3D box icon on the right of the console bar to make Firefox render the page in 3D, which will allow you to spin and zoom in on the affected area.
http://louisehall.clanteam.com/ is the website in question.
I designed this homepage to be horizontal scrolling only, which works on certain size monitors. However obviously on small browser windows the vertical scroll bar appears meaning the layout is ruined when the user scrolls down i.e. the 'Louise Hall' image and the navigation bar appear over the images.
I have done some research, however the answers I have found haven't really helped. It may be my amateur CSS knowledge but you catch my drift.
If you look at this website for example: http://www.banksy.co.uk/outdoors/outusa/horizontal_1.htm
The navigation area is fixed no matter what size the browser window.
Is there anyway I can fix the 'Louise Hall' and navigation bar horizontally (as it is now) but then make it scroll vertically.
Thanks
Josh
That fixed is achieved using position: fixed.
However, in the example you linked to, they are using frames. I wouldn't recommend using frames.