#13875 closed defect (fixed)
joAdding hrefTarget="_self" breaks page animation
| Reported by: | Paul Christopher | Owned by: | Patrick Ruzand |
|---|---|---|---|
| Priority: | high | Milestone: | 1.9.1 |
| Component: | DojoX Mobile | Version: | 1.7.0b1 |
| Keywords: | Cc: | ||
| Blocked By: | Blocking: |
Description
Steps to reproduce:
- Take dojox/mobile/tests/test_iPhone-Icon.html
- Click on the fifth icon to see a working page transition of type slide.
- Now add hreftTarget="_self" to the fifth IconItem in the source code like so:
<li dojoType="dojox.mobile.IconItem" label="href" icon="images/icon-1.png" href="test_iPhone-RoundRectList.html" hrefTarget="_self" transition="slide"></li>
- Reload the page: The animation will be broken, i.e. the is no anomation at all.
The same is not only true for IconItem but ListItem. Appending hrefTarget="_self" to the list item breaks the animation, too.
Example:
<li dojoType="dojox.mobile.ListItem" rightText="AcmePhone" href="test_iPhone-RoundRectList.html" hrefTarget="_self" transition="slide">
Why do I add hrefTarget="_self"?
I add hrefTarget since I develop my apps on the desktop pc. My index.html file just constains an iframe in iPad size (1024*768). All the pages of the app are run inside this iframe so as to simulate the screen resolution of the target device.
[As of today 9/9/2011, the mentioned test does not work at all since all images are reported as corrupted/truncated by the browser. You need to replace the images first to get the test working]
Attachments (4)
Change History (16)
comment:1 Changed 9 years ago by
| Owner: | changed from ykami to Eric Durocher |
|---|---|
| Status: | new → assigned |
Changed 9 years ago by
| Attachment: | ticket13875.patch added |
|---|
comment:2 follow-up: 3 Changed 9 years ago by
I've attached a patch that fix the problem for dojo 1.9
comment:3 Changed 9 years ago by
I've tried this patch on both Dojo 1.9 and Dojo 1.8 but still seem to have no luck. I tested it using PhoneGap? on Android Jellybean and Gingerbread.
After making the modifications mentioned in the patch, the animations still do not seem to work.
Here is how I am attempting to implement the transition:
<span data-dojo-type="dojox/mobile/ToolBarButton"
href="prevpage.html" hrefTarget="_self"
data-dojo-props='arrow:"left",
transition:"slide"'>Prev</span>
I'm not sure if I am doing something wrong or if there is an issue with the patch.
Thank you.
Best,
--Josh
Replying to sbrunot:
I've attached a patch that fix the problem for dojo 1.9
comment:4 Changed 9 years ago by
I tried to reproduce on Android 2.3.3 and 4.1.2 emulators with the patch on 1.9, using the test case dojox/mobile/tests/test_IconContainer.html (clicking the "hrefTarget" icon), but I can't (works with the original swirl transition and the slide transition).
Could you attach a complete HTML test page that fails on your devices with the patch on 1.9 ?
Thanks for your help.
comment:5 Changed 9 years ago by
The problem I'm having is actually with ToolBarButton?. The slide transition works fine with the dojox/mobile/tests/test_IconContainer.html case. But when I try to implement a slide transition for the toolbar buttons as above, the animation does not work. The page transitions, but without animation.
comment:6 Changed 9 years ago by
| Milestone: | tbd → 1.9.1 |
|---|
comment:7 Changed 9 years ago by
I unfortunately do not reproduce the issue with the attached test2.html file when running in the android stock browser. Before I test by embedding the test file in a PhoneGap? / Apache cordova application, can you tell me if test2.html reproduce the issue when embedded in your application ?
Changed 9 years ago by
| Attachment: | test2.html added |
|---|
Test file that tries to reproduce the issue observed on Android.
comment:8 Changed 9 years ago by
Hmmm...I must be doing something wrong. This is my entire HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="../../libs/dojo/dojox/mobile/themes/android/android.css"
type="text/css" media="screen" title="notitle" charset="utf-8">
<script type="text/javascript" src="../../libs/dojo/dojo/dojo.js"
djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.ContentPane");
dojo.require("dojox.mobile.ToolBarButton");
dojo.require("dojox.mobile.Heading");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
</script>
</head>
<body>
<div data-dojo-type="dojox/mobile/View">
<div id="header" data-dojo-type="dojox/mobile/Heading">
<span data-dojo-type="dojox/mobile/ToolBarButton"
href="../../index.html" hrefTarget="_self"
data-dojo-props='arrow:"left", transition:"slide"'>Home</span>
</div>
</div>
</body>
</html>
I'm also attaching my _ItemBase.js and ViewController?.js files where I applied the patch.
Oh, and yes, when I tried your test file, I had the same problem.
Thank you again for all the help!
comment:9 Changed 9 years ago by
Thanks for sending your example. Unfortunately, I tested it both on the Android 4.1.2 stock browser and in a cordova 2.7 application, using your version _ItemBase.js and ViewController?.js on the dojo 1.9 branch source code, and it works perfectly.
I'm affraid you have a build, cache od deployment issue at this point :(
comment:10 Changed 9 years ago by
| Owner: | changed from Eric Durocher to Patrick Ruzand |
|---|
comment:11 Changed 9 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | assigned → closed |
Apply transition to element with href and hrefTarget defined if hrefTarget is _self (IBM CCLA)