Search code examples
jqueryiphonesliderweb-applicationsiui

conflict between JQuery slider and iui (iphone)

Im trying to get a slider on an iphone web app, I'm using iui to handle the ui. The slider appears to be causing some kind of conflict with iui.js, when you drag the slider it tries to open another page. However it works fine when you just click on some part of the bar. I thought it was the slide event causing it but this event is triggered in both cases, so I'm a bit stuck. Any help would be greatly appreciated.

Simple test case (click through to get the slider):

<head>
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

    <script type="application/x-javascript" src="http://www.joehewitt.com/iui/iui/iui.js"></script>
    <link href="http://www.joehewitt.com/iui/iui/iui.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

    <script language="javascript">
        $(document).ready(function(){
            $("#slider").slider()
        });
    </script>
</head>
<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    <ul title="slider test" selected="true">

        <li class="group">Page 1</li>       
        <li>
            <a class="mainnav" href="#page2">page 2</a>
        </li>
</ul>
    <div id="page2" title="foo.inc">
        <div id="slide_container">
            <div id="slider"></div>
        </div>
    </div>
</body>
Solution

  • I'm not familiar with iui, but when you wrote:

    but this event is triggered in both cases

    I think you missed something (which may well explain your problem). If you look at the slider's code, you'll see that mouse drags do have a different set of events that are triggered; look at "_mouseCapture" and "_mouseDrag". _mouseDrag does trigger "_slide", but it also triggers "_normValueFromMouse" first. As for "_mouseCapture", it's not hooked up directly in the slider code (so evidently it's done via some general jQuery UI code), so I can't say for sure it's involved, but based on the name it seems likely that it is.

    In any event, either _mouseDrag, _normValueFromMouse, or possibly _mouseCapture (or some function they call) seems to be calling some iui function inadvertently. My guess would be that iui hooks up a function with the same name as a slider/jQuery UI function, and does so after jQuery UI hooks up it's stuff, and as a result the slide calls the iui function.

    Imagine if a "goSomewhere" function was defined in jQuery UI, and then called by _mouseDrag. Normally it would work fine, but if someone (iui) defined its own "goSomewhere" function that function would be called instead by _mouseDrag.

    Alternatively, the problem might be that the slider code is calling something that doesn't result in navigating to another page normally, but does in iPhone land; however, I suspect that this isn't the case.

    Hope that helps.