Style/HTML utility function changes
Submitted by dante on Thu, 04/05/2007 - 08:45.
The Style and DOM APIs in 0.9 are completely gutted and replaced. There is common code with 0.4.x methods, but the API surface area has been drastically changed in order to promote comprehensibility and execution speed.
in base dojo:
- dojo.createElement
- dojo.place
- dojo.getComputedStyle
- dojo.style
- dojo.marginBox
- dojo.contentBox
- dojo.coords
- dojo.hasClass
- dojo.addClass
- dojo.removeClass
One brief/important note: all styles are 'camelCased' when being referenced in passed parameters. multi-word styles are treated as they would be in JS, eg: letterSpacing, lineHeight, borderTop, et al.
These functions have been moved to dijit:
- dojo.html.getViewport, dojo.html.getScroll → results combined in dijit.getViewport (_base/place.js)
- dojo.html.placeOnScreen → dijit.placeOnScreen
- dojo.html.placeOnScreenAroundElement → dijit.placeOnScreenAroundElement
- dojo.html.scrollIntoView → dijit.scrollIntoView
- dojo.html.isLeftToRight → Widget.isLeftToRight
- dojo.html.applyBrowserClass → dojo.require("dijit._base.sniff"); (merely including dijit.dijit includes this resources which then automatically applies the class to the <html> tag)
- dojo.html.getDocumentWindow → dijit.getDocumentWindow
- Printer-friendly version
- Login or register to post comments
- Subscribe post
dojo.createNodesFromText...
How can I express sth like
var node = dojo.html.createNodesFromText("
setStyle
How and where can I access the dojo.html.setStyle function in the new dojo? Thanks
should be moved to the
should be moved to the forum, but it is
dojo.style(element, 'style', 'value'); // e.g. dojo.style(element, 'top', '23px');
setOpacity
Where is the setOpacity function?
thanks!
dojo.style(node,"opacity","0.
dojo.style(node,"opacity","0.15"); should work.
Thanks!
I think that dojo.style() is changing the style of the node (CSS), but in IE7 the opacity property of the CSS is not working, so I check the source code of dojo and found this:
dojo._setOpacity(htmlNode, value) , that works for IE and Mozilla, I think that we should use that one. Let me know if I'm wrong
thanks for your help!
greetings
i've noticed a bug in IE
i've noticed a bug in IE that if you have the css { filter:alpha(opacity=15); } on a node (via a classname) dojo.style() doesn't do opacity properly (or rather, fadeIn/Out doesn't, and it definately used _setOpacity). perhaps it's adding _another_ filter, instead of modifying the one (because i though dojo.style used dojo._setOpacity innterally if "prop" == "opacity") ... either way, glad you got it working. :)
Handy Reference for dojo.style()
I had trouble finding the Javascript equivalent of the CSS "float" attribute until I found this reference:
http://www.w3schools.com/htmldom/dom_obj_style.asp
(BTW, it's "cssFloat")
Cross-browser css in Dojo
It's old news that browsers interpret css differently, and that there is no one way best way to deal with this exasperating problem. Dojo has a time- and labor-saving approach that goes like this.
Step 1: Get Dojo to add to your BODY's class attribute
If your page doesn't do this already, add to it either:
or:
dojo.require("dijit._base.sniff");
</script>
Once the page has loaded, this will use javascript to add an extra class name to your BODY's class attribute.
For example, when the page is loaded in Safari, <BODY class="foo"> wil become <BODY class="foo dj_safari">.
Step 2: Touch up your css classes for each badly behaved browser
Imagine you have a css file mycss.css, and in it the classes .foo and .bar work fine in every browser except Safari. Maybe they look like this:
.bar { margin-top: 0px; width:'2em'; }
In this css file, after the above classes, add some new "touch-up" css to make Safari behave like all the other browsers:
.dj_safari .bar {margin-top:auto; width:auto; }
Here ".dj_safari .foo" means "Match any element with (i) a css class named 'foo', and (ii) which is a descendant of an element with a class named 'dj_safari'."
Well, in Safari, every element will be the descendant of an element with a class dj_safari, because every element is a descendant of <BODY>; and Step 1 added the class dj_safari to it.
In your mycss.css file, as long as you place ".dj_safari .foo" after ".foo" in the css file, any css in ".dj_safari .foo" will override matching css commands in ".foo". In other words, you can have different css for Safari, and thanks to step 1, it will only take effect when the page is loaded in Safari.
In other browsers, there will never be an element with a css class named "dj_safari", so the lines in mycss.css that begin with ".dj_safari" will be ignored.
And that's the trick.
This simplifies cross-browser css enormously in dojo. All you have to do is make "touch up" css using the magic Dojo class names named for browsers. Where are they? Uh, they're undocumented. However, you can find them all listed in the file sniff.js, in this code block:
dj_ie: ie,
// dj_ie55: ie == 5.5,
dj_ie6: maj(ie) == 6,
dj_ie7: maj(ie) == 7,
dj_iequirks: ie && d.isQuirks,
// NOTE: Opera not supported by dijit
dj_opera: opera,
dj_opera8: maj(opera) == 8,
dj_opera9: maj(opera) == 9,
dj_khtml: d.isKhtml,
dj_safari: d.isSafari,
dj_gecko: d.isMozilla
}; // no dojo unsupported browsers
The file sniff.js also contains the code that carries out Step 1 above.
Use with Caution
In our example, the file mycss.css is downloaded by all browsers, not just Safari: even non-Safari browsers have to download the "touch-up" css. Ideally, you should only need a little extra cross-browser css. For example, the mail.css for Dojo's mail demo contains only this smidgen of touch-up css:
.dj_ie6 .mailIconOptions,
.dj_ie6 .mailIconFolderDocuments,
.dj_ie6 .mailIconFolderInbox,
.dj_ie6 .mailIconFolderSent,
.dj_ie6 .mailIconGetMail,
.dj_ie6 .mailIconNewMessage,
.dj_ie6 .mailIconMailbox,
.dj_ie6 .mailIconOk,
.dj_ie6 .mailIconTrashcanFull {
background-image: url('icons.gif');
}
But you can't always hope to be so lucky: dijit.css contains 47 extra css "touch-ups."
The moral: use this cross-browser css dojo trick with care, so you don't download more css than you have to.