I had a great working PhoneGap mobile web-app project, then my laptop died. I had all the files saved to the cloud, so no trouble with code loss, but now I've been trying to rebuild the project and that's where the trouble is.
I've set the whole thing up again, and it's loading alright, all the html elements are there as coded, but the jQuery Mobile css doesn't seem to be including on any of my pages, given that all I see is a white page with normal underlined blue links. Very unattractive.
Here's the beginning of my code on each page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<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="cordova-1.9.0.js"></script>
Which should be alright, I would think...it worked before, anyway.
What's missing? I'm inclined to think it's somewhere in the configuration rather than the code, give the circumstances.
Should there be some sort of cordova.css file? Because there isn't one, and I thought there used to be. (About to Google that...)
Have you checked that code.jquery.com is in ExternalHosts in your phonegap.plist (or cordova.plist)?
Please try whit this,
https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css
Hope this helps. :)
Related
Hey guys/gals I wrote a simple version of what I am trying to get working. Basically, I am trying to load html with jquery then gain access to the class/id's in Javascript. I am hoping for a little bit of help with it.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="HTMLHere"></div>
</script>
<script>
$(document).ready(function(){
console.log("run me before ./javascript.js");
$('#HTMLHere').load("amazing.html");
});
</script>
<script type="text/javascript" src="./javascript.js"></script>
This does work. I don't have an issue with it running correctly it just runs out of order. I use amazing.html on quite a few pages and I am just trying to ease the maintenance a little. I do know I can do this with PHP but I would rather work with Jquery and Javascript.
I've been having issue linking in the JQuery api into my html page. I've spent a lot of time trying to figure it out myself, but haven't made any progress, and would really appreciate anyone's help! Like I mentioned in the title, it works fine when I link to a hosted version of JQuery, but when I try to use a local version, I have no success (I need to work locally for what I'm using it for). Side Note: I downloaded the files directly from JQuery's site, and put them in the root folder for simplicity.
Please see the code below...
This does not work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
</head>
<body>
</body>
But this does work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
</body>
Maybe it's the order the scripts are coming in - your working version has jQuery first, then mobile, while the non-working one has the opposite. If that doesn't fix it, double-check that your file paths are all correct - the way it's written, your html file must be in the same folder as the scripts. If it's not, try prepending a slash: <script src="/jquery-2.2.3.js"> to force it to look at the root folder.
One way to confirm whether that's the issue is to check your browser dev tools. If you're in chrome, right click -> inspect element, and find the Network tab. Reload your page while you've got that open and see if your page is successfully loading the scripts. If you see the names of those scripts in red, it means they weren't found or couldn't be loaded.
Last thought: if you're working on your local site via opening a file:// path, the JS you can use will be restricted; this is a security feature. To get around it, run your site on a local server. Mac OS X has a built-in one, or you can use PHP or python to get one up and running immediately from the command line, or install a library like pow or serve. Google around for 'local web server setup', there are tons of options.
I am very new to using Intel's XDK, I already have a web app that I need to convert to an android app. I have tested the html web app thoroughly and so far, it works perfectly in the browser. The problem is that when I imported it to the XDK, it doesn't seem to work on the emulators. I searched everywhere and no one else seems to have the same problem, so it must be I'm missing something. I know you have to insert an extra javascript (which I already did) but so far, it still doesn't work. Can anybody here point me to the right direction? Thank you in advance.
My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width target-densitydpi=device-dpi initial- scale=0.1 maximum-scale=0.5 user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>King</title>
<style>
html {
height:100%;
}
body {
background-color: #000000;
margin:0;
height:100%;
}
</style>
<meta name="viewport" content="user-scalable=yes, width=1024" />
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
</head>
<body>
<div style ="margin:auto;width:1024px;height:768px">
<div id="king_hype_container" style="position:relative;overflow:hidden;width:1024px;height:768px;">
<script type="text/javascript" charset="utf-8" src="King.hyperesources/king_hype_generated_script.js?7046"></script>
</div>
</div>
</body>
</html>
Maybe I'm putting the intel xdk in the wrong place in javascript?
Do what #rscohn2 suggests (make that "king" script is local to your project, avoid loading it over the network if at all possible), but also take a look at this "beefier" template which I've provided to people who are trying to turn a web app into a webview app. There are lots of comments and console.log messages to help you figure out what's going on, but, in essence:
wait for the custom "app.Ready" event to kick off your app
consider when you are loading your third-party and custom JS scripts (see the README)
It probably isn't loading the king_hype_generated_script.js. You could see that by popping up the debugger in the emulator. You can do that by clicking on the bug icon in the top left of the screen and then looking at the messages in the console tab. you probably want to make king_hype_generate_script.js a static file and copy into your project, or use an absolute URL pointing back at your server. Copying it into your project will give you better ability to work offline.
I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well
I am trying to use Google Chrome Frame in my Django app.
Inserting <meta http-equiv="X-UA-Compatible" content="chrome=1"> into the header doesn't do the trick.
Right now, this is what my header looks like:
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Amuse Me</title>
<link href='/static/style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="/static/jquery-1.6.0.min.js"></script>
<script type="text/javascript" src="/static/base.js"></script>
</head>
Any suggestions?
Your page might be cached as suggested in quirksblog:
Cache
When I was doing research I used one
test page and constantly changed the
tags in the . The problem
was that IE/Frame seemed to be caching
not only the page, but also in which
rendering engine it should be shown.
Therefore a simple page refresh won’t
help you here.
Fortunately Twitter user jdalton came
up with a solution: simply append a
pseudo-query such as ?123 to the page
URL. That bypasses the cache and
forces the browser to re-evaluate the
tags.
Open your code in Google Chrome's developer tools and look for html errors, and check your resource headers.