I'm trying to get this horizontal scrolling Plugin from Waypoints to work and it appears that there must be something outside of my knowledge that is missing.
Here's a codepen I made of the 1 and only example they had. It's supposed to trigger a little pop up notifier. Firstly, I'd like to see that this really works before I put anymore time/frustration into it - but I'd also like to attach an addClass or toggleClass to it.
var waypoint = new Waypoint({
element: document.getElementById('horizontal-waypoint-offset'),
handler: function(direction) {
notify('right-in-view waypoint triggered')
},
context: document.getElementById('overflow-scroll-offset'),
horizontal: true,
offset: 'right-in-view'
})
Codepen:
http://codepen.io/code-a-la-mode/pen/vOPWgM
Demo on Waypoint site:http://imakewebthings.com/waypoints/api/horizontal-option/
(ultimate use for this: I have a vimeo frame that slides in from an absolute left offscreen. I plan to have this toggle play/pause as it enters/leaves the viewport.)
I'd appreciate just seeing this work in any capacity, but if anyone wants to show off and make an example of it controlling play/pause as a vimeo (or youtube) screen slides in from off screen, I wouldn't mind AT ALL :)
The version of Waypoints you're using in that Pen is very old, 1.1.6. Creating waypoints using new Waypoint wasn't a feature until 3.0. Please try updating.
Related
I've seen a lot of posts that say v8 does not yet support viapointPushpinOptions and I was wondering if that was still the case. What I would like to do is make viapoints draggable, but have not yet figured out how. This is the code I have...
directionsManager.setRenderOptions({
viapointPushpinOptions: { visible: false },
viapointPushpinOptions: { draggable: true }
});
Any help is much appreciated. Thanks!
The viapointPushpinOptions property is deprecated and there are no plans to add it to V8. In V8 you can use the following for waypoint customizations:
waypointPushpinOptions
firstWaypointPushpinOptions
lastWaypointPushpinOptions
That said, we are planning to add a function soon to the directions manager to get all pushpins for the route which would make it easy to go through and customize each one as much as you want. That should be in the experimental branch soon if it isn't already there and will likely be in the main release branch in a few weeks.
If you can't wait, you can always hide all waypoints, then loop through the route data and create custom pushpins for each waypoint as you see fit. Here is a sample: http://bingmapsv8samples.azurewebsites.net/#Fully%20Custom%20Waypoint%20Pushpins
I am working with leaflet api.I can draw rectangles and polygons.I have bound the popup with every rectangle and polygon.When i click on drawn shape, popup opens(leaflet functionality).Popup contains some html(image).
As i am working on a demo application, i am wiling to try the fancebox plugin.
Means, when i click on drawn shape, instead of popup, i want to open up that image using fancybox.
Can i do that using simple method like using another function instead of .bindpopup.
Working Script (image loaded using fance box when we click on popup)
e.layer.bindPopup("<a class='fancybox' rel='group' href=''><img /></a>");
I can understand there must be some other javascript function to do it.
If there is some way to do it please let me know, as i am new to leaflet didn't have enough mental power to understand it yet but i hope i will....
Thanks for your time :)
I would just do e.layer.on('click', function() { //do fancybox init, perhaps like $(body).append("<a class='fancybox' rel='group' href=''><img /></a>")})
Although it makes a lot more performance sense to bind that event on the L.FeatureGroup holding all the shapes instead of one by one.
Is there a way to use FB.XFBML.parse without rendering the a Facebook plugin again which cause it to "flicker" (disappear et reappear).
Will be using the Facebook Like button or Facebook Recommandations Bar.
Live example: http://www.gablabelle.com/eve-d
Slide to view the flickering in the lower right corner.
$.address.state(ajax_object.path).crawlable(true).value(whereiam);
$(".fb-recommendations-bar").data("href",whereiamurl);
//$(".fb-like").data("href",whereiamurl);
fburl = $(".fb-recommendations-bar").data("href");
//fburl = $(".fb-like").data("href");
console.log(fburl);
FB.XFBML.parse();
Many thanks for your help.
You can limit the scope of the re-parse by passing in the parent DOM element to FB.XFBML.parse.
Add an opacticy layer over the top of the facebook plugin div when a "page change" is needed. Animate it to fully opaque. Call the FB.XFBML.parse() and give it a few moments to re-render. Animate the layer to non-opaque, then remove the opacity layer from over the top of the facebook plugin div (or leave it there for the next time you need to do a "page change" without actually reloading the page.
This technique will give you a gracefully disappearing/reappearing plugin, rather than a jarringly harsh "flicker".
Cache the Facebook likes of the previous slide + current slide + next slide on a slide change event. So that when you go to the next or previous one and its Facebook like should already be ready/loaded, the user should not see a flickering. Unless he/she goes to fast with the slides.
I've had this recently.
I got around it by wrapping the XFMBL in a variable... don't know why but without it it seemed to flicker... a total hack of a way to stop the flickering but worked for me!!
if(call == 0){
FB.XFBML.parse();
call = 1;
}
DMCS provided what seems to be the only half-proper answer, but it's butt ugly. You don't know how long it'll take on each persons web browser to render the stuff. The callback which supposedly says it's rendered doesn't work either. Also the flicker isn't seen in firefox but only in google chrome.
I want to develop a site which is easy to use from a Playstation 3 PS3 game console web browser. I thought it would be good to make screen actions on button presses on the console.
I can find no information on how to do this after quite a bit of searching.
Any info or links highly appreciated!
Why not write a function that displays a message for every "keystroke" and you'll see what values they represent:
$(document).keypress(function(event) {
alert(event.which);
});
Then you can use the number you get from this test and create some logic based on that.
Like this perhaps:
if(event.which == 13) {
// display cool menu maybe?
}
From what I've tested so far, the left stick generates mouse events, left pad with arrows generates keyboard events corresponding to arrows, while the right stick generates a mouseevent but unfortunately it does not move the mouse, but rather scrolls the window.
I do not know how to detect in which direction the stick is pushed (unless the cursor actually moved or the background scrolled, in which cases it is quite trivial).
Check: http://vanisoft.pl/~lopuszanski/public/ps3/
I am having a bit of a weird problem with iOS platform for a page i am developing. This is the page in question. When clicking any of the case study images, the page will first unhide the required case study then scroll to it.
This works on all desktop browsers on Windows and Mac, but on the iPhone and iPad you get a horrible flicker as it scrolls down.
Not quite sure how to debug or fix this issue.
Any ideas would be of great help!
Thanks in advance,
Shadi
UPDATE 1
The latest page can be found here. Still haven't found a fix - if anyone has any idea it would be amazing!
If you need vertical scroll only, you could use {'axis':'y'} as settings to scrollTo method.
$.scrollTo(*selector*, *time*, {'axis':'y'});
Have you tried this:
$('a[href=#target]').
click(function(){
var target = $('a[name=target]');
if (target.length)
{
var top = target.offset().top;
$('html,body').animate({scrollTop: top}, 1000);
return false;
}
});
If you're just scrolling the page vertically you can replace the entire jQuery scrollTo plugin with this simple line:
$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic');
Personally I do something like this
$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){
//do stuff
});
I found that if I try to do other js work while it's scrolling it makes the browser crunch and the animation isn't smooth. But if you use the callback it'll scroll first, then do what you need.
I put a -15 at the end of .top because I wanted to show the top edge of the div I was scrolling do, simply for aesthetic purposes. 1000 is the duration in milliseconds of the animation.
Credit goes to the poster, animate, for the tip off.
Defining {'axis':'y'} has made it right! It helped me with slideUp/Down flickering.
I'm not sure if this applies to jquery animations. But the following seems to affect CSS animations.
http://css-infos.net/property/-webkit-backface-visibility
Syntax
-webkit-backface-visibility: visibility;
Parameters
visibility
Determines whether or not the back face of a transformed element is visible. The default value is visible.
edit
Try applying it to every element and see what happens.
*{
-webkit-backface-visibility: visible;
}
and try
*{
-webkit-backface-visibility: hidden;
}
It's just a guess really...
I will also confirm Tund Do's method works flawlessly. If you need a "left/right" variation of the same thing (as I did) here it is:
$('.pg6').click(function(){
var target = $('#page6');
if (target.length)
{
var left = target.offset().left;
$('html,body').animate({scrollLeft: left}, 1000);
return false;
}
});
I would guess you could combine the two, grab the top position and chain the animates for a "left/right/up/down" animation also.
I had the same problem.
The problem is the ScrollTo plugin. Instead of using scrollto.js just use .animate with scrollTop. No more flickering in ipad/iphone.
Here it is with no flickering http://www.sneakermatic.com
You should include {axis: 'y'} in your options object. Also be sure that you have not enabled interrupt option. You can test this with {interrupt: false}.
You need to add e.preventDefault(); to each .click() call. This prevents the browser's default action, which is to stay in the same place. Hope this helps!
i.e.
$("#quicksand li, .client-list li").click(function (e) {
e.preventDefault();
...
});
I'm having the same flickering on iPhone -- even with the preventDefault and return false options of canceling the default click event. It appears that on the device it tries to go back to the top of the page before scrolling. If you have both a scrollTop and scrollLeft animation going on it really gets buggy. It's jQuery's issue.. I've seen a scrolling method with mootools that doesn't have this issue. See this page: http://melissahie.com/
Thanks nicole for giving the example with mootools.
It really seems to be a jQuery issue when trying to do a animation on BOTH scrollTop and scrollLeft.
With mootools:
var scroll = new Fx.Scroll(window, {duration: 1000, wait: false, transition: Fx.Transitions.quadInOut});
scroll.start(y, x);
it works flawlessly on iOS5!