We Keep Coding

jquery-ui dialog in colorbox results to Maximum call stack size exceeded error

I am using jquery-ui and it's dialog functionality to display modal dialogs in my web app. It works ok.
At one use case, I have a colorbox popup window on a screen, and once user finishes his input I need to display a confirmation dialog.
Also here everything actually works thanks to error handling on all the major browsers I tried, but I worry what problems might some combination of javascript engine&browser could cause.
The error I get is call stack size overflow (Chrome shows it as Uncaught RangeError: Maximum call stack size exceeded.).
The code for the modal dialog is:
function modalDialog(dialogText, dialogTitle, okFunc, okLabel, cancelFunc, cancelLabel) {
var dialogButtons = {};
dialogButtons[okLabel] = function() {
if (typeof(okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
};
dialogButtons[cancelLabel] = function() {
if (typeof(cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
};
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
buttons: dialogButtons
});
}
The colorbox is called in javascript, and it takes embedded div from the actual page as it's content:
$(function() {
$(".colorbox-load").colorbox({
inline: true,
overlayClose: false,
href: "#popupContents",
height: "320",
width: "300"
});
})
In the popup, I have a button which just opens up the confirmation dialog.
I apologize in advance as it's my first time using JSFiddle, and I wasn't able to get colorbox and dialog popup match exactly how it looks on my page (it actually pops up properly on top of the colorbox and not "in the background"). I'm not sure if this is because I had to use different versions of jquery and jquery-ui (I couldn't find same combination I am using from the pulldown) or something else.
A JSFiddle is here. If you click around the colorbox area once the "open dialog" button has been pressed you should get same error (firefox and Chrome seem to react slightly differently when to show the error).
Thank you for any suggestions!

It seems like the Dialog and Colorbox are fighting for the focus. Setting the trapFocus setting to false will resolve this issue. Of course it might have some side effects for your page depending on how you use it. Please consult the official documentation for details.
$(function() {
$(".colorbox-load").colorbox({
inline: true,
overlayClose: false,
href: "#popupContents",
height: "320",
width: "300",
trapFocus: false
});
})

How to open Safari from a WebApp in iOS 7

In previous versions of iOS, <a> tags would open Mobile Safari, and you had to intercept those to instead stay inside the webapp (an HTML page that has been saved to the home screen by the user).
Starting in iOS 7, all links are staying inside the WebApp. I cannot figure out how to get it to open Safari, when I really want it to.
I've tried using window.open and a target="_blank" but neither works.
Here is a sample. https://s3.amazonaws.com/kaontest/testopen/index.html
If you save that to your home screen in iOS 6, the link opens Safari. But in iOS 7, it doesn't.
Note that this is the OPPOSITE question that everyone is usually asking ("how to NOT open Safari"). That behavior seems to be the new default, and I can't figure out how to get the old behavior back!

Update 10/23/13: Fixed in iOS 7.0.3. Add a target="xxx" attribute to your links to do this. Also works with mailto: and friends.
This is a bug in iOS 7.0, 7.0.1 and 7.0.2 and there's no known way to do this.
It's a regression from earlier versions of iOS, where links that open in Safari work just fine. It appears to be a part of a cluster of problems revolving around opening URLs, with no external URL schemes working (for example "mailto:" doesn't work either).
The usual suspects of working around a problem like this unfortunately don't work (for example using a form and submitting it with a target of "_new").
There's other grave issues, like alert and confirm modal dialogs not working at all.
It may help to submit these as bugs to Apple, http://bugreport.apple.com

Having an anchor tag with target _blankwill work in iOS 7.0.3 but using window.open will not work and will remain to open within the webview in 7.0.3:
window.open('http://www.google.com/', '_blank');

This is a known issue for the last couple months of betas. There are no work arounds, and from what I can tell Apple has been silent on any ETAs on fixes, or even recognizing it's a bug. Bug reports have been submitted, but not updated/responded to.
More: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

UPDATE
Just wanted to let any one following this know that iOS 7.0.3 seems to fix the issue. I've keep standalone webapps saved for testing and the update released today restored external link/app functionality. So I've updated my code to let customers know to update their phones instead of deleting and re saving the web app.
I was going to just add a comment but apparently this is too long.
Apple set the stage for a WebApp world when they allowed chromeless webapps to be saved to the homescreen of the device. This "bug" feels like a major step backwards. It doesn't seem very apple to leave such a gapping bug in a final release. At least not one that, once they become aware of it, they don't publicly state they are working on a fix for it like they did with the lockscreen bypasses. I can't help that this feels intentional though there doesn't seem to be a clear reason why.
For developers dealing with this issue the only solution I could find was to
1st) Set the meta tag apple-mobile-web-app-capable to "no" - this prevents future users from dealing with the problem
2nd) Updated the code in our webapp to look for "standalone" and iOS version 7+. When conditions are meet I offered a popup that stated the issue and added a link to that page and asked the users for their forgivness and requested they copy the link and paste in in safari.
I wrapped the link in edge to edge tag with line breaks above and bellow to help make the copy and pasting process of the url a bit easier.

iOS v7.0.3 released 10/22/13 fixes the problem.

I found two solutions for the time being to this problem, both of which obviously using preventDefault on the external links.
If you're linking to another website or something to download, the only option I see is to ironically alert the user to hold their finger on the link to get the touch callout prompt. Then again, depending if it's a website or a PDF, instruct them to either copy the link or in the case of a PDF, add it to their reading list. Since the alert and confirm modals are also broken you'll need to implement your own modal notifications. If you already have that it shouldn't be that much trouble.
Update [2013-10-25] Apparently it's been fixed in iOS 7.0.3 and links open in Safari...
Edit [2013-10-05] Here's pretty much what I use with a jQuery UI modal
// iOS 7 external link polyfill
$('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]').on('click', function(e) {
if (navigator.standalone && /iP(hone|od|ad) OS 7/.test(navigator.userAgent)) {
e.preventDefault(); e.stopPropagation();
var href = $(this).attr('href');
var $dialog = $('<div id="ios-copy"></div>')
.html('<p>iOS 7 prevents us from opening external links in Safari, you can continue to the address and risk losing all navigation or you can copy the address to your clipboard by <strong>holding your finger on the link</strong> for a few seconds.</p><p><a style="background-color: rgba(0,0,0,.75); color: #fff; font-size: 1.25em; padding: 1em;" href="' + href + '">' + href + '</a></p>')
.appendTo('body')
.dialog({
title: 'External link',
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
});
The other workaround is using ajax or an iframe to load the external content, but unless you have a good sub-browser or something in your app it will look sketchy. Here's something along those lines.
// iOS 7 external link polyfill
if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent) && window.navigator.standalone) {
$('a[rel=external], a[href$=".pdf"]').on('click', function(e) {
e.preventDefault(); e.stopPropagation();
var link = this;
var href = $(link).attr('href');
var frameContainer = $('<div></div>').css({
position: 'absolute',
left: 10,
top: $(link).position().top,
opacity: 0,
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch',
height: 520,
transition: 'opacity .25s',
width: 300
});
var iosFrame = $('<iframe class="iosFrame" seamless="seamless" width="1024" height="5000"></iframe>')
.attr('src', href)
.css({
height: 5000,
'max-width': 1024,
width: 1024,
overflow: 'scroll !important',
'-webkit-overflow-scrolling': 'touch !important'
});
var iosFrameClose = $('<i class="icon-cancel icon-remove icon-3x"></i>').css({
position: 'absolute',
left: -10,
top: $(link).position().top - 20,
'text-shadow': '1px 1px 1px #000',
transition: 'opacity .25s',
opacity: 0,
'-webkit-transform': 'translate3d(0, 0, 0)',
width: '3em',
height: '3em'
}).on('click', function(e) {
e.preventDefault();
setTimeout( function() {
$(frameContainer).remove();
$(iosFrameClose).remove();
}, 250);
});
iosFrame.appendTo(frameContainer);
frameContainer.appendTo('body');
iosFrameClose.appendTo('body');
iosFrame.contents().css({
'-webkit-transform': 'translate3d(0, 0, 0)'
});
// Show this thing
setTimeout( function() {
$(frameContainer).css({ opacity: 1 });
$(iosFrameClose).css({ opacity: 1 });
}, 1);
});
}

window.open('http://www.google.com/'); // stays in web app view
<a href='http://www.google.com/' target='_blank'>Click Here</a> // opens in safari
If you want to open Safari, but using an anchor tag like this isn't possible for whatever reason, the JavaScript solution to this question will open in Safari as well.

It looks suspiciously like an intentional bug to limit the ability of web apps to deliver advertisements. Maybe you can try open the new page in an iframe.

EDIT: Sorry, I misread your original problem. This solution was for opening an external website at all. Basic A href tags used to work in opening links and stopped working in iOS7. This was the only way I could get it to open an external link at all.
Here's how I got it to sort of work with a webapp saved to desktop in iOS7.
function openpage()
{
window.open('http://www.yourlinkhere.com', '_blank');
}
...
<a ontouchstart="openpage();" onclick="openpage();">LINKED TEXT</a>
The issue though is that it seems to ignore the target option and it opens it in the same full screen desktop webapp and there is no way to navigate back that I can see.

window.open('http://www.google.com/', '_system');
this will open native Safari Application even on latest version of iOS...
Happy coding!!

Maybe you should remove the meta setting of "apple-mobile-web-app-capable" in the head of page2.html
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW1

My jquery code is working in google chrome console not after saving it?

i have to select and deselect images and Jquery my code is working fine in Google developer console but not after i save it in my file.
This work in chrome developer console not when i have it in my code
image
This was the last question which i asked it is related to thisReference
mycode
$(document).ready(function() {
var selectpic;
$('img').click(function () {
$('img.highlight').not(this).removeClass('highlight');
$(this).toggleClass('highlight');
selectpic = $(this).attr('src');
});
});
This is actually inside a popup div.
main window which calls the above popup
function showImageUploadDialog(event) {
$(".ui-widget-overlay").show();
cdDiv();
$('#gallery').hide();
$('#upload_popup').dialog({
height : 'auto',
width : '848px',
modal : 'true',
top : '58px',
left : '559px',
resizable : 'false',
dialogClass : 'pop_up'
});
$(".ui-dialog-titlebar").hide();
}
I think it should be made global,And I don't know how to make it.

it worked after updating to the latest version of jquery!!

Javascript Fancybox 1.3.4 Solution but needed it further explained please

This answer has been taken from this post:
Fancybox problem on iPhone
This was voted as best answer but I am new and still learning at js and I am having such a difficult time putting this all together, can someone help me with some more detailed instructions?
Fancybox attempts to auto resize and center itself everytime that the
browser window is resized, and this event gets triggered a lot on
iPads and iPhones. For fancy box 1.3.4, the code which controls this
is line 608: $(window).bind("resize.fb", $fancybox.resize);
To fix the issue, I modified this part of the fancybox JS, and added
another option called "resizeOnWindowResize", which you can set to
false for iPad and iPhone users, or just disable all together.
if(currentOpts.resizeOnWindowResize) { $(window).bind("resize.fb",
$fancybox.resize); } You must also add a default value for this
option in $.fn.fancybox.defaults hash map.
Then, when calling fancybox you can utilize this new option:
$('#fancybox_link').fancybox(${'scrolling': 'no',
width: 'auto',
height: 'auto',
centerOnScroll: false,
resizeOnWindowResize : false});
I got as far as go to line 608. I really do not know what to do next. What should the final product look like after you've added "resizeonwindowResize" and the if statement?

Add this:
if(currentOpts.resizeOnWindowResize) {
$(window).bind("resize.fb", $.fancybox.resize);
}
Where you find:
$(window).bind("resize.fb", $.fancybox.resize);
Near the bottom of:
$.fn.fancybox.defaults = { //blah blah blah options here.
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){},
// Add this
resizeOnWindowResize: true
};
Then save and when you call the fancybox:
$('.photo_gallery a').fancybox({
resizeOnWindowResize: false
});

This is also an alternative. Just replace the $.fancybox.resize function to as follows. It's just adding a simple userAgent check to avoid the .center call for iPhones.
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
$.fancybox.center(true);
}
};

Flowplayer in fancybox?

I am trying to get the Flowplayer to be shown inside a Fancybox, but can't quite get it working. This is my code so far;
$("a.video_link").click(function () {
$.fancybox({
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': '/flowplayer/flowplayer.swf?video=myvideo.flv', /* have also tried a couple of other options for the url settings, but without luck)
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
Any suggestions?

Try manually launching fancybox and setting setting its content to a flowplayer.
For instance, given the link:
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
class="videoLink">Demo</a>
create a JQuery click function like this:
$('a.videoLink').click(function(e) {
e.preventDefault();
var container = $('<div/>');
container.flowplayer(
'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
$(this).attr('href')
);
$.fancybox({
content: container,
width: 300, height: 200,
scrolling: 'no',
autoDimensions: false
});
});
Note that flowplayer by default takes up size of it's container, so must be given finite dimensions to view it properly.

Have you tried to create on SWF Object with jQuery thus setting the swf params with that then using the flow players content setting to directly set the html of the model.??
Also try check your debug window too see if there is any errors showing up.
-- E.G
var flashvars = { //Change this with $.extend within click callback if you need to!
file : 'yvideo.flv'
}
var flowBoxParams = {
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'width': 680,
'height': 495,
}
var $conatiner = $('<div></div>').attr('id','MediaPlayerHolder').hide();
swfobject.embedSWF("/flowplayer/flowplayer.swf","MediaPlayerHolder","300","120","9.0.0",flashvars,params,attributes);
$("a.video_link").click(function(){
//Merge basic settings with title
params = $.extend(flowBoxParams,{title:this.title,html:$container});
//Send object to FlowPlay
$.fancybox(params);
//Show the video play
$($container).show();
});
THis is just basically setting to variables with your default settings within them (flashvars ,flowBoxParams), the creating an empty div container with the id (MediaPlayerHolder) and setting it to display:none.
Then we create a basic flash element with swfObject wich is your flowplayer swf and assign it to the hidden div container.
we then wait for the user click to be activated and then we alter the default settings to add title value to the flowplayer options.
We then tell flow player to begin what it needs to do.
with thin change the visibility of the container.
This is untested but if heres any errors they should only be minor, unless flow is strict when it comes to loading the swf will itself.

I do this alot, the only way I could get it to work was by doing simply this,
JavaScript >>
flowplayer(".player", "http://www2.imperial.ac.uk/business-school/etu/courses_1112/common/scripts/flowplayer/flowplayer-3.2.7.swf");
$('.yourbox').fancybox();
Html >>
<a class="yourbox" href="#data" >This shows content of element who has id="data"</a>
<div style="display:none">
<div id="data">
</div>
</div>
If you do it this way, you will need to put an ie hack in aswell, to unload the player, when closing the box.