I'm trying to create my own alert window that:
1.shows when I click a span that calls the function().
2. closes when I click the 'got it' button.
3. changes the text of span with the text provided.
But it's not working. It looks fine, but not working. Why?
I tried making it ID instead of CLASS, making it A...
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<style> .tooltip:hover {color: green; cursor: pointer; font-weight: bold;}</style>
<!-- the text I click to change the messagebox text-->
<span class="tooltip" onclick="alert_info('INFO')">Static</span>
<!-- the messagebox-->
<div class="popup_info" style=" top: 35%; left: 35%; border-radius: 10px; border:3px groove #d1ded6; height: 150px;
width: 400px; position: fixed; background-color: #c5d1c5; font-size: 16px; font-family: sans-serif; display: none;">
<br>
<center><span class="light_it">Information about the clicked button;</span></center><br><br><br><br>
<center><button class="close-info" onclick="this.style.display = none;">Got it</button></center>
</div>
<!--the script that changes the text of the messagebox and shows it to me-->
<script>
function alert_info(text){
//change the span's text:
document.getElementByClassName('light_it').innerHTML = text;
//display the window containing the span of text:
document.getElementByClassName('popup_info').style.display = "block";
}
</script>
</BODY>
</HTML>
I want it to work properly: change the text of the window, show the window and close it when I click the button to close (display:none';).
You can see why by inspecting the console
You can fix that by replacing
document.getElementByClassName('light_it').innerHTML = text; by document.getElementsByClassName('light_it')[0].innerHTML = text;
and
document.getElementByClassName('popup_info').style.display = "block";
by
document.getElementsByClassName('popup_info')[0].style.display = "block";
Note that you also have an issue on the "close-info" button: onclick="this.style.display = 'none';", missing quotes around none
Related
I have recently started learning DOM and I have seen some examples of it, however, I'm trying to make a function (getting id) which would trigger after being double clicked.
This is the CSS, HTML and JavaScript codes I'm using.
function getID() {
var x = document.getElementsByClassName("blueblock")[0].id;
document.getElementById("xx").innerHTML = x;
.blueblock {
width: 30%;
height: 50vh;
float: left;
background-color: lightblue;
text-align: justify;
overflow: auto;
}
<p id="xx" ondblclick="getID()">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
How should I change my code so that clicking on any part of the blueblock would trigger the function and output the id value?
This happens because the <p> tag you have does not have a content. If you would add text to the <p> and double click the text it will work.
The solution for this is to use div instead of p:
function getID() {
var x = document.getElementsByClassName("blueblock")[0].id;
document.getElementById("xx").innerText = x;
}
.blueblock {
width: 30%;
height: 50vh;
float: left;
background-color: lightblue;
text-align: justify;
overflow: auto;
}
<div id="xx" ondblclick="getID()">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
</div>
You need to have valid html element nesting, and you should probably accomodate for more than one of these sections. Here is an example.
function getID(el) {
var x = el.getElementsByClassName("blueblock")[0].id;
document.getElementById(el.id).innerHTML = x;
}
.blueblock {
width:30%;
height:50vh;
float:left;
background-color:lightblue;
text-align:justify;
overflow:auto;
}
<div id="xx" ondblclick="getID(this)">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
</div>
<div id="xx2" ondblclick="getID(this)">
<div class="blueblock" id="bluebl2">
<p>Just some more text inside of the block.</p>
</div>
</div>
The first p element is basically terminated by the next div element because a p (paragraph equivalent) cannot contain divs. Hence the double click code is not seen because effectively the first p element has no content.
Replacing that p element by a div, and terminating correctly, means that anything within the div will lead to the double click being seen.
However, note that ondblclick is not supported by all browsers (see https://caniuse.com/?search=ondblclick) so we replace that by adding an event listener to the element using Javascript.
Here is the complete snippet. Note that when you have double clicked the innerHTML gets replaced and therefore if you doubleclick again you will see an error in your browser's console as the element cannot be found - it is no longer there.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>
function getID() {
var x = document.getElementsByClassName("blueblock")[0].id;
document.getElementById("xx").innerHTML = x;
}
</script>
<style>
.blueblock {
width: 30%;
height: 50vh;
float: left;
background-color: lightblue;
text-align: justify;
overflow: auto;
}
</style>
</head>
<body>
<div id="xx">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
</div>
<script>
document.getElementById('xx').addEventListener('dblclick',getID);
</script>
</body>
</html>
I have a large document where this is implemented A LOT. I am hoping there is a way to simply edit the JavaScript somehow, so I have less editing.
Basically, clicking on a line of text opens the hidden text beneath it. You can close and re-hide the text by clicking on that same line of text... THAT is the ONLY way I want it to operate. As it is now, you can click on the hidden text anywhere and that will also close it. That is becoming a problem because I have interactive content in the hidden text area, and an accidental click in the wrong area will collapse it all.
.results_container {
cursor: pointer;
line-height: 21px;
}
.hidden>span {
display: none;
}
.visible>span {
cursor: default;
display: block;
line-height: 18px;
background: #f5f5f5;
padding: 15px;
margin: 10px 0px 32px 25px;
}
<div class="results_container">
Click Me to show hidden content
<span>I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.</span>
</div>
Full Fiddle
NOTE: On the fiddle, my JavaScript is at the end, under the pasted-in jQuery... sorry, that's the only way I could get it to work.
See the fiddle or below snippet:
https://jsfiddle.net/ejbdb128/6/
By checking against "this" in regards to the parent selector, you can filter out when you click on the child "span" element. I should note a caveat to this is if you click anywhere outside the "span" and in the div element, it will hide the span, even if you don't click just on the "Click Me" text..
/* SCRIPT for HIDDEN DESCRIPTIONS for RESULTS */
$(document).ready(function() {
"use strict";
$('.results_container').addClass("hidden");
$('.results_container').click(function(e) {
if (e.target != this) {
return false;
}
var $this = $(this);
if ($this.hasClass("hidden")) {
$(this).removeClass("hidden").addClass("visible");
} else {
$(this).removeClass("visible").addClass("hidden");
}
});
});
.results_container {
cursor: pointer;
line-height: 21px;
}
.hidden>span {
display: none;
}
.visible>span {
cursor: default;
display: block;
line-height: 18px;
background: #f5f5f5;
padding: 15px;
margin: 10px 0px 32px 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results_container">
Click Me to show hidden content
<span>I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.</span>
</div>
Add the click handler to to an external event and use that to hide . By the way, jQuery has built in functions hide and toggle for hiding elements.
HTML:
<div class="results_container">
<span class="clickme">Click Me to show hidden content</span>
<span class="hideme">
I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.
</span>
Javscript:
$(document).ready(function(){
"use strict";
$('.hideme').hide();
$('.clickme').on('click', function() {
$('.hideme').toggle();
});
});
Fiddle here: https://jsfiddle.net/fLj6c4q7/
I’m developing a JavaScript code. When I click on the “Click me” button, a pop-up message will display with a message and “ok” button. When I click on the “ok” button on the pop-up message, it will close.
Now I want to do is when I click on the “ok” button on the pop-up window, it should close and I want to display another pop-up window with another button. If I click on that button, the second pop-up message should also be closed.
This is my code up to now.
<!DOCTYPE html>
<html>
<head>
<style>
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: relative;
z-index: 3;
margin: 150px auto 0px auto;
width: 500px;
height: 300px;
background: #FFF;
color: #000;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
</style>
<script>
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .4;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
</script>
</head>
<body>
<div id="overlay"></div>
<div id="specialBox">
<p><center>Great job<center></p>
<center><button onmousedown="toggleOverlay()">Ok</button><center>
</div>
<div id="wrapper">
<p><center>Please click the button<center></p>
<button onmousedown="toggleOverlay()">Click me</button>
</div>
</body>
</html>
JsFiddle Demo
Basically just create another specialBox, say specialBoxTwo and you can have a function to toggle that item. toggleOverlayTwo(). Your first button would call both toggles (the first one to close the first overlay, second one to open the second overlay):
<button onmousedown="toggleOverlay();toggleOverlayTwo()">Ok</button>
And the second overlay only needs to toggle the second item:
<button onmousedown="toggleOverlayTwo()">Ok</button>
Fiddle Example. Note this is rather a "quick and dirty" example. You can clean this up but having perhaps a single toggle functions that takes a parameter and use classes for each speicalBox.
Here is a fiddle example with only using a single toggleOverlay(item) function that takes a parameter.
What I have:
8 numbered boxes in a row.
I'm not allowed to use jQuery.
What I want to do:
When the user hovers a numbered box, text changes dynamically inside a div element depending on which box is being hovered on.
Example:
If user hovers over Box 1, the text inside the div element says "Hello"
If user hovers over Box 2, the text inside the div element (same as before) says "World"
Edit: the closest I have is text changing if the user clicks on a button: http://jsfiddle.net/pVN2a/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BluePad</title>
<style type="text/css">
#button1 {
background-color:red;
display:inline-block;
}
#button2 {
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="button1">
Click 1
</div>
<div id="button2">
Click 2
</div>
<div id="textResults">
Click on a button to change text
</div>
<script>
// when #button1 is clicked...
document.getElementById("button1").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Hello World";
});
// when #button2 is clicked...
document.getElementById("button2").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Just Clicked #button2";
});
</script>
</body>
</html>
Am I supposed to use .onMouseEvent in conjunction with some sort of event listener? Sorry, I'm totally new to this. :(
Edited to fit OP's request to change content of a singular box based on hover of other boxes. Using the general sibling combinator, we can select a div with the class results when a box is hovered.
JSFiddle Demo
HTML
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="results"></div>
</div>
CSS
.box1, .box2 { display: inline-block; width: 100px; height: 100px; background: #ccc; }
.results {
width: 250px;
height: 100px;
background: #ccc;
margin-top: 4px;
}
.box1:hover ~ div.results:before {
cursor: pointer;
content: "Hello";
}
.box2:hover ~ div.results:before {
cursor: pointer;
content: "World";
}
Using the General Sibling Combinator.
How about using onmouseover, that's not jQuery.
I'm using Telerik Radeditor which is rich text area and the editor content is an iframe, something like below:
<iframe frameborder="0"
src="javascript:'<html></html>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;"
title="hello world"
id="contentIframe"></iframe>
My goal is to display the "hello world" tooltip when a user mouse hover the iframe area.
As you can see I put "title" attribute but it is not showing up.
To mimic the tooltip behavior I tried placing overlay div and title which worked but then I lost mouse control because of the overlay div.
I also desperately tried putting title in the iframe body but then I had to click inside of iframe to make it happen which is not the solution.
var iframe_html = $(wrapper).find("iframe").contents().find("html");
$(iframe_html).prop("title", "hello my tooltip 1");
var iframe = $(wrapper).find('iframe');
$(iframe).prop("title", "hello my tooltip 2");
var iframebody = $(iframe).contents().find('body');
$(iframebody).prop("title", "hello my tooltip 3");
I'm using jQuery UI 1.8.16 which does not come with Tooltip capability thus that cannot be an option..
Could anyone help me figure how to show the tooltip?
You are able to assign a title to the iframe but you wont be able to see it in the iframe.. Change the frameborder to "2" and move your cursor to it.. there you go..Title appears...
To see the title on iframe you must set the title of iframe content and not the iframe itself..
just like i've done below..
<iframe frameborder="0"
src="javascript:'<div id=\'hey\' title=\'Hello World\'>Helllo World</div>';"
style="width: 100%; height: 100%; margin: 0px; padding: 0px;position:relative;"
title="hello world"
id="contentIframe">
</iframe>
Alternatively..
using jQuery
$(document).ready(function () {
$("#contentIframe").contents().find("body").attr('title','Hello World');
});
This is a fiddle for your reference..
I just added an iframe to the div in the w3 schools tooltip tutorial (TryIt editor here) and it worked perfectly. To my surprise.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #994444;
color: #ffffff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Proof of Concept</h2>
<p>This, cobbled from the W3 schools tutorial on CSS tooltips. I added an Iframe inside the div; one may still interact therewith, yet enjoy full tooltipitude.</p>
<p> So, move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Hello World</span>
<iframe height="600px" src="https://imgur.com/a/71J1gQZ" width="600px" ></iframe>
</div>
</body>
</html>
See it live here :
https://faustsstudy.blogspot.com/p/blog-page_14.html
but it requires support for data URIs.