Components, such as list views and collapsible blocks, are dynamically resized by user interactions. This could cause overlap of controls or positioning issues. To prevent this, these components trigger the updatelayout
event, and the jQuery Mobile framework updates the entire document and ensures that all components are laid out correctly. This recipe shows you how to use the updatelayout
event.
Copy the full code of this recipe from the code/08/layout
sources folder. You can launch this code by using the URL http://localhost:8080/08/layout/main.html
.
Carry out the following steps:
Create
main.html
with three collapsible blocks and a<div>
container, as shown in the following code snippet:<div data-role="content"> <div id="msgdiv">Collapsible Blocks</div> <div data-role="collapsible" data-theme="a" data- collapsed="false"> <h3>Tallest Mountain</h3> Mt. Everest </div> <div...