I have a text box in my aspx page. I need show its tooltip when and only when the text box is disabled/greyed out. How do I achieve this using JavaScript?
You can call this function where you enable/disable the textbox
function setToolTip()
{
if(document.getElementById("myTextBox").disabled == true)
{
document.getElementById("myTextBox").title="ToolTip";
}
else
{
document.getElementById("myTextBox").title="";
}
}
Here is one way:
document.getElementById("<%=TextBox.ClientID%>").setAttribute('title','New Tooltip');
2nd way:
function DisplayToolTip()
{
document.getElementById('divToolTip').style.left = window.event.x;
document.getElementById('divToolTip').style.top = window.event.y;
document.getElementById('divToolTip').style.visibility = 'visible';
}
function HideToolTip()
{
document.getElementById('divToolTip').style.visibility = 'hidden';
}
Now add the below HTML markup code:
<span id="spanName" style="font-weight: bold;border: solid 2px red;"
onmouseover="javascript:DisplayToolTip();"
onmouseout="javascript:HideToolTip();">THIS IS THE SPAN
</span>
<div id="divToolTip" style="position: absolute; visibility: hidden;
z-index: 20; background-color: white; border: solid 1px Blue;">
This is ToolTip Text
</div>
Related
Is there a more dynamic way to hide/show divs that are identical in structure with no identifiers?
Click to show
I'm some stuff
<div class="setup" onclick="show(1)">
Click to show
<p class="hidden">
I'm more stuff
</p>
</div>
function show(elem) {
var p = document.getElementsByClassName("hidden");
if (p[elem] != undefined) {
if (p[elem].style.display == "none") {
p[elem].style.display = "block";
} else {
p[elem].style.display = "none";
}
}
}
http://jsfiddle.net/ba7yfmz6/29/
Use this:
<div class="setup" onclick="show(this)">
JavaScript:
function show(elem) {
var paragraph = elem.querySelector(".hidden");
if (paragraph.style.display == "none") {
paragraph.style.display = "block";
} else {
paragraph.style.display = "none";
}
Hopefully this helps!
Yes, there is a way!
You can get all your elements, iterate them via forEach and assign your function to their onclick property:
document.querySelectorAll('.setup').forEach(div => {
div.onclick = showElem;
});
Doing this, you can get rid of the onlick on your HTML elements.
To get their child element (the one you want to hide / show, obviously), your show() function can look like this:
function show() {
const hidden = this.getElementsByClassName('hidden')[0];
if (hidden.style.display == 'none') {
hidden.style.display = 'block';
} else {
hidden.style.display = 'none';
}
}
And all together:
document.querySelectorAll('.setup').forEach(div => {
div.onclick = show;
});
function show() {
const hidden = this.getElementsByClassName('hidden')[0];
if (hidden.style.display == 'none') {
hidden.style.display = 'block';
} else {
hidden.style.display = 'none';
}
}
.setup {
border-top: solid #ccc 3px;
border-bottom: solid #ccc 3px;
margin-bottom: 5%;
}
.setup:hover {
cursor: pointer;
}
.hidden {
text-align: center;
font-weight: bold;
border-top: solid black 3px;
border-bottom: solid black 3px;
background-color: yellow;
display: none;
}
<div class="setup">
Click to show
<p class="hidden">
I'm some stuff
</p>
</div>
<div class="setup">
Click to show
<p class="hidden">
I'm more stuff
</p>
</div>
JS Fiddle: http://jsfiddle.net/ba7yfmz6/38/
More info:
forEach
querySelectorAll()
You can use this.
Also, since the div doesn't have a style attribute, checking for style.display === 'none' would always be false on the first click; it would set the the style.display to none. Checking for the computed style would show the hidden element on first click.
function show(el) {
const toggle = el.querySelector('.hidden');
toggle.style.display = window.getComputedStyle(toggle).display === 'none' ? 'block' : 'none';
}
.setup {
border-top: solid #ccc 3px;
border-bottom: solid #ccc 3px;
margin-bottom: 5%;
}
.setup:hover {
cursor: pointer;
}
.hidden {
text-align: center;
font-weight: bold;
border-top: solid black 3px;
border-bottom: solid black 3px;
background-color: yellow;
display: none;
}
<div class="setup" onclick="show(this)">
Click to show
<p class="hidden">
I'm some stuff
</p>
</div>
<div class="setup" onclick="show(this)">
Click to show
<p class="hidden">
I'm more stuff
</p>
</div>
<div class="setup" onclick="show(this)">
Then the JavaScript:
function show(that) {
var hiddenElements = that.getElementsByClassName('hidden');
for (var i = 0; i < hiddenElements.length; i++) {
var style = hiddenElements[i].style;
style.display = style.display == "block" ? "none" : "block";
}
}
I would like to display divs when the div contents before is full of words and continue to fill this new div with the rest of the words.
I don't know how to do it. In fact, in the code below I wrote that the div is displayed on click of a button. I also can't set the "fill-action" explained above.
The limit of the words in one div has to be settable from the code.
For example, if I set the limit to two words and there are only two words to be displayed, the second div shouldn't be created.
But If there are four words to be displayed and the limit is still on two words,
the second div has to be created and has to be filled with the third and fourth words.
Another problem is that if I write HTML text (e.g. <font color="#ff0000">), the tags (e.g. <font) shouldn't be considered as a word.
Jsfiddle
HTML:
<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button>
<div id='casella' class='fakes'></div>
CSS:
#faketxt {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}
#casella{
width: 150px;
height: 300px;
font-size: 10px;
border-style: solid;
}
.fakes{
width: 150px;
height: 300px;
font-size: 10px;
border-style: solid;
}
JQUERY:
$('#btn').click(function() {
var primo = document.getElementById('faketxt');
var secondo = document.getElementById('casella');
secondo.innerHTML = primo.innerHTML;
var myDiv = $('#casella');
myDiv.text(myDiv.text().substring(0,5)) //This is when the div is "full"
});
document.getElementById("btn").onclick = function () {
var ok = true;
if (ok === true) {
var div = document.createElement('div');
div.className = 'fakes';
document.getElementsByTagName('body')[0].appendChild(div);
}
};
In this case I set that the div is full when there are 5 letters, so the word "Here" has to be displayed in the second div...
Is this possible?
I can't figure it out.
for displaying divs at right position
css:
.fakes{
width: 150px;
height: 300px;
font-size: 10px;
border-style: solid;
display : inline-block;
}
#boxes{
display : flex;
}
HTML
<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button><br>
<div id="boxes">
<div id='casella' class='fakes'></div>
</div>
Use String.split() to separate the words (by spaces) and add a div container for each word using Array.foreach(). Also with this approach, use Array.shift() to set the text of the myDiv element (i.e. with id="casella") to the first word.
UPDATE:
Per the changing requirements, the code below now has a number input for the word limit. It then strips HTML codes (using the HTML entities) using a regular expression and then uses a counter to add words to newly created div elements. The functionality to create a new div element has been abstracted to the function createdDiv().
$('#btn').click(function() {
var primo = document.getElementById('faketxt');
var wordLimit = $('#wordLimit').val();
//strip html characters from string and use a regular expression
//to split based on white-space characters
var words = primo.innerHTML.replace(/(<([^>]+)>)/ig,"").split(/\s/);
if (words.length) {
var count = 0;
var div = createDiv();
words.forEach(function(word) {
if (++count > wordLimit) {
count = 0; //reset counter
div = createDiv();
}
if (div.innerHTML) {
div.append(' ');
}
div.append(word);
});
}
});
function createDiv() {
div = document.createElement('div'); //could use jQuery $('div') instead
div.className = 'fakes';
document.body.append(div);
return div;
}
#faketxt {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}
#casella {
width: 150px;
height: 300px;
font-size: 10px;
border-style: solid;
}
.fakes {
width: 150px;
height: 300px;
font-size: 10px;
border-style: solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Word Limit:
<input type="number" id="wordLimit" value="1" />
</div>
<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button>
var myDiv = $('#casella');
var primo = document.getElementById('faketxt');
var secondo = document.getElementById('casella');
$('#btn').click(function() {
var inputArray = primo.innerHTML.split(" ");
var secDivContent = '';
if(inputArray[0].length > 5 || primo.innerHTML.length > 5 ) {
secDivContent = primo.innerHTML.substr(5);
}
var div = document.createElement('div');
div.className = 'fakes';
div.innerHTML = secDivContent;
document.getElementsByTagName('body')[0].appendChild(div);
});
how to display a div everytime a user focus on a input field. there is already a div and it is hidden. the position of the div will change depending on the position of the selected field and it will be display below
this is my code
formFieldListWrapper.style.top = ((((formSelectedFieldInput.offsetTop > (formWrapper.offsetHeight/2))?((formSelectedFieldInput.offsetTop-(formWrapper.offsetHeight/2))-(formSelectedFieldInput.offsetHeight+formWrapper.offsetHeight*0.02)):(formSelectedFieldInput.offsetTop))/formWrapper.offsetHeight)*100) + "%";
formFieldListWrapper.style.left = ((formSelectedFieldInput.offsetLeft/formWrapper.offsetWidth)*100) + "%";
Why use javascript? This could be chieved by using CSS only
HTML
<div class="holder">
<input type="text" />
<div class="dropdown">
<p>Testing</p>
<p>Css ONLY</p>
<p>Dropdown</p>
</div>
</div>
CSS
.holder {
position: relative;
}
.dropdown {
position: absolute;
border: 1px solid red;
display: none;
}
input:focus + .dropdown {
display: block;
}
UPDATE
little bit misred the question, if You need to position div dynamically like in this fiddle, You cloud use:
HTML
<div class="holder">
<input type="text" />
</div>
<div class="holder" style="margin-top: 30px;">
<input type="text" />
</div>
<div class="dropdown">
<p>Testing</p>
<p>Css ONLY</p>
<p>Dropdown</p>
</div>
CSS
.holder {
position: relative;
}
.dropdown {
position: absolute;
border: 1px solid red;
display: none;
z-index: 1;
background: white;
}
input:focus + .dropdown {
display: block;
}
Javascript to position dropdown div
var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('focus', function(){
this.parentNode.appendChild(document.querySelector('.dropdown'));
});
}
Try the following:
formSelectedFieldInput.addEventListener("focus", setDivToInput, false);
function setDivToInput(e)
{
var inputElement = e.target; //e.target refers to the element that fired the event.
formFieldListWrapper.style.top = inputElement.offsetTop + formFieldListWrapper.offsetHeight + "px";
formFieldListWrapper.style.left= inputElement.offsetLeft + "px";
formFieldListWrapper.style.display = "block";
}
The first line adds a focus event to the input. This sets the div to the input based upon it's position on the page. This is very basic and doesn't behave well when the div runs of the screen. You need to add logic for that.
Now for multiple inputs in a form
var nodes = form.querySelectorAll("input"); //replace with your form element
for (var i = 0; i < nodes.length; ++i)
{
nodes[i].addEventListener("focus", setDivToInput, false);
}
function setDivToInput(e)
{
var node = e.target;
formFieldListWrapper.style.top = node.offsetTop + formFieldListWrapper.offsetHeight + "px";
formFieldListWrapper.style.left= node.offsetLeft + "px";
formFieldListWrapper.style.display = "block";
}
This code sets the focus event to all inputs in the form.
function expand(){
currentvalue = document.getElementById("test").value;
if(currentvalue == "off"){
document.getElementById("test").value="on";
document.getElementById("test").style.height="100px";
var div = document.getElementById("test");
var content = document.getElementById("test3");
div.innerHTML = div.innerHTML + content.innerHTML;
}
else{
document.getElementById("test").value="off";
document.getElementById("test").style.height="20px";
var div = document.getElementById("test").innerHTML = "<div id='test2'><b>Div</b></div>";
}
}
<!doctype html>
<html>
<head>
<style>
#test{
position: absolute;
border-radius: 4px;
background: #CCCC00;
height: 20px;
width: 300px;
border: 1px solid #000000;
}
#test2{
text-align: center;
font-size: 12pt;
}
</style>
</head>
<body>
<a href="#" onClick="javascript:expand()" value="on">
<div id="test">
<div id="test2"><b>Div</b></div>
<div id="test3" style="display: none;">I want this to show up in my div!</div>
</div>
</a>
</body>
</html>
I'm trying to make an expandable div container which will display some text inside of it
when opened and then hide it when closed. I managed to make the div expand and close but
I can't figure out how to make the text appear in the expanded box. I can do it by inserting the text in the javascript but I want it set as a variable so i can use the script for multiple pages with different text inside of the div.
I don't know if I've approached it the right way and would like some help, ty in advance.
To display your text just change the style of the div containing your text to display: block:
document.getElementById("test3").style.display = "block";
For your requirements, it would be something like this:
function expand() {
if (currentValue == "off") {
currentValue = "on";
document.getElementById("test").style.height = "100px";
document.getElementById("test3").style.display = "block";
}
else {
currentValue = "off";
document.getElementById("test").style.height= "20px";
document.getElementById("test3").style.display = "none";
}
}
Here you have a working fiddle.
JS function:
function DisplayToolTip() {
document.getElementById('divToolTip').style.left = window.event.x;
document.getElementById('divToolTip').style.top = window.event.y;
document.getElementById('divToolTip').style.visibility = 'visible';
}
function HideToolTip() {
document.getElementById('divToolTip').style.visibility = 'hidden';
}
HTML:
<span id="spanName" style="font-weight: bold;border: solid 2px red;" onmouseover="javascript:DisplayToolTip();" onmouseout="javascript:HideToolTip();">
THIS IS THE SPAN
</span>
<div id="divToolTip" style="position: absolute; visibility: hidden; z-index: 20; background-color: white; border: solid 1px Blue;">
This is ToolTip Text
</div>
With this I got a JS error that is window.event.x is not defined. Can anyone help me solve this problem?
You should use jQuery in this method
jQuery(".abc").mousedown(function(e){
jQuery('#divToolTip').css('top',(e.pageY)+'px');
jQuery('#divToolTip').css('left',(e.pageX)+'px');
jQuery('#divToolTip').css('visibility', 'visible');
});