3

I'm trying to redevelop a mobile website so we can integrate it into a mobile app that is being developed by another department, but still keep it functional on the web. The app has its own menu, so it's redundant to leave the menu on the mobile site.

We considered simply removing the menu, headers and footers from the site, and provide the links to the pages to the other department so they can add them to the app menu. This obviously leaves our website menu-less.

I've considered creating a new front page, that has a similar menu to the app, and loading the pages either in frames, or using jquery .load(), or ASP includes... Frames would give me the functionality I want that is most similar to the app opening pages in a browser using it's native menu, but frames are so... 1990's.

What is best solution that uses modern standards?

  • 1
    Modern standards? Throw away classic ASP. – Ripped Off Jul 24 '14 at 20:33
4

Dont use frames ;) What you could do is to provide the links to the other departement and in the end of the url set some kind of GET variable ex mysite.com?commingFromApp=true And then on the website you could make a method the prints the menu to the website, and if commingFromApp is not true then print out the menu, and if its true dont print it because the user is comming from the app and should not see the menu

  • Nice, I'll play with that and see if I can't get it to work out, sounds like exactly what we need though. I'll likely accept this answer once I manage to test it. The only hurdle I can foresee is what would happen if someone clicked a link on the page. How would you carry the ?commingFromApp=true forward to the next page so the menu doesn't reappear on the next page? – ShemSeger Jul 24 '14 at 19:05
  • Yeah didnt think of that :) maybe you could set a cookie or session when you see if thats person comes from the app.. So the method thats prints out the menu could see if either the ?commingFromApp or the cookie/session is true.. – user1741807 Jul 24 '14 at 19:35
  • Looked a bit into it, and you could tell from the user agent string if the user is comming from fx the ios safari browser or the webview used inside a app. Dont know if the app is android or ios but im sure you can do the same thing with android stackoverflow.com/questions/4460205/… stackoverflow.com/questions/16383776/… – user1741807 Jul 24 '14 at 19:39
0

URL variables and CSS

This is the solution I came up with using user1741807's suggestion to use a GET variable:

The portal app is going to be on OSX, Android and Windows, and simply links to our mobile website and displays it in a nested browser, so I used the URL to create a cookie and then used CSS to hide the menu.

Our mobile website is written in Classic ASP, PHP, and HTML, so I wrote a different script for each language. I had originally planned on writing one script in Javascript, but when I discovered how easy it was to do what I wanted in ASP and PHP I decided to scrap Javascript. It was later on that I realized I had some pages that weren't in ASP or PHP and ended up having to write the Javascript anyways.

The code below will hide the menu only when the homepage is visited from the link that contains the variable in the app menu, and will persist for as long as the session lasts, but will not hide the menu when visited from a browser without the variable.

The variable at the end of the URL string: ?display=portal


Classic ASP

Asp has function that can easily get variables from a URLS: request.querystring()

I put the code below on index.asp to set the cookie, then put Request.Cookies() code on the rest of our asp pages.

<%
fromPortalApp = request.querystring("display")
If fromPortalApp = "portal" Then
    Response.Cookies("display")="portal"
Else
    Response.Cookies("display")="web"
End If

portalCheck = Request.Cookies("display")
If portalCheck = "portal" Then
    MenuDisplay = "none"
Else
    MenuDisplay = "normal"
End If
%>

<style>
#topbar {
    display:<%=MenuDisplay%>;
}
</style>

PHP

On the PHP pages I didn't need to set the cookie, so I just needed to include a script to check for it:

<?php 
if (isset($_COOKIE["display"])){
    $sessionDisplay = $_COOKIE["display"];
    if ($sessionDisplay == "portal"){
        $portalcheck = "none";
    } elseif ($sessionDisplay == "web"){
        $portalcheck = "normal";
    } 
} else {
    $portalcheck = "normal";
}
?>
<style>
#topbar {
    display:<?php echo $portalcheck; ?>;
}
</style>

Pure Javascript

Javascript was the tricky one, we have some HTML pages on a different server at a different subdomain, so I had to use a written function to get the variables, another function to write the cookies, a third function to get the cookies, and then write a fourth function to modify the CSS and hide the #topbar div with the menu. The set and get cookies functions are right out of w3schools.

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
    }
    return "";
}

var portalcheck = getUrlVars()["display"];
var hostcheck = window.location.hostname;
if(portalcheck=="portal" && hostcheck=="darius.uleth.ca"){
    setCookie("display", "portal")
} else if (hostcheck=="darius.uleth.ca"){
    setCookie("display", "web")
}

window.onload = init;

function init(){
    var topbar = document.getElementById("topbar");
    var portalcookie = getCookie("display");

    if(portalcookie=="portal" && hostcheck=="darius.uleth.ca"){
        topbar.style.display= "none";
        document.getElementById("content").style.margin="0";
    } else if (portalcookie=="web"){
        topbar.style.display= "normal";
    }
}
0

If the mobile app is a PhoneGap app (or at least, something with an embedded webview), you can define a value in the JavaScript interface (ie, within the link between Java/ObjC to the web view) to test against. When the JavaScript on the HTML page is first executed, check if that value is assigned. If it is, its the mobile app. If its not, its the web page. Then adjust the menus accordingly.

  • The app is actually a feature that came bundled as part of a portal software package the other department purchased. I'm told to work under the assumption that the other department doesn't have any coders, so I don't know what kind of capabilities they have on their end. – ShemSeger Aug 5 '14 at 18:02
  • You should really mention specific limitations like this in your question. You still might be able to query the mobile apps hosting environment. For example, there's a number of objects made available in PhoneGap by default - you can check any number of them (for example, the Device object). Or perhaps hide the menu on the 'deviceready' event, which would only get fired if running inside PhoneGap. (I'm assuming its a PhoneGap app, again, these are details you need to provide in your question). – GrandmasterB Aug 5 '14 at 19:03
  • I've already provided as much info as I know, we have no control over the app except to provide the other department with links. I think it's pretty safe to assume that it's not PhoneGap, it was a purchased software package, like I said, the mobile app piece is just an optional feature of the package. – ShemSeger Aug 5 '14 at 21:26
  • I joined my supervisor at a meeting with the other department and learned what software they are using to develop the app, it's called Ellucian. – ShemSeger Aug 15 '14 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.