Hi,
I'm trying to load an external url content to a div.When I use the
Js code block below, the url content is displayed successfully. But divHeader is not visible because mobile.loadpage creates a new div under divContent, sets the url content to this div and newly created div's style is ui-page. When the style is ui-page it surrounds the whole page so divHeader isn't displayed properly. When i delete the class value "ui-page" from newly created div at runtime everything is fine.I couldn't change the ui-page style for newly created div because mobile.loadPage adds this by default.
What am i doing wrong or is there another way to show external url's in a div using jquery mobile?
NOTE: I didn't use ('#divContent').load(url) because FolderTemplate below has html files and inside this html files, image src's are not full path. So when i used div.load(url) images could not be found and html is not shown properly.
Div content:
<div data-role="page" id="divUrlView">
<div data-role="header" id="divHeader">
<h1>UrlView</h1>
</div>
<div data-role="content" id="divContent"></div>
</div>
Js Code:
$.mobile.loadPage(url, {
showLoadMsg: true,
pageContainer: $('#divContent')
}).done(function (e, ui) {
$.mobile.changePage($("#divUrlView"));
$("#divContent").children().show(); // default style is display:none so I'd to do this.
}).fail(function () {
$.mobile.changePage($("#divError"));
});
FolderTemplate:
TEMP -- Main directory
FileFolder -- Each file has it's own directory
File.html -- File as html
File.jpg -- Html src file
Best regards,
SC