jQuery Forum

I managed to get the demo app to work without showing the address bar for every <a> click

I missed one change

@cameronbraid is on the right track. The second part to this answer has to do with the meta viewport.

1. <meta name="viewport" content="heigth=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0">

Some people have complained that this causes the rotation to mess up the page. I see a black area to the right of my page. However, there is something we can do to change the meta content.

1. var changeViewport = function () {
2.     if (window.orientation == 90 || window.orientation == 270)
3.         $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
4.     else
5.         $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
6. }
7. window.addEventListener('orientationchange', changeViewport, true);
8. try { changeViewport(); } catch (err) { }

This script will change the meta viewport property after every rotation.

Does this work for others too?

So, why dont you just remove the hrefs and do the transitions in the click handler?  This worked for me.

Or you could keep the hrefs (handy for SEO etc..) and pre-process them as I demoed in http://forum.jquery.com/topic/stopping-the-url-bar-from-dropping-down-i-discovered-a-workaround#14737000002133864

@cameronbraid Thank you very much for your fix, it's working great for me! I just have a couple comments on it:

What does adding "height=device-height" to the viewport metatag do? I just left that part out and it seems to be working fine on all of my test devices.

Your code won't work with external links because JQM automatically falls back to standard href behavior for them, which no longer exists since the javascript removes the href. I've tweaked your code a little to not modify external links:

1. $('div').live('pagecreate',function(event) {
2.     $('a[href]', this).each(function() {
3.         var self = $(this);
4.         if (!self.is( "[rel='external']" ) ) {
5.             self.attr('link', self.attr('href'));
6.             self.removeAttr('href');
7.         }
8.     });
9. });

I'm not really a jQuery expert so there might be a more efficient way to do this, but it is working for me.

Created a fork on github that incorporates these fixes - thanks to cameronbraid and dimitryz.

I'm confused about where to get the jquery.mobile.navigation.js document...

When you download the jQuery Mobile scripts, that document name is not one of them. What am I missing? Where does this come from?

It works like a charm, allthough one issue... THe external links seems to be not working annymore??? How do I make an external link now?

can you post a URL that demos the final result?

With this topic being so old, is the fix explained still relevent? The only place I was able to find the navigation.js file mentioned was on github. Do I need to copy that file into my site files because I cannot find it anywhere in the jquerymobile files?

I am thankful for the fork on how to prevent the url bar from dropping into view but it is of no use at all unless I know where the file " jquery.mobile.navigation.js" can be found in order to make the changes.
I do not have that file in my jquerymobile package. I cannot even find references to those lines of code.

Anybody???

mackie2, the jQuery Mobile JS file is "built" from multiple source files. They are combined at build-time. You need to clone the repo and perform the build procedure, or else find the corresponding code in the built file.

----

If you are changing the viewport meta, be aware that there is a bug in jQuery Mobile (fixed in current pre-release code) related to this. jQuery Mobile needs to parse the viewport meta. It doesn't handle fractional values for scale correctly. So, you need to specify integer values, and leave-off the ".0".

----

It is indeed unfortunate that JQM hijacks # in the way in which it does. I suppose that at the time it was initially designed, the side-effects of this were not clearly understood. I have to assume that the designers did not realize that some browsers might treat a "#" in the URL in ways that were not anticipated.

In many ways, JQM is a giant hack - because it uses HTML and the browser in ways that were not intended. HTML has no concept of "page" at all - just "document". There is no provision at all in HTML to have a document made-up of multiple pages, or to ferry pages in and out of the document.

Alas, this is the biggest problem that jQuery Mobile has. It is a giant hack. I don't necessarily mean that in a purely negative way. It is just stating the facts. It's a delicate thing that I'm afraid is easily broken if browsers do not conform to the developers hopes of how the browser might react.

Unfortunately, the way that it handles this "URL bar dropdown" problem, then, is a hack on top of a hack, and isn't pretty. It would be much better to prevent the drop-down in the first place, (don't use # in the URL) than to "correct" it after it has happened.

Maybe it is time to take a big gulp, admit that the design is severely flawed, and fix it.

The challenge is finding a way to do so without also breaking every JQM site currently in existence.

Thank you for your reply, watusiware.
I have read a lot of your posts and responses on this forum and, as is the case in my instance, you have explained the answer to a question extremely well.
Since the pages affected in my case are pulled from a database on an individual basis, I guess I will just live with the url bar popping in and out of view.

So I ran into this same problem with the URL bar annoyingly dropping in and out between page views.  However, I found that removing the HREF attribute on links caused other aesthetic-related issues as well as functional issues where something else was relying on the HREF attribute.  Also, I didn't really like the idea of taking away the one attribute which makes a link a link.  My solution aims to remove the HREF attribute just long enough for the "click" event to dispatch and then restore it back afterwards.  Here is round one of working code: