I'm creating a small jQuery Mobile application. I have a home page with a banner image, a paragraph loaded from a json file, and a link to a second page that has a linked list, also loaded from the json file.
The home page:
<!DOCTYPE html>
<html>
<head>
<title>BikeShare</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<style>
#banner {
height: 175px;
overflow: hidden;
position: relative;
}
#banner img {
display: block;
position: absolute;
bottom: 0;
margin-right: auto;
margin-left: auto;
max-width: 100%;
}
.bold {
font-weight: bold;
border-bottom: 1px dotted;
}
</style>
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
function getLocations(data) {
var locations = data.stationBeanList;
var numLocations = 0;
var numBikes = 0;
for (var i = 0; i < locations.length; i++) {
if (locations[i].statusValue === 'In Service' && locations[i].availableBikes > 0) {
numBikes += locations[i].availableBikes;
numLocations++;
}
}
var message = '<p>There are a total of <span class="bold">' + numBikes + ' bikes</span> available in <span class="bold">' + numLocations + ' locations</span>.</p>';
$("#home-content-heading").after(message);
}
$(document).on("pagecreate", "#home", function() {
$.ajax({
url: "bikeshare.json",
type: "GET",
dataType: "json",
success: getLocations,
error: function() { console.log( 'Error...' ); }
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="panel" data-display="overlay" data-theme="b" id="main-nav">
<ul data-role="listview">
<li>Home</li>
<li>Reports</li>
<li>Locations</li>
</ul>
</div>
<div id="home-header" data-role="header" data-position="fixed" data-theme="b">
<h1>Home</h1>
Menu
</div>
<div id="banner"><img src="bicycle-rental-dock.jpg" alt="A bicycle rental dock" /></div>
<div role="main" id="home-content" class="ui-content">
<h1 id="home-content-heading">BikeShare</h1>
View Locations
</div>
<div data-role="footer" data-theme="b">
<h4>© 2015 BikeShare</h4>
</div>
</div><!-- end #home -->
</body>
</html>
The second page with the linked list:
<!DOCTYPE html>
<html>
<head>
<title>BikeShare</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate", "#locations", function() {
function loadData(data) {
var locations = data.stationBeanList;
var list = '';
for (var i = 0; i < locations.length; i++) {
list += '<li>' + locations[i].stationName + '</li>';
}
$("#location-list").append(list).listview('refresh');
}
$.ajax({
url: "bikeshare.json",
type: "GET",
dataType: "json",
success: loadData,
error: function() { console.log('Failed to load bikeshare.json'); }
});
});
</script>
</head>
<body>
<div data-role="page" id="locations">
<div data-role="panel" data-display="overlay" data-theme="b" id="main-nav">
<ul data-role="listview">
<li>Home</li>
<li>Reports</li>
<li>Locations</li>
</ul>
</div>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Locations</h1>
Menu
</div>
<div role="main" class="ui-content">
<ul id="location-list" data-role="listview"></ul>
</div>
<div data-role="footer" data-theme="b">
<h4>© 2015 BikeShare</h4>
</div>
</div><!-- end #locations -->
</body>
</html>
The issue I'm having is when I click on the link and go to the second page, the listview (from json file) does not display unless I hit the browser refresh button. And if I hit refresh and then hit the browser back button, the banner on the first page does not have the custom css applied to it, in addition, the data that was previously loaded and displayed from the json file, it's no longer there. I do not see where I went wrong with my code. Any help is appreciated.
jQuery Mobile by default loads external pages via ajax into the current page's DOM. However, it only loads the markup of the first DIV with data-role="page".
So, you can move the locations javascript into the data-role="page" DIV.
If you don't like the AJAX navigation system, you can 'turn it off', but then you lose the nice transitions.
Read this: http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/
Related
I have a index.html with a preloader to it. My index.html file is linked 2 more webpages a.html and b.html through a tags. But when i click on link which redirects the user to these webpages and come back to index.html, the preloader again starts animating for x seconds. How can i stop this from happening. I mean i want my preloader only to show up when first opening the site and not when coming back to index.html while navigating.
HTML:
<div class="load"></div>
<div id="wrapper" onload="myFunction()">
<!--navbar starts-->
<nav id="navbar" >
<h3>PORTFOLIO</h3>
<ul id="list">
<li>HOME</li>
<li>SKILLS</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</nav>
</nav>
<!--navbar ends-->
<!--Main content-->
<div id="main">
<div id="cover-details">
<h3>Hallo</h3>
<h1 id="main-heading">This is abc!</h1>
<h2 id="profession">Im a Web developer.</h2>
<p id="college-intro">
Competitive coder | Computer Science |
</p>
</div>
</div>
<!--Main content ends-->
</div>
CSS:
.load{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://media.giphy.com/media/WvuTFk2IN7jxoLVDkP/giphy.gif) center no-repeat #fff;
}
JS:
$(window).load(function() {
setTimeout(function(){ $('.load').fadeOut('slow'); }, 5000);
})
You could use local storage to save a value after visiting a page and only display the animation if no value is set.
For example:
const visited = localStorage.getItem("visited");
if (!visited) {
localStorage.setItem("visited", "true");
$(window).load(function() {
setTimeout(function(){ $('.load').fadeOut('slow'); }, 5000);
})
}
I found this code while searching and was wondering if it is possible to extend it so that i can have more than 2 'pages' on the project i am creating?
here is the code:
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
Not the most elegant solution but it works :)
<html>
<head>
<style>
ul li {
display: inline-block;
}
.shown: {
display: block;
}
.hidden: {
display: none;
}
</style>
</head>
<body>
<ul>
<li class="links" data-link="0">Page1</li>
<li class="links" data-link="1">Page2</li>
<li class="links" data-link="2">Page3</li>
<li class="links" data-link="3">Page4</li>
</ul>
<div class="pages" id="Page1" data-item="0">
Content of page 1
</div>
<div class="pages" id="Page2" data-item="1" style="display:none">
Content of page 2
</div>
<div class="pages" id="Page3" data-item="2" style="display:none">
Content of page 3
</div>
<div class="pages" id="Page4" data-item="3" style="display:none">
Content of page 4
</div>
<script>
(function() {
var links = document.querySelectorAll('.links');
var pages = document.querySelectorAll('.pages');
for(var i=0;i<links.length;i++) {
links[i].addEventListener('click', function() {
for(var j=0;j<pages.length;j++) {
pages[j].setAttribute('style', 'display: none');
if(this.getAttribute('data-link') === pages[j].getAttribute('data-item')) {
pages[j].setAttribute('style', 'display: block')
}
}
})
}
}());
</script>
</body>
</html>
Yes, you can extend the code to as many pages you want on a single page. This code simply gives you link to show different content on a same page. You will have to change your script according to your need.
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
<div id="Page3" style="display:none">
Content of page 3
Show page 3
</div>
</body>
</html>
<script>
var lastPage = 'Page1';
function show(shown) {
document.getElementById(shown).style.display='block';
document.getElementById(lastPage).style.display='none';
lastPage = shown;
return false;
}
</script>
Show page 2
I have a drag and drop feature for my mobile game. Here it is:
https://jsfiddle.net/elchininet/otw3pw13/4/
Unfortunately, I have no idea what's going wrong inside my actual source code.
I think it might be because of all of the libraries I have? I'm new to app making and JavaScript. Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.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="pageone">
<div data-role="popup" id="myPopup2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15 ">
Close<img src="http://s1.postimg.org/ljwm4953z/Screen_Shot_2015_12_12_at_10_45_52_PM.png" alt="Photo portrait">
</div>
<div data-role="main" class="ui-content">
<div data-role="header" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button onclick="location.reload(true)" class ="ui-btn-b">New Pizzas!</button></li>
<li>How To Play</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div id="slices">
</div>
<div id="options">
<div data-index="1">1</div>
<div data-index="2">2</div>
<div data-index="3">3</div>
<div data-index="4">4</div>
<div data-index="5">5</div>
<div data-index="6">6</div>
<div data-index="7">7</div>
<div data-index="8">8</div>
</div>
<div id="area">
drop area
</div>
<p><img src="http://s24.postimg.org/j2ynvi0s1/Plus_Orange1.png;"></p>
</div>
</div>
</body>
</html>
CSS
#options div{
background:#666;
color: #FFF;
display: inline-block !important;
height: 50px;
line-height: 50px;
text-align: center;
vertical-align: top;
width: 50px;
}
#slices img{
display: inline-block;
height: 30px;
}
#area{
background: #CCC;
border: 1px solid #666;
margin-top: 20px;
height: 200px;
width: 200px;
}
JavaScript
$( document ).on( "pagecreate", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
var slices = $("#slices");
var options = $("#options");
var area = $("#area");
var selected;
var result;
//---Array of images
var pizzas = [
{image: "http://s23.postimg.org/6yojml8vb/Pizza_One.png", value: 1},
{image: "http://s13.postimg.org/5d8zxnb2b/pizzatwo.png", value: 2},
{image: "http://s12.postimg.org/xfsxldqyx/pizzathree.png", value: 3},
{image: "http://s14.postimg.org/d6tdq0865/pizzafour.png", value: 4}
];
var total = pizzas.length;
//---Make boxes dragables
options.find("div").draggable();
//---When the boxes are dropped
area.droppable({
drop: function(event, ui){
console.log("yes");
if( Number( ui.draggable.attr("data-index") ) == result ){
alert("correct");
}else{
alert("incorrect");
}
}
});
//---Insert random pizza slices
function insertPizzas(){
selected = [];
result = 0;
//---Generate aleatory pieces
var rand
while(selected.length < 2){
//---Random value
rand = Math.floor( Math.random() * total );
//---Sum result
result += pizzas[rand].value;
selected.push( rand );
}
//---Clear the slices
slices.html("");
//---Add the new slices
selected.forEach(function(number){
var img = $("<img/>");
img.attr("src", pizzas[number].image);
slices.append(img);
});
}
insertPizzas();
By your comments I see that you are testing your project locally. Use a local server to test your project. Do not open the HTML directly in your browser from the filesystem. Try with Xampp or Wampp.
By the other hand, put the jQuery code inside a document ready event.
$(document).on("ready", function(){
//--- Put the jQuery code here
}
Here you have your code (with the document ready event) running from an web server:
i have 4 images and then i have applied automatic swiping,It's working nice,but now i have added text (skip) on Image when i click on Skip,text is Redirected to another page(text.html)
My Problem is When i Click Skip it's Redirected page(text.html) but page css not applied.
But with out click on skip with automatic sliding redirected page(text.html) is fine.
<div id="container">
<img src="../images/4 copy.jpg" alt=""/><br/>
<div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font> <font color="white"><span class="one">skip</span></font>
</div>
</div>
when click skip it's redirect to text.html but text.html css not applied total page will changed
when call direct text.html it's displayed nice css also applied
can you please tell me how to make css apply to text.html when i click skip.
Thanks in Advanced
Text.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css">
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
<style>
.ui-page {
background-color: #666 !important;
}
.ui-content {
background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
background-size : 100% 100%;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}
.ui-btn-icon-right:after {
display:none;
}
#one
{
padding : 0;
margin : 0;
}
#two
{
padding : 0;
margin : 0;
}
#four
{
padding-top :1%;
margin : 0;
}
</style>
<script type='text/javascript'>//<![CDATA[
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
});//]]>
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="p1">
<div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
<h1>User guide</h1>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 1:</p>
<p id="two">Fill in your Details to Get Started </p>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 2:</p>
<p id="two">Browse the application</p>
<p id="four"><font color="green">Save with Lighting</font></p>
<p> in your Deatails to Get Started </br>
Fill in your Deatails to Get Started </p>
<h5><font color="green">Explore light options</font></h5>
<p>Fill in your Deatails to Get Started </br>
Fill in your Deatails to Get Started </p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
<ul data-role="listview" >
<!-- <li style="text-align:center;">Save with lighting</li> -->
<li style="background:#808080;"></h3>good day</h3></li>
</ul>
</div>
</div>
</body>
</html>
This is a common jQuery Mobile misconception.
You need to learn how jQuery Mobile handles pages. Only initial HTML file is fully loaded into the DOM. Every other HTML page is only partially loaded, basically lets say we have 2 HTML files, one is called index.html and second one is called second.html.
When jQuery Mobile app is initialized, framework will load index.html into the DOM.
When you go to other page, in our case second.html, only data-role="page" container div is going to be loaded into the DOM, everything else is discarded.
This is because jQuery Mobile used AJAX for page handling. If first file is already inside the DOM, there's no reason in loading HEAD content of other HTML files.
Read more about it here.
In your case just move your <style></style> to a data-role="page" container div.
Basically do this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css"/>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
<script type='text/javascript'>//<![CDATA[
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
});//]]>
</script>
</head>
<body>
<div data-role="page" data-theme="a" id="p1">
<style>
.ui-page {
background-color: #666 !important;
}
.ui-content {
background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
background-size : 100% 100%;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}
.ui-btn-icon-right:after {
display:none;
}
#one
{
padding : 0;
margin : 0;
}
#two
{
padding : 0;
margin : 0;
}
#four
{
padding-top :1%;
margin : 0;
}
</style>
<div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
<h1>User guide</h1>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 1:</p>
<p id="two">Fill in your Details to Get Started </p>
</div>
<div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
<p id="one">Step 2:</p>
<p id="two">Browse the application</p>
<p id="four"><font color="green">Save with Lighting</font></p>
<p> in your Deatails to Get Started <br/>
Fill in your Deatails to Get Started </p>
<h5><font color="green">Explore light options</font></h5>
<p>Fill in your Deatails to Get Started <br/>
Fill in your Deatails to Get Started </p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
<ul data-role="listview" >
<!-- <li style="text-align:center;">Save with lighting</li> -->
<li style="background:#808080;"><h3>good day</h3></li>
</ul>
</div>
</div>
</body>
</html>
for js try
document.location = url
with jQuery you can define class on which you can perform an on-click event
like
$( ".skipclass" ).on( "click", function() {
// do something here like
// window.location.href='the_link_to_go_to.html';
// or ajax request
});
further info http://api.jquery.com/on/
I am making a webpage that is continuous scrolling. However I am unable to make it scroll smoothly
My html code is:
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- Logo -->
<a class="brand" href="index1.html">MAPPLAS</a>
<ul class="nav">
<li>Inicio</li>
<li>Portfolio</li>
<li>Equipo</li>
<li>Blog</li>
<li>Contacto</li>
</ul>
</div><!-- end .container -->
</div><!-- end .navbar-inner -->
</nav> <!-- end .navbar -->
My function is as follows:
((function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500);
event.preventDefault();
});
});
})();
I think there is a problem because I have another function which creates a buttom back-to-top, that function is as follows:
((function() {
$('<i id="back-to-top"></i>').appendTo($('body'));
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('body,html').animate({scrollTop:0},600);
});
})();
The thing is that one is working smoothly ( the back to top ) but the other is not. I am not an expert on js and I have tried including completely separated js scripts but nothing solves the problem.
Anyone has an idea why is not working??Thank u!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style type="text/css">
.container{
width:300px;
margin:0 auto;
}
.section{
margin-top:60px;
}
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
HTML
JavaScript
jQuery
PHP
CSS
</div>
<div class="section">
<h1 id="html">HTML</h1>
<p>
put your text about html here
</p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p>
put your javascript details here.
</p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p>
Put your details about javascript here
</p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p>
put your details about php here
</p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p>put your details </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function(event) {
var id = $(this).attr("href");
var offset = 60;
var target = $(id).offset().top - offset;
$('html, body').animate({scrollTop:target}, 3000);
event.preventDefault();
});
});
</script>
</body>
</html>