I am new for jQuery mobile. My project consist of 30 screen++. So I separate my screen to each single html. But now i facing one issues , because i need to include cordova.js to my project. So did i need to include cordova.js to all html ? It tat any better solution? It quite take time to me for include cordova.js to 30++ html.
Code
<head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script src="js/jquery.js"></script>
<script src="js/globalsetting.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script src="cordova.js"></script>
<script src="Calendar.js"></script>
<script src="js/jquery.mobile.fastButtons.js"></script>
</head>
JQuery Mobile provides a JQuery mobile "page". These pages can be included in the same file but can also be loaded from separate files
If you use JQuery mobile pages you will only have to include dependencies on your main page rather than all of the sub pages. Please read the Page Documentation
Related
PROBLEM SOLVED BY DELETING ALL THE FILES ON THE SERVER AND UPLOADING AGAIN MY WEBSITE!
Screenshot of the console error
Hi,
my website looks fine when I open it offline on my browser but after having uploaded it on the server when I go to the web address it only shows the text and images without any formatting and CSS.
I don't know what to do to fix this :\ What could be the problem?
If it can be of help here is the current folder structure of my website:
"public_html" >
css, img, js, mail, scss, vendor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="">
<meta name="author" content="">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>website title</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/agency-edit.min.css" rel="stylesheet" type="text/css">
<link href="css/adjustment.css" rel="stylesheet" type="text/css">
</head>
And here some scripts that are at the end of the "body".
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
Thank you
In your case, it can be:
Uncorrect relative location (your css and other files are not found by code, check paths of included files)
Files are not uploaded to server (try to upload them again)
I bet if you put a slash / in front of all of your local paths, things will magically work for you.
Explanation:
vendor/ looks in the current folder for the "vendor" folder.
/vendor/ looks in the root of the site.
../vendor/ looks in the parent of my current folder.
./vendor/ looks "here". (Side note: This is more useful within the server itself when files are referenced by other files in another location for server-side processing.)
I am using JSP to create a webpage. I have linked the css file to the jsp page with <link rel="stylesheet" href="css/style_mobile.css" type="text/css">, which is the exact path of the file.
Google Chrome's inspect:
The content of <head> tag in my .jsp file:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="css/ratchet.css" type="text/css">
<link rel="stylesheet" href="css/style_mobile.css" type="text/css">
<link rel="stylesheet" href="css/tablesaw.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/fusioncharts-suite-xt/js/fusioncharts.js"></script>
<script type="text/javascript" src="js/tablesaw.js"></script>
<script type="text/javascript" src="js/tablesaw-init.js"></script>
<title>Mobile</title>
</head>
CSS files:
ratches.css
style_mobile.css
tablesaw.css
The webpage just does not load the css content. Please help.
On your developer tool go to -> Network tab. And Select -> CSS. Reload the page. You will see the list of css files included on your DOM along with its status. From here you can from where the files are loading. If not loading you will find them as red marked with 404 status.
You have to make sure the relative path you used and the directory of the css files are same location.
Well, I solve my problem with inline css, although this is not the best solution.
I am new to bootstrap (just started learning) and I have recently customized my bootstrap file on http://getbootstrap.com/docs/3.3/customize/
i compiled and downloaded and then i find it hard to link it with my index.html file. Source of bootstrap files is on local drive and in my code it looks like this
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="desc">
<meta name="keywords" content="content">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" >
<link rel="stylesheet" href="css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>TITLE</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.min.js"/>
</body>
</html>
pls help :)
If you are new to Bootstrap, the first thing you should do is use the latest version (ie. Bootstrap 4.0).
A good way to kickstart your project is to use CDN, Bootstrap files are hosted in remote server so you don't have to manage Bootstrap files locally. https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdn
Check the console in your browser to be sure everything is correctly loaded.
To include your custom css, just put in head your css like you would do with any html page.
<head>
<link rel="stylesheet" type="text/css" href="custom_main.css">
</head>
Everything works perfectly on my laptop and renders just fine on the browser when adjusting size etc. I've uploaded all files and tried to test on my mobile and tablet, but the my css sheet doesn't seem to be being picked up. My headers are:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://localhost/mrfcredesign/public/css/mrfc.css"/>
</head>
Can anyone help my sanity?
localhost on your phone is not the same localhost as on your laptop - you need to change the href on your stylesheet to be either just a relative link (e.g. /css/mrfc.css or similar), or an absolute link to an actual server address.
I am struggling with my JQuery application. I have few script that I put them all together in one js file and then links on the pages that will be loaded.
My question is? Do I have to use the structure below in every single HTML page?
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Most of my scripts, inside of my index.js, starts with :
$(document).on("pageinit", '#Page', function(){
});
The problem is, when I start the application, they all work, but as soon as I start repeating the modules, some of them stop working.
Does anyone know what may going on?
Thanks in advance!