Tooltip display content how to show as below format
Please help me
"Dynamic_value" values are coming from function in variable and i want to display
as below format
Selection Parameters
Selection Date - Dynamic_value
Unit Value- Dynamic_value
list - Dynamic_value
below is example of code
<label id="lblName" for="txtName" title="Full Name">Name</label>
<input id="txtName" type="text" title="Your full name as it appears in paasport" />
<meta charset="utf-8">
<title>tooltip demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#txtName').tooltip({
content: toolTipFunction
});
function toolTipFunction() {
var texdisp = 'Selection Date - Dynamic_value; Unit Value- Dynamic_value; list - Dynamic_value';
return texdisp
}
});
</script>
If I am understanding the question correctly, you're just struggling to include line breaks where you want them. This can be done simply by including <br /> elements in the texdisp string.
<label id="lblName" for="txtName" title="Full Name">Name</label>
<input id="txtName" type="text" title="Your full name as it appears in paasport" />
<meta charset="utf-8">
<title>tooltip demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#txtName').tooltip({
content: toolTipFunction
});
function toolTipFunction() {
var texdisp = 'Selection Date - Dynamic_value;<br /><br /> Unit Value- Dynamic_value;<br /><br /> list - Dynamic_value';
return texdisp
}
});
</script>
Related
I want to know how you would go about getting a value from a color picker and returning it to a js script
Here is the HTML Code
<!DOCTYPE html>
<script type="text/javascript" src="Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap-colorpicker.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.css' />
<script type="text/javascript" src="js/bootstrap-colorpicker.min.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.min.css' />
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<p> test test test</p>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp2').colorpicker({
color: '#AA3399',
format: 'rgb'
})
});
</script>
</body>
</html>
<script>document.getElementById("cp2").value = function () {
return rgb;
}
</script>
`
I am looking to return the value of the color picker which is in RGB format to a js script so that I will to able to assign vars like this
var 1 = rgb[1]
var 2 = rgb[2]
var 3 = rgb[3]
`
If you decide to help me I will be thankful and you could please explain so I can learn from it.
Check javascript function:
<script>
(function() {
var rgb = document.getElementById("cp2").value ;
return rgb;
})();
</script>
I've combined this script from http://jsbin.com/oleto5/5/edit?html,js,output and http://jsfiddle.net/AEMLoviji/tABDr/
But there is a little problem in code : $('#numbers').val($('#tt').val()+String.fromCharCode(event.keyCode));
If I remove +String.fromCharCode(event.keyCode)); and script be replaced to .substr(-2)); does not work.
If I use +String.fromCharCode(event.keyCode)); is not perfect when I remove digits.
Example :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" class="jsbin" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript" class="jsbin"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js" type="text/javascript" class="jsbin"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#txt').keydown(function(){
setTimeout(function() {
$('#output').text($('#txt').val().substr(-2));
}, 50);
});
});
</script>
<input id="txt" type="text" />
<div id="output"></div>
<hr>
Second script is combined by me from first script becomes like below.
<hr />
<script type="text/javascript">
$(document).ready(function() {
$("#tt").keydown(function (event) {
setTimeout(function() {
}, 50);
{
$('#numbers').val($('#tt').val()+String.fromCharCode(event.keyCode));
}
});
});
</script>
<input type="text" id="tt" />
<input type="text" id="numbers" />
</body>
</html>
Are there solution about this script ?.
Let's analyze it:
1. You're using HTML5, so why not to use the "input" event? It's more reliable then a "keyup"
2. To speed things up, always try to store a DOM element in a variable, so you won't have to navigate trough all the DOM tree every time, you press a button
3. Use slice() method, to get a proper string.
var source = $("#tt"),
target = $("#numbers");
source.on('input', function() {
target.val(source.val().slice(-2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tt" />
<input type="text" id="numbers" />
I think you're after one of the following.
$('#output').text( $(this).val().slice(0, -2) );
$('#output').text( $(this).val().slice(-2) );
A demo using .slice():
$(function() {
$('#txt').keyup(function() {
var $this = $(this);
$('#output1').val( $this.val().slice(0, -2) ); //Grab everything but the last 2 characters.
$('#output2').val( $this.val().slice(-2) ); //Grab the last 2 characters.
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt" />
<br/><br/>
<input type="text" id="output1"></span><br/>
<input type="text" id="output2"></span>
Hello everybody i am trying to refresh a div in javascript every 1 second i have got one of the variables to refresh but cannot seem to get the second one to refresh.
I am looking to refresh the text with the id of refresh1 either correct or incorrect
many thanks in advance.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Binary Learning Tool!</title>
<meta name="description" content="Change image on click with jQuery">
<meta name="keywords" content="Change image on click with jQuery">
<meta name="author" content="">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
</head>
<body>
<script type='text/javascript'>
var total=1;
var answer;
var randnum=(Math.floor(Math.random() * 2 + 1))
document.write(randnum);
</script>
</br></br></br></br>
</br>
<img
id="num1" onclick="swapImage1( 'num1','/img/1.png','/img/0.png');" src="/img/0.png" alt="num1" value="32"
/>
<img
id="num2" onclick="swapImage2( 'num2','/img/1.png','/img/0.png');" src="/img/0.png" alt="num2" value="16"
/>
<img
id="num3" onclick="swapImage3( 'num3','/img/1.png','/img/0.png');" src="/img/0.png" alt="num3" value="8"
/>
<img
id="num4" onclick="swapImage4( 'num4','/img/1.png','/img/0.png');" src="/img/0.png" alt="num4" value="4"
/>
<img
id="num5" onclick="swapImage5( 'num5','/img/1.png','/img/0.png');" src="/img/0.png" alt="num5" value="2"
/>
<img
id="num6" onclick="swapImage6( 'num6','/img/1.png','/img/0.png');" src="/img/1.png" alt="num6" value="1"
/>
</body>
<script type="text/javascript" src="var.js"></script>
</html>
</br></br>
<head>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh").innerHTML = + total;
}
</script>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh1").innerHTML;
}
</script>
</head>
<div id="refresh">
<script type="text/javascript">
document.write(total);
</script>
</div></br>
<div id="refresh1">
<script type="text/javascript">
if (total === randnum)
{
answer=("Correct");
document.write(answer);
}
else
{
answer=("Incorrect");
document.write(answer);
}
</script></div></br></br>
<input type="button" value="Restart" onClick="history.go(0)">
So, I don't really get, what you want to do, but I tried to realize what you want to do:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Binary Learning Tool!</title>
<meta charset="utf-8">
<meta name="description" content="Change image on click with jQuery">
<meta name="keywords" content="Change image on click with jQuery">
<meta name="author" content="">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript">
// Define your Variables
var total = 1;
var answer = '';
var randnum = (Math.floor(Math.random() * 2 + 1));
// This function decides whether 'correct' or 'incorrect' should be displayed
function decide_refresh1(tot,rand) {
if(tot == rand) {
return 'correct';
}
return 'incorrect';
}
// This function is called when you click on one of your images, and just calls the decide_refresh1() function and writes the result to the div refresh1.
function reload_refresh1(triggering_object) {
$('#refresh1').html(decide_refresh1(total,randnum));
}
// Code's executed after Website has finsihed loading
$(document).ready(function () {
// Save your divs to variables, makes easier accessable
var div_randum = $('#div_randum');
var div_refresh = $('#refresh');
var div_refresh1 = $('#refresh1');
// Write randnum to div_randnum and total to refresh
div_randum.html('Randnum: '+randnum);
div_refresh.html('Total: '+total);
// Fill refresh1 with correct or incorrect
div_refresh1.html(decide_refresh1(total,randnum));
});
</script>
</head>
<body>
</br>
</br>
</br>
<div id="div_randum"></div>
</br>
<img id="num1" onclick="reload_refresh1(this);" src="/img/0.png" alt="num1" value="32"/>
<img id="num2" onclick="reload_refresh1(this);" src="/img/0.png" alt="num2" value="16" />
<img id="num3" onclick="reload_refresh1(this);" src="/img/0.png" alt="num3" value="8" />
<img id="num4" onclick="reload_refresh1(this);" src="/img/0.png" alt="num4" value="4" />
<img id="num5" onclick="reload_refresh1(this);" src="/img/0.png" alt="num5" value="2" />
<img id="num6" onclick="reload_refresh1(this);" src="/img/1.png" alt="num6" value="1" />
</br>
</br>
<div id="refresh"></div>
</br>
<div id="refresh1"></div>
</br>
</br>
<input type="button" value="Restart" onClick="history.go(0)">
</body>
</html>
I know it is not exactly what you want, but maybe it's a good start. If you have problems, just ask ;-)
Btw: Your source is hell of a mess.
Btw2: Removed your "swap_image();" function for simplicity
Looks like there is an error in your refreshDiv() calls.
Your code:
s<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh").innerHTML = + total;
}
</script>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh1").innerHTML;
}
I suggest not having 2 functions named refreshDiv(). Also, the second RefreshDiv does not have any code to update! The first refreshDiv() has
document.getElementById("refresh").innerHTML = + total
The second one does not.
HTH!
What I want to do is to allow the users to have their choice whether to add more text box when filing their data.
So far I have this code
http://code.jquery.com/jquery-1.5.1.js
This is the code that I got.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.Delete{color:#ff0000;}
.Add {color:green;}
.Retrieve{color:blue;}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$('.Delete').live('click',function(e){
$(this).parent().remove();
});
$('.Add').live('click',function(e){
$('.Option:last').after($('.Option:last').clone());
});
$('.Retrieve').live('click',function(e){
$('.Option input').each(function(i,e){
alert($(e).val()); //Alerts all values individually
});
});
});
});//]]>
</script>
</head>
<body>
<div class='Option'>
<input type='text' name='txtTest'/>
<input type='text' name='txtTest'/>
<input type='text' name='txtTest'/>
<span class='Delete'>Delete</span></div>
<br/><br/>
<span class='Add'>Add Option</span>
<br/><br/>
<span class='Retrieve'>Retrieve Values</span>
</body>
</html>
That code allows me to add more text box and delete them, but my problem is I'm trying to get the value of those text box using PHP GET or PHP POST and if possible set some limit, maybe after adding 5 sets of text boxes the user will not be able to add more.
In order to post to PHP, simply wrap your HTML in a form element:
<form method="GET" action="myPage.php">
<div class='Option'>
<input type='text' name='txtTest'/>
<input type='text' name='txtTest'/>
...
</div>
</form>
Then to limit the number of .Option elements which can be added, simply declare a global variable which counts the number of .Option elements:
var optionCount = 1;
$('.Delete').live('click',function(e){
$(this).parent().remove();
optionCount--; /* Decrease optionCount. */
});
$('.Add').live('click',function(e){
if (optionCount < 5) { /* Only if optionCount is less than 5... */
$('.Option:last').after($('.Option:last').clone());
optionCount++; /* Increase optionCount. */
}
});
You must check the number of inputs in the add event.
You use form tag to transfer data to server and
you also must set "method" attribute in form tag with GET or POST
<html>
<body>
<head>
<script type='text/javascript'> $(function(){
$('.Add').live('click',function(e){
if($('.option input').length < 5)
{
$('.Option:last').after($('.Option input:last').val('').clone());
}
// Other code
// ...
}
});
</script>
</head>
<form action="welcome.php" method="post">
<input type='text' name='txtTest'/><br>
<input type='text' name='txtTest'/><br>
<input type="submit">
</form>
</body>
</html>
Hi I'm new to javascript and dojo. I'm trying to use two dijit DateTextBoxes with the drop-down calendars to establish a date range for a query on a database. I want to restrict the dates available, once the begin or end date has been selected, so that its impossible to pick an end date that is chronologically before the begin date, and vice versa. I'm trying to apply the example called 'changing constraints on the fly' (about half way down the page) from the dojo reference here: http://dojotoolkit.org/reference-guide/dijit/form/DateTextBox.html However, the constraints aren't working in my code. The only thing I'm really doing differently is using thetundra theme. Any suggestions would be greatly appreciated.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="tundra">
<div>
<label for="fromDate">From:</label>
<input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" required="true" onChange="dijit.byId('toDate').constraints.min = arguments[0];" />
<label for="toDate">To:</label>
<input id="toDate" type="text" name="toDate" data-dojo-type="dijit.form.DateTextBox" required="true" onChange="dijit.byId('fromDate').constraints.max = arguments[0];" />
</div>
</body>
</html>
With the new, HTML5-conform attribute data-dojo-type introduced in Dojo 1.6, the way how widget attributes are parsed has changed as well (to validate in HTML5 too). Widget-specific attributes are now in an HTML attribute called data-dojo-props, in a JSON-style syntax.
To make your example work again, either put the onChange (and required) in data-dojo-props (note that you have to wrap a function around it):
dojo.require("dijit.form.DateTextBox");
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<body class="tundra">
<label for="fromDate">From:</label>
<input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('toDate').constraints.min = arguments[0];}, required: true" />
<label for="toDate">To:</label>
<input id="toDate" type="text" name="toDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('fromDate').constraints.min = arguments[0];}, required: true" />
Or you use the old dojoType instead of data-dojo-type, then the onChange attribute would be parsed. Note that it would not be HTML5-conform, but in my opinion more elegant.
Searching for an effective date range and restrictions, where only can have a range in the past, adding the constraints max with echoing the date in this format Y-m-d, I manage to edit it like this, hopes this help.
dojo.require("dijit.form.DateTextBox");
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<body class="tundra">
<form>
<label for="fromDate">From:</label>
<input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('toDate').constraints.min = arguments[0];}, required: true, constraints:{max:'<?PHP echo date(" Y-m-d "); ?>'} "
/>
<label for="toDate">To:</label>
<input id="toDate" type="text" name="toDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('fromDate').constraints.min = arguments[0];}, required: true, constraints:{max:'<?PHP echo date(" Y-m-d "); ?>'} " />
<button onclick="dijit.byId('fromDate').reset(); dijit.byId('toDate').reset();" type="reset">reset</button>
<button type="">Generate</button>
</form>
I someday do some like:
dojo.require("dijit.form.DateTextBox");
some_function(minDate) {
dijit.byId('toDate').constraints.min = minDate;
}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<body class="tundra">
<input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: some_function(this.value);">
I hope that it help you.
I never had any luck with the attributes in the template like that.
I ended up just handling it on the function I run when either change:
I have one with an attach point of "startDatePicker" and another with "endDatePicker". Here I'm setting the endDatePicker to add constraints based on the new startDate someone selected so it's dynamic:
this.endDatePicker.constraints.min = new Date(startDate);
this.endDatePicker.constraints.max = new Date();