I'm building an app in html/css/javascript and using phonegap to build.
So, I first wanted to have to simple page to page navigation. I tryed this:
index:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
<a rel="external" data-role="button" href="test.html" data-transition="slide">click me</a>
</div>
</body>
</html>
test.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
New page!
</div>
</body>
</html>
Result: when I click on the button the test.html page loads very slow and the data-transition="slide" seems to be ignored.
I found an article about dynamic page loading: https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1?lang=en
Which I really don't get. Aren't the HTML files stored locally? So why do a XMLHtppRequest?
My question is: How do I get a good page transition (fast and with effects)?
You should remove rel="external" from your <a> link.
The attribute rel="external" disables the Ajax navigation, skipping the transition effect, and refreshes your page test.html.
Try your code after removing it.
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
<!-- REMOVE THE ATTRIBUTE REL="EXTERNAL" FROM THE LINK -->
<a data-role="button" href="test.html" data-transition="slide">click me</a>
</div>
</body>
</html>
test.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
New page!
</div>
</body>
</html>
Let me know about your results.
Try this solution by Piotr Walczyszyn. Highly recommended for anyone using Jquery mobile and Phonegap together.
Related
for some reason I my index.html does not read the style.css. It is linked though. what is the issue ? I added the type, I did add the right path I think.
thank you
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Main Start-->
<div class='main'>
<!--Home Section Start-->
<section class='home-section'>
<div class='container'>
< div class ='row'>
<div class='home-text'>
<p> </p>
<h1> </h1>
<h2></h2>
</div>
<div class='home-img'></div>
</div>
</div>
</section>
<!-- Home Section End-->
</div>
<!--Main End-->
<script src="js/script.js"></script>
</body>
</html>
Issue solved, it was that I forgot one root variable.
Just Try :
<html>
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<!-- Here Head Content-->
</head>
<body>
<!-- Here Body Content-->
</body>
<html>
But also after you added screenshot for your CSS File you said in previous
answer that it the problem was from the CSS File not the linking (That mean if
there is something wrong with your CSS File the whole file not work)
One possible cause of such problems are browser cache.
If you are on windows, try running ctrl+f5 to reload the page.
Every thing is correct whith you, the only thing that may be wrong is that the css file is not in the same folder with the index, for no reason, also try removing type="text/css",it may work.
I have looked around but still can't get my code to load my html file. From my index.html file I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>David Anderson, Georgia Tech Professor</title>
<link rel="stylesheet" href="Assets/Stylesheets/default.css">
<link rel="stylesheet" href="Assets/Stylesheets/header.css">
<link rel="stylesheet" href="Assets/Stylesheets/body.css">
<link rel="stylesheet" href="Assets/Stylesheets/footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#header').load('header.html');
alert("Does this load!!!??")
</script>
</head>
<body>
<div id="header"></div>
<section class="section_2 index_section">
...
</section>
...
</body>
</html>
And such.
I included the alert for debugging purposes and it works fine, but it never loads my header.html file. I have included both files in the same directory and level.
My header.html includes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="Assets/Stylesheets/default.css">
<link rel="stylesheet" href="Assets/Stylesheets/header.css">
<link rel="stylesheet" href="Assets/Stylesheets/body.css">
<link rel="stylesheet" href="Assets/Stylesheets/footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!------------
- Header -
------------->
<header class="section_1" id="header">
<img src="Images/David's_typical_Profile_Picture.jpg" alt="David Anderson" id="prof_pic">
<h1 id="name_plate">
<a class="name_plate" href="about.html">David Anderson</a>
</h1>
<h2 id="institution_name">
Georgia Institute of Technology
</h2>
<nav id="main_nav">
<ul class="semantic_list">
<li>Home</li>
<li>Courses
<ul>
<li>ECE 6254</li>
<li>ECE 6271</li>
</ul>
</li>
<li>Lab</li>
<li>Consulting</li>
<li>About</li>
</ul>
</nav>
</header>
</html>
I have looked around everywhere, including Adding jQuery to sublime text 2, Why does jQuery or a DOM method such as getElementById not find the element?, https://learn.jquery.com/using-jquery-core/document-ready/ as well as websites about writing/including javascript: https://www.sitepoint.com/community/t/multiple-pages-without-repeating-the-site-structure/8251/3, https://www.sitepoint.com/community/t/calling-multiple-htmls-into-single-html-file/216583/2, but I still run into the same problem, where it simply doesn't load header.html. Ever.
I am loading it on safari using a local path, not a website.
If anyone has a solution/or answer I'd be very grateful.
Thanks!
I have two simple html files which has a link in body and a log in JavaScript. In A.html, it is a link to jump to B.html and a console.log("a 123"); in JavaScript. However, the "a 123" message will only be showed when refresh the browser but not be executed from a link. For example, if i click the link Go to a in b.html, the message "a 123" will not be showed.
Any idea?
-----A.html-------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" id="a">
<div data-role="main" class="ui-content">
<a href='b.html'>Go to b</a>
</div>
</div>
<script>
console.log("a 123");
</script>
</body>
</html>
-----B.html-------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" id="b">
<div data-role="main" class="ui-content">
<a href='a.html'>Go to a</a>
</div>
</div>
<script>
console.log("b 123");
</script>
</body>
</html>
Bit of searching and I found the answer! Apparently it's a 'feature' of Jquery Mobile. It's using an Ajax navigation system. So it stays singlepage.
From the docs:
jQuery Mobile includes a navigation system to load pages into the DOM via Ajax, enhance the new content, then display pages with a rich set of animated transitions. The navigation system uses progressive enhancement to automatically 'hijack' standard links and form submissions and route them as an Ajax request.
Maybe it's a good idea to read the intro of jQuery mobile: http://demos.jquerymobile.com/1.4.5/intro/
That's because the code your code only executes on the page load. If you want it to execute on an event, you need to wrap it in a function and call the function in the onclick attribute on your link.
I have a set of "li". On clicking each of those "li", I'd like to load a "div" with contents from a html page. I've read some answers on stackoverflow & tried them but they aren't helping me get this working.
Here's the code am trying now
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#page1").click(function(){
$('#result').load('dst.html');
//alert("Thanks for visiting!");
});
$("#page2").click(function(){
$('#result').load('incf.html');
//alert("Thanks for visiting!");
});
});
</script>
</head>
<body>
<header class="site-header-wrap">
<div class="site-header">
<h1>MY TOOL</h1>
</div>
</header>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>HOME</span></a></li>
<li><a id="page1" href="#"><span>OPTION 1</span></a></li>
<li><a id="page2" href="#"><span>OPTION 2</span></a></li>
<li><a id="page3" href="#"><span>OPTION 3</span></a></li>
</ul>
</div>
<div id="result"></div>
</body>
<html>
The code in dst.html is
<html lang=''>
<body>
<p> In page 1(dst page) </p>
</body>
<html>
Could I request help please spot what I'm doing wrong here?
Your code seems to be working for the most part for me the only thing i changed in your code is $('#dblock').load('dst.html'); to $('#result').load('dst.html'); since there is no div with the id #dblock
also make sure your file structure is setup properly and the html files are there with what you have setup now you should have three html files in the same folder
I'm currently working on an application in cordova. Since I have more pages I tried to add a menu. On the first page (index.html) there is some output, on the second file (settings.html) I want to make a Ajax-Request to a external server.
In the <head>-Tag all stylesheets and jQuery and Cordova is included. In the <body>-Tag some Ajax-calls are made.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body onload="onLoad();">
<div data-role="controlgroup" data-corners="false">
Home
Settings
</div>
<!-- Ajax Requests -->
</body>
If I hit Settings I get to the html-page and the code will be displayed, but the code jQuery/js-code will not be executed. (I tried an alert, but it's not working)
Can you tell me what possibilities I have to include another page with working js-code?
Thanks!
If you are using jQuery Mobile , you can use Single Page Application(SPA) for multiple pages in Cordova like this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content" class="ui-content" >
<p>Home Page</p>
<a data-role="none" href="#setting">Setting</a>
</div>
</div>
<div data-role="page" id="setting">
<div data-role="header">
<h1>Setting</h1>
<a href="" data-rel="back" >Back</a>
</div>
<div data-role="content" class="ui-content" >
<p>Setting Page</p>
</div>
</div>
</body>
<script>
$(document).on("pagebeforeshow","#index",function(){
// You ajax call for index page
});
$(document).on("pagebeforeshow","#setting",function(){
// You ajax call for setting page
});
</script>
<html>
Demo
You need to include a script that will fire when the page is fully loaded into the DOM.
<script>
$(document).ready(function(){
-- call your$.ajax({}) here --
});
</script>
OR
<script>
(function(){
call your $.ajax({}) here --
}();
</script>