Google Analytics within jQuery Mobile. On a mobile web app we are working on we wanted to track every page view on the inside of the jQuery Mobile framework.
We ran into a bit of an issue doing that due to how pages are handled within jQuery Mobile. Page loads are not true hard reloads. Instead, they are dynamically inserted into the DOM. That’s a problem for the traditional Google Analytics tracking code. The Solution in the root layout of the site we add GA tracking snippet Then we created a new page_tracker.coffee file that is included in the head of the page:
Using Google Analytics with jQuery Mobile. I upgraded Crossword Tracker to use jQuery Mobile at the end of November and while it has proven popular, I had a sneaking suspicion my Google Analytics reports were off.
The Pages/Visit statistic was quite low (very close to 1 in fact). It turns out that jQuery Mobile requires a little extra effort to execute Javascript on every page load. I broke up the Analytics code into two pieces and now every page view is being tracked. In the head (which is executed only on the first page load) I load the required Javascript file from Google, using the async loader which means it won’t block page loading: Originally I had the whole snippet from Google there and it counted just one view, no matter how many pages the user actually viewed. $('[data-role=page]').live('pageshow', function (event, ui) { try { _gaq.push(['_setAccount', 'YOUR_GA_ID']); hash = location.hash; if (hash) { _gaq.push(['_trackPageview', hash.substr(1)]); } else { _gaq.push(['_trackPageview']); } } catch(err) { } });
Top 10 jQuery Mobile Code Snippets that you need to know. jQuery Mobile is a framework for mobile web apps and mobile websites with an aim to provide a unified user interface system across many mobile device platforms such iPhone, BlackBerry, Android and Windows Mobile.
The framework is built on top of one of the most popular Javascript frameworks, jQuery. Followings are some of the most useful code snippets that I’ve used in my recent web app developed using jQuery Mobile framework. 1. Disable truncation for list items and buttons If your list item or button has a long text, it will be truncated automatically by jQuery Mobile. For example, to disable truncation for buttons: To disable truncation for list descriptions: Use jQuery Mobile to Build a Native Android News Reader App. In this three part tutorial series, our main goal is to describe how jQuery Mobile can be used to develop a native Android application.
First, we will develop a stand-alone, sample web application that will browse articles from Yahoo! Adding driving directions to a jQuery Mobile web site. My first morning at Scotch on the Rocks was a bit rough.
Despite getting to bed at a decent time (10:30 or so) so I could catch up on my sleep, I ended up waking up around 3:30 or so in the morning and tossing and turning till 6. During that time an idea popped in my head for one more demo I could do for my jQuery Mobile presentation. I was thinking about building a simple mobile web site for the hotel. I thought it would be a simple example but also pretty practical. Of course, once I figured out a simple, static plan for the site an idea occurred to me. First, I'll begin by showing a few screen shots of the application I built. Active button in navbar in Jquery Mobile - Yousef Jadallah's Blog. When you add ui-btn-active class to your anchor, it will activate the selected button in your navbar.
Moreover, if you'd like to keep it active when you return to it again, you need to add ui-state-persist. jquery mobile framework detects ui-state-persist class, then fires the delegate as following: $navbar.delegate( "a", "vclick", function( event ) { if( ! $(event.target).hasClass("ui-disabled") ) { $navbtns.not(".ui-state-persist" ).removeClass( $.mobile.activeBtnClass ); $( this ).addClass( $.mobile.activeBtnClass ); } }); $.mobile.activeBtnClass is equivalent to "ui-btn-active" which it's a class used for "active" button state, from CSS framework. Here you can find an example: <! In the previous example you find out that the navbar transitions with the page; to make the footer sticks persistently. <! jQuery Mobile Tutorial: Creating a Restaurant Picker Web App. Mar 08 2012 With an increase in the number, diversity and complexity of smartphones, more and more companies want to have their own mobile app, but creating a native app can be pretty expensive.
It requires special skills, as well as special coding tools, and then there is also the need to build an app per platform (Android, iOs, BlackBerry, Windows Phone, etc). All of this figures in to a higher price tag for the app development. Another solution for developers is then to create something called web-apps: HTML CSS apps, which users can access from their browsers. They are cross-platform, and cross device. Resources. In this section, we have gathered useful resources that will help you learn more about jQuery Mobile, find tools to develop jQuery Mobile application designs and mockups, tutorials and tools to guide your through the development of simple or more complex applications and related articles.
Featured sites | Books | Apps & Frameworks | Plugins | Extensions | Tools | Themes | Articles & Tutorials. How to style buttons with jQuery Mobile. The future belongs to mobile web apps that function on a broad range of smartphones and tablets. The excerpt below from jQuery Mobile helps you get started with jQuery Mobile, the touch-optimized web framework for creating apps that look and behave consistently across many devices. jQuery Mobile will automatically create stylized buttons out of regular form buttons, whether they be created with the input tag or the button tag. jQuery Mobile can also create buttons out of simple anchor links, by applying the data-role="button" to them.
By default, buttons will stretch to fit the width of their containing element. By applying the data-inline="true" attribute to a button, you can create inline buttons that are only as big as their content requires (Example 1, Figure 1). Example 1. Figure 1. Warning: As of this writing, the jQuery Mobile documentation states that by applying the data-inline="true" attribute to a containing element, all buttons contained therein will be rendered inline. Mobile App Design/Dev: Building Navigation with jQuery. Smartphones are now equipped with some very efficient web browsers.
JavaScript is more powerful than ever before, and can be extended with the help of code libraries such as jQuery. When you add in the latest HTML5/CSS3 specs, it’s possible to build very snappy mobile web apps with some basic frontend code. In this tutorial I’ll show how you can build a mobile-based website/webapp. We’ll use CSS3 media queries for targeting specific devices and screen resolutions. Plus a bit of jQuery helps to animate the menu and load external page content using Ajax calls. Defining the Page Structure Let’s start by going over the HTML page first and style it using some CSS rules. X-UA-Compatible is used to describe how your document should render in certain browsers. Passing Data Between Pages in jQuery Mobile. Electric Foundry: Coding quickie: jQuery Mobile and dynamically created content. I think I don't have to start telling how good jQuery Mobile(JQM) framework is.
I think it's the fastest way to create mobile-webpage for newer smartphones. I have tested this framework with iPhone 4 (iOS), iPad 1 and 2 (iOS), HTC Desire HD (Android), Samsung Galaxy Tab (Android), HTC Mozart (WP7), Nokia Lumia 800 (WP7) and amazing Nokia 5230 (Symbian).I even got my hands on a Blackberry tablet for few minutes. Unfortunately my mobile detection didn't count it as a mobile device so I can't tell how well JQM works on it.Devices that understand JQM well and run it smoothly are iOS and Android devices. Amazingly JQM works in Nokia 5230's own browser. It doesn't look as good as on iOS or Android devices, but it’s functional. #Skip this part if you are not interested in my opinions#I'm from Finland, the land of Nokia. The problem that this blog-post solves is explained next. If the content is fetched with ajax and placed to some JQM-page it won't do these changes.
Persistent Navigation in JQuery Mobile.