I'm attempting a horizontal scroll with the mouse wheel, but doesn't seem to work.
Here is my Fiddle
My main class .selector is the one with scrollable overflow
This is JS I am trying to initialise the scroll with
$('.selector').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});
This is the example I am using for horizontal scroll https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
Thanks in advance for any help!
EDIT: Thanks all, I forgot jQuery in the Fiddle yeah sorry, but when I was testing on localhost I was using jQuery 1.11.1 so maybe that was the case. Cheers guys
You just forget to add JQuery to your html
http://jsfiddle.net/902tjbzz/
jquery.js : http://code.jquery.com/jquery-2.1.4.min.js
Try this:
$('.selector').mousewheel(function(e, delta) {
$(this).scrollLeft(this.scrollLeft + (-delta * 40));
e.preventDefault();
});
Also, you did not include jQuery in your fiddle.
EDIT
Actually, the only problem was that you did not include jQuery, your initial code works fine.
First thing: in yor jsfiddle you forget to include jquery.
The second thing: I changed $('.selector').mousewheel(function(e, delta) { to $('.selector').on("mousewheel", function(e, delta) { and only then I could see that event is triggered.
Also check your scrollLeft property update logic. Don't forget about direction (left, right), so in some case you should add value insead of subtract it
Related
I recently discovered a functionality of jQuery Chosen which automatically scrolls the .chosen-results Container downwards when you hover the bottom of the container.
I already found the function (result_do_highlight) which does that: here
This is the part where the automatic scroll happens in the function:
if high_bottom >= visible_bottom
#search_results.scrollTop if (high_bottom - maxHeight) > 0 then (high_bottom - maxHeight) else 0
else if high_top < visible_top
#search_results.scrollTop high_top
Is there a way to prevent scrolling?
Thank you in advance
EDIT
I forked the Chosen-git and added a workaround: github.com/puresamari/chosen
here is how to use it:
Changes from my side
I added the funtionallity to disable the automatic scroll towards the highlighted option:
Use it like this:
$('your_select').chosen({
scroll_to_highlighted: false
});
the parameter ´scroll_to_highlighted´ is optional and default true
I forked the Chosen-git and added a workaround: github.com/puresamari/chosen
here is how to use it:
Changes from my side
I added the funtionallity to disable the automatic scroll towards the highlighted option:
Use it like this:
$('your_select').chosen({
scroll_to_highlighted: false
});
the parameter ´scroll_to_highlighted´ is optional and default true
I do not know how to describe my concern and thats why I could not find anything on Google. I want to draw a div is focused at page call immediately and if you press the scroll wheel to scroll this div also. Whether you are with the mouse over the div or outside.
sorry for my bad english, google translator .... embarrassing ^_^
Update: https://github.com/brandonaaron/jquery-mousewheel Thank you... thats worked on all browser but not on the ipad... is it possible on ipad? –
If you want to scroll the div even if the mouse is else where on the page try this plugin https://github.com/brandonaaron/jquery-mousewheel. Here is an example assuming your div has an id of content:
$(function() {
var $target = $('#content');
$("body").mousewheel(function(event, delta) {
$target.scrollTop($target.scrollTop() - (delta * 30));
event.preventDefault();
});
});
Quick fiddle: http://jsfiddle.net/5h47wygo/
Try using JQuery. On document ready you focus on the div. You make the div scrollable by setting the overflow property in css.
JQuery:
$(document).ready(function(){ $( "#scrollable_div" ).focus(); }
CSS:
#scrollable_div {
overflow: scroll;
}
I guess I need help. I'm trying to work with jQuery and I don't know much, but I'm having this problem with the "color active" of the menu.
Here is an simplified version of my work: http://jsfiddle.net/paulakfleck/aZGKz/
Here is the whole work (complete): http://nartecrobotica.com.br/g4/
As you can see, when I click in the menu, the "active color" works, but when I scroll the page or open the page, do not.
I guess the big mistake is in this line:
if($(window).scrollTop() == $("#g-4")){...}
I put the #g-4 as an example, but isn't working too.
I try other answers at Stackoverflow, but I'm unable make that work.
Some light, please?
If you want your menu to change as you scroll, you could try this:
$('.grid').each(function () {
if ($(window).scrollTop() > $(this).position().top - ($(this).height() / 2)) {
$('.myList a').removeClass('active');
$('.myList a#menu' + $(this).attr('id').split('-')[1]).addClass('active');
}
});
Updated your jsfiddle here.
are u looking for this ..
If yes then i am using .offset().top to compare.
one problem that was $(window).scrollTop() gives the scrollbar postion in integer and your divs position is fixed hence you need to do a range check before you apply the class.
Check demo
i'm working on a split scrolling site with two columns. And it's working great, but there is one problem i can't seem to solve. It's when i stop scrolling and the columns are positioned like this:
They need to automatically position themselves next to each other, so the user gets to see the full nicely aligned image. Now i've tried using Jquery Inview:
$('.content:nth-child(2)').one('inview', function (event, visible) { // i know the selector is wrong just for example purposes
if (visible == true) {
$('col.left').css( "top", "0" );
} else {
// element has gone out of viewport
}
});
But that doesn't seem to do the trick.. Using inview is probably the wrong way to go anyway. Now i have tried googling a solution but i can't seem to be able to find anything that does the trick. Does anyone know a plugin that does this for me? Or if someone can point me in the right direction that would be awesome.
JSFIDDLE
Thanks in advance
You could call a function to align the left and right after the user has completed scrolling. This example assumes the left and right columns are the same (as in your example).
...
$(window).scroll(function () {
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
clearTimeout(t);
t = setTimeout(function(){scrollend();},200);
});
function scrollend(){
//console.log("scrollend");
clearTimeout(t);
$('.right').css('top', (0 - $(window).scrollTop()) + 'px');
}
...
E.G: http://jsfiddle.net/u9apC/4/
Is there a way to tell if you have scrolled passed the center of the web page or in other words, when you have scrolled passed exactly half of the web page and your scrollbar is situated in the lower half of the browser window?
I want to be able to trigger this:
$('.pineapple-man').show(); when I have scrolled down passed half of the page?
Is this possible at all?
Your help would be so kind!
You can get the pixel amount of an element has been scrolled by using .scrollTop(). To listen to scroll events use .scroll().
When you want to identify the halfway, use height of the scroll:
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('.pineapple-man').show();
}
});
If you are scrolling some other element than the whole window/body, please feel free to change the selectors.
To make the showing one-timer, add the removal of scroll event listener, by adding the following after the .show() call:
$(window).unbind('scroll');
I guess you want to do something like this:
if($(document).scrollTop() > $(document).height()/2){
$('.pineapple-man').show();
}
where scrollTop() gets the current horizontal position and height() defines the document height.
See the scroll event and the scrollTop method.
you can use the focus event if you scroll down to it (just like jQuery uses for their comments)
jQuery('selector').focus(function() {
jQuery('.page').show();
});