I've developed a phoneGap app for iOS and it works.
Now I'm trying to switch it on JqueryMobile in order to improve graphic.
This is the code of index.html page.
What must I change to make it works with JQueryMobile?
I tried to use css styles and library of jQueryMobile and modify header and footer but I can't understand where I must place <div data-role="page"> in my file.
I haven't also understood if I must leave id=header and class=header or not.
<head>
<title>x Directory</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-WebInspector.js"></script>
</head>
<body>
<div id="header" class="header">
Home
<img src="img/mob.png" class="logo" id="logo"/>
<h1>xAsk</h1>
</div>
<div id="wrapper">
<ul id="xList" class="icon-list"></ul>
</div>
<div id="wrapper_hidden">
<div>
<div id="employeeDetails">
<img id="xPic"/>
<h3 id="xName"></h3>
<p id="xEmail"></p>
<p id="city"></p>
</div>
<ul id="actionList"></ul>
</div>
</div>
<div id="footer" class="footer">
<ul id="azioni">
</ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/xlist.js"></script>
</body>
Start with one of the examples first. Jquery mobile changes the way your application is structured. You're not including jquery-mobile.js, so your example does not work.
The should be around your header, data and footer, but in order to have multiple (inline) pages, you need more of them.
Related
I have the below index.html code
<!DOCTYPE html>
<html>
<head>
<title>Myapp</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="Myapp" ng-controller="GameController">
<div>
<div class="guessLeft">{{guesses}}</div>
<div class="incorrectGuess">InCorrect guesses : <span ng-repeat="letter in incorrectlyChoosen">{{letter}}</span></div>
<div class="correctGuess">Correct guesses : <span ng-repeat="letter in correctlyChoosen">{{letter}}</span>
</div>
<div class="youhavetoGuess">Your have to guess : {{displayWord}}</div>
<div class="takeInput">
<input type="text" name="guess" ng-model="input.letter">
<button ng-click="letterChoosen()">Submit</button>
</div>
</div>
</body>
in the below div class
<div class="guessLeft">{{guesses}}</div>
I want to use jquery knob where I would show my guess count, that would start from 6 till 0.
what should I do to achieve this? any reference would help.
I've implementet a bootstrap 3.0 theme in my MVC-aplication. But the theme only works on my http://localhost:00000/. If I type in the browser like:
http://localhost:00000/home/index
or something like that the css and javascript doesn't work. But I get the html för it. All my code for like the: head, header, footer ect.. I have in my _Layout.cshtml file. I can't see the problem here why it's not working?
It ONLY works on my http://localhost:00000/.
NOT on the: http://localhost:00000/home/index (witch points to the exact same (controller/method/view as the fisrt one)
This is how my _layout.cshtml looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!--admintemat test-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<link href="bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="assets/jvector-map/jquery-jvectormap-1.2.2.css" rel="stylesheet">
<link href="css/clndr.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
</head>
<body>
<!--header start-->
<header class="header fixed-top clearfix">
<!--logo start-->
<div class="brand">
<a href="index.html" class="logo">
<img src="images/logo.png" alt="">
</a>
<div class="sidebar-toggle-box">
<div class="fa fa-bars"></div>
</div>
</div>
<!--logo end-->
<div class="nav notify-row" id="top_menu">
<!-- notification goes here -->
</div>
<div class="top-nav clearfix">
<!--search & user info goes here-->
</div>
</header>
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a class="active" href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-laptop"></i>
<span>Layouts</span>
</a>
<ul class="sub">
<li>Boxed Page</li>
<li>Horizontal Menu</li>
<li>Language Switch Bar</li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-user"></i>
<span>Login Page</span>
</a>
</li>
</ul>
</div>
</aside>
<!--sidebar end-->
<!-- sidebar menu end-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--main content goes here-->
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</section>
</section>
<!--main content end-->
#*</div>*#
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- ADMINTEMAT TESTPlaced js at the end of the document so the pages load faster -->
<!--Core js-->
<script src="js/lib/jquery.js"></script>
<script src="bs3/js/bootstrap.min.js"></script>
<script src="js/accordion-menu/jquery.dcjqaccordion.2.7.js"></script>
<script src="js/scrollTo/jquery.scrollTo.min.js"></script>
<script src="js/nicescroll/jquery.nicescroll.js" type="text/javascript"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot- chart/excanvas.min.js"></script><![endif]-->
<script src="assets/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
<script src="assets/skycons/skycons.js"></script>
<script src="assets/jquery.scrollTo/jquery.scrollTo.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="assets/calendar/clndr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"> </script>
<script src="assets/calendar/moment-2.2.1.js"></script>
<script src="js/calendar/evnt.calendar.init.js"></script>
<script src="assets/jvector-map/jquery-jvectormap-1.2.2.min.js"></script>
<script src="assets/jvector-map/jquery-jvectormap-us-lcc-en.js"></script>
<script src="assets/gauge/gauge.js"></script>
<script src="assets/easypiechart/jquery.easypiechart.js"></script>
<script src="assets/sparkline/jquery.sparkline.js"></script>
<script src="assets/flot-chart/jquery.flot.js"></script>
<script src="assets/flot-chart/jquery.flot.tooltip.min.js"></script>
<!--<script src="assets/flot-chart/jquery.flot.pie.js"></script>-->
<script src="assets/flot-chart/jquery.flot.resize.js"></script>
<script src="assets/flot-chart/jquery.flot.pie.resize.js"></script>
<script src="assets/flot-chart/jquery.flot.animator.min.js"></script>
<script src="js/dashboard.js"></script>
<!--common script init for all pages-->
<script src="js/scripts.js"></script>
<!--ADMIN TEMAT TESTscript for this page-->
</body>
</html>
If you open your console, you'll see several 404 errors for each of your css assets and probably afew of your js assets. This is because you're using relative file paths. relative file paths look within the folder of the current file, therefore once you're viewing a file in a sub folder, the relative paths no longer target the correct files. To fix it, use an absolute url.
/css/bootstrap-reset.css
the rest will need to be updated too.
I am creating a SPA ios application using phonegap and having some issue with Jquery mobile the lastest version (1.4.0). The pages do not fit to the screen of the iphone but they appear one after another and I can scroll down to view all my pages ! (possibly data-role = "page" is not working correctly. Can anyone shed a light on this. Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>App Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
<script src="phonegap.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/soapclient-1.2.js"></script> <!-- for soap v1.1 use js/soapclient.js -->
<script src="js/EmailComposer.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.ui.map.full.min.js"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/jquery.alerts.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/touchable.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/date.js"></script>
<script src="js/moduleScripts/timetoport.js"></script>
<script src="js/moduleScripts/imageslogic.js"></script>
<script src="js/moduleScripts/loadingScript.js"></script>
<script src="js/moduleScripts/LoginController.js"></script>
<script src="js/moduleScripts/kmlMap.js"></script>
<script src="js/moduleScripts/tools.js"></script>
<script src="js/moduleScripts/dataService.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
<script>
$(document).ready(function() {
InitializeLoginScreen();
CheckDisclaimer();
});
$("#discpage1").live("pageshow",function() {
$("#agree").click(function() {
localStorage.setItem('disclaimerAccepted', true);
tools.GoForward("#loginPage");
});
$("#disagree").click(function() {
localStorage.setItem('disclaimerAccepted', false);
navigator.notification.alert('To ccontinue you must accept the Disclaimer', null, '', 'OK');
});
});
$(document).delegate(".scroll-disabled", "scrollstart", false);
</script>
</head>
<body id="boddy">
<!-- LOGIN PAGE -->
<div data-role="page" id="loginPage" class="scroll-disabled">
<div data-role="header" class="header" >
<div id="LoginHeader" class="headerText">Login</div>
</div>
<div data-role="content">
<div>
<img src="images/shiplogo.png" id="logobspt">
<label id="ship2Go">Ships to go</label>
</div>
<div id="loginContainer">
<div>
<label for="uid" id="uidLabel">Username</label>
<input type="text" value="test" name="uid" id="uid" placeholder="Enter username" />
</div>
<div id="loaderdiv" style="height:50px;width:100px;padding:5px;margin-left:87px;margin-top:-12px;display:none;">
<img src="images/loading3.gif" id="loadingimg" style="margin-left:30px;">
<div id="loadingMsg">
<center >Please wait...</center>
</div>
</div>
<div>
<label for="pwd" id="pwdLabel">Password</label>
<input type="password" value="test" name="pwd" id="pwd" placeholder="Enter password"/>
</div>
</div>
<div class="Button" id="loginButton">Login</div>
<div data-role="footer">
<div id="envLabel"></div>
</div>
</div>
</div>
<!-- DISCLAIMER PAGE -->
<div data-role="page" id="discpage1" class="scroll-disabled">
<!--<div id="dleftpanel"></div>
<div id="drightpanel"></div>-->
<div id="dcontent">
<div id="bplogo"></div>
<div id="shiplogo"></div>
<div id="discHeading">Disclaimer</div>
<div id="agree" class="Button discButton">I have read and I agree</div>
<div id="disagree" class="Button discButton">Disagree</div>
</div>
</div>
</body>
</html>
Whenever this happens to me (as - I admit - it does from time to time), it is ALWAYS that the CSS file for jQuery Mobile is missing, linked to the wrong path, or I have a typo (used a "dot" instead of a "dash" more often than not).
Any chance that could be it?
A quick way to check is to open up the file you pasted in above in Chrome (or whatever) and look at the debug console for any messages throwing a fit about the CSS file.
Please see www.lancoministorage.com as an example. When I load this site up on my iPhone, the content displays at the top (starting with the call button), and the header is not seen unless someone would manually pull the screen down. Is there a way I can get this to load with the header image displaying at the top?
This is how I did my main layout.
<!DOCTYPE html>
<html>
<head>
<title>Lanco Mini Storage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header" data-theme="c">
<img src="images/logo.jpg" alt="Lanco Mini Storage">
</div>
<!--header-->
<div data-role="content" data-theme="a">
<ul data-role="listview" data-divider-theme="a" data-theme="b" data-inset="true">
<li>Call Us at (717) 291-6022</li>
<li>Send Us an Email</li>
<li>Map to Our Location</li>
<li>Hours of Operation</li>
</ul>
</div><!--content-->
<div data-role="footer" data-theme="c">
<div data-role="navbar" data-iconpos="top" class="footer">
<ul>
<li>View Full Website</li>
</ul>
</div><!--navbar-->
</div><!--footer-->
</div><!--page-->
...page content continued (not shown)
Thank you for your help!
I tried a test file which is working but this file isn't. I also tried validating from w3c and it showed no errors. I also tried pasting
outside jquery ui tabs but still didn't worked out. Could there be any conflict between plugins. And also when i gave absolute path for demo file it worked while relative path didn't. Here's the two file:
This one is working (demo file)-
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <!-- optional -->
<!--[if lt IE 9]>
<script type="text/javascript" src="../js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/lightview.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightview/lightview.css" />
<link rel="stylesheet" type="text/css" href="css/main-style.css" />
</head>
<body>
<a href='img/colorful-abstract.jpg' class='lightview' data-lightview-group='example'>
<img src='img/thumbs colorful-abstract.jpg' alt=''/>
</a>
</body>
</html>
Where as this original ones isn't working-
<!DOCTYPE html>
<head>
<title>Rahul Dagli's Portfolio Website</title>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery-main.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<!--lightview-->
<script type="text/javascript" src="js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/lightview.js"></script>
<script type="text/javascript" src="js/excanvas/excanvas.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!--CSS-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/navigation-menu.css" >
<link rel="stylesheet" type="text/css" href="css/main-style.css" />
<link rel="Stylesheet" type="text/css" href="css/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" type="text/css" href="css/lightview/lightview.css" />
</head>
<body>
<!--main navigation-->
<nav>
<ul id="navigation">
<li class="portfolio"></li>
<li class="about"></li>
<li class="contact"></li>
</ul>
</nav>
<!--main content-->
<div id="sections">
<!--Portfolio page starts-->
<section id="section-portfolio">
<header>
<hgroup>
<h1>Rahul Dagli</h1>
<h2> Web Designer</h2>
</hgroup>
<p>Welcome to my online portfolio. Take a look at my work and find out who I am.</p>
</header>
<!--Tabbed Image Gallery-->
<div id="portfolio-list">
<div id="tabs" class="tabs-bottom">
<ul>
<li>Graphic design</li>
<li>Web design</li>
<li>Flash</li>
<li>3d</li>
</ul>
<div id="tabs-1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</div>
</section>
<!--Portfolio page ends-->
<!--About page starts-->
<section id="section-about">
</section>
<!--About page ends-->
<!--Contact page starts-->
<section id="section-contact">
</section>
<!--Contact page ends-->
</div>
<a href='img/colorful-abstract.jpg' class='lightview' data-lightview-group='example'>
<img src='img/thumbs-colorful-abstract.jpg' alt=''/>
</a>
</body>
</html>
There's an example folder in the download you could use to start from, it shows a proper installation. Once that works, Lightview should work in the tabs as well.
Also keep in mind that all the Lightview related includes on your page are absolute, not relative like your other includes. So it could be that the files aren't where you expect them to be.