jQuery Forum

Having spent the last year or so working with jQuery Mobile, there are certain aspects of the framework that I think could also benefit my traditional, desktop projects. From a design perspective, I think iPads and other tablets share much more in common with desktop sites than with true, phone-oriented mobile sites, so I would prefer to design based on screen real estate first, and input type (touch vs. mouse) second. Obviously, there are a ton of caveats that could be highlighted here, but what I'm really driving at is whether jQM makes sense for any non-mobile site?

Excluding all of the mobile aspects of jQM, I really like how they manage page elements with "data-role", list, form and button behavior, but most importantly, how easily themes can be used to customize the look and feel of these elements. The themes alone are way slicker than anything you can do with jQuery UI, for example.

There are, however, some parts of jQuery UI that are great. All of the animation effects, for instance. In a way, I guess what I'm wondering is if there might be a way to incorporate elements of both jQM and jQuery UI for desktop applications? Although I've used lots of jQ UI in the past, it's really only been for things like sliders and date-pickers, so I'm not all that familiar with its capabilities.

At the end of the day, my goal is really to reduce the total numbers of pages and page elements that need to be created, while still supporting users on a wide variety of devices. I don't expect to have a single site that works great on everything from an iPhone to a MacBook Pro, but I would like to devise a system where some items are shared between the phone and tablet pages, while other elements are shared between the tablet and desktop sites, leaving only a handful of items specific to any one platform.

Any thoughts on how best to leverage various jQuery components to achieve this goal (at least in spirit) would be greatly appreciated.

Cheers!

To begin with, I (generally) understand how jQM uses id to navigate between pages. What I still haven't figured out is exactly how to navigate to a section of a page, the way foo.html#step2 will on a standard web page. Is there an (easy) alternative to work around the jQM hash nav that allows for deep linking to page sections?

Thanks!

I'm experiencing some strange behavior in phonegap, when it comes to button states. This isn't related to links not working, but rather how they render.

As you know, jQM buttons have regular (link), hover and active (click) states. My problem is that the hover state seems to get locked in, when navigating from page to page, within a single html doc. So for example, if my regular and active button states are white and my hover state is red, these buttons stay red until another action is taken (reload, click an different link, etc, but not simply touching someplace else on the screen.)

Initially, I though the issue was because I hadn't declared an active state, but it seems to be something deeper and not directly related to the html or css.

Any ideas?

Thanks!

To begin with, I totally understand that mobile BlackBerry support is a huge freakin' mess. In the case of OS 5, it seems to work on some hardware and not on others. Unfortunately, one of the "others" has been deemed somewhat important by the powers that be.

In an attempt to isolate the problem I pointed the BlackBerry 9700 Bold at the jQM site. The issues are identical, so at least the problems are directly do to something I screwed up! :)



As you can see, the sprite image that hold all the little nav icons isn't loading correctly. In some cases, it looks more like an issue with positioning, while in others it looks like the image may not be loading at all. It a little hard to tell, but I can confirm that the gear (should be left arrow) is neither the left most image, nor the one in the center, so the sprite is being position, just not properly.

Has anybody else had a similar issue with BB 5 (where it works on some hardware but not others)? Any ideas?

btw... I should note that I'm using a tool called DeviceAnywhere, which gives me access to all sorts of hardware so if there are any technical details that might help, I pretty much have access to any device made within the last 5 years.

Thanks!

I'm having some difficulty that may be iOS and not JQM related, but I thought I'd ask here anyway. Basically, I have a page where I need to display a number string. Think of a serial number, for example. Anyway, they are not URLs, but rather just for reference. In desktop Safari, they appear just like any other plain text, but on the iPhone, it looks like iOS wants to make them all clickable phone numbers. Is there an easy way to prevent this?

I can easily style those elements to not look like links, but given that there is nothing in the HTML that is telling the numbers to act like a URL, I can't make them un-clickable. There are phone number on this page too (styled as buttons) so whatever I do needs to respect this fact.

Basically, how do I prevent someone from dialing my serial number? :)

thanks!

I'm having a little trouble with JQM scrollview. I can get things scrolling fine, but I cannot stop the scrollview behavior where it's not wanted.

Basically, all I want scrollview for is a horizontal slide show thing, that sits at the top of the content section. So I add something like this and everything is fine for the slide show:

<div data-scroll="x" class="slides">

The problem is the page header and footer are now fixed, and I don't want that. I see that scrollview injects the class .ui-scrollview-clip and data-scroll="y" into <div data-role="content"> even though I never asked for it. To make matters worse, once the scrollview JS loads, this behavior moves to pages without any scrollview content at all.

Thoughts?

I'm having some difficulty with a 3rd party script running within JQM. The script itself works fine on its own and sort of works within the JQM page, but not quite.

I'll attach the code in a moment, but basically I originally thought that there were just some conflicts between the JQM CSS and that generated by the script. If I disable jquery.mobile-1.0rc2.min.css things work, but of course the page looks like ass. Then I noticed that toggling the FireBug panel in Firefox would "fix" things. The initial page looked wrong, but either opening or closing FireBug did something to correct the display issues. I have no idea why, but now think that my problem has something more to do with the mobileinit event, of which I know absolutely nothing.

Here's what I have. If anyone can point me in the correct direction, I would be very greatful!

-------------------------

<!DOCTYPE HTML>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<title>Egencia</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />

<link rel="stylesheet" href="styles/mobile.css" />
<link rel="stylesheet" href="styles/mobile_colors.min.css" />

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src='scripts/swipe.js'></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>

<style>
.swipe {
  padding-bottom:20px;
  background-color:#ffc;
}
.swipe div {
}
.swipe div div {

}
.swipe div div div {
  margin:0 10px;
  padding:50px 10px;
  background:#1db1ff;
  font-weight:bold;
  color:#fff;
  font-size:20px;
  text-align:center;
}
</style>

</head>
<body>

<div data-role="page" id="trip1" data-theme="b">

<div data-role="header" role="heading" data-theme="b" class="header">
<a href="/" data-rel="back" data-icon="arrow-l" data-iconpos="notext" data-theme="a">Back</a>
<h4>test</h4>
<a href="home.html" data-icon="home" data-iconpos="notext" data-theme="a">Home</a>
</div><!-- /header -->

<div data-role="content">

<div id='swipe' class='swipe'>
  <div>
    <div style='display:block'><div>1</div></div>
    <div style='display:none'><div>2</div></div>
    <div style='display:none'><div>3</div></div>
    <div style='display:none'><div>4</div></div>
    <div style='display:none'><div>5</div></div>
  </div>
</div>

<a href='#' onclick='swipe.prev();return false;'>prev</a>
<a href='#' onclick='swipe.next();return false;'>next</a>
<br><br>

</div><!-- /content -->
</div><!-- /page -->

<script>
var swipe = new Swipe(document.getElementById('swipe'));
</script>

</body>
</html>

I have a bit of a problem getting a link on page 1 to index to the right point on page 2. So far, the only examples I've seen are to use the hash tag to show a new internal "page" but not reposition a long list.

Here's where I'm at...

Page one has a link like this:

<a href="page2.html#foo2" rel="external">show stuff</a>

Page two has content blocks like this:

<div id="foo1">stuff 1</div>

<div id="foo2">stuff 2</div>

<div id="foo3">stuff 3</div>

The page loads, but never moves down to the marked content. I've tried the name tag as well, in a few different variations all to no avail.

This must be possible, but I'm not sure if I need to add some Javascript, or if I'm just missing something very simple.

Thanks!

m