I am facing some issues with the jQuery Chosen plugin. Here are some screenshots:
The focused Users input is a jQuery Chosen select input within a tab in a Bootstrap dialog (but this doesn't matter anyway). As you can see the scroll of the Chosen's ul.chosen-results didn't reach the bottom here.
Now if I scroll down the results:
I reach the bottom of ul.chosen-results, but if scroll with the mouse wheel down further from this point on, the rightmost scroll doesn't scroll down.
But I would like the other scroll to go down too from that point on while scrolling down ul.chosen-results with the bottom scroll of ul.chosen-results reached, to achieve this:
See that the rightmost scrollbar is down here too. This is what I want to reach while scrolling on ul.chosen-results. Does Chosen somehow inhibit the scroll event propagation when scrolling ul.chosen-results?
Can I achieve what I want? How?
Thanks for the attention!
In the not minified js plugin file
find following code
high_top = this.result_highlight.position().top + this.search_results.scrollTop();
and replace it by this.
high_top = this.result_highlight.position().top;
This issues has been addressed here another possible fix is to update to jQuery 2.2.1
Related
Here is my scenario I have a web page which will navigate through using mousewheel and scrollbar. I have fixed the mousewheel problem.... But the problem where I use the scrollbar it will navigate to the end or go to the first it depending on the scrollbar you pressed up or down.
I know the error is $(window).scroll(function) here due I navigate from Div 1 to Div 2 which will fire the event a lot of times when the scroll bar moving.
Here is my fiddle
The problem is where i when i scroll using the bar beside down or up. It will trigger until the end of my onscroll event.
Is it possible when i press the scrollbar once only trigger once ?
An alternative way i know is hide the scrollbar and design a fixed position button up and down will resolve this problem but is it possible to do this with default scrollbar/overflow ?
Tried your fiddle. When using mouse wheel, it kept pending between headers 4 and 3 after I reached the 4th one. When I removed the $(window).scroll() function, it worked perfectly, both down and up.
The scrollbar, however, is quite a complicated issue - when you click/tap and drag, you simply can't "steal" the scrollbar from your pointer/finger - the user keeps dragging, yet you're trying to reposition the scrollbar/content forcibly. I don't think this is a good idea (from the UX point of view).
Not sure if it fits your requirements but in case I'd want to fully control the content, I'd completely remove the scrollbar in CSS and then use the mousewheel or swipe functions to control it.
I have two divs with the total height of the viewport and a button for scrolling from one to another with ScrollTo jquery plugin. The problem is that I want to prevent the posibility of manual scroll.
I want that when someone scrolls with mouse down, the browser scroll automatically to the second view, and when I scroll to top gets the previous view.
I don't know if I'm explaining well, here an example: http://orangina.eu/heritage
Try to scroll in this webpage, this is what I need.
Thanks!
Correct me if I'm wrong but it looks to me like you're trying to disable the browsers default scrolling behaviour, attach events to scroll up and scroll down and scroll up or down to the height of the page's height.
The way I would do this is disable the browser's default scrolling behaviour with overflow:hidden to the body and html.
Then you can bind the jQuery "mousewheel" and "DOMMouseScroll" to the div checking for "event.originalEvent.detail > 0" or "e.originalEvent.wheelDelta < 0" for down scrolling or else for scrolling up.
Finally add your function call inside the if or else depending on the downscroll or upscroll.
I can write the code if you want but it might help you more if you try this yourself.
You can achieve that same effect by using fullPage.js plugin for jQuery.
Compatible with old browsers such as IE 8.
Touch devices compatible
CSS3 animations improving performance
Lots of options, callbacks and methods.
Thanks for all replies!
I solved my problem, instead of using standard scrolling I used the translateY css property. Setting a data-id to each page layer and doing translateY(100%, 200%, 300%...) every time I want to scroll down/up.
I am using fullPage.js for a one pager website. It works beautifully. It has support for scrolling through full page slides at the flick of the scroll wheel, and each slide can also contain a horizontal slideshow, normally triggered at that point by clicking one of the side arrows.
I want to force the user to scroll through that slideshow before they can progress down to the next slide. Does anyone know of a way to allow the slideshow to be triggered with the mouse wheel when scrolling down? Then when it hits the end of that slideshow it scrolls vertical again to the next slide?
You can do it with jquery.mousewheel like:
$('#fullpage').on('mousewheel', function(event) {
if (event.deltaY > 0){$.fn.fullpage.moveSlideRight();}
else{$.fn.fullpage.moveSlideLeft();}
});
https://github.com/jquery/jquery-mousewheel
Update 2016
Now fullPage.js provides the Scroll Horizontally extension for it.
What you want to accomplish is not that simple to implement in the plugin. Also, I would say forcing the user to follow a path is not consider as a good practice from the user experience point of view.
Also, what should happen once the user reach the next section and then scrolls up? Should he follow all the way back throw the slides of the previous section again in order to keep moving up ?
Anyway, if you want to accomplish it by your own, you would need first of all, to avoid the auto scrolling behavior when scrolling withing your slides (or the section slides for which you want to apply this).
And then, you would need to change the scrolling behavior to trigger the action to go to the next or to the previous slide by triggering the control arrows events depending on the scrolling direction.
Once the end of the slider is reached, you would need to add again the auto scrolling even.
It really doesn't sound simple if you want to do it by your own. You would need to recode the plugin.
I am working facing issue in auto suggest with scroll bar. I have to make scroll bar movable on arrow key down, mouse wheel its works fine for me. If I use document keydown event its moving my browser scroll.
I just looking for a functionality with arrow keydown scroll should move. If I click inside the div and try to move scroll bar with arrow keydown its works but if I am not clicking inside div, since document is not clicked scroll bar doesn't work.
I used slimscroll and currently working with enscroll-0.4 plugins but not able to make it fixed. Feel free to ask if you are not clear about my question.
It will be really helpful if anyone have a solution for this issue.
On most websites, you can press your scroll wheel and drag the mouse around in order to scroll. I use this all the time, and I'm sure others do too.
However when I use jScrollPane to replace the scroll bar, it simply doesn't work. Is there any workaround available?
Edit: Video to clarify what I mean, on the first page it works, but not on the second one.
http://screencast-o-matic.com/watch/cX60XpOwT
This is not possible without either 1) creating a custom method for handling middle-click and scroll or 2) in someway hiding the orginal scrollbar under something else or out of the screen. So theoretically, it's possible, but it's not included in jScrollPane at this time.