Jump to content

Photo

iphone site "add to home screen"

- - - - -

  • Please log in to reply
15 replies to this topic

#1
adamm

adamm
  • Members
  • 83 posts
  • Joined: 24-March 10
  • Expertise:HTML, CSS, PHP, Javascript, Graphics
I want to create a mini site that I can add to an iPhone home screen, but is it possible to link to another html file within the same site without it opening the link in safari.

For example, the page I'm saving to my homescreen is www.whateversite.com/abc.html. There's a link within that site that links to xyz.html on the same server but when I click it from within the home screen app, it loads the xyz.html page in safari. I would like it to stay IN the home screen app.

Is this possible?

#2
magik

magik

    magikly delicious

  • Members
  • 1,095 posts
  • Joined: 08-March 10
  • Expertise:HTML, PHP, Javascript, SQL
No it is not possible, you must use AJAX to change page data if you want the "webapp" to not open links in safari

ran into this issue much the same way you are running into it ;)

.... magik's most awesomely rainbowed signature =þ

 

Your signature may contain:

  • Any number images
  • Images of any size
  • Any number of URLs
  • Any number of lines

dangerous...

#3
adamm

adamm
  • Members
  • 83 posts
  • Joined: 24-March 10
  • Expertise:HTML, CSS, PHP, Javascript, Graphics
hmmm.. i'm using iUI ... might be complicated to get what I want working properly

#4
magik

magik

    magikly delicious

  • Members
  • 1,095 posts
  • Joined: 08-March 10
  • Expertise:HTML, PHP, Javascript, SQL
just glanced at iUI, should work fine in a webapp. It appears as if most of it is dealt with by hiding a lot of the HTML on the page, and using JS to animate the list trees. It actually seems to have AJAX support in the framework itself. I couldn't find very good documentation on anything, so I was just looking at the code.

But there definitely is an AJAX function @ line 303 in iui.js. But I don't think you necessarily want to be using that. I think you should be able to get away with using the framework as intended - which seems like an anchor parsing JS engine to dynamically load hidden content in the HTML page.

.... magik's most awesomely rainbowed signature =þ

 

Your signature may contain:

  • Any number images
  • Images of any size
  • Any number of URLs
  • Any number of lines

dangerous...

#5
BokTheGolem

BokTheGolem
  • Members
  • 668 posts
  • Joined: 04-April 10
Thought i'd post as i've had experience with this int he past, and i was using the iWebkit framework. (And this caused me tons of issues for a little while because i didnt even realize they implemented this). Basically it changes the onclick function of every a tag to change windows location attribute to the hrefs link, unless that link had the noeffect tag.
Heres the pertinent code.
var a = document.getElementsByTagName("a");
	for (var i = 0; i < a.length;i++) {
		if (a[i].className.match("noeffect")) {
		}
		else {
		     a[i].onclick = function () {
			window.location = this.getAttribute("href");
				return false;
			};
		}
}
However keep in the mind that the noeffect tag is very important for certain functions. Should you link to an email address you must use the no effect tag, otherwise the iphone wont check to see what type of link it is and simply try to change the webpage to it.
For further reference to what needs the noeffect tag (IE what needs to be handled by the iphones built in methods) check pages 12 and 13 of iwebkits userguide found here.
It could probably be improved upon based on what your doing just thought i'd share this way of doing it.

"Stealth Return"
"You can't make me look! I'll just shut my eyes."
"Oh, you'll open them. You have to breath sometime. "

#6
adamm

adamm
  • Members
  • 83 posts
  • Joined: 24-March 10
  • Expertise:HTML, CSS, PHP, Javascript, Graphics

But there definitely is an AJAX function @ line 303 in iui.js. But I don't think you necessarily want to be using that.

Yes I know there's an AJAX function because I use it extensively. I used to to load a list of items as a sub-item without having it load with the original page. But basically what I have is a giant list of items and what I want to do is be able to sort it in different ways. So lets say alphabetically and by a date column. So what I originally did was create a query string parameter... like page.php?sort=1. And I just made a link to sort=2 to sort by date. This reloaded the entire page into Safari.

I actually did a bit of digging just now and found that if I create basic link <a href> tag, it will load the contents of that page and I just have to make sure that there are no document tags at the top of the page, just the list contents. Programmatically, I can do that fairly easy, but doing that will do a couple things that I don't want:
1) It will basically re-insert my HUGE list of items (now ordered by date) into the same page that already had the same items ordered alphabetically. So it'll be using twice the memory on the iphone.
2) Adds a new node to the top. So if I go to my main page, which by default is sorted alphabetically, there's no back button because its the first page. If I click on an item to view the details of that item, a new back button will be created at the top to go back to the main page -- which is fine. But if I want to change the sort order, I have an item in the list that says "Order By Date". If I set it up with the link that loads the contents ordered by date, it will load the contents, but also add a button to go back to the previous page. I actually want it to act as the first page.


Thought i'd post as i've had experience with this int he past, and i was using the iWebkit framework. (And this caused me tons of issues for a little while because i didnt even realize they implemented this). Basically it changes the onclick function of every a tag to change windows location attribute to the hrefs link, unless that link had the noeffect tag.
Heres the pertinent code.

var a = document.getElementsByTagName("a");
	for (var i = 0; i < a.length;i++) {
		if (a[i].className.match("noeffect")) {
		}
		else {
		     a[i].onclick = function () {
			window.location = this.getAttribute("href");
				return false;
			};
		}
}
However keep in the mind that the noeffect tag is very important for certain functions. Should you link to an email address you must use the no effect tag, otherwise the iphone wont check to see what type of link it is and simply try to change the webpage to it.
For further reference to what needs the noeffect tag (IE what needs to be handled by the iphones built in methods) check pages 12 and 13 of iwebkits userguide found here.
It could probably be improved upon based on what your doing just thought i'd share this way of doing it.

"Stealth Return"

How is iWebkit? Any good? I'll definitely look into it. iUI is pretty good, but there are a few things I don't like about it.

#7
Koen

Koen

    wow much koen

  • Members
  • 2,528 posts
  • Joined: 10-March 10
  • Locationthe Netherlands
  • Expertise:HTML, CSS, Javascript, Graphics
iWebkit is great. It's very easy to use and it has LOTS of UI elements. You should go to http://demo.iwebkit.net on your iDevice so you can see the power of it :)

#8
BokTheGolem

BokTheGolem
  • Members
  • 668 posts
  • Joined: 04-April 10
I don't know about iUI but I was never fond of many other frameworks like jqtouch because some just seemed overly heavy.
iWebkit is mostly just a set of CSS styles which make it easy to have a nice looking site, and without taking up too much memory. It's also easily altered this way so when I wanted to make a site myself, but have it have a decent iPhone ui without too much work I liked iWebkit.
It's simple and easily modified. Although I've never even looked at iUI.
"You can't make me look! I'll just shut my eyes."
"Oh, you'll open them. You have to breath sometime. "

#9
Alvin21

Alvin21
  • Members
  • 195 posts
  • Joined: 10-March 10
  • LocationSydney, Australia
  • Expertise:HTML, CSS, PHP, Javascript, SQL
Why not just do
<a onclick="parent.location='xyz.html'">Link</a>

That's what I do sometimes...

#10
Koen

Koen

    wow much koen

  • Members
  • 2,528 posts
  • Joined: 10-March 10
  • Locationthe Netherlands
  • Expertise:HTML, CSS, Javascript, Graphics
Should be easy in jQuery:
$("a[href]").click(function(){
window.location = this.href;
});
Although jQuery might be a little overkill :)

#11
magik

magik

    magikly delicious

  • Members
  • 1,095 posts
  • Joined: 08-March 10
  • Expertise:HTML, PHP, Javascript, SQL
does anyone know if a javascript document location change will cause the iphone "webapp" to open up the link in safari? or to stay in the same "webapp" semi-program

.... magik's most awesomely rainbowed signature =þ

 

Your signature may contain:

  • Any number images
  • Images of any size
  • Any number of URLs
  • Any number of lines

dangerous...

#12
Alvin21

Alvin21
  • Members
  • 195 posts
  • Joined: 10-March 10
  • LocationSydney, Australia
  • Expertise:HTML, CSS, PHP, Javascript, SQL
If you use <a href> it goes to safari

#13
magik

magik

    magikly delicious

  • Members
  • 1,095 posts
  • Joined: 08-March 10
  • Expertise:HTML, PHP, Javascript, SQL
if that's the case, then a lot of sites could be "iphone app"ed by just putting some JS on every page. If I were using jQuery, soemthing along the lines of:

$("a").bind("click", function(e) {
  e.preventDefault();
  window.location = $(this).attr('href');
}

.... magik's most awesomely rainbowed signature =þ

 

Your signature may contain:

  • Any number images
  • Images of any size
  • Any number of URLs
  • Any number of lines

dangerous...

#14
BokTheGolem

BokTheGolem
  • Members
  • 668 posts
  • Joined: 04-April 10

if that's the case, then a lot of sites could be "iphone app"ed by just putting some JS on every page. If I were using jQuery, soemthing along the lines of:

$("a").bind("click", function(e) {
  e.preventDefault();
  window.location = $(this).attr('href');
}


That is how it is commonly handled
HOWEVER
That code will break the iPhones built in support for email addresses, phone numbers, etc.
So if you want people to be able to click on an email address and open up mail on their iphone make sure to only apply that effect to actual website links and not like email address links.
"You can't make me look! I'll just shut my eyes."
"Oh, you'll open them. You have to breath sometime. "

#15
Alvin21

Alvin21
  • Members
  • 195 posts
  • Joined: 10-March 10
  • LocationSydney, Australia
  • Expertise:HTML, CSS, PHP, Javascript, SQL

That is how it is commonly handled
HOWEVER
That code will break the iPhones built in support for email addresses, phone numbers, etc.
So if you want people to be able to click on an email address and open up mail on their iphone make sure to only apply that effect to actual website links and not like email address links.


And that's why he should use the code I told him to use for links :)

#16
magik

magik

    magikly delicious

  • Members
  • 1,095 posts
  • Joined: 08-March 10
  • Expertise:HTML, PHP, Javascript, SQL

And that's why he should use the code I told him to use for links :)


in-line JS is a nasty ugly bad practice... and what happens when the same site is loaded on a non-mobile browser or non-iphone-webapp?

my code could easily be expanded to analyze the href for anything other than an http link.

or the other approach would be to add a custom empty CSS class to all links that you want to open like this, and instead of using $('a'), you would use $('.linkclass')

.... magik's most awesomely rainbowed signature =þ

 

Your signature may contain:

  • Any number images
  • Images of any size
  • Any number of URLs
  • Any number of lines

dangerous...




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users