i'm trying to use js and create "description box" with some "info text"
HTML
<head>
<script type="text/javascript" src="onmo.js"></script>
</head>
<body>
<div> <a onmouseover="info()" href="http://www.google.com"> google </a> </div>
</body>
JS
function info() {}
i don't know which code creates so called "description box" with some text.
any help?
without css.
You can use jquery-ui tooltip for this purpose.
Here is link with the documentation with great examples: Link
Example from jqueryui site:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p>Tooltips can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
ThemeRoller
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
This will show you some text when hovering the link:
google
Related
I need to add a specific help-text for each possible value in the choicefield. And I need to show it in a tooltip bubble.
How should I include the value specific help text in the model? and should I use CSS or Javasript tooltip.
I already included helptext in tooltips for other charfields using CSS :hover and adding it in an "extra-admin.css" and this works.
You can use bootstrap-tooltip like this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li>Top</li>
<li>Bottom</li>
<li>Left</li>
<li>Right</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
you can directly insert this into your Django template for better understanding.
include these scripts
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
anchor with tooltip
Hover over me
javascript for tooltip
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
these examples are from W3Schools
With this code I want to show a jQuery UI dialog when I click on a button. However, the text of the dialog is shown for a brief time when the page loads. What is the right way to implement this?
My html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
.. html code ..
<button id="helpbutton" title="">Help</button>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will be visible for a short time when the page loads</p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
</body>
</html>
as you can see, I call my external scripts just before the end of the for performance reasons.
myJsFile.js:
//Fire up the help dialog when the help button is pressed
jQuery(function() {
jQuery( "#helpdialog" ).dialog({
autoOpen: false
});
jQuery( "#helpbutton" ).click(function() {
jQuery( "#helpdialog" ).dialog( "open" );
});
});
Solution (thanks to krzmig): Use this CSS code in the CSS file or in the section
#helpdialog {
display: none;
}
Did you load UI jQuery JS and CSS? Like in this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
source: https://jqueryui.com/dialog/
edit:
For not showing dialog box when site is loading put to your CSS file code:
#helpdialog {
display: none;
}
or add to <head> section if you don't have external CSS.
<style>
#helpdialog {
display: none;
}
</style>
First include jquery as well.
Second place your scripts before your dialog in html so that it loads and hides the dialog before it could show up itself on your page. Here's the code (keep your myJsFile.js intact):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="helpbutton" title="">Help</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will NOT! be visible for a short time when the page loads</p>
</div>
</body>
</html>
You also need to include jquery main library. The required includes are jquery library, jquery ui js, and jquery ui css.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script
i'm using sublime text 3 and i've tested other jQuery UI elements but decided to try using date picker today with a small project i'm putting together. I notice that when I wanted to try it out I first saved the default code from the example on jQuery's site locally in it's own .html file, then I tried to load it up.
default code from example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date:
<input type="text" id="datepicker">
</p>
</body>
</html>
unfortunately, this brings up an input field but, on clicking into the field, i get no ability to select a date. In fact the date selection dropdown doesn't show up at all but I can tell that the input field has been selected. I thought perhaps I had left something out when copying the code over to my test file so I loaded up JSBin and pasted the code there. Magically, it works. JSBin exampleI'm assuming i'm somehow not linking to the appropriate style sheet or the CDN for the jQuery UI. Is that assumption correct or why isn't this working locally?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
P.S- I have removed link to css file as it might have been your local css file. You can add that back.
I am implementing the Signature plugin in my demo. So I downloaded the plugin from [this url][1].
There demo html contains a class ie kbw-signature which is not applied to any elements in code. However, when I run it somehow it is applied to a given div. So I searched the file and there is no line where it is applied to the div.
Secondly: How to use jQuery signature plugin in jsfiddle?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery UI Signature Basics</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/south-street/jquery-ui.css" rel="stylesheet">
<link type="text/css" href="jquery.signature.css" rel="stylesheet">
<style type="text/css">
.kbw-signature { width: 400px; height: 200px; }
</style>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.signature.js"></script>
<script type="text/javascript">
$(function() {
$('#sig').signature();
$('#clear').click(function() {
$('#sig').signature('clear');
});
$('#json').click(function() {
alert($('#sig').signature('toJSON'));
});
});
</script>
</head>
<body>
<h1>jQuery UI Signature Basics</h1>
<p>This page demonstrates the very basics of the
jQuery UI Signature plugin.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the documentation reference page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;"><button id="clear">Clear</button> <button id="json">To JSON</button></p>
</body>
</html>
I really enjoy this set of widgets: http://www.jmwidgets.com/index.php/docs/widgets/hmiindicator/
However, I need to set the value of an indicator at initialize (or later on page update) using a value, rather than linking it to another value (although I could do this through a dummy element if I had to I suppose).
I can't, no matter what I've tried, get it to work. Here is the fiddle: http://jsfiddle.net/uLuZQ/39/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HMI Indicator Example</title>
<!-- JMWidgets styles -->
<link rel="stylesheet" href="css/base/jmwidgets-0.8.0.base.min.css">
<link rel="stylesheet" href="css/jmwidgets-0.8.0.allstyles.min.css">
<!-- jQuery classes -->
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<!-- JMWidget classes -->
<script src="js/jmwidgets-0.8.0.min.js"></script>
<script>
$(function() {
$("#ind1").hmiIndicator( {colors:['red','yellow','green'],value:1} );
var val= $("#ind1").hmiIndicator( 'option','value' );
alert(val)
});
</script>
</head>
<body id="page1">
<div id="ind1" style="width:150px; height:150px"></div>
<br />
</body>
</html>
Please tell me what I'm stupidly missing. The documentation seems pretty clear, but I can't get it to work at initialize or using setter.
Thanks,
C