I'm building a site based on jQuery mobile, with the following script versions.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
I've got an issue with a popup, displayed by the following code.
$(document).on("pagecontainershow", function(){
if(onPgLd==true){
onPgLd=false;
$("#globPageLoad").popup("open");
};
});
The popup opens as I'd expect, but then immediately closes again.
The only other event-triggered code I have is inside a pagecreate block, which I understood completes prior to pagecontainershow.
Is there an event that happens post-pagecontainershow, or is something else happening?
(I even added ' data-dismissible="false" ' to the off-chance it would make a difference. It didn't...)
I've only been able to test the site on Chrome (laptop and mobile).
Any ideas?
after looking at comments below, none the wiser. The fiddle works exactly as I'd want, but I can't see programmatically where it's different to my code - the .enhancewithin() is called during pagecreate, and the pop up looks exactly as I'd hope.
I tried amending the function to this;
$(document).on("pagecontainershow", function(event){
console.log("pagecontainershow");
//event.stopPropagation();
if(onPgLd==true){
onPgLd=false;
$( "#globPageLoad" ).bind({
popupafteropen: function(event) {
event.stopPropagation();
console.log("popupafteropen");
}
});
$("#globPageLoad").popup("open");
console.log("popup open");
};
});
Everything logs in the order I'd expect it to, but the popup still disappears.
Another clue (I think?) is that the url remains suffixed by "#&ui-state=dialog", which makes me think this is a glitch as the popup is not being closed intentionally by jQuery?
So ive been wracking my brains with this for a while but can't figure out why this isnt working.
Im setting up some simple functionality to prevent a user from leaving a page via hyperlink and instead displaying an overlay. So ive set up a simple event listener on all links which when clicked will stop page load and fire up the overlay.
The mmClickRecieved variable is for another part of the script and is just to ensure a user only ever sees this overlay once. The timeout function will fire the same overlay if the user is inactive on page for a certain period of time.
However when i try this code, when clicking a hyperlink the overlay fires fine but the page does not stop loading. Ive tried various bits of this code in isolation and it all seems fine, cant quite figure out why this is not working. Any ideas anyone?
$("a").click(function() {
if (mmClickRecieved === false) {
if (navigator.appName == "Microsoft Internet Explorer") {
window.document.execCommand('Stop');
}
else {
window.stop();
}
clearTimeout(mmTimeout);
mmNumberOverlay();
}
else {
// no further action
}
})
update: not sure why ive got a -1 for this.. I can update the question if it doesnt make sense
Why not use preventDefault - it stops the user from following the link that was clicked and instead allows you to do something else with this click:
var mmClickRecieved = -1;
$("a").click(function(event){
// I am using this as an easy way to mimic your value
if(!(++mmClickRecieved)){
event.preventDefault();
mmNumberOverlay();
}
// You don't need an else, since the event wont be prevented
})
function mmNumberOverlay(){
alert("This happens only once!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Go to Google (this is not allowd in this snippet)!
I have an animation that triggers when a link is clicked. It is a jQuery animation that enlarges a div then fades out. To ensure speed, at the exact same time that the link is clicked, the redirect is fired off. This has to happen and I cannot put the redirect in the success function of jQuery's animate(). This redirect is done via a form submission. On Chrome, Firefox, and IE it works as expected, the animation plays and if the page loads entirely before the finish of the animation, it redirects but the animation does play.
On Safari (primarily testing on iPad), as soon as the link is clicked, the page seemingly 'freezes' and the animation fails to execute. There are also GIF's that are on the screen at page load, and if I click a link while those GIF's are on screen and animating, they pause as well. I have seen a post that says to set a timeout, apply styling, then submit, but the problem is that although the HTML will apply that CSS style, it still freezes the screen, and they are not dealing with animation, just static CSS styling.
Here is some example code to show the method of how I am accomplishing this (it is not tested just trying to illustrate my point, so there may be missing parts or syntax errors):
var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency.
$("#link").on("click", function() {
var form = $("<form method='POST'></form>");
form.attr("action", "http://someurl.com");
var input = $("<input type='hidden'/>");
input.val(someData);
form.append(input);
$(document.body).append(form);
form.submit();
//Form has been submitted, now run a short animation for the remaining life of the current page
$(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="link" style="width: 100px; height: 100px; background-color: #FFF">Click Me</div>
Essentially, I need to make sure that once the Safari browser begins to load a new page / link, it does not stop updating the current page. This sounds like a problem in Safari from what I have seen, but this issue has also not been run into very commonly across the web as I have seen. There are posts dealing with GIF animations, but this is a CSS style animation.
Thanks for any help!
What I have found is that Safari actually pauses all animations as soon as the pagehide event is fired, whenever the browser begins loading a new page.
After pagehide, it won't even allow CSS changes such as showing a spinner that was previously hidden.
In order to show the spinner before the pagehide event fires, I needed to add listeners for a[href] clicks and ajaxComplete events.
My guess is that Safari does this to enhance performamce by focusing all available CPU and GPU power to the rendering of the next page.
I think this is a bit extreme, and unfortunate for UX where in many mobile web applications we use spinner animations at page unload to show the user something is happening during the few seconds while a new page is being fetched.
I have so far not found a way to preserve motion animation during page unload; at best the spinner appears frozen but still shows up... a possible workaround is to use a static message to indicate it's "Loading..."
You could use a setTimeout to go to the link after the animation.
var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency.
$("#link").on("click", function() {
setTimeout(doThisAfterTimeExpires,2000);
$(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);
});
function doThisAfterTimeExpires(){
var form = $("<form method='POST'></form>");
form.attr("action", "http://someurl.com");
var input = $("<input type='hidden'/>");
input.val(someData);
form.append(input);
$(document.body).append(form);
form.submit();
}
Safari complains that it can't find the variable someData, it is trying to set the value of the input to the value of a variable that does not exist and stops executing that portion of the page's JavaScript.
[Error] ReferenceError: Can't find variable: someData
Just create the variable like this:
// [snip]
var input = $("<input type='hidden'/>");
var someData;
input.val(someData);
// [snip]
and it will work in Safari.
Write the code for animation before form submission. Perform form submission after some time. That is:
var someData = 'foo'; //This value is irrelevant, just there for syntactical consistency.
$("#link").on("click", function(e) {
//Write your code for animation at first.
$(this).animate({width: "100px", height: "100px", opacity: "0"}, 150);
//write the code for form submission
setTimeout(function() {
var form = $("<form method='POST'></form>");
form.attr("action", "http://someurl.com");
var input = $("<input type='hidden'/>");
input.val(someData);
form.append(input);
$(document.body).append(form);
form.submit();
}, 1000);
});
Possibly use some Ajax to load the new page in a hidden frame while the animation is still going. When it finishes loading, do a normal redirect to the same URL. Then hopefully it would be an instant redirect since the new page may then be cached and its underlying query already processed.
I had this issue for a long time and tested many differents ways.
I noticed that you still can use css animations, this mean you can still have an nice effect while safari is loading.
But, this require that your animations is not using any delays, Animation have to start as soon as the form is submitted.
For example, I wanted to have 3 car, appearing one after the other, while the page is loading.
As I was using a delay for each car before animation start, only the first one was appearing, then the animations stop, and car2, car3 never appeared.
But, when I removed the delay of the second and third car, this work fine, even if the animation is long.
This mean :
Animation delayed for 1s : Fail, don't even appear
Animation starting at 0s : Works, even if animations duration is above 5s.
So, I assume Safari is stopping all animations, except those already launched
This worked for me.
I had the same issue. Unfortunately, the solution using setTimeout() didn't work for me. With a submit delay the CSS animation starts, but freezes immediately when the page start loading.
So what I finally did, was a special animation, less dynamic, especially for safari browser:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if(isSafari){ // If Safari browser
$("span#loading_without_spinner").css("display", "block"); // This span contains the text "Loading..."
}else{ // Other browsers
$j("span.spinner").css("display", "block"); // This span contains my css svg animation
}
I'm still interested if someone manages to force a CSS animation during a page load.
When the page is loaded the focus/blur state isn't activated. When switching to for example another tab blur show, and upon switching back to the page focus activates – but at first load of the page none of the states are activated, why? Is this expected behavior or have I messed something up?
$(function(){
$(window).focus(function() {
document.title="focus";
});
$(window).blur(function() {
document.title="blur";
});
});
Update
Seems like Adding }).focus(); as suggested by Rory in the comments doesn't make any difference anymore due to changes in browsers – so I'm still looking for a way to detect focus on page load.
Update 2
I've added an onload to act as a "pretend focus", so far this is the best I've managed to come up with. Don't know if this a reasonable solution, so if you've got a better one I'd love to take part of it.
window.onload = function(){
document.title="focus";
};
window.onblur = function() {
document.title="blur";
};
window.onfocus = function() {
document.title="focus";
};
I am using jQuery to convert a navigation menu to a select list when the browser window is small, for a responsive design. However, selecting Options of select list redirect to appropriate page in Firefox and Opera, on Webkit based browsers, selecting an option does not do anything.
Live demo - http://emoeco.com
$('ul.menu').each(function(){
var action="loadPage(this.form.elements[0])";
var form=$(document.createElement('form')).insertBefore($(this));
$(form).attr({
method: 'post'
});
var select=$(document.createElement('select')).appendTo(form);
$(select).attr("onchange", action);
$('>li a', this).each(function(){
var a=$(this).click(function(){
window.location.href=this.href;
}),
option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()).click(function(){
a.click();
});
});
});
First, you should open a JavaScript console and look at the errors. Most of them are due to files not being found.
Second, just looking at the heads tag makes me die a little inside. I know this is not the purpose of your question, but you create enormous overheads by loading the same things twice or more. Please spend the 5 minutes needed to fix that; the site will load a million times faster
Third, if I understand your question right, you should do it in a way that the user has to click a button to traverse to a page. Plus, instead of completely removing the menu, why don't you scale it?
Fourth, if you dislike Thirds, why not dump the whole anchor thing, and just use select's native 'change' event?
$('select').change(function() {
location.href = $(this).children('option:selected').val();
});
Edit: As to why it doesn't work only in WebKit, it's because they don't tie the click event to the 'option' element. At least that's what I think: You can try this example (add /edit to the url to see the source code.) Tested working in FireFox, got nothing in Chrome