jQuery Forum

Yesterday I posted a change in behavior between 1.2.0 and 1.3.0 that inhibits rounded corners on controlgroups..
Today I found a somewhat similar issue with dialogs

<div data-role="dialog">       <script>
      // This script prevents rounded corners on the top
      // because rounded top corners relies on this selector in structure.css
    // .ui-corner-all > .ui-header:first-child
      // why the :first-child pseudo-class ??
      // script was placed here because script in head is not eval'd via ajax
      </script>
      <div data-role="header" data-theme="d">             <h1>Dialog</h1>       </div>       <div data-role="content" data-theme="c">
            Dialog content
      </div> </div>

I've added this to my theme as a workaround
.ui-corner-all > .ui-header {
 -webkit-border-top-left-radius: inherit;
 border-top-left-radius: inherit;
 -webkit-border-top-right-radius: inherit;
 border-top-right-radius: inherit;
}
In this case, I can probably move the <script> outside of the data-role="page/dialog"
thought this might be helpful if anyone is having issues with rounded corners
 

when a page is automatically removed from the dom, are any event listeners that may have been bound to elements in the page automatically removed?
If not, what is the best practice for removing event listeners?

ie, I have the following script:

1. $(document).on({
2.     pageinit : function(evt) {
3.         // do stuff here   set up some listeners
4.         // perhaps asynchronously load google map api... and set up event listeners for markers, etc
5.     }, // end page init
6.     pageshow : function(evt) {
7.         //
8.     } // end pageshow
9. },'#specific page id');

I was initially under the impression that once a page was viewed, it stayed in the dom  and pageinit would only get called once for that page...

What actually happens:

1) Browse to that page...the above script runs and pageinit gets triggered once.

2) Now say you navigate away from the page... the page is removed from the dom...  (but the above script is still active).    (how about any other event listeners set up.. say for the map markers... are they unregistered?)
When we come back to this page... the script is reloaded/rerun.

3) Viewing this page for a second time pageinit will fire twice for this one page
If the page had been cached in the dom, pageinit wouldn't fire at all on any revisits.
at most, I'd expect these triggers to trigger only once.

So, in a nutshell, what are the best practices in making sure events only fire once (scripts only loaded once) and for unregistering event listeners

further example... I may want to listen for events on pageshow, but stop listening on pagehide

This isn't necessarily a jQuery Mobile question but a general html/javascript / mobile question
What's the best way to make sure that an image fits on screen?
<img src="/path/to/img.jpg" width="100%" />   will always fit the img to the full width (possibly enlarging the img)..
How to only shrink to fit ?

Is it currently possible to theme the loading message, or is dark-grey/black what ya get?

as seen on
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-collapsible.html
(scroll to bottom for collapsible sets)

when all collapsed:
first item has rounded corners on bottom
last item does not

According to
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/buttons/buttons-types.html
all these following should like like the last one..

<form>
These two look the same.. and both are inline:
<input type="submit" value="a: inline" />
<button>b: inline</button>
<input type="submit" value="c: block, but not full width" data-role="button" />
<button data-role="button">d: button with data-role=&quot;button&quot;</button>
<a data-role="button">e: Looks as documented:  width:100% with dropshadow</a>
Documentation implies that a,b,c, & e should appear the same
or am I doing something wrong
</form>