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" />
Related
I'm trying to use the ckeditor in my app via WebView on android.
On iOS the ckeditor appear prefectly, but on android I have this error:
I/TiWebChromeClient.console: (main) [49519,49519] Uncaught TypeError: Cannot set property 'dir' of undefined (4466:file:///android_asset/Resources/lib/ckeditor/ckeditor.js)
In the ckeditor documentation appear this but it doesn't work anyway.
I'm thinking if it can be an error of Titanium, because on iOS all works perfectly.
This is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var CKEDITOR_BASEPATH = '/lib/ckeditor/';
window.CKEDITOR_BASEPATH='/lib/ckeditor/';
</script>
<script src="../ckeditor.js"></script>
<script src="js/sample.js"></script>
<style>
body{
margin: 0px;
}
</style>
</head>
<body id="main">
<div class="adjoined-bottom">
<div class="grid-container">
<div class="grid-width-100">
<div id="editor">
<h1>Hello world!</h1>
<p>I'm an instance of CKEditor.</p>
</div>
</div>
</div>
</div>
<script>
initSample();
</script>
</body>
</html>
Titanium supports CKEDITOR.
ckeditor.js calls config.js, styles.js and so on. In the html file, provide path to those missing dependency files.
1] Include the dependency files for ckeditor
<script src="lib/javascript/ckeditor/ckeditor.js"></script>
<script src="lib/javascript/ckeditor/config.js"></script>
<script src="lib/javascript/ckeditor/styles.js"></script>
<script src="lib/javascript/ckeditor/lang/en-gb.js"></script>
<script src="lib/javascript/ckeditor/plugins/panelbutton/plugin.js"></script>
<script src="lib/javascript/ckeditor/plugins/colorbutton/plugin.js"></script>
<script src="lib/javascript/ckeditor/plugins/colorbutton/lang/en.js"></script>
<script src="lib/javascript/ckeditor/plugins/colorbutton/lang/en-gb.js"></script>
2] For mobile application ckeditor isCompatible has to be set.
<script type="text/javascript">
CKEDITOR.env.isCompatible = true;
</script>
CKEDITOR.basepath setting is not required for the mobile application.
It seems for some reason the items option here doesn't work. I'm sure I'm doing something wrong but can't get the error. Can you help me?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test jquery</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(document).ready(function() {
$(".div1").tooltip({ items: 'img[alt]'});
});
</script>
</head>
<body>
<div class="div1">
<img src="home-slider-next-button.png" width="26" height="24" alt="test2">
</div>
</body>
</html>
Ok I took a closer look at the tooltip code and see that it seems it doesn't really take the alt attribute for content. It only uses items content as a selector. So my solution, for now, is to use the content option like this:
$(document).ready(function() {
$(".div1").tooltip({ items: 'img[alt]', content:function(){ return $(this).attr('alt'); }});
});
hope it helps others with the same problem.
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.
<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.
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>