How do I Internally Linked Pages? (HTML)

Question

So I am making a Web based app. I have all of the code down, but it flashes whenever it switches pages. I thought, how about I make all of my pages internal? Here is some basic code I make of how I think you do Internal Pages, and it won't work. What is wrong?

http://pastebin.com/kSCyKKgx

EDIT: This is for an Android App!

All the code is in one HTML File and stuff links to parts of it. — Stevenator21, Dec 02 '12 at 20:49
I posted this to see what is wrong. In my real app I have several different HTML pages. — Stevenator21, Dec 02 '12 at 20:53

score 3 · Answer 1 · answered Dec 02 '12 at 20:44

3

The "flash" you see is the browser clearing up the rendering before loading and rendering the new page. This is normal.

If you want to avoid these, you need to invest time into learning how to use AJAX effectively - this essentially is you getting data from the server in JavaScript and rendering in client side, so the browser doesn't ever load a new page (avoid the "flash").

There is lots to thing about though when implementing the above (things like browser history, making pages linkable and more).

answered Dec 02 '12 at 20:44

Oded

489,969
99
883
1,009

Well my freind and I are making the same type of app, and his pages are linked internally, and it works a lot better. – Stevenator21 Dec 02 '12 at 20:46
1

@Stevenator21 - What do you mean by "linked internally"? – Oded Dec 02 '12 at 20:46

Red2678 · Answer 2 · 2012-12-02T20:57:21.607

0

That "FLICKERING" you are seeing, could be that you are on a Android 2.x device, maybe?

If so, you can try adding this to any CSS that loads after the main jquery mobile ones in your HEAD section.

<style type="text/css">
.ui-page {
    -webkit-backface-visibility: hidden;
}
</style>

edited Dec 02 '12 at 20:57

answered Dec 02 '12 at 20:44

Red2678

3,177
2
29
43

there is no mention of "Android" – david Dec 02 '12 at 20:45
It is on Android though, and @Anthony Trimble , what would have this CSS Class? – Stevenator21 Dec 02 '12 at 20:47
I had that same problem with jQuery mobile. See this answer....http://stackoverflow.com/questions/11029427/jquery-mobile-flickering-screen-during-transitions. – Red2678 Dec 02 '12 at 20:49
PS I know there is no mention of Android, I was using my powers of deduction...and was right...ps thanks for that vote down! – Red2678 Dec 02 '12 at 20:50
I didn't vote you down! I would vote up but this is my 1st Question. What in the HTML would have this CSS Class? – Stevenator21 Dec 02 '12 at 20:52
@Stevenator21 you can add this to your HEAD tag below the loading the jquery mobile CSS style sheets to help with the flicker. OR, make your links likes this Index – Red2678 Dec 02 '12 at 20:53
@Stevenator21 Sorry I did not think you voted it down :) – Red2678 Dec 02 '12 at 20:54
Okay, thx! Do you know what is wrong with my code though? – Stevenator21 Dec 02 '12 at 20:56
Nothing is wrong with your code. It is an android bug and a jquery thing. Was I correct, are you using Android 2.x.x to test your app? – Red2678 Dec 02 '12 at 20:58
I actualy currently don't have an Android Device currently, it is at my freind's house, although I can have him test it. It does not work on my laptop though. THere is still a flash. – Stevenator21 Dec 02 '12 at 21:02
In a few of your links you are calling two transitions, " – Red2678 Dec 02 '12 at 21:06
Okay, I will get it onto an Android device in the next 10 min. The problem is that code doesn't switch pages :) – Stevenator21 Dec 02 '12 at 21:07
Drop the rel-external attribute. Those links are not external, you are on the same page. – Red2678 Dec 02 '12 at 21:16
Ohhhhh! BTW: My freind tested it on the Galaxy Note 2 and there is still as much flash. – Stevenator21 Dec 02 '12 at 21:19

How do I Internally Linked Pages? (HTML)

2 Answers2