Just wanted to ask a quick question with my jquery code. just started using Jquery/JS and I feel like there is a cleaner way to do this. It does fade to "and much more" but when it goes back, its not a fade its more of a switch.
$(document).ready(function() {
setInterval(swapText, 4000);
function swapText(){
$("#profile-text-fade").fadeOut(500, function() {
$(this).fadeIn(1000).delay(2000);
$(this).html('and much more!');
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
Now what I'm trying to do is to fadeout the text that is on the webpage and replace it with "and much more!" and then fade back to the original text of "in the making...". right now, the last part just snaps back to place and dones't fade. Any help would be amazing!
Thank you
Your text is not fading in as you don't fade it out. ie it does: $("#div").fadeIn().fadeIn()
Change your last fadeIn to:
$(this).fadeOut(500, function() {
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
You might like to consider a refactor to create a list of messages and then simply loop through them. This will also be re-usable and allow you to add more messages without lots of nasty callback-chaining, eg:
var msgs = ["msg1", "msg2"];
var indx = 0;
$("#div").text(msgs[indx]);
setInterval(function() {
$("#div").fadeOut(
500,
function() {
indx++;
if (indx>=msgs.length) indx=0;
$(this).text(msgs[indx]);
$(this).fadeIn(500);
});
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>initial message</div>
I think this is what you needed edited your code, you have to fadeOut it before the last fadeIn, (i have slightly increased the interval for some smooth effect)
$(document).ready(function() {
swapText();
setInterval(swapText, 6000);
function swapText(){
$("#profile-text-fade").stop();
$("#profile-text-fade").fadeOut(1500, function() {
$(this).html('and much more!');
$(this).fadeIn(1500);
$(this).fadeOut(1500, function () {
$(this).fadeIn(1500);
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
Related
I can't seem to find the problem in my code. It seems that the #fullpage section selector doesn't work for some reason.
I made sure all my sections have a set position, and it still doesn't work as expected.
My HTML and my CSS...
body {
margin:0;
padding:0;
font-family:verdana;
}
#fullpage {
height:100vh;
}
#fullpage section {
height:100vh;
}
#fullpage section h1 {
margin:0;
padding:0;
line-height:100vh;
}
#fullpage section:nth-child(1) {
background-color:red;
}
#fullpage section:nth-child(2) {
background-color:blue;
}
#fullpage section:nth-child(3) {
background-color:green;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="fullpagecss.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js">
</script>
<script src="http://code.jquery.com/jquery-3.4.1.js">
</script>
<script src="jquery.fullpage.js">
</script>
</head>
<body>
<div id="fullpage">
<section><h1>Section 1</h1></section>
<section><h1>Section 2</h1></section>
<section><h1>Section 3</h1></section>
</div>
<script type="text/javascript">
FastClick.attach(document.body);
$('#fullpage').fullpage();
</script>
</body>
</html>
Really confused why it isn't working.
Not sure it is the selector. Might be the markup. The fiddle was not working for me. Edited things a little:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css" integrity="sha256-l0tJvh77claYa8GowKaFNxtuRWZICtwHTk7+0tgsiZY=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js" integrity="sha256-SjXUPmxobD+vLCws0crIzpdBrHgDjs8jamhUMv0eRac=" crossorigin="anonymous"></script>
</head>
<body>
<div id="fullpage">
<section class="section"><h1>Section 1</h1></section>
<section class="section"><h1>Section 2</h1></section>
<section class="section"><h1>Section 3</h1></section>
</div>
</body>
</html>
No change to the CSS:
JS:
$(document).ready(function() {
FastClick.attach(document.body);
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true,
navigation: true,
navigationPosition: 'right',
});
});
Not even sure that is the fullpage library you are using. There are a ton of options when initializing. With this one, the sections apparently need to have class="section" .
I am trying to create a simple todo app with Jquery.
However trying to display current value when I hit the add button seems to produce an anomaly, i.e all array item is displayed when the add button is clicked.
I have included a snippet of my code below. I followed the steps I saw here http://api.jquery.com/jquery.each/
var inputVal = $('#formField').val()
var todoList = $('#todolist');
var todos = [];
function createTodo(item){
// Return a todo object
}
function removeTodo(index){
// Remove todo from todos at index
}
function addTodo(todo){
//Add todo to todos
todos.unshift($('#formField').val())
}
function renderTodos(){
$.each(todos, function( index, value ) {
$('.todolist').prepend(`<li> ${value}<span class delete> X </span> </li>`);
});
}
$('#subBut').click(function (e) {
addTodo(inputVal);
renderTodos()
});
.center {
margin: auto;
width: 50%;
text-align: center;
padding: 10px;
}
ol {
width: 70%;
margin: auto;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ToDo App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<div class="center">
<h2>My Todo App</h2>
<div id="taskForm">
<input type="text" placeholder="Enter a task" id="formField">
<input type="button" id="subBut" value="Add">
</div>
</div>
<div id="result">
<ol class="todolist">
</ol>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="/script/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
The .todolist already contains some items and you are trying to prepend all the items again, that's why you are getting duplicates. You could clear the .todolist using .empty() before prepending again
Just prepend the new input, you don't need the $.each.
var inputVal = "";
var todoList = $('#todolist');
var todos = [];
function createTodo(item){
// Return a todo object
}
function removeTodo(index){
// Remove todo from todos at index
}
function addTodo(todo){
//Add todo to todos
todos.unshift(inputVal);
}
function renderTodos(){
$('.todolist').prepend(`<li> ${inputVal}<span class delete> X </span> </li>`);
}
$('#subBut').click(function (e) {
inputVal = $('#formField').val();
addTodo(inputVal);
renderTodos();
});
.center {
margin: auto;
width: 50%;
text-align: center;
padding: 10px;
}
ol {
width: 70%;
margin: auto;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ToDo App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<div class="center">
<h2>My Todo App</h2>
<div id="taskForm">
<input type="text" placeholder="Enter a task" id="formField">
<input type="button" id="subBut" value="Add">
</div>
</div>
<div id="result">
<ol class="todolist">
</ol>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="/script/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
This seems to be the expected behavior of each(). It iterates over each item of the array. Then you prepend all items to the list. Every time the whole list.
So you can either remove the elements from the list before you prepend the list again or just add the new item. Hope this helps!
I am trying to figure out a way I can have a toggle for my menu icon at the top of my web app. Basically a user can click the menu icon and it opens up an off-canvas panel and the menu icon turns to an close(x) icon giving the user a choice to close the panel. So far I have got the panels to open the way I want them to but I can't get the icons to change and function properly. Here is what I have so far.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<link rel="manifest" href="manifest.json">
<!-- Tags to allow users to save to phone in fullscreen -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- /// -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pwrpg.css">
<title>Hello, world!</title>
</head>
<body>
<header id="header" class="bg-success">
<div class="left-head">
<div class="navbutton"><span class="icon-menu"></span> | Close</div>
</div>
<div class="logo-head">
Logo
</div>
<div class="right-head">
<div class="chatbutton">Open | Close</div>
</div>
</header>
<div id="wrapper">
<div id="sidebar-left">
<ul>
<li>Index</li>
<li>Page</li>
</ul>
</div>
<div id="sidebar-right">right sidebar</div>
<div id="main">
Page 1 Back
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="js/pwrpg.js"></script>
</body>
</html>
CSS
#header {position: relative;height:50px; display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;}
.left-head, .logo-head, .right-head { -ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;}
.left-head{text-align: left;max-width: 20%;}
.logo-head{text-align: center;max-width:60%;}
.right-head{text-align: right;max-width:20%;}
.navbutton {display:none;}
.chatbutton {display:none;}
.navbutton {display:block;padding: 5px 10px;}
.chatbutton {display:block;padding: 5px 10px;}
.icon-menu {font-size:36px;}
JS
/* Main Navigation on Handheld Devices */
function openNav() {
document.getElementById("sidebar-left").classList.add("transition-in");
document.getElementById("sidebar-right").classList.remove("transition-in");
}
function closeNav() {
document.getElementById("sidebar-left").classList.remove("transition-in");
}
/* Chat Box on Handheld Devices */
function openChat() {
document.getElementById("sidebar-right").classList.add("transition-in");
document.getElementById("sidebar-left").classList.remove("transition-in");
}
function closeChat() {
document.getElementById("sidebar-right").classList.remove("transition-in");
}
window.addEventListener('click', function(e){
if (document.getElementById('main').contains(e.target)){
document.getElementById("sidebar-left").classList.remove("transition-in");
document.getElementById("sidebar-right").classList.remove("transition-in");
} else{
}
})
https://jsfiddle.net/23Lu2k8m/
I'm attempting to use mgcrea's Angular.js pull-to-refresh library, but I cannot get it to pull down and fire off. I can see the dotted line where it starts above the div, but it won't pull down at all. I'm not getting any errors in the Chrome Console or on Logcat.
index.html: Both the pull-to-refresh.js and css files are included here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile Dashboard</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Droid+Sans:400,700" />
<link rel="stylesheet" href="assets/css/mobile-angular-ui-base.css" />
<link rel="stylesheet" type="text/css" href="assets/fonts/icons.css" />
<link rel="stylesheet" type="text/css" href="assets/css/angular-pull-to-refresh.css" />
<script src="assets/js/libs/angular.min.js"></script>
<script src="assets/js/libs/angular-route.min.js"></script>
<script src="assets/js/libs/angular-touch.min.js"></script>
<script src="assets/js/libs/angular-sanitize.min.js"></script>
<script src="assets/js/libs/mobile-angular-ui.min.js"></script>
<script src="assets/js/libs/angular-pull-to-refresh.js"></script>
<script src="assets/js/app.js"></script>
</head>
<body ontouchstart="" ng-app="mobile" class="blue">
<div class="app">
<div class="navbar navbar-app navbar-primary navbar-absolute-top">
<div class="navbar-brand navbar-brand-left">
<div class="logo">
<img src="assets/img/logo_small.png" width="50px" height="50px" />
</div>
</div>
</div>
<div class="app-body">
<ng-view class="app-content"></ng-view>
</div>
</div>
</body>
</html>
miners.html: I've tried placing pull-to-refresh in both the top div and the ul, but no dice.
<div class="scrollable">
<ul id="miners" class="list-group list-group-table" pull-to-refresh="refresh()">
<li ng-repeat="miner in miners" class="list-group-item">
[foo code]
</li>
<li class="list-group-item">
[more foo code]
</li>
</ul>
</div>
Relevant css section
.scrollable {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
-webkit-backface-visibility: none;
-webkit-overflow-scrolling: auto;
}
At this point, I'm completely and totally stuck. Does anyone have any ideas on what I might have missed?
Unfortunately I believe mgcrea's angular pull-to-refresh project has been abandoned. Even the examples on his github readme no longer work, and there are several tickets indicating that other people are also not getting it to work.
I just check out the demos for jquery-ui-map here http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map
This is exactly what I am trying to implement, its very basic, I just did as they did in the example but it doesn't seems working, I tested it on Chrome Desktop browser.
Here is the source:
<!DOCTYPE html >
<html >
<head>
<title>Map Search Page</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.0.1.min.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100%; width:100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.services.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#home').live("pageinit", function () {
$('#map').gmap({ 'center': mobileDemo.center, 'zoom': 17 });
//$('#map').gmap('addMarker', { 'position': mobileDemo.center, 'animation': google.maps.Animation.DROP });
});
$('#home').live('pageshow', function () {
$('#map').gmap('refresh');
});
</script>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>Multi Color Rating</h1>
</header>
<div class="content" style="width:100%; height:100%; " data-role="content">
<div id="map">
</div>
</div>
<footer data-role="footer">
<h2> All Rights Reserved © 2012</h2>
</footer>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
This shows only header and footers for now.
There is one important thing, when I give some height to the map div, it shows Static map image.
Just got it working now, Source code is fine. There was a problem because jQuery Mobile Map respond to Touch event.
In Chrome touch event are not enabled by default, so just turn on the Touch event in Chrome Console.