CODEWITHSUNDEEP
javascriptdomdojodojox.mobile
RCK69
RCK69

Reputation: 909

DOM updates with slight delay in dojotoolkit

I have a dojox.mobile.IconMenu with 6 dojox.mobile.IconMenuItems on it. When i press the IconMenuItems the buttons should get pressed in. I achieve this behavior by simply switching the images of the buttons at the right time.

Now here are the problems that arrise:

On Desktops (Chrome): When I just click the button the view changes so fast that you can t see the new, pressed in, graphic! I have to hold the button for about half a second and then release it till the button displays the new Image.

On Android/iOS Devices (tested: Chrome, Firefox, Opera, Skyfire, Board Browser, Dolphin, Safari): The button changes the image but I cant see the change because the graphic is changed too slow.

Here is the code (html)

<ul data-dojo-type="dojox.mobile.IconMenu" id="portalMenu" style="border: none; outline: none; background-image: url('../deliverables_800x480/backgrounds/img_bg_portal.gif'); position: absolute; z-index: 900; background-repeat: no-repeat; background-size: cover; height: 100%; width: 100%; top: 26px;">
<li label="IconMenuItem" data-dojo-type="dojox.mobile.IconMenuItem" id="portalButton1" icon="../deliverables_800x480/buttons/portal/btn_portal_freetext_big_normal.gif" style="border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; line-height: 0px; text-align: center;" moveTo="null" onmousedown="toggleImg1()" onmousdown="toggleView1()"></li>

[OTHER BUTTONS HERE]

and here are the functions that I call (javascript):

onmousedown="toggleImg1()

// press button1
// press button1
function toggleImg1(){  
    portalButton1.set("icon", "../deliverables_800x480/buttons/portal/btn_portal_freetext_big_armed.gif");
}
function toggleView1() {   
    portalButton1.set("moveTo", "messaging");
    portalButton1.set("selected", true);
    portalButton1.set("icon", "../deliverables_800x480/buttons/portal/btn_portal_freetext_big_normal.gif");

}

Upvotes: 0

Views: 178

Answers (1)

edurocher
edurocher

Reputation: 316

First isn't there an error in your markup? I see onmousedown and then onmousdown, shouldn't that be onmousedown/onmouseup?

However I think you should use dojo/touch and listen to touch.press/release instead of mousedown/up for this. This will make sure you listen to either touch or mouse, depending on the device.

Or, maybe you could watch the "selected" state of the item, and change the icon when the item is selected? Something like:

item.watch("selected", function(){
    this.set("icon", this.selected?"selected.png":"deselected.png");
});

Then, to have the item stay selected for a while, you can set _selEndMethod="timer". You can also change _duration if you want (default 800, should probably be a little shorter for you?).

Upvotes: 1

Related Questions