jQuery.StayInWebApp and gallery module conflict
Posted: Sat Sep 01, 2012 1:14 pm
Hi,
I want to start with a thank you for all the help I have gotten from this forum since I started using CMSMS.
I now have what you might call a rare problem for I have not found any other posts about this. I found some similar problems and tried some tips from there but now i´m out of ideas.
So I turn to you guys =)
I will try to explain this the best I can.
I have made a site. The site works fine. I have also made a web app. It´s the same site but with a different CSS loading when you browse it on your phone. You can then add the site to your home screen. And when you start it from there it does not launch in Safari but in "app mode". All of this works fine.
But to stay in the web app when you click around the site you have to use some custom scripts. I am using "mrmoses / jQuery.stayInWebApp" (https://github.com/mrmoses/jQuery.stayInWebApp). I had some issues with it at first and it didnt work at all. But now I have it working.
I was happy and tried all subpages to see that everything was working right when i discover that on the pages where the "Gallery" module is used the stayinwebapp-script does not work. That means that when I click a link to leave a page that contains a gallery safari is launched and the page i loaded there instead. So I start to experiment with different combinations and i tried the $.noConflict(); (I might have used it the wrong way). But i cant get it to work.
I have discovered this:
Depending on wich script runs first in the code, that will be the one working. If the StayInWebApp-script is in the top of the code then the site stays in the webapp mode but the gallery (lightbox) does not work and the pictures opens like a regular linked picture and then you are stucked cause there is no "back" button in the web app. If the gallery-script is in the top its the other way around. I cant figure out how to get this two to work together.
Here is the main code:
If you want to see it for yourself you can go to http://www.oascafe.se on you iPhone. Add the site to home screen and then launch it. The site is in Swedish but if you go to "Galleri" there is a gallery on there and it works fine now but if you press another link in the menu Safari will be launched. If you instead go to "Café" where there is no gallery and then press another link in the menu the site stays in app mode.
If you need more information or more code I will provide that =)
I hope someone has time to point me in the right direction.
Thanks in advance
I want to start with a thank you for all the help I have gotten from this forum since I started using CMSMS.
I now have what you might call a rare problem for I have not found any other posts about this. I found some similar problems and tried some tips from there but now i´m out of ideas.
So I turn to you guys =)
I will try to explain this the best I can.
I have made a site. The site works fine. I have also made a web app. It´s the same site but with a different CSS loading when you browse it on your phone. You can then add the site to your home screen. And when you start it from there it does not launch in Safari but in "app mode". All of this works fine.
But to stay in the web app when you click around the site you have to use some custom scripts. I am using "mrmoses / jQuery.stayInWebApp" (https://github.com/mrmoses/jQuery.stayInWebApp). I had some issues with it at first and it didnt work at all. But now I have it working.
I was happy and tried all subpages to see that everything was working right when i discover that on the pages where the "Gallery" module is used the stayinwebapp-script does not work. That means that when I click a link to leave a page that contains a gallery safari is launched and the page i loaded there instead. So I start to experiment with different combinations and i tried the $.noConflict(); (I might have used it the wrong way). But i cant get it to work.
I have discovered this:
Depending on wich script runs first in the code, that will be the one working. If the StayInWebApp-script is in the top of the code then the site stays in the webapp mode but the gallery (lightbox) does not work and the pictures opens like a regular linked picture and then you are stucked cause there is no "back" button in the web app. If the gallery-script is in the top its the other way around. I cant figure out how to get this two to work together.
Here is the main code:
Code: Select all
<!DOCTYPE HTML>
<__html lang = "sv">
{mobile}{capture assign='mobiletemp'}{$mobile_detect}{/capture}
<head>
<title>{sitename} - {title}</title>
<__script__ type="text/javascript" src="jquery-1.8.1.min.js"></__script>
<!--[if lt IE 9]>
<__script__ src="html5.js"></__script>
<![endif]-->
{metadata}
{if $mobiletemp}
{cms_stylesheet name='oas_mobile'}
<__script__ type="text/javascript" src="uploads/oascafe/jquery.stayInWebApp.js"></__script>
<link rel="apple-touch-icon" href="uploads/oascafe/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=no, width=640" />
<link rel="apple-touch-startup-image" href="uploads/oascafe/startup.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="uploads/oascafe/add2home.css">
<__script__ type="application/javascript" src="uploads/oascafe/add2home.js"></__script>
{else}
{cms_stylesheet}{/if}
{global_content name='analytics'}
<meta property="fb:admins" content="679651217","1394280506"/>
(This code is not in the template but added on pages
where there is a gallery, but you know that =). )
<!-- Gallery/Lightbox -->
<link rel="stylesheet" href="http://www.oascafe.se/modules/Gallery/templates/css/Lightbox.css" type="text/css" media="screen" />
<__script__ type="text/javascript" src="modules/Gallery/templates/lightbox/lightbox.js"></__script>
</head>{if $mobiletemp}
</__body>
{literal}
<__script__>
$(function() {
$.stayInWebApp();
});
</__script>
{/literal}If you need more information or more code I will provide that =)
I hope someone has time to point me in the right direction.
Thanks in advance
