I have a little issue with scrolling in KaiOS. I would like to have the first element selected when the user goes down on the last element.
So, I used document.getElementById(element).scrollIntoView(); to get the first element into the view. Works fine in the WebIDE, but not on the real phone.
I also tried scrollElement.scrollBy({ top: -(document.documentElement.scrollHeight), left: 0, behavior: "smooth" });.
When I try it in the console it works fine, but when executes in the app, it doesn't. Maybe it has something to do with the .focus on the element, I have no idea. Is there a good example for this kind of scrolling? What am I doing wrong?
Try passing false as a parameter to the scrollIntoView() API:
document.getElementById(element).scrollIntoView(false)
Alternatively
There might be an issue with the calculated screen height on the phone. This can possibly lead to this anomaly. Keep a check on the screen height on the phone and the overflow behaviour of the parent.
You could make the first element focusable(tabindex) and then .focus() the element, the .focus() function scrolls the element into view.
Related
I have an image in my header that I would like to crop whenever its DIV is narrower than the image itself.
Here's the page when I scale the browser window down: a slider appears and you can see the grey body
Here's what I would like to happen: for the div to be cut off, and you can't see the rest of the image without scaling the window back.
It would be ideal if this was the property of the div, rather than the image, so that whatever other object is placed in the div, behaves in the same way.
I'd love to post a more in-depth illustration of the problem, but I've lost my previous account and I don't have the reputation to post the links/images.
I've already tried overflow: hidden and it doesn't do anything for a single object (it hides additional objects though).
EDIT: Ok, so here's where my mistake was: I typed in overflow: "hide" instead of "hidden", now it works perfectly. Thanks for the answers!
set
overflow:hidden;
at your container DIV
use overflow hidden like this on the parent element(.slider in your case I guess)
.parent{
overflow-x:hidden
}
I'm trying to recreate something similar to the following:
https://www.apple.com/uk/ipad-mini/design/
When you scroll down on the page it seems to understand that a certain area, when viewed, triggers an animated element. I'm trying to base next steps on this but unsure what to start in. I understand elements of HTML, CSS, DIV Tags and potentially switching on a hidden block when viewed might be the answer. But need advice of the simple trigger element. Java? PHP? CSS?
So when the user scrolls down maybe 30% a hidden element appears or animates. I would animate in adobe edge if that helps.
Any good?
Try to do it with Jquery (scrolltop)
$(window).scroll( function(){
if ($(window).scrollTop() > 150) {
// If window is scrolled by 150px do this
}
});
Hope this helps
I'll temporarily open this live URL, otherwise this problem will be too hard to explain:
[test URL closed]
Please open this in a browser that supports media queries and resize the browser to mobile, at around 400px of viewport width or lower:
As you can (should) see, the "Tags" option in the global navigation menu is visible, active and aligned to the right. This works correctly and is accomplished by floating it to the right:
.nav-option-active { #include inline-block; float:right; }
(note: I'm using SASS, hence the #include syntax)
So far, so good. However, as the viewport grows, more room becomes available to show the navigation options, both this active one and additional ones, as they normally should appear. With room available, they should not float. You can see how this work for the other navigation options when you resize the viewport into something larger:
See above. The global navigation options appear unfloated, as they should, however the active navigation option (which in this case is the tags link) remains floated to the right. All I want to do in larger viewports is to undo that float, so that the link will behave as an inline-block, unfloated, and appear as in the markup just like the other links. My attempt to do so is as follow:
.nav-option-active, .nav-option-active a, .nav-option-active a em { float:none; }
Note that the code is kind of desperate, it really should be a matter of setting float:none on only the .nav-option-active element.
As you can already see from the screenshot, the float is not undone, and I can't figure out why. In Firebug I see that float:none is indeed applied, and that float:right is striked through, overruled by float:none. So the CSS is definitely applied, but it has no effect. Clear:both has not effect either, although I think that isn't the right property to use. Strangely, if in Firebug I actually get rid of the float rules during runtime, the desired behavior is achieved.
I have a feeling that I'm overlooking something very basic or misunderstanding something fundamental, so how can I undo a float once set?
Your other list items are floated left. You'll need to float that one left, too.
I can't seem to get z-index work on bootstrap popover if it's in div which has smooth div scroll on it. I've tried putting extremely high values, looked in all css's to see if there were any z-indexes higher then popover's but achieved no success.
Javascript:
$(".project").smoothDivScroll({
mousewheelScrolling: "allDirections",
hotSpotScrolling: false,
touchScrolling: true
});
$(".block").popover({
html: true,
animation: true,
placement: 'right'
});
Here's how it looks at the moment: 1, 2.
Live example: here
This is old, but for others, try adding the following attribute:
data-container="body"
The clipping you are seeing is probably not related to z-index declarations but instead related to the size of your .project div and the overflow declaration for a nested div.
div.scrollWrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
The overflow:hidden; is what's creating the clips you're seeing.
I believe it has something to do with your overflow. It seems to be clipping your boxes. If you look at .scrollWrapper in smoothDivScroll.css and change overflow to visible, you will see a bit more of our box. I know this isn't your desired effect, but I think it's a start. Has to be something with your overflow.
# the mad zergling
I have an popover that pops automatically on page load and gets hidden automatically after some timeout (in the reality it gets destroyed), it is indicating a brief instruction on/about the navbar itself. I also do use scrollto.
I've tried adding
data-container="body"
no way, the behaviour is for the mobiles and depends on that mobile device and its browser.
On blackberry OS 10 it behaves as expected, popover is on top of everything and it was not needed the data-container (though it could be helpful for other devices)
On samsung/android the default browser doesn't show the popover, though also some html5 circles are displayed as squares, so looks it is neither html5 capable, also the dropdown items are not fully displayed, a total scrap.
On the same samsung/android, firefox is much more better but there, the popover is hidden by the navbar logo. Not tried chrome for android.
I expect it will be its own story for every mobile browser on each particular device.
I got an element fixed in the center of the screen, having specific dimensions (let's say 500x500). The element has content, which is larger then the height of the element and thus causes scroll bar to appear, which is fine. In FF/WebKit everything works nice. However in IE 7/8 ... content of the fixed element doesn't scroll, or scrolls with HUGE delay. If I change position:fixed to position:absolute, it starts to scroll fine, but with position:fixed... it's just a pain!..
Is it some known issue? Anyone heard/encountered something like that? Any ideas how to deal with such?...
Only thing any useful I could find on this subject was this, How to create Position:fixed in IE5.5+.
Position:fixed was implemented in IE7. Maybe it still has some issues with it, but there might be something else in your markup or CSS that would cause such behaviour.
It'd be beneficial if we could see some code to help us with your problem.
It turned out that there was additional problem to this - shadow filter beneath that element with position:fixed and scrolling content within it. We couldn't find any solution to this other then either disabling shadow filter in IEs or disabling position:fixed.
:(
.fixDocument
{
position: absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
Check this page: http://www.gunlaug.no/contents/wd_additions_15.html