I have an animation that slides across the x coord's on click of mybutton.
- Locally it works great
- on the Server it does not Animate on the first Click, but after that it works like a dream
- I am loading the swf via SWF object 2.2
- this is most peculiar, Has anyone experienced this? if so, Have you solved it ?
Code:
import com.greensock.*;
rightarrow.onPress = function(){
trace ("rightarrowb utton clicked!");
trace (move_mc._x);
TweenLite.to(move_mc, .5, {_x:-80});
}
leftarrow.onPress = function(){
trace ("lefttarrowb utton clicked!");
trace (move_mc._x);
TweenLite.to(move_mc, .5, {_x:396});
}
it might be a problem with focus within the page, rather than use onPress, try onRelease and see if it helps.
Related
I'm using Turbolinks 3.0 on iOS with Fastclick to remove the 300ms iOS delay, with the transition cache enabled. This provides a really great/instant experience with Rails on mobile devices.
I have a link on both pages in the same place, and when I press the link on one page, fastclick+turbolinks loads the next page instantly - but the event passes through to the next page and the link on that page gets clicked too, triggering both links and navigating pages twice.
The event will actually pass through to anything thats in the same place (if I click a link and a form input is on the same place on the next page loaded, it will focus on the input).
I can actually do a 'faster tap' with my finger to prevent it from happening. Its only when the tap is more sluggish (it lasts longer) that it happens.
Any help or insight would be greatly appreciated!
After tons of depressing debugging and thinking over the past few days, this solution seems to work (but is very hack-ish):
JS:
$(document).on("page:restore", function() {
$("body").prepend("<div id='ghost-blocker' onclick='return false;'></div>");
setTimeout(function() {
$("#ghost-blocker").remove();
}, 300);
});
CSS:
#ghost-blocker {
position: absolute;
left: 0;
right: 0;
height: 100%;
width: 100%;
z-index: 999;
}
I basically debugged all the callbacks with alerts and saw that the last thing that happened after loading the page from the cache but before the ghost click fired was the page:restore function. I made a blocker div that covers the whole screen and cancels out any click event, then removed it 300ms later. This does the job, albeit sloppily. The page:restore callback is also a great time to reset the page in any other way that you need, such as resetting loader images that were left over (I'm using ladda).
I'm now going to try to dive deeper and attempt to catch the ghost click event and prevent it from happening instead of manipulating the DOM with a whole div. If anyone has any insight on how to do this, I'd love to hear.
I've been searching to see if there is a way to check whether the context menu in a nw.js app has been closed(if you click away from the menu or on another window, etc so that the menu disappears). I haven't been able to find an answer.
I have it working when clicking off, but not when clicking outside the window(I've tried adding blur and focusout to the event but those didn't do anything):
contextMenu.popup(e.x, e.y);
$( document ).one( "click ", function() {
alert(0);
});
Any help figuring out how to solve this would be great.
Alright, figured it out, had to include this;
var win = gui.Window.get();
win.on('blur', function() {
alert(0);
});
I am creating a new jQuery UI dialog and then resizing it to a higher height.
When I click the close button (X), the dialog moves up to the top of the screen instead of closing itself.
This occurs only in Internet Explorer (IE9 in my case).
Any workarounds to this?
Here's the js fiddle reproducing this bug:
http://jsfiddle.net/5WJBR/1/
$(document).ready(function(){
$('#dialog').dialog();
$('#dialog').dialog('option','height', '1000');
});
I managed to make it work by removing the vertical scrollbar using css overflow-y:hidden but I in my use case I definitely need the vertical scrolling activated.
Thanks for any help,
Jimmy
Ok here's the fix for those interested (applies only for jQuery UI version 1.9.1 and below):
var that = this;
$('.ui-dialog-titlebar-close').on('mousedown', function({
that.dialog.dialog('destroy');
});
FYI, binding the titlebar on the 'click' event will not work!! Mousedown does.
Thanks,
-J
I would like to automatically scroll to a particular div when the page loads. However, I seem to get into some conflict with JQM's scroll to top functionality.
I am using the following code:
$.mobile.silentScroll($("#myElementId").offset().top);
which does not scroll correctly when wrapped like this:
$('[data-role=page]').bind("pageshow", function() {
$.mobile.silentScroll($("#myElementId").offset().top);
});
but works correctly with a little timeout like this:
$('[data-role=page]').bind("pageshow", function() {
setTimeout(function(){$.mobile.silentScroll($("#myElementId").offset().top);},100);
});
the problem with the last piece of code is that it causes a flicker, with a jump to the top and then a jump down the page. Any ideas how to avoid this?
Your setTimeout works because the jQuery Mobile framework remembers where you were scrolled-to if you are returning to a page you've been to before and you have to wait for their scroll to complete before running your own. You can essentially disable this feature by changing the minScrollBack option inside the mobileinit event handler to something really big:
<script src="[jQuery Core]"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.minScrollBack = 90000;
});
</script>
<script src="[jQuery Mobile]"></script>
That should disable the auto-scroll that the jQuery Mobile framework does when you visit a page on a subsequent visit.
Docs: http://jquerymobile.com/demos/1.0.1/docs/api/globalconfig.html
First post on StackOverflow!
Thanks for this, I have been working on a project that uses quite a bit of custom animation for the transitions and while it took a while to get here, Jasper's answer set me in the right direction, it was just missing a bit of code:
<script src="[jQuery]"></script>
<script>
$(document).bind("mobileinit", function(){
$.extend($.mobile, {
minScrollBack: 90000 // turn off scrolling to position on last page
});
});
</script>
<script src="[jQuery mobile]"></script>
This seemed to do the trick!
Ref: http://jquerymobile.com/test/docs/api/globalconfig.html
You guys ever tried the answer???
It does not work unless you set $.mobile.defaultHomeScroll to your wanted scroll as well.
That is, two steps.
1. set $.mobile.minScrollBack to a large enough value.
2. at page load, set the defaultHomeScroll to desired value.
Then it works.
I did not have to do much ... I got it working with the following on the section.
<script>$(function() {$.mobile.defaultHomeScroll = $(window).scrollTop();});</script>
I'm working on some video controls for the iPad. When the user clicks a button, the video plays and immediately goes fullscreen. When the user clicks the "Exit fullscreen" button, I want the video to pause. If I could disable the "Exit fullscreen" button and force the user to use the "Done" button I would, but that doesn't seem to be an option.
My problem is that the webkitfullscreenchange event does not seem to fire on the iPad. It works flawlessly in Chrome on the desktop. I've read that the iPad browser won't run your event if metadata has not been loaded (which doesn't load until the video is played on the iPad - preload is ignored), but I have confirmed that metadata has been loaded before the fullscreen event is firing. Does anyone have any ideas on why the webkitfullscreenchange event will not fire on the iPad?
<script type="text/javascript">
$(document).ready(function() {
$(".jqVidLink").click(function(e) {
e.preventDefault();
var vidId = $(this).attr("name");
playPause(document.getElementById(vidId));
});
$(".jqVideo").each(function() {
this.addEventListener("webkitfullscreenchange", function(){
alert("hi2"); //never fires
if (document.webkitIsFullScreen == false) {
playPause(this);
}
}, false);
this.addEventListener("loadedmetadata", function() {
alert("hi"); //firing
this.webkitEnterFullscreen();
}, false);
});
});
function playPause(myVideo) {
if (myVideo.paused){
myVideo.play();
}
else
myVideo.pause();
}
reminds me of an article calling the iPad the new IE6. Don't expect the iOS browser to behave like desktop safari.
as a workaround you could show the video inline (--> not with native fullscreen) and add your own controls. downside of this approach is that the browser navigation wastes some vertical-space. upside is you can fully control what's happening. following this idea you can imitate fullscreen by putting the video (and your custom controls) inside a container which then has to be positioned fixed and sized to 100% for width and height - i did that by adding a class as you don't have to worry about the previous size when switching back to normal. instead you simply remove the class again.
one other thing to keep in mind if you wanna do this: you cannot move a video-node via JS inside the container on iOS. Instead you either have to provide the full markup in html or clone the video-node, remove the original and insert the cloned one inside your container.
you can try the .element:-webkit-full-screen css property
I was not able to register a fullscreen exit event for iframes on Safari