Given a one-html-multiple-pages app, in each of my pages I plan JS inject long html codes and animations which can be heavy. HTML code such :
<div data-role="page" id="page11">
...
</div>
<div data-role="page" id="page12">
<h2 id="anchor12">Title: Page 12</h2>
<script>myScript12() // inject complex content to #anchor12</script>
</div>
1. When does my myScript12() is fired ? (When I open the .html file or when I click and open the #page12 ?
2. What happen to the JS generated content when I leave #page12 for an other page ?
Edit: I don't want to load all my 20 heavy pages on .html load.
Solution: +1 for the detailed explanation by Gajotres (JQM: document ready vs page events), below is my current solution. To run the js ONLY when the given data-role="page" is displayed...
Use the following JQM HTML/JS:
<div data-role="page" id="page12">
<h2 id="anchor12">Title: Page 12</h2>
<script>
$('#page12').on('pageinit') { //only run when page is displayed
myScript12() // inject complex content to #anchor12
});</script>
</div>
That script will execute as soon as page is loaded into the DOM. That's why page events exist. Basically if you want to time your code execution do it inside a page event. If you want to find more about page event's read my other answer: jQuery Mobile: document ready vs page events.
When you leave your page that content is still there loaded into the DOM. If you want to prevent large DOM content you can use pagehide event to clean previous page content. There's also an attribute that can be placed inside a data-role="page" div to prevent DOM cashing. Attribute name is data-dom-cache="true" and you can find more abut it here.
Related
I am using AngularJS 1.4, and this is the code for my page
<div ng-app="myApp">
<div ng-controller="mainController">
<div ng-controller="first"> // this is ng-include - first.html
<img id="bannerImage"/>
</div>
<div ng-controller="first2"> // this is ng-include - first2.html
<img id="bannerImage1"/>
</div>
<div ng-controller="first3"> // this is ng-include - first3.html
<img id="bannerImage2"/>
</div>
<div ng-controller="second"> // this is ng-include - second.html
<img id="mainImage"/>
</div>
</div>
</div>
I need to first load "mainImage.jpg" in "second.html", but judging by the console loads all in the following sequence:
first.html
first2.html
first3.html
second.html
bannerImage.jpg
mainImage.jpg
mainImage2.jpg
mainImage3.jpg as include order in page
I need to load the picture "mainImage,jpg" as soon as possible and display it on the page.
Preferably, the order would be like that or better:
second.html
mainImage.jpg
first.html
...........
That isn't possible without knowing the image urls and preloading them prior to calling them.
In your described scenario, where template pages are being loaded, it doesn't seem like this is an option.
The reason why what you are observing is happening is because the server for your jsp is composing the html. So the html is all composed into the stream writer for the source code. Once the source code is sent to the browser, it then renders the source. It will request the images as they are encountered in the source.
There is no way to mix the image requests with the html composure because they are two separate actions. One is composing a string for a stream writer, and the other is making network requests for external resources.
The only hope if you are trying to change this is to cache the external resources prior to them being requested.
One way to attempt to preload the image would be to save it to a variable in the head of the document using JavaScript
<head>
...other related head elements...
<script>
(function cache(){
var mainCache = new Image();
mainCache.src = "mainImage.jpg";
})()
</script>
This approach will at least start the loading process immediately upon the page starting up, however depending on the image size it may still be loading as the page renders.
In a html web page, i load in my main section the content of another html page. I have a js script section at the botton of my charged page. I use jquery.
<div id="main">
</div>
Other page
<div>
...
<div id="roomCheckoutResult" class="hide">
...
</div>
</div>
<script>
$('#dateRoomCheckout').datetimepicker({
format: 'DD/MM/YYYY'
});
$("roomCheckoutResult").show();
</script>
Line with function show don't work. If i use directly
document.getElementById("roomCheckoutResult").className="";
that work.
So why my line with show don't work.
You need to change this:
$("roomCheckoutResult").show();
to this:
$("#roomCheckoutResult").show();
You target an id value by using a # at the start of the selector.
And, it goes without saying that you have to make sure that jQuery is loaded before using it.
I have a web page, I need part of the content separated to an individual page, but not use iframe. Just like to know if it is possible use div instead of iframe and works as it in the same page(With js base code or php code is cool).
I'd need the whole content of <div class="row-fluid">..</div> to be an individual html, but not use iframe, I will need a div instead of iframe, and make it works like just as in one page.
With PHP you can include a page inside your code inside a specific division.
for example inside index.php:
<div>
<?php include('page2.php'); ?>
</div>
and inside page2.php you have:
<span>Hello World</span>
The result would be:
<div>
<span>Hello World</span>
</div>
If what you want to achieve needs to be in the front-end as the user navigates through your site; that is after a click is made to an element and you don't want to change to another page, then AJAX is your option. this example is with Jquery:
$('.clickme').click(function(){
$.ajax({
url:'page2.php'
success:function(msg){
$('#insert_div').html(msg)
}
});
});
HTML:
<span class="clickme">Get Page 2</span>
<div id="insert_div">
<!-- Page 2 will be inserted here -->
</div>
Another solution is Jquery load() as many have posted:
$('.clickme').click(function(){
$('#insert_div').load("page2.php");
});
You can use the jQuery load() method to load the content when the corresponding link is clicked. you can also use this without event clicked with animation.
I'm pretty sure this is another DOH! facepalm questions but as designer and not a programmer I need some help getting it right.
What I have is an index file calling local .html files via jQuery .load. Just like this:
(some tabs functionality not relative here - thus the link target call)
Lightbox</li>
<div id=lightbox">
<div class="load">
<script type="text/javascript">
$('.load').load('examples/lightbox.html');
</script>
</div>
</div>
I also have an external .js file that has a bunch of functions that handles some lightboxes among other things. Standard <script src="js/typography.js" type="text/javascript"></script>
Which contains:
$(document).ready(function(){
$(".open-lightbox").on("click", function(){
$('.lightbox').css('display','block');
});
$('.close-lightbox').click(function(){
$('.lightbox').css('display','none');
});
});
My problem is that if the externally called .html file has any elements dependent on the .js file ie. the lightbox popup it doesn't work.
something like :
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
If i move the html code right to the index page instead of the .load, no problem, same if I moved the JS as an inline <script>...</script> rather than calling it extrenally. Works fine in both cases.
My spidey sense tells me this has something to do with my function and .load not executing in the order I need them to, but my javascript copy/paste skills only go this far.
Can anyone tell me if I can make this combination work? I'd really appreciate it.
EDIT
Maybe I explained my self poorly so let me try and post a better example.
If my index code is as followed everything works: My lightbox pops up as intended.
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
</div>
<--End Tab Content-->
</div>
When the said tab is clicked the content inside "thistabid" show up. Whatever that content may be.
Now if i do :
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
<script type="text/javascript">
$('.somehtmlpage-load').load('examples/lightbox.html');
</script>
</div>
<--End Tab Content-->
</div>
The lightbox doesn't work. The content of lightbox.html is
LightBox Link
<div class="lightbox">
lightbox content
Close
</div>
Same as the html in the 1st example where everything works. The only difference it's being jQuery loaded rather than hard coded.
What I mean by "if the externally called .html file has any elements dependent on the .js file ie. the lightbox popup" is that if the html is part of the externally called file then the lightbox function isn't working. If it's hard coded it pops up like intended.
On 1st glance the .on seems like should be the solution but most likley my implementation of it is off the mark :/
The 'on' or the 'live' function needs to be applied through an element that exists on the page. Generally some parent of the actual element is used. Can you try something on the following lines with the correct references to the elements on your page:
<li>Link to open Tab Content</li>
<div id="thistabid">
<--Tab Content below-->
<div class="somehtmlpage-load">
<!--leave tab empty for now -->
</div>
<--End Tab Content-->
</div>
<script>
(function(){
$('.somehtmlpage-load').load('examples/lightbox.html');
//live or on needs to be applied to an element that exists on th page
$('#thistabid').on('click', '.open-lightbox', function(){
$('.lightbox').css('display','block');
});
$('#thistabid').on('click', '.close-lightbox', function(){
$('.lightbox').css('display','none');
});
})();
</script>
There seems to be a race condition between your load() and document ready.
To address this you'll need to:
either wait for the load() to complete before you attach the click events
or attach the click to the container of your load() step and use event delegation.
See this page and this other one for more information on how to use on() for delegation.
The code would look like this:
$(".somehtmlpage-load").on("click", ".open-lightbox", function(){
$('.lightbox').css('display','block');
});
Using a SSI solved my problem. I was trying to keep it all Local Drive friendly but it seemed to be causing more problems than anticipated.
Pick your favorite dev environment...I didn't run into any conflicts on either.
ASP - <!--#include file = "examples/lightbox.html" -->
PHP - <?php include 'examples/lightbox.html';?>
Just in case someone else runs into a similar problem.
I'm using Jquery mobile for my mobile application. before I changing a page I want to make some CSS changes on that page. When I am setting for example adding class to id of the next page,or color change: $("#divA1").css("background-color","blue");
It change the same id on the current page (if it exist) and only then change next page. How can I set my CSS settings while on one page but load the next page with those CSS settings.
In most scenarios, jQuery Mobile loads additional pages into the DOM via ajax calls. This is a fairly fundamental part of how it works and you should insure that all markup IDs across all pages are unique.
<div id="page1" data-role="page">
<div data-role="content">
<div id="myContent1"></div>
</div>
</div>
<div id="page2" data-role="page">
<div data-role="content">
<div id="myContent2"></div>
</div>
</div>
If your pages contain similar sub-componants, consider a class instead:
<div id="page1" data-role="page">
<div data-role="content">
<div class="myContent"></div>
</div>
</div>
<div id="page2" data-role="page">
<div data-role="content">
<div class="myContent"></div>
</div>
</div>
Classes allow for selection such as $("#page1.myContent").css("background-color");
If it must be on a new page, you have three options.
You can pass a variable in the URL to test on the new page and change the CSS appropriately. eg. www.url.com?newcolor=f00
You can put a hidden form on the current page, update the values in it and pass it when you go to the next page. (Ugly way to do it but it works.)
Set a cookie. (My preferred solution, works great as long as cookies are enabled. Which, honestly, they may not be.)
However, the best option, especially on a mobile device is to keep the current framework of the page and get new content via ajax and load it into a content div on the current page.
I don't understand exactly what you're trying to do, but I would suggest you using an asynchronous ajax call to download the DOM of the next page.
Then you can apply the changes you want to that DOM, and finally you plug it into your current DOM.
An stub for that woul look like this:
$.ajax('path/to/next/page', {
async : true,
complete : function ajaxCallback(newSite) {
$item = $('YOURSELECTOR');
// Here you can make changes, such as CSS edition
$item.css({'background-color' : '#FF0000'});
// Since you want to make changes to the new site only if you did them in the first site...
if ($item.length > 0) {
$(newSite).find('YOURSELECTOR').css({'background-color' : '#FF0000'});
}
// Here you can append the new site to the DOM
}
});