My problem is, I got an horizontal slider with years inside so its like a timeline, the years are fetched by a query, at this moment, the user has to scroll by the years and then click one specific year and the information on the website will filter.
Is there a way to detect the year that is in the center of that horizontal slide? Maybe with a hidden area at the center?
maybe you should observe the scroll event of the slider element. you have to measure after each scroll process which element is inside of the visible slider area (I suppose others are hidden by overflow: scroll from the CSS, right?)...
you should use a small delay so that the function only triggers when the scrolling was really stopped and not constantly
as it is better to show that with actually working code... checkout my jsfiddle. It is at least working in Chrome but I suppose it will work in other browsers too... when you scroll through the year list and you stop for 50ms this list item that is visible in the visible area of the slider div is logged into with console.log into the JS console... hope that helps you =)
EDIT: had a small CSS error... fixed and URL updated
Related
I have a vertical list and on small screens, it has an overflow-x scroll. there is the active class for the active tab. However, if I click for example last item, it is not visible %100 as seen in the screenshot.
I tried to use the scrollIntoView() function but it didn't work out for mobile devices.
Is it possible to do it via CSS? the scrollbar has to move according to the active tab so the active tab should always be visible
screenshot
Can you share what code you already have so we know what you're really trying to do?
Are you talking about tabs like the ones found on YouTube?
If so, it looks like taking CSS from this Codepen will answer your question if you are in fact asking how to get tabs like the ones shown above. Just look around and see what you need to do to modify it to your liking and then adjust your code. Click on the link and go to #13 (won't let me post a Codepen without code, but scroll down to #13 and there's your answer)
https://csshint.com/css-tabs/
I searched "animated css tabs" on Google, went to the first result and scrolled down to #13 to find this.
I have a problem with dragging an element below the viewport. When I try to drag the element below the viewport the page will not autoscroll. As you can see in the image I have provided I am trying to drag an element below. The only way I can scroll below the viewport to drop my element in Firefox is to use the mouse wheel.
If I left click and hold while dragging down on this Stack Overflow page the viewport autoscolls downward. This is how I need my web app to perform.
I'm not really sure where to start with this as it is a paid WordPress plugin called Learndash that not properly coded.
Can anyone point me to the correct solution to this problem?
Thanks.
Checkout this link to automatically scroll the window.
https://www.bennadel.com/blog/3460-automatically-scroll-the-window-when-the-user-approaches-the-viewport-edge-in-javascript.htm
Edit:
Add a margin below your div to allow space to insert
Or add the CSS properties height:500px and overflow-y:scroll in your div
Before i start, I wanted to let you know that I have been searching high and low for a solution to my issue but the closest thread I've found is unfortunately without the answer to the actual problem - Position absolute inside div with overflow-x scroll and overflow-y visible
Essentially I got main page where I am dynamically loading some other pages and on some of them I used dropdown listboxes. It happened that I haven't noticed it earlier as content any of the pages wasn't wide enough for me to spot the problem.
The problem I face is absolutely positioned div (which contain dropdown) and visible horizontal scroll bar on the parent of this div. When I scroll my page horizontally the dropdown div stays in the same place on the screen. I read about "popping out" absolute divs under this link:https://css-tricks.com/popping-hidden-overflow/ but even there, I can observe similar issue I am currently facing, which is appearing of the vertical scroll on the parent element. I am trying to achieve similar effect like here:
http://jsfiddle.net/matcygan/4rbvewn8/7/ but stop vertical scroll bar to appear when the listbox is expanded - instead it should overflow the box and party cover horizontal scroll bar. Here I've found another prompt example how can I achieve it http://jsfiddle.net/b5fYH/ but when i try to play with it and make red boxes scrollable with content as well as overflowing outside of the content vertically, without creating vertical scrollbar, I am failing... I am also fine with using JS if CSS on it's own can't deliver such effect.
In the end after 3 days battle, the CSS won and I need to ask for a help...
Any support will be greatly appreciated.
Thanks in advance.
I'm using a jQuery plugin called jCarousel Lite to create a vertical scrolling Twitter ticker. Everything works fine, except for the fact that some tweets aren't shown completely. They're cut off before the last line of text. I can't seem to figure out what is causing the problem and it seems to occur more or less randomly too.
The page at http://www.reekx.nl/ shows the Twitter ticker in action (bottom right, titled 'Reekx op Twitter').
Is anybody able to tell me what's going wrong here and how I can fix it?
The Carousel sets a height for the elements, and at the same time you have overflow:hidden in your CSS.
This bascily means you are telling the DIV that it should be 104px heigh, and all overflowing content should be hidden.
Ill try to find if you can disable a fixed height in carousel mean while :)
Could you try playing with the "fit" option?
You can try playing with the options, which can be found here: http://jquery.malsup.com/cycle/options.html
But the 2 which is relevant should be:
$('#stwitterThing').cycle({
fit: 1,
height: auto
});
Here is my current situation:
I have a web page containing a couple scrollable divs. Each of those divs contains a number of objects. I am using YUI to display popup menus of actions that can be performed on each object. Each object has its own menu associated with it that is constructed and displayed dynamically. The popup menus can be large and can overlap the bounds of the scrollable div.
From what I believe are issues with focus (the menus must be accessible), when I hover the mouse over an action that lies on top of an edge of the scrollable div, the div automatically scrolls, moving the content but leaving the menu stationary. Trying to move the menu dynamically when this happens is not something I want to do as I believe it would provide a poor user experience.
So I need to prevent this focused menu from scrolling the div. My idea for providing the best user interface is to prevent these inner divs from scrolling when a menu is open. This leaves the menu positioned in the optimal location to show the user which item is being acted upon. If the user wants to scroll the box, they can click to close the menu and then scroll normally.
How can I do this? I need a solution that works across the major browsers.
My first thought was to listen to the onscroll event for that particular element. Unfortunately, there does not seem to be an easy way from there to just prevent the scrolling from happening. For one, my JavaScript event code appears to execute after the actual scrolling has occurred.
Then, I thought that since my code is being run after the object has scrolled, I could just reset obj.scrollTop and obj.scrollLeft. Sure enough, this appears to work, though I am worried that on slow browsers the user will see the content inside the div "jump around". Also, it would be really nice if the amount the element scrolls is part of the event object. Is it stuck in there somewhere? I'm looking for an alternative to having to store the scrollTop and scrollLeft variables for this element and then using them while the scrolling is temporarily disabled.
What is the best way to solve this entire problem?
I agree with Anthony regarding the presentation of the functionality you're trying to disallow. If you're going to disable scrolling, then you should make that part of the page visually disabled or removed.
To that end, you can position a semi-transparent div on top of the scrollable div in question, which would capture the mouse events and visually show that the scrollable div is inactive for now. It would be hard to make cross-browser compatible and wouldn't be perfect, but then again very few client-side tricks like this are.
The simple answer is no you can't do this. Its doubly no if you want a cross-browser solution.
Providing the user with the clear affordance that something can be scrolled then denying them that is just plain poor UI design.
Ok so after your edit it turns out you are not actually trying to prevent the user from scrolling.
The main answer remains true though. It sounds as though the focus is going to rectangle (probably an anchor?) that is not fully in view and causes a scroll. Is there a reason this rectangle must get the focus? For accessibility?
What if you didn't have overflow: scroll and instead you used overflow: hidden and provided scroll up/down buttons that allowed the user to scroll when necessary? These buttons could of course be disabled easily.
Though it may not be the answer you are looking for, if you are to set the display value of the div to 'none' while the page loads (from the server) and then have an event wired to the page load (either pageLoad in ajax.net or attach it to the onload event via javascript) that will make the div display set to 'block' .. that would ensure that slower browsers wouldn't see the div 'jumping around' (could even put a 'loading' image in the div to show users it's doing something and not just invisible)
sorry i couldn't provide a more complex/fluent solution.
I found a way to work around this issue. By removing the menu element from the scrollable div and then appending it directly to document.body, the browsers all stop trying to scroll the div to reveal the focused element (even though the element is already completely visible).
Thanks to all for your time and your answers!