I have multiple html documents that share one css stylesheet (not multiple page div sections in one html) for web app project using jQuery mobile framework.
All html documents work fine individually but if one page opens from another page’s link, all the script and styles do not apply anymore. Is there any way to keep each html page refreshed whenever they are linked? I have tried data-ajax="false" and rel="external" in <a> tags, but they did not work. Your help will be appreciated!
yes, each html has plugins links in the head tags:
<link rel="stylesheet" href="style/custom.css">
<link rel="stylesheet" href="style/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(event){
//custom script in each html
});
And htmls are linked with tags in their tags:
<a href="page1.html">page 1</a>
<a href="page2.html">page 2</a>
<a href="page3.html">page 3</a>
The links work but custom stylesheet and script are not applied anymore when a new html opens from previous page. If I add data-ajax=”false” or rel=”external” in the tags, even the links do not work anymore.
Thanks for looking into the code!
PS. Sorry that I am not familiar with jsfiddle and copied my code for two separate html files. If I open page2.html first, the slider works fine. But if I open it from the menu in page1.html, the slider does not work.
This is page1.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(event){
$(document).toggle(
function(){
$('.navigation').css("display", "block");},
function(){
$('.navigation').css("display", "none");
});
});
</script>
<style type="text/css">
.navigation{
position:fixed;
top:0;
left:0;
width:100%;
height:40px;
background:#cfcfcf;
display:none;
}
.menu{
float:left;
margin: 10px 20px;
text-decoration:none;
}
.main{
margin: 50px;
}
</style>
<body>
<div data-role="page">
<div id="page1">
<div class="navigation">
<a class="menu" href="page1.html">page 1</a>
<a class="menu" href="page2.html">page 2</a>
</div>
<p class="main"> this is page1 <br> click anywhere</p>
</div>
</div>
</body>
</html>
This is page2.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(event){
$(document).toggle(
function(){
$('.navigation').css("display", "block");},
function(){
$('.navigation').css("display", "none");
});
$('.slider').change(function(){
var wid= $(this).val() + "px";
$('#box').css("width", wid);
});
});
</script>
<style type="text/css">
.navigation{
position:fixed;
top:0;
left:0;
width:100%;
height:40px;
background:#cfcfcf;
display:none;
}
.menu{
float:left;
margin: 10px 20px;
text-decoration:none;
}
.main{
margin: 50px;
}
#box{
width:10px;
height:30px;
margin: 0px 50px;
background:#000;
}
</style>
<body>
<div data-role="page">
<div id="page2">
<div class="navigation">
<a class="menu" href="page1.html">page 1</a>
<a class="menu" href="page2.html">page 2</a>
</div>
<p class="main"> this is page2 <br>adjust box width with slider </p>
<div id="box"></div>
<input type="range" class="slider" min="5" max="600" step="1" value="10"/>
</div>
</div>
</body>
</html>
put your css and scripts to each page head tag
try this one
And page2.html ,
try this one