I am using iscroll and it works well until one point but at some point the scrolling area is bouncing back.
setTimeout(function () {
var gridScroll = new iScroll('iscroll-wrapper-grid');
}, 100);
http://jsfiddle.net/hjakw/
ul {
margin:0;
}
Fixes the problem. Not sure why iscroll doesn't take margin into account. Maybe it says something in the docs about that.
Related
I'm using Hammer.js to look for horizontal pan gestures, I've devised a simple function to clicks a button when panned left or right. It works okay, except the vertical scroll doesn't do anything on a touch device, or it's really glitchy and weird.
Here's the function:
var panelSliderPan = function() {
// Pan options
myOptions = {
// possible option
};
var myElement = document.querySelector('.scroll__inner'),
mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan(myOptions));
// Pan control
var panIt = function(e) {
// I'm checking the direction here, my common sense says it shouldn't
// affect the vertical gestures, but it blocks them somehow
// 2 means it's left pan
if (e.direction === 2) {
$('.controls__btn--next').click();
// 4 == right
} else if (e.direction === 4) {
$('.controls__btn--prev').click();
}
};
// Call it
mc.on("panstart", function(e) {
panIt(e);
});
};
I've tried to add a horizontal direction to the recognizer but it didn't really help (not sure if I did it even right):
mc = new Hammer.Manager(myElement, {
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
Thanks!
Try setting the touch-action property to auto.
mc = new Hammer.Manager(myElement, {
touchAction: 'auto',
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
From the hammer.js docs:
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
User patforna is correct. You need to adjust the touch-action property. This will fix scrolling not working when you have hammer bound on a big element in mobile.
You create a Hammer instance like so
var h = new Hammer(options.contentEl, {
touchAction : 'auto'
});
I was working on a pull to refresh feature, so I need the pan event.
Add the recognizers.
h.get( 'pan' ).set({
direction : Hammer.DIRECTION_VERTICAL,
});
h.on('panstart pandown panup panend', eventHandler);
Inside the eventhandler, you'd look at the event that was triggered and manually call on event.preventDefault() when you require it. This is applicable for hammer 2.0.6.
For anyone who's looking the pull to refresh code was taken from - https://github.com/apeatling/web-pull-to-refresh
My problem was that vertical scroll was toggling a sidebar that was supposed to show/hide on horizontal pan/swipe. After looking at the event details, I realized that Hammer probably triggers panleft and panright event based on X delta and doesn't consider Y delta, so my quick solution was to check the pan direction in my handler:
this.$data.$hammer.on('panleft', (e) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
return;
}
this.isVisible = true;
});
I was stuck on this for several days. Hope this will fix your problem.
mc = new Hammer(myElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
touchAction: 'auto',
});
When the relevant gesture is triggered, we applied a css class to the element, that would set the touch-action to none.
mc.on('panmove panstart', event => {
mc.addClass('is-dragging');
}
);
.is-dragging {
touch-action: none !important;
}
Hammer 2.x does not support vertical swipe/pan. Documentation says:
Notes:
When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures
You can however use older 1.1.x version, which supports vertical gestures
——
Clarification: this refers to a ‘simple instance’ which is when you don’t pass in any recognizer configuration as the second parameter. In other words these are the defaults but can (and usually should) be overridden.
The menu is fixed and will follow on scroll. This does not work well with touch devices.
I want to call the script, using Modernizr, when it detect no-touch devises. But I'm unsure how to do this.
Also, is there elements from the Modernizr download-page that I need to accomplish this?
Here is my script:
$(document).ready(function() {
$(window).scroll(function() {
var header = $('#fixed-bar').outerHeight(true);
console.log(header);
var scrollTopVal = $(this).scrollTop();
if ( scrollTopVal > header ) {
$('nav').css({'position':'fixed','top' :'0px', 'border-bottom':'4px solid #ff5454'});
} else {
$('nav').css({'position':'absolute','top':'90px', 'border-bottom':'none'});
}
});
});
But I'm unsure how to do this.
You don't want to just use javascript, you want to use mostly css, and just toggle classes with javascript. Its more performant (which is super important with something like scroll loops).
#fixed-bar {
position: fixed;
top: 0px;
border-bottom:4px solid #ff5454;
}
.touch #fixed-bar, #fixed-bar.at-top {
top: 90px;
border-bottom: none
}
also, you don't want to directly attach to window.scroll. Instead, you want to use requestAnimationFrame (shimming where needed) to get the most buttery smooth animations possible. Here is a coffeescript example for jQUery.With that, you would be looking to do something like this
$(document).ready(function() {
// the height doesn't change, so we don't need to look it up on scroll.
var headerHeight = $('#fixed-bar').outerHeight(true);
$.request_scroll(function() {
var scrollTopVal = $(this).scrollTop();
if ( scrollTopVal > headerHeight ) {
$('nav').addClass('at-top');
}
else {
$('nav').removeClass('at-top');
}
});
Also, is there elements from the Modernizr download-page that I need to accomplish this?
just the Modernizr.touch test.
Be warned, this doesn't detect touch screens, just devices that support touchevents. That means new windows 8 laptops will be detected as .touch, and windows phones will not (they use pointer-events, not touch events).
I now have a fiddle with help from Patricks answers, but as you can see, the bar does still not go to the top, when you scroll as it should, like on my website.
Is there a solution for this? Tablets and phones don't like effects, which have $(window).scroll(function().
Currently I have this javascript on my website (the id's are different):
$(document).ready(function() {
$(window).scroll(function() {
var header = $('#fixed-bar').outerHeight(true);
console.log(header);
//this will calculate header's full height, with borders, margins, paddings
var scrollTopVal = $(this).scrollTop();
if ( scrollTopVal > header ) {
$('nav').css({'position':'fixed','top' :'0px', 'border-bottom':'4px solid #ff5454'});
} else {
$('nav').css({'position':'absolute','top':'90px', 'border-bottom':'none'});
}
});
});
While most tablets have problems with $(window).scroll(function(), it works on desktop pc. Not much consolation though.
Is there an alternate way of getting this to work? Using touch- and pointer events, maybe someone has a working fiddle og example?
I am using highcharts to graph multilple series (several lines with multiple points each on one chart). The user selects one or more points on multiple lines. Data about the selected points is shown in a gridview on my asp page. After some server side logic I would like to redraw the page and put an image, marker, flag or some other way of showing the user the redrawn graph with those points "marked".
I have been playing with jquery to add an image (small circle) to the div where the chart is rendered but not having much luck with the X/Y position of the image within the div.
Any advice or examples on how I might do this? Not married to image in DIV other suggestions appreciated.
I figured it out. I made a function that is called when the point is clicked passing the whole point object. An if statement toggles the marker of the ponit and using the acumulate = true it shows all the points on my curve that have been selected. Likewise if it is already selected it toggles the marker off. Much easier than what I was trying.
Here is my function to toggle point and make them all seleted
function ChartClicked(oPointObject) {
if (oPointObject.selected) {
oPointObject.select(false, true);
}
else {
oPointObject.select(true, true);
}
}
Here is a snipet of my graph. It is in the plotOptions I call the click event
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
ChartClicked(this);
}
}
}
}
},
Hope this helps someone else.
I'm starting my jQuery studies. I am having difficulties making a continuous slide animation, with images of some clients passing by the screen. Everything is good until I try to PAUSE the function when the user passes the mouse over the <ul> that is passing. When this occurs, the animation stops. But to restart, it takes a short delay (even with the .clearQueue();) this short delay remains. how do I correct this to eliminate the delay?
The function:
animar('.clientesHome ul');
// pauses / iniciate animation
$('.clientesHome ul').hover(
function () {
$('.clientesHome ul').clearQueue();
$('.clientesHome ul').stop();
},
function () {
$('.clientesHome ul').clearQueue();
animar('.clientesHome ul');
}
);
function animar(oque) {
if(!stoped){
$(oque).css('left', $(oque).position().left);
$(oque).clearQueue();
var regressivo = 2000;
$(oque).animate({
left: '-' + $('.clientesHome ul li').width() + 'px'
}, regressivo ,
'linear',
function (){
//
$('.clientesHome ul li:first').clone().appendTo('.clientesHome ul');
$('.clientesHome ul li:first').remove();
$(oque).css('left','0');
animar(oque);
});
}
}
When you're trying to find the bug, the best way it to strip down the code, to make it as simple as you can. This is your code striped down in jsfiddle: http://jsfiddle.net/r86Hk/. This example works just fine, there's no delay. In order to find your bug, start adding features of your code one by one, and when you see the delay, you've found your bug.
Without your original HMLT/CSS, this is the best I can do.
I'm currently using jQuery Waypoints to highlight nav items as you scroll through sections of the page. All of that works fine; thanks to copying the code from the demo at http://imakewebthings.github.com/jquery-waypoints/.
My demo is: http://www.pandlmedia.com/index.php/index_new
However, I also want to create a waypoint at the #footer div which would trigger an event to change the color of all of the nav links.
$('#footer').bind('waypoint.reached', function(event, direction) {
$('.nav ul a').addClass('white');
});
This doesn't work, as there's nothing telling it to change back once it exits the #footer div. I'm not very experienced in writing jQuery or using this plug-in for that matter. What do I need to add to make this work? Is the fact that there are two levels of waypoints also causing problems?
well, looking closer at the "sticky elements" demo, I was able to modify the example of the disappearing '.top' button to make this work for my own needs described above:
<script type="text/javascript">
$(document).ready(function() {
$('.container .nav ul a').addClass('black');
$.waypoints.settings.scrollThrottle = 30;
$('#footer').waypoint(function(event, direction) {
$('.container .nav ul a').toggleClass('black', direction === "up");
}, {
offset: '50%'
});
});
The key was to add the .black class below the .white class in my css so that it overrides the color parameter properly.