CODEWITHSUNDEEP
buttontoolbardojox.mobile
John A
John A

Reputation: 53

Detect if Dojox Mobile ToolBarButton is visible

I've got a ToolBarButton floating right within a heading similar to the example given on the documentation for dojox.mobile.heading ( http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/Heading.html ):-

<div data-dojo-type="dojox/mobile/Heading" data-dojo-props='label:"Voice Memos"'>
  <span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props='label:"Speaker"'></span>
  <span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props='label:"Done",defaultColor:"mblColorBlue"' style="float:right;"></span>
</div>

Produces:

enter image description here

My issue is that while this is fine with a short title (e.g. Voice Memos as above), for longer titles on smaller width devices the toolbarbutton on the right is sacrificed and not shown at all.

I'd like to show something on the page if that isn't visible. Is it possible to detect the visibility of the right-floated toolbarbutton and if it isn't visible add something further down the page (e.g. a link)? And if so, how would I do it?

Using Dojox Mobile 1.9.2

Upvotes: 0

Views: 179

Answers (1)

Adrian Vasiliu
Adrian Vasiliu

Reputation: 396

One way to go would be to set the label by code, using a long or a shortened text depending on the actual screen size. Here's a rough implementation: 

var heading = registry.byId("heading");
var adjustLabel = function() {
  var dim = common.getScreenSize(); // dojox/mobile/common
  var label = dim.w  > 350 ? // adjust the value as needed
    "This is quite a long label" : "Short label";
  heading.set("label", label);
  heading.resize(); 
}
adjustLabel();
connect.subscribe("/dojox/mobile/resizeAll", function(){
  adjustLabel();
});

Live here: http://jsfiddle.net/adrian_vasiliu/3p64t/ (you can test it by resizing the right-side pane: the label adjusts itself automatically; the same would happen on a phone or tablet upon orientation change).

That said, I do not reproduce (with Dojo 1.9.2) the fact that, with your code as-is, the button on the right is not shown. You can try it here: http://jsfiddle.net/adrian_vasiliu/QYjY5/. I also tested it outside of jsfiddle by adding your piece of HTML into dojox/mobile/test_Heading.html - and it behave the same in Chrome/Windows, Chrome/Android and Safari/iOS.

Upvotes: 1

Related Questions