user interface - Dynamically Generating Content Supporting The JQuery Mobile Theme -
i'm trying generate header heading text, jquery mobile theme isn't supported in dynamically content that's added. same result occurs when else added button, input textbox, etc: etc: there anyway fix this?
here's fiddle - http://jsfiddle.net/fabc7/
here's code:
<!doctype html> <html> <head> <title>website title</title> <meta name='description' content="describe website here..."> <meta http-equiv='content-type' charset='utf-8' content='text/html;charset=iso-8859-1'> <meta name='keywords' content='words, describing, your, website'> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <style type="text/css"> </style> <script type='text/javascript'> $(document).ready(function() { var fixgeometry = function() { /* orientation changes leave scroll position @ * isn't 0,0. annoying user experience. */ scroll(0, 0); /* calculate geometry our content area should take */ var header = $(".header:visible"); var footer = $(".footer:visible"); var content = $(".content:visible"); var viewport_height = $(window).height(); var content_height = viewport_height - header.outerheight() - footer.outerheight(); /* trim margin/border/padding height */ content_height -= (content.outerheight() - content.height()); content.height(content_height); }; /* fixgeometry */ $(window).bind("orientationchange resize pageshow", fixgeometry); $("input#submitheader").click(function() { var headeropen = "<div data-role='header' " var headercloseopenmark = "'>" var headerheadingopen = "<h1>" var pageheaderheading = $("input#headerheading").val(); var headerheadingclose = "</h1>" var headerclose = "</div>" $("#1stpagename").append((headeropen) + (headercloseopenmark) + (headerheadingopen) + (pageheaderheading) + (headerheadingclose) + (headerclose));}); }); </script> </head> <body> <div data-role="page" class="pages" id="1stpagename"> <div id="genoptions"> theme:<br> <select name="selectthemeheader"> <option value="a" selected="selected">black</option> <option value="b">blue</option> <option value="c">gray</option> <option value="d">light gray</option> <option value="e">yellow</option> </select><br><br> fixed:<br> <select name="selectfixedheaderoption"> <option value="1">yes</option> <option value="2" selected="selected">no</option> </select><br><br> heading:<br> <input type="text" id="headerheading" placeholder="my website" value="placeholder"><br><br> heading size:<br> <select name="selectheaderheadingsize"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="selected">3</option> <option value="4">4</option> <option value="5">5</option> </select><br><br> <input value="submit" type="submit" id="submitheader"> </div> </div> </body> </html>
to create [data-role=header] , [data-role=footer] dynamically, need enhance markup using $('[data-role=page]').trigger('pagecreate');.
each widget in jquery mobile should enhanced using create, pagecreate, updatelayout or refresh. using methods depends on items want enhance. check more enhancing dynamic contents.
after appending new header, add
$('[data-role=page]').trigger('pagecreate');
Comments
Post a Comment