So I was trying a little loading bar but my JQuery doesn't load when I try this in FireFox & Chrome, it only loads on Safari.
this is my code:
<html>
<head>
<title>Mijn eerste spel</title>
<link href="opmaak.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="code.js"></script>
</head>
<body>
<div id="knop">
<div id="textknop">Gooi Steen</div>
<div id="laadbalk"></div>
</div>
<h1 id="money">$0</h1>
</body>
</html>
and my jq code is:
$(Document).ready(function(){
alert("test")
});
In Safari it produces the popup but any other browser just ignores my code.
Very simple, just change Document to document in javascript code.
Related
My aim is, to make the box resizable, which does not work (neither in Firefox nor in Chrome). Making it draggable works perfectly. However, in jsfiddle this code works even for resizable (slightly modified). What is wrong here?
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
function init() {
$("#box").resizable();
$("#box").draggable();
}
</script>
</head>
<body onload="init()">
<div id="box" style="border:1px dashed red;width:42mm;height:30mm;">Text</div>
</body>
Resizable needs a theme, the handle is an image that needs to be provided. Try adding this
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
I tried to include jQuery in the main page via HTML Imports, but it only worked in Chrome. Both Safari and Firefox threw a "ReferenceError: $ is not defined" message on the first line of the JavaScript code in the main page. It appeared that the JavaScript code on the page was executed before the jQuery object was loaded in Safari or Firefox. I was using the latest versions of Polymer(0.4) and jQuery (2.1.1). Below is a minimal example:
jquery.html
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
main.html
<!DOCTYPE html>
<html>
<head>
<title>Import jQuery</title>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="jquery.html">
</head>
<body>
<script>
$(document).ready(function() {
console.log("Hello World!");
});
</script>
</body>
</html>
Did I miss something obvious here? Thanks!
Neither Safari nor Firefox support HTMLImports today. Instead platform.js polyfills that feature using Ajax requests.
Without native browser support there is no way to make your <script> tag wait until the imports have finished loading. For this reason, to support the polyfills you have to wait until the HTMLImportsLoaded event fires (or put all your dependent code behind imports).
So, either:
<!DOCTYPE html>
<html>
<head>
<title>Import jQuery</title>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="jquery.html">
</head>
<body>
<script>
addEventListener('HTMLImportsLoaded', function() {
$(document).ready(function() {
console.log("Hello World!");
});
});
</script>
</body>
</html>
or
code.html
<script>
$(document).ready(function() {
console.log("Hello World!");
});
</script>
main.html
<!DOCTYPE html>
<html>
<head>
<title>Import jQuery</title>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="jquery.html">
</head>
<body>
<link rel="import" href="code.html">
</body>
My problem is with Jquery mobile's changePage(), let me start out by saying i know there's a bunch of other post about this issue, but i have tried all the solutions without any luck so that's why i'm now asking for help.
I've build a Phonegap project, where each screen is = a .html file. i got my index.html that loads all the scripts needed for the entire app. Then my index.html loads a new page with $.mobile.changePage(). but when this happens the next page do'sent have any script's or css's attached to it why?
This if my index.html
<!--index page used to find out if the user should see the login or welcome page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-2.0-original.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-fa.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--Used to make sure theres as little delay on old devises as possible-->
<script src="buttonTapDelayJS.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="loginJS.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<script src="javaIndex.js" type="text/javascript"></script>
<script src="myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<!--Loads the css for the menu-->
<link href="menuStyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
var checkUser="admin";
function onDeviceReady() {
/*if the stored username is = the correctusername, it loads the welcome page if not it loads the login*/
if(window.localStorage.getItem("user") === checkUser){
$.mobile.changePage("welcome.html",{transition:"slide"});
//window.open("welcome.html", "_self");
} else {
//window.open("login.html", "_self");
$.mobile.changePage("login.html",{transition:"slide"});
}
}
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>
This is my login page
<!--Login page-->
<!DOCTYPE html>
<html>
<body onload="loadLogin();">
<!--Creates all content you see on the screen-->
<div data-role="page" id="login">
<div data-role="content">
<ul data-role="listview">
<div align="center" data-role="content">
<img src="icon.png" alt="">
</div>
<div data-role="content">
<label for="textinput">Indtast brugernavn</label>
<input type="text" name="textinput" id="textinput" value=""/>
</div>
<div data-role="content">
<label for="passwordinput">Indtast adgangskode</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</span> </div>
<div data-role="content">
<div>Login</div>
</div>
<div data-role="content">
<div></div>
</div>
</ul>
</div>
</div>
</body>
</html>
As stated in the start, my problem is that non of my functions on my login page works to give an example of that i got my infoButton that runs onClick="infoPopup(); and this function makes a popup navigator.notification.alert("Message", null, "Info", "OK"); But it do'sent show anything when i press it.
Am i loading my scripts wrong or whats wrong, any help would be really much appreciated?
EDIT 1:
If i copy all my index.html to all other pages what happens is this. my index.html links to my login.html correct. On the login page my onClick="infoPopup(); dosent work, but my onClick="saveLogin();myFunction();" works sort of. my login info does get saved but in my saveLogin(); i got a navigator.notification.alert(); but the alert aint popping up. i know that all of my functions work because they did when i used window.open(); instead of changePage. And the reason why i changed was because with window.open(); i cant get the jquery page transitions Any ideas?
EDIT 2:
Don't really know what i did but works now:) thanks for the reply's.
Even though i tired this alrdy what worked for me was to move all javascripts and css's to the index.html.
jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page" element and its descendants and pulls that into the current dom.
So any scripts in the of the document will not be included.
I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.
Also, you can place JavaScript code inside the data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.
Repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will recreate head section.
simple change like -
$.mobile.changePage("welcome.html",
{transition:"slide"}
);
<body onload="javascript function"> is working well on desktop browser, but is not working on iPhone. My iPhone seems like it can read external CSS files and JS files, since when I click button from page, it fires JS functions. But oddly, only onload event is not working. I am so clueless now. Can anybody tell me why can't I fire onload event on iPhone? Below is my code.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 연습</title>
<meta name="viewport" content="width=480, user-scalable=1"/>
<link rel="stylesheet" href="../styles/test1.css" />
<script type="text/javascript" src="../scripts/fbsdk.js"></script>
<script type="text/javascript" src="../scripts/initcss.js"></script>
<script>
//document.addEventListener('DOMContentLoaded', checkLoginCase, false);
</script>
</head>
<body onload="checkLoginCase()">
<div id="wrap">
<header id="top">
<img src="../fbimg/logo.png" alt="상단이미지" title="상단이미지">
</header>
</div>
<button onclick="checkLoginCase()"> check fxn1</button>
<button onclick="checkAlert()"> check fxn2</button>
</body>
</html>
It should be working, but try to avoid inline JavaScripts.
Try this:
window.onload = (function(){
checkLoginCase();
});
//-or-
window.onload = checkLoginCase;
I am using jQuery UI.Dialog. I'm having a small problem, when I click the link to show dialog box the text from #Test disappears and the modal overlay is shown but the actual modal box is not displayed.
Using FireBug the dialog box is created but has Display:None so is not shown. Also, if I change this in firebug to Display:Block the dialog is shown but it is on the left hand side of my page... any suggestions?
My code is very simple:
<head>
<link href="Vader/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css">
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/ui.core.js" type="text/javascript"></script>
<script src="javascripts/ui.draggable.js" type="text/javascript"></script>
<script src="javascripts/ui.resizable.js" type="text/javascript"></script>
<script src="javascripts/ui.dialog.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function() {
$("a").click(function(){
$('#Test').css('display','inline');
$("#Test").dialog({modal: true});
});
});
</script>
</head>
<body>
Test
<div id="Test" title="Test Title">Bla bla bla</div>
</body>
You might want to add to the click is e.preventDefault(); so it doesn't try to load the # which may refresh the page.
$("a").click(function(e){
e.preventDefault();
$('#Test').css('display','inline');
$("#Test").dialog({modal: true});
});
My guess would be it's not picking up your css file, have you confirmed it actually is?
There's nothing wrong with your code as far as I can tell, the following test works in my sandbox file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
<meta http-equiv="Content-Type" content="application/text+html;utf-8"/>
<title>Sandbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(){
$('#Test').css('display','inline');
$("#Test").dialog({modal: true});
});
});
</script>
</head>
<body>
<div id="container">
Test
<div id="Test" title="Test Title">Bla bla bla</div>
</div>
</body>
</html>
<A> is not a block-level structure, that might be causing some trouble.
Try wrapping it up in a DIV, then make that div in the dialog instead.
I had the same problem and it turned out that the CSS file was not being found. Use firebug to load the css file. You might find that what shows up in Firebug is a "404 Not found".