Basically I want to "outsource" some of the content pages into single .html files. The pages are located at the same server and should be loaded normally by a link:
<li>Link1<span class="icon"></span></li>
The content of the link1.html page:
<!-- page -->
<div data-role="page" class="pages" id="link1">
<!-- header -->
<div data-role="header"> Menu
<div class="headerlogo"></div>
</div>
<!-- /header -->
<div data-role="headerimage" class="headerimage"><img src="images/headerimages/bild1.jpg" /></div>
<div data-role="content">
<h3>Link1</h3>
<p></p>
</div>
<!-- /content -->
</div>
<!-- /page -->
When I am clicking on the link in the menu, the content is shown fine. But the URL is changed in a way that may cause troubles.
What I want is: http://example.com/#link1.html
But what I get is: http://example.com/link1.html
So the problem is, that if someone tries to reload the page http://example.com/link1.html, he/she only gets the content of link1.html without all js/css things.
What I am doing wrong?
Thx
Stefan
You'll need to include the jquery mobile code in the head of link1.html and every other external file if you're going to take this approach.
Edit - This may actually achieve what you're trying to do.
$(document).on('mobileinit', function () {
$.mobile.pushStateEnabled = false;
});
Make sure the event handler is placed before jQuery Mobile is loaded.
Related
I am using jqm 1.4.5. for my web app. I have a problem changing to a page programmatically using the pagecontainer change widget in a certain situation. I have a home page that is part of the index.html file. From the home page if I load an external page via jqm ajax method and then from that page have a button that changes back to the home page (via javascript) it fails silently. However, it works if the external page has an anchor button with an href="#home_page".
The JS code is being executed. All the id's are correct.
Why does it work using the anchor button but not programmatically with the button tag using the JS code?
What am I doing wrong?
index.html
<div id="page_home" data-role="page" >
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
load in the external page
</div>
page_external.html
<div id="page_external" data-role="page" >
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
go to home page <!-- this works -->
<button id="mybutton" data-role="button" > go to home page (script)</button> <!-- this does not work -->
</div>
JS
$(document).on("click", "#mybutton, function () {
//this fails silently and does not change the page
$(":mobile-pagecontainer").pagecontainer( "change", "#page_home" );
});
I found the answer here on SO:
Similar Question
I was using the wrong syntax. It should be
$(":mobile-pagecontainer").pagecontainer( "change", $("#page_home" ));
I'm trying to implement a jQuery-based image crop function that exports to base64 text. CropIt seems perfect for the job, and works beautifully, UNLESS it's not the first jQuery Mobile page in the list of jQm "pages", that displays by default in the HTML file. If it's not, everything works except for the zoom slider. I've created a jsFiddle to illustrate the problem:
http://jsfiddle.net/f97r3suf/5/
Any help getting the zoom slider to work would be appreciated, thanks! Code attached.
<!-- ********* DEFAULT JQUERY MOBILE PAGE **************** -->
<div data-role="page" id="splash" data-theme="f">
<div data-role="content">
<p>Here's a stripped-down example based on the sample CropIt code on GitHub. The long URL in the external resources list is a "locally" hosted version of Cropit.min.js on Google Drive. Everything else works, including the imageState tag, the drag-to-pan on the image, the image upload and export. Only the zoom slider doesn't work.</p>
Example: CropIt is the second jQm page
<p>If I switch the order of the jQuery Mobile pages, so that the Cropit page is the first (default) page of the HTML instead of this page, the zoom works fine: Example: Cropit is the first jQm page.</p>
</div>
</div>
<!-- ******** UPLOAD PAGE ******* -->
<div data-role="page" id="upload" data-close-btn="none">
<div data-role="content" style="padding:0px">
<!-- content -->
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-image-preview"></div>
<div class="image-size-label">Resize image</div>
<input type="range" class="cropit-image-zoom-input">
<button class="export">Export</button>
</div>
</div>
</div>
I'm seeking to avoid using this for the splash screen, because it does not work on all devices and for other reasons:
<link rel="apple-touch-startup-image" href="img/splash.png" />
So I'm trying to use this instead and it works fine until it slides into a new page, which is then treated like the splash screen again (e.g. it goes blank when the timer expires - in this case 4 seconds). How can I stop/restrict this behavior, so that changePage remains contained in splash page only?
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
setTimeout(hideSplash, 4000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
});//]]>
</script>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header" data-backbtn="false">
<h1></h1>
</div>
<div data-role="content">
</div>
</div>
</body>
Good idea here is what I'm thinking. Use single pages instead of multi page(multiple data-role=page). For index.html or index.php or whatever. Put your splash page. The reason for this I will explain later on.
index.html
<head>
<!-- First include all jquery stuff -->
<script src="app.js"></script><!-- external script because we can just include it in every page -->
</head>
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
</div>
</div>
</body>
app.js
$(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
setTimeout(function(){
$.mobile.changePage("home.html", "fade");
}, 4000);
});
Ok so I did it this way because lets say you have navigation menu and you want to send people back to home page. You won't have to show the splash page again. You can just link to home.html. Also splitting up your pages helps keep the dom leaner. I hope this helps.
<link rel="apple-touch-startup-image" href="img/splash.png" />
Is indeed only for apple mobile devices.
A real splashscreen should only be there to show you a nice picture while you're waiting. Its goal is not to make you wait for real reason. In your case it's taking 4seconds out of the life of your users just to make it look cool.
I have modified your code and put it in this jsfiddle : you'll see it works now. For the splashscreen to take the full width/height edit the css to remove the margins. I've set the timer to 2s, that's more than enough I think.
I'm trying to build a dynamic display in a web page. The site is built in ASP.NET MVC 3, but I'm not sure if this matters...
Essentially, I have a base "_Editor.cshtml" page which uses partials to render the specific editor content in my display using query parameters. Consider an editor for a chart (line chart vs. bar chart).
_Editor.cshtml
<div id='tabs'>
<ul>
<li><a href='#queryTab'>Define Query</a></li>
<!-- THIS IS WHERE I NEED TO SHOW ALL OF MY 'CUSTOM' TAB NAMES -->
<!-- ko template: 'tabNames' -->
<!-- /ko -->
<li><a href='#themeTab'>Styles and Themes</a></li>
</ul>
<div id='queryTab'>
<!-- configure db connection, tables, fields, etc... (not important) -->
</div>
<!-- THIS IS WHERE I WANT TO SHOW CONTENT FOR MY CUSTOM TABS -->
<!-- ko template: 'tabContent' -->
<!-- /ko -->
<div id='themeTab'>
<!-- show various style options here (not important) -->
</div>
</div>
<script type="text/javascript">
$(function(){
var vm = { /* define my model here */ };
ko.applyBindings(vm);
$("#tabs").tabs();
});
</script>
#if (Model.EditorType == ChartTypes.Bar) {
#Html.Partial("_BarChartEditor")
} else if (Model.EditorType == ChartTypes.Line) {
#Html.Partial("_LineChartEditor")
}
_BarChartEditor.cshtml
<script id="tabNames" type="text/html">
<li>Bar Chart Tab!</li>
<!-- I could have many more tab names here -->
</script>
<script id="tabContent" type="text/html">
<div id="barChartTab">
<h1>Add controls for bar chart configuration</h1>
</div>
<!-- I would create a div for each tab name above here -->
</script>
_LineChartEditor.cshtml
<script id="tabNames" type="text/html">
<li>Line Chart Tab!</li>
</script>
<script id="tabContent" type="text/html">
<div id="lineChartTab">
<h1>Add controls for line chart configurations</h1>
</div>
</script>
Sorry for the lengthy code drop (it took a long time to write it all here, so have mercy on me). :) I wanted to make sure that my problem was understood because of the way I'm building my editors using custom partials. Perhaps it's cludgy, but it works for the most part...
Really, everything works great except for the tab content. The tab rendering appears to be happening before I'm able to bind my view model to the UI. When the 'ko.applyBindings()' method is called, the tab shows up on different tabs.
Has anybody tried to do this? Has anybody had success? I've created a jsfiddle to show a simple scenario to show exactly what I'm talking about:
http://jsfiddle.net/TrailHacker/j2nhm/
Thanks for any help!
I actually got it working with your example, your content template was just structured incorrectly. It was missing the <div> tags.
If you modify this for your example, just remember that the div id needs to match the link's ref. You can throw both of these values into your viewmodel, to allow for multiple custom tabs.
http://jsfiddle.net/tyrsius/UCGRZ/
My Jquery mobile application has a simple login page through which the user will login and will be able to access the rest of the pages.But the problem here is that i am still able to access the rest of pages without logging in.The login session is maintained at client side using cookie as there is no session maintained at the server side.I have a single HTML file in which i have all the required jquery mobile pages.Is there any way that i can restrict the direct access to the internal pages of my application.
<body onload="init()">
<div>
<!-- login page -->
<div data-role="page" id="home" data-theme="wl" style="top: 1px;">
..............
</div><!-- End of login page -->
<!-- forgot page -->
<div data-role="page" id="forgot" data-theme="wl">
.................
</div><!-- End of forgot password page -->
<!-- Search page -->
<div data-role="page" id="search" data-theme="wl">
................
</div><!-- End of search result page -->
<!-- Sendmail page -->
<div data-role="page" id="sendmail" data-theme="wl"></div>
<!-- End of Sendmail page -->
<!--- View Profile Page =-->
<div data-role="page" id="viewProfile" data-theme="wl">
........................
</div><!-- End of View Profile Page -->
</div>
</body>
I found another simple solution.Earlier when I had this question I used to check the cookie session during the onClick event of the button click.But now I have changed it by checking the cookie session during pageshow event described below.
$('mypage').live('pageshow', function (event, ui) {
if(checkCookie()){
//do some task
} else {
alert('Your Session has Expired or User not Logged In');
$.mobile.changePage("#login", "slide", true, true);
}
});
You could prototype (override) the page show event method.
This code here is how you can handle that event:
<script type="text/javascript" language="javascript">
$('mypage').live('pageshow', function (event, ui) {
alert('This page was just hidden: ' + ui.prevPage);
});
</script>
More events can be found here: http://jquerymobile.com/test/docs/api/events.html
This is a tutorial on javascript prototyping:
http://www.javascriptkit.com/javatutors/oopjs2.shtml
A starting place to looking to do an override could be around the area of
$.Event
Possibly you wouldn't even need to override an event, maybe one of the existing ones will do what you want. You can use firebug to inspect the event handler variables to see if there is a parameter option to prevent navigating to the next page.