|
JavaScript - Window.open Problem With Safari (ipad And Iphone Only)
Hello
I'm having problems with a very simple bit of Javascript not working with the latest version of Safari for ipads and iphones. The script in question is used as a 'previous image ' and 'next image' navigation facility, basically closing one pop-up window and opening up another, when viewing a photo gallery. It has worked perfectly for a number of years on all browsers. It is only the latest version of Safari for ipads and iphones where there's a problem. On an iphone, the new window unfortunately opens up in a new tab and the existing window fails to close. Mobile Safari soon reaches the maximum of 8 permissible tabs as a user moves through the photos gallery. On an ipad2, no new window opens and the existing window fails to close. the website is www.gethigh.co.uk Code:
}
function picPopup4(page,width,height){
//alert(scroll);
var a;
a = width / 2;
var b;
b = height / 2;
var LeftPosition = (screen.width/2) - a;
var TopPosition = (screen.height/2) - b;
window.open(page, "", "width="+width+",height="+height+",toolbar=no,header=no,location=no,resizable=yes,"+"left="+LeftPosition +",top="+TopPosition+",scrollbars=yes");
window.close();
}
and this is an example of the code creating the navigation within each pop-up window Code:
<tr>
<td align="center"><a class="link8" href="javascript:picPopup4('legslip1.html','560','770');" target="_self">
previous image</a> <a class="link8" href="javascript:window.close()">close
window</a> <a class="link8" href="javascript:picPopup4('breaking2.html','505','800');" target="_self">next
image</a></td>
</tr>
I'll come clean and admit I'm not a programmer and have a very basic and ancient understanding of HTML coding. My website must be approaching double digit years old (which will be immediately apparent if you view its structure). I can usually resolve most things, and maintain its functioanality when needs be, but this particular problem has got me stumped. I've come onto this forum to see if anyone could provide a simple work-around ? Or if anyone would know if this is a bug within Safari which may be rectified soon (a search through the Apple forums gave no clues). I'm loathed to make any major updates/changes to my site, as despite its age it renders beautifully on all browsers except the latest ipad/iphone Safari. Cheers and hopefully thanks in advance Garry .... Similar TutorialsI'm working on this project: http://bit.ly/tkrFsP It already works more or less fine in: IE7, IE8, IE9, FF, Chrome, Safari and Opera. Problems start when we try that in iPhone or iPad. iPhone works almost fine (except lags and AJAX/jQuery problems) but in iPad it has broken left navigation, wrongly re-sized thumbnails and it displays in half of the viewport. Also, there are problems with smoothness of jQuery animations and with AJAX unlike in other browsers on other devices (like PC). Any ideas on how to fix that? I've flicked through this: 1. http://www.smashingmagazine.com/2010...tting-started/ 2. http://developer.apple.com/library/s...62/_index.html It seems like a good place to start but there's many information on iPad/iPhone development on apple.com and their solutions don't fix my problems. -------- Mo 1. Anyone could outline here some basic code principles for iPad/iPhone? 2. Why project sub-page displays 5 times as large as it should on iPhone? Adding this: <meta name="viewport" content="width=device-width" /> doesn't help much and it even makes website work worse. Adding this: <meta name="viewport" content="maximum-scale=1,user-scalable=yes,width=960" > seems like a better solution but it's not perfect either. 3. How iPad's fixed containers work? 4. Why there's horizontal scroll appearing even with overflow-x: hidden? Hi Guys, I've been searching the net for both examples and pluggins to create draggable divs and although I've found many, I cant find the effect I'm after. I want the div to slow down to a stop after it has been release like when you are scrolling on one of apples mobile devices. If anybody can point me in the right direction ill be very great full. Hi On the following URL on the iphone and Ipad the jqzoom script is showing the enlarged image on the left but works fine in IE, Chrome, Firefox etc. The script in use is jqzoom. http://tinyurl.com/bwcxf8c Any idea welcome. Thanks Roy I have a simple play js button on my HTML page as well as embedded music. So when you are a computer the music autoplays then stops and you have the option to listen to it again with the js button. This "theoretically" will work fine for the iPhone and iPad because even though the embedded music isn't auto playing the user can still click the listen button and hear the music. It works on the iPhone perfectly but not the iPad. I'm at a loss. Here is my jscript: function FFFFSound(soundobj) { var thissound= eval("document."+soundobj); thissound.Play(); } My embedded music: <embed src="music/FFFFKids.mp3" autostart="true" loop="false" hidden="true"> <embed src="music/FFFFKids.mp3" autostart="false" loop="false" hidden="true" name="sound1"> And my button: <input type="button" value="Listen" onClick="FFFFSound('sound1')" class="listen_button"> You can view the page at feefifofun.com I am at a total loss..... thanks! hi, When I navigate to a page with Ajax on my iphone or ipad, it doesn't show up, page is just blank, I have checked for errors and there is no errors?! here is my Ajax code Code: function datecheckFunction(){
var datecheckRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
datecheckRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
datecheckRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
datecheckRequest.onreadystatechange = function(){
if(datecheckRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = datecheckRequest.responseText;
}
}
var datepicker = document.getElementById('datepicker').value;
var queryString = "?datepicker=" + datepicker;
//Add the following line
datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true);
datecheckRequest.send(null);
}
Ok, so I have multiple issues, but this is the one I have not been able to work around. I'm building a simple website for personal use, so I know it only has to work on Safari for the iPad, a simple catalog of song charts for use on stage in my piano bar. Everything works GREAT in Safari/Chrome for Windows 7, but doesn't seem to quite work on Safari for iPad. The issue I'm having is I've set up a DIV with two image buttons on it to execute a ScrollBy command to scroll the page up or down depending on the button. Everything works great on Safari for Windows 7, as in I can keep scrolling down the page by pressing the scroll down button multiple times. On iPad, it only works once, and will not continue to scroll. I've also tried it in Atomic Lite for iPad, with the same effect. I've mocked up a simple page, to take all the other variables out. http://www.duelingpianopiano.com/jef...testscroll.htm Eventually, I will be installing it he http://www.duelingpianopiano.com/jef...testscroll.htm The code in the head tag is below: <code> <script language="JavaScript" type="text/javascript"> <!-- Copyright 2003, Sandeep Gangadharan --> <!-- For more free scripts go to http://sivamdesign.com/scripts/ --> <!-- var y1 = 510; // change the # on the left to adjuct the Y co-ordinate (document.getElementById) ? dom = true : dom = false; function hideIt() { if (dom) {document.getElementById("layer1").style.visibility='hidden';} } function showIt() { if (dom) {document.getElementById("layer1").style.visibility='visible';} } function placeIt() { if (dom && !document.all) {document.getElementById("layer1").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1)) + "px";} if (document.all) {document.all["layer1"].style.top = document.documentElement.scrollTop + (document.documentElement.clientHeight - (document.documentElement.clientHeight-y1)) + "px";} window.setTimeout("placeIt()", 10); } // --> </script> <script language="JavaScript"> function scrollup(){ parent.scrollBy(0,-window.innerHeight-50); } function scrolldown(){ parent.scrollBy(0,window.innerHeight-50); } </script> </code> The code from the body tag: <code> <body topmargin="00" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFF00" bgcolor="#FFFFFF" "overflow: visible" onLoad="placeIt(); showIt()"> INSERT CONTENT HERE <div id="layer1" style="position:absolute; right:0; width:50px; height:150px; visibility:hidden"> <font face="verdana, arial, helvetica, sans-serif" size="2"> <div style="float:left; background-color: ; padding:0px; border:0px solid black"> <img src="upbutton.png" width=50 height=75 border="0" align="left" onClick="scrollup();"> <img src="downbutton.png" width=50 height=75 border="0" align="left" onClick="scrolldown();"> </div> </code> Like I said, it works just as needed in Safari/Chrome for Windows 7, but not on iPad. Doesn't seem to work in IE 8, but that doesn't bother me. I have not tested in FireFox. Your ideas are much appreciated. I'm not an Apple person, so maybe there is a well known issue with scrollBy and Safari for iPad, that I'm not aware of. If that is the case, if anyone has an idea for a direction for a workaround that would be great as well. Eventually, I would like to use the smooth scrolling scripts that I've seen out there, but that is way down the road. I'm more worried about the functionality as is. Hi I have faced popup window resizable problem in Safari. When I resize that popup window its resizing. When I used this code window.open('chat.html','Test','width=230px,height=405px,location=no,status=no, menubar=no,toolbar=no,r esizable=false ,scrollbars=no'); Please any body help unresizing popup window. Thanks In advance Ruban Hi there, I'm putting together a GeoCaching book for iPad that I intend to shop around upon completion. I have hit a stumbling block though. I want the co-ordinates in the PDF to open the Google Earth application. Using the current hyperlinks, the iPad links to Google Maps instead. Is it possible, using Javascript, to create a code that will directly open the Google Earth application and take the reader to those exact co-ordinates? Thanks in advance, WR Hi, Can you please help me to solve the window.open() problem with firefox browser? I wrote the statement which is given below, window.open('filename.php','file_head','width=730,height=525,status=no,location=no,menubar=no,resiza ble=no'); Only width & height parameters were working in firefox & others are not working. This was working properly in IE. Problem exisitng with firefox only. Please let me know if anyone have solution for this problem Hi! everyone. I've run into a problem with a piece of script and being code illiterate I could use some help. I'm making a page with a few thumbnails that I want to use as links to open a larger image in a pop-up window. I found this piece of code ( call it a senior moment ~ but I didn't make a note of where it was ) that works fine in Firefox and Safari, but IE8 is telling me that there is an error in the highlighted line: Code: <script language="JavaScript">
function openW(mypage,myname,w,h,features) {
if(screen.width){
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/2;
}else{winl = 0;wint =0;}
if (winl < 0) winl = 0;
if (wint < 0) wint = 0;
var settings = 'height=' + h + ',';
settings += 'width=' + w + ',';
settings += 'top=' + wint + ',';
settings += 'left=' + winl + ',';
settings += features;
win = window.open(mypage,myname,settings);
win.window.focus();
}
</script>
Code: <a href="JavaScript:openW('URL','TITLE',WIDTH,HEIGHT,'')">LINK</a>
Anyone got an idea if it can be tweaked to make IE recognize it? Or a simple alternative script that works cross browser? Any help would be greatly appreciated. Thanks The web page belows works OK in IE and FireFox on XP and Windows7 It does NOT work on IPAD using Safari. Question: How can I delete the new window("IPADREPORT") when I run it the second, third,fourth, etc time ? How can I get the window name( "IPADREPORT") to see if it exists? SUggestions? TIA, Steve42 <code> [aSafari.html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <script language="JavaScript" type="text/javascript"> function pReport(){ // 1-17-12 var menuWindow = open("","ipadreport"); // 1-17-12 menuWindow.close(); // above closes previous report window var menuWindow = window.open('','ipadreport');// 1-17-12 document.ipadreport.submit(); menuWindow.focus(); } </script> <title>Ipad_PopUp_Test</title> </head> <body> <br><br> <form method=post name="ireport" target="ipadreport" action="http://myreport.asp"> <input type="hidden" name="reporttest" value="apple"> <a href='javascriptReport()'> Create Report</a> </form> </body> </html> </code> Using onclick=window.open function in js to open a pdf file link in a new popup window. Works fine to display the file onscreen, but not if the user wants to save the file client-side to their computer. The right-hand-button context menu for the mouse will allow the user to download, but the file saved will be a html dump file for the webpage and the name of the file will be that for the webpage. Of course I can use the easy <a href> method for download links and the mouse context menu options will be as expected, but I can only use target="-blank" or target="_self" . I need a popup window to open. Could use : oncontextmenu="alert('Left click the link to open, and then SAVE from with the pdf viewer') to advise users how to save the file, and could use "javascript: void(0)" to eliminate most mouse context menu options, so the user won't bother try. So how can I get a link to a file which can be viewed in a popup window and downloaded using mouse right-hand context menu? Any advice massively appreciated! window.open() doesn't open an entirely new window in FF3.6, just a new tab suggestions? Edit: Yeah, ok, so if i specify a size smaller than the current standard window, it'll be forced to open a new window. but what if i want a new standard sized window to open entirely? and in any case, i wan t amore direct solution where possible, thanks. Hi Ive found out how to force another browser window to open at a certain size when a link is clicked. Here's the whole line of code including the layer, the javascript and the image, <div id="Layer6" style="position:absolute; width:10px; height:8px; z-index:6; left: 561px; top: 310px"><a href="javascript:;" onClick="MM_openBrWindow('navigation%20instructions.htm','','width=50,height=50')"><img src="images/info.gif" width="15" height="15" border="0"></a></div> How do I adapt this so I can also specify the x&y co-ordinates of the opened window relative to the window that launched it. thanks alot Masten I am using a window.open to trigger a mailto: command. I don't want the window to stay open so I try to close it right after. The default email client launches correctly, but the window stays open and I get the following Javascript error: Unable to get value of the property 'close': object is null or undefined Code: Code: var win = window.open(mailto_link,'emailWindow'); win.close(); I do write some php, but have not much idea about JavaScript. I use window.open to open 10 pages simultaneously. I prefer to open them with a time delay from each other to put less load on the target server. This is my code with no delay. (I played around with setTimeout but can't get it to work.) PHP Code: <a href='http://www.".$new[9]."' onclick="window.open('http://www.".$new[0]."/'); window.open('http://www.".$new[1]."/'); window.open('http://www.".$new[2]."/'); window.open('http://www.".$new[3]."/'); window.open('http://www.".$new[4]."/'); window.open('http://www.".$new[5]."/'); window.open('http://www.".$new[6]."/'); window.open('http://www.".$new[7]."/'); window.open('http://www.".$new[8]."/')\" target='new300/'>Open 10</a> +++++++++++++++++++++++++++first window+++++++++++++++++++++++++ <html> <head> <script language="javascript"> var myWindow; function christDoes(){ mydWindow=open("second.html", "yes"); } </script> </head> <body><form name="myform" method=POST ACTION="sake.html" ><CENTER> <B>ENTER YOUR SUBJECT</B><INPUT TYPE="TEXT" NAME="subject"> <input type="button" name="ok" value="OK" onClick="christDoes()"> </form> </body> </html> +++++++++++++++++++++++++++parent window+++++++++++++++++++++++++ ++++++++++++++++++++++++++++child window++++++++++++++++++++++ <html> <head> <script language="javascript"> function me(){ displayColor(); } function displayColor() { callWindow=window.open("third.html","fine"); } var m=0; var fSubject = self.opener.document.forms[0].subject.value; if(fSubject.length>0){ if(isNaN(fSubject)){fSubject="";} else{opener.alert("Please enter figure");} numSub=parseInt(fSubject); if(numSub==2){var strSub="ab";} self.document.write("<center>" +"ENTER SUBJECT HERE" +"</center><br>"); var mercy="<HTML><BODY>" mercy +="<FORM ACTION='save.html' METHOD='POST'>" mercy +="<CENTER>" sub=new Array(strSub.length); for(var i=0; i<sub.length; i++){ m++; mercy +=m +"<input type='text' name='sub[i].toLowerCase()'>" +"<BR>"; opener.alert("You have entered" +m +"subjects"); } } mercy +="</CENTER></FORM></BODY></HTML><BR></BR>"; self.document.write(mercy +"<BR>"); self.document.bgColor="pink"; self.document.write("<center>" +"<input type='button' name='submit' value='SUBMIT'>" +"<center>"); } </script> </head> <body onload='me()'> </body> </html> ++++++++++++++++++++++++++++++child window++++++++++++++++++++ +++++++++++++++++++++++++++++++new window+++++++++++++++++++++ <html> <head> <script language="javascript"> function help(){ self.document.write("this is me") self.document.write("<center>" +"<input type='button' name='submit' value='SUBMIT'>" +"<center>"); } </script> </head> <body onLoad="help"> </body> </html> +++++++++++++++++++++++++++++++new window+++++++++++++++++++++ Can somebody help me with the code to make this button work? In the parent window when 2 is input in the textbox and 'OK' button clicked, the second window opens with 2 textbox and 'SUBMIT' button. If 'SUBMIT' button is clicked in the child window i want it to open the new window. Please help me out. Thanks. God bless in Jesus name. +++++++++++++++++++first window+++++++++++++++++++++++++ <html> <head> <script language="javascript"> var myWindow; function christDoes(){ mydWindow=open("second.html", "yes"); } </script> </head> <body><form name="myform" method=POST ACTION="sake.html" ><CENTER> <B>ENTER YOUR SUBJECT</B><INPUT TYPE="TEXT" NAME="subject"> <input type="button" name="ok" value="OK" onClick="christDoes()"> </form> </body> </html> +++++++++++++++++++first window+++++++++++++++++++++++++ +++++++++++++++++++second window++++++++++++++++++++++ <html> <head> <script language="javascript"> function me(){ displayColor(); } function displayColor() { callWindow=window.open("third.html","fine"); } var m=0; var fSubject = self.opener.document.forms[0].subject.value; if(fSubject.length>0){ if(isNaN(fSubject)){fSubject="";} else{opener.alert("Please enter figure");} numSub=parseInt(fSubject); if(numSub==2){var strSub="ab";} self.document.write("<center>" +"ENTER SUBJECT HERE" +"</center><br>"); var mercy="<HTML><BODY>" mercy +="<FORM ACTION='save.html' METHOD='POST'>" mercy +="<CENTER>" sub=new Array(strSub.length); for(var i=0; i<sub.length; i++){ m++; mercy +=m +"<input type='text' name='sub[i].toLowerCase()'>" +"<BR>"; opener.alert("You have entered" +m +"subjects"); } } mercy +="</CENTER></FORM></BODY></HTML><BR></BR>"; self.document.write(mercy +"<BR>"); self.document.bgColor="pink"; self.document.write("<center>" +"<input type='button' name='submit' value='SUBMIT' onClick='window.open('third.html', '')'>" +"<center>"); } </script> </head> <body onload='me()'> </body> </html> ++++++++++++++++++++++second window++++++++++++++++++++ ++++++++++++++++++++++third window+++++++++++++++++++++ <html> <head> <script language="javascript"> function help(){ self.document.write("this is me") self.document.write("<center>" +"<input type='button' name='submit' value='SUBMIT'>" +"<center>"); } </script> </head> <body onLoad="help"> </body> </html> ++++++++++++++++++++++third window+++++++++++++++++++++ Can somebody help me with the code to make this button work? In the parent window when 2 is input in the text box and 'OK' button clicked, the second window opens with 2 text box and 'SUBMIT' button. If 'SUBMIT' button is clicked in the child window i want it to open the third window. Please help me out. Thanks. God bless in Jesus name. *ADDED* Though i am advised to add 'window .open' as one of the arguments to the OK button which i did yet it doesn't work somebody please help me out! I am using Mozilla 3.6 could this mean that it doesn't support this? Quick question, I found this code snip on stackoverflow and it has one little bug. When you touch / move in the element, the console.log is being fired. If you continue to drag / move outside the element, the console.logs still continue to fire. So it seems that once the event is started it's no longer confined to the element its being assigned to. Any ideas on how to keep it bound to the element? Here is the code: Code: $('#someElm').bind('touchmove',function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
console.log(touch.pageY+' '+touch.pageX);
});
Thanks in advanced. |
|||||||