<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css"/>
<script>
$(document).ready(function() {
$("#TextBox1").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
Should I be linking any other css files? Or is it a problem with Google CDN?
you are using <script> for css instead of <link>
EDIT:
and rel="stylesheet" is missing
Still cant figure out how to do it with external CSS. A faster solution was to keep the CSS files local.
Related
I feel kinda silly asking this question but I have tried everything I know and even consulted the api docs all to no avail.
My question is how to fix:
Uncaught TypeError: Cannot read property 'v0' of null
What I am doing is compiling a dart based chrome app with dart2js using dart-sdk version 1.10 I have also tried dart-sdk version 1.9 with the same result.
All of my code is located at:
https://github.com/dragonloverlord/Pages
I am building my project in pycharm community edition 4.5 with the dart plugin if that matters.
I have tried using 'build mode=debug' but no different message was given I had the source maps set up as well but nothing changed.
The os that I am building on is linux ubuntu 15.04
I have found the solution to the issue and it's actually very simple!
All you have to do is move the dart scripts to the body of the document like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart"></script>
</body>
</html>
Compared to having them in the head of the document like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart"></script>
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
</body>
</html>
A very simple fix that is often forgotten!
Also adding defer to the dart script will fix the issue like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart" defer></script>
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
</body>
</html>
Getting this error $(..).tabs not a function.
here are my imports
<link rel="stylesheet" href="css/jquery-ui-1.10.4.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="js/home.js"></script>
Can you help debugging that.
JSP FILE
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login to Web Service Details Tool</title>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="js/home.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css" type="text/css"></link>
</head>
<body>
<div id="tabs">
<ul>
<li>Overview</li>
<li>Web Service Dashboard</li>
<li>Console</li>
</ul>
<div id="tabs1">
<jsp:include page="overview.jsp" />
</div>
<div id="tabs2">
<jsp:include page="dashboard.jsp"/>
</div>
<div id="tabs3">
<jsp:include page="menu.jsp" />
</div>
</div>
<br><br>
This was working until today, i don't know why it stopped working & console is throwing me error tabs is not defined function
The structure would need to look like this:
page.html
-js (folder)
--jquery-2.1.1.js
--jquery-ui-1.10.4.js
The html file would then have the references as you've show above:
<link rel="stylesheet" href="css/jquery-ui-1.10.4.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="js/home.js"></script>
You could also use chrome dev tools (F12) to check if the resources have loaded
NOTE: if you're home.js is using any jquery functionality, this file should always be added after the jquery files.
EDIT: based on comment
make sure you're using it like $("#name").tabs(); and not $("#name").tabs;
I had included jquery.js in one of the included jsp page which was causing the issue & the browser was not able to load the jquery files.
Yes...now I´m bringing the most simple script in the world...and though I can´t get it work!
MUST the word, tooltip be included in the .js file to work ? It doesn´t exist in my .js
May I include more .js files in my script, or should I just take the newest release ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#outdoor img[title]").tooltip();
});
</script>
<style type="text/css">
#tooltip
{
display:none;
font-size:12px;
height:70px;
width:160px;
padding:20px;
color:Gray;
}
#outdoor #nature
{
margin-top:200px;
}
</style>
<title></title>
</head>
<body>
<div id="tooltip"></div>
<div id="outdoor">
<img src="../img/forest.jpg" id="nature" alt="ghghg" title="I love the nature"/>
</div>
</body>
</html>
You haven't written a tooltip() function in Javascript, that's why it doesn't work.
You need to include in your HTML file, these lines:
<script type="text/javascript" src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
<link rel="stylesheet" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" />
I have a strange problem with an app developed using phonegap and jquery mobile:
when the app starts, styles are not applied but if I browse within the app and then go back to the index, I can see styles well applied.
What should I change?
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
var intervalloRefresh;
var intervalloRisultati;
var iter=0;
// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
</script>
<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></script>
<!-- <script type="text/javascript" src="main.js"></script> -->
<script type="text/javascript" src="jquery/jquery.mobile-1.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#pulsantiera{width:25%;height:100%;float:left;}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="pulsantiera" data-role="controlgroup" data-type="vertical">
<!-- Allineamento -->
Allinea
Percorsi
Programma
Info
Foto
Chat
Y
A
N
</div>
<div style="width:74%;height:100%;margin-left:26%" >
<h1 id="title">PATH</h1>
<div id="content">
<img src="images/IT_MAPPA.jpg">
</div>
<div id="vote" stle="display:none"></div>
</div>
</div>
</div>
</body>
</html>
Have you tried switching the position of your CSS and JS files?
If parsed from top to bottom:
1) jquery is initialized
2) jquery mobile is initialized
3) then the CSS is loaded
So the CSS needed for the JQM widgets is not there when JQM kicks into gear.
Try switching to:
1) all CSS
2) jquery
3) jquery mobile
Also check the JQM page template. The CSS always goes first.
I am having a strange issue with trying to style a link as a JQuery UI button. It's showing up as a button in Chrome and as a link in Firefox and IE8.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.9.custom.min.js"></script>
<link rel="stylesheet" type="test/css" href="stylesheet/jquery-ui-1.8.9.custom.css">
<link rel="stylesheet" type="text/css" href="stylesheet/styles.css">
<script type="text/javascript">
$(document).ready(function(){
$("a").button();
});
</script>
<title>Introduction</title>
</head>
<body class="indexbody">
<div class="indexwrapper">
<div id="introduction">
<div class="btn">
<a href="test.html" >link</a>
</div>
</div>
</div>
</body>
</html>
It looks like there is an easy to miss typo in your CSS link element. The type attribute should be text/css, not test/css.
The x and s are just so close to each other.
<link rel="stylesheet" type="text/css"
href="stylesheet/jquery-ui-1.8.9.custom.css">
While Chrome adapted, the other browsers are more strict with their syntax. Chrome follows the Robustness Principle.
Finally, the order in which you load the CSS or JavaScript does not appear to matter. The link tag can come either before or after the script elements.
CSS comes first to JS inclusion, that should solve your problem.
<link rel="stylesheet" type="test/css" href="stylesheet/jquery-ui-1.8.9.custom.css">
<link rel="stylesheet" type="text/css" href="stylesheet/styles.css">
<script type="text/javascript" src="script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.9.custom.min.js"></script>