I have a code:
<span id="one" onmouseover="AddString()" onmouseout="RemoveString()">First Line
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
document.getElementById("two").innerHTML = 'Second Line';
}
function RemoveString() {
document.getElementById("two").innerHTML = '';
}
</script>
If you hover mouse over the first line,then the second one appears. If you put mouse out of the first line (and do that slowly enough), then the second line disappears.
What do I need: after you have hovered over the first line and the second line has appeared, then the second line must disappear only if the cursor is outside the first OR second line. Which means, that if move mouse from the first line to the second line, the latter should not disappear. At the moment it does.
I have tried the following:
<span id="one" onmouseover="AddString()">First Line
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
var element = document.getElementById("one");
element.removeEventListener("mouseover", AddString);
document.getElementById("two").innerHTML = 'Second Line';
element.addEventListener("mouseout", RemoveString, true);
}
function RemoveString() {
var element = document.getElementById("two");
element.removeEventListener("mouseout", RemoveString);
element.innerHTML = '';
element.addEventListener("mousever", AddString, true);
}
</script>
and was advised to do the following:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#one:hover+#two,#two:hover {
display: block;
}
#two{
display: none;
}
</style>
</head>
<body>
<span id="one">First Line</span>
<span id="two">Second Line</span>
</body>
</html>
No help. All those variants do not work. What is the solution?
You can use your last example, just change the <span> tags to <div> tags and it works no problem. Or if you want to keep them as <span> tags you can add #one,#two { display:block; } to your css to make them block items (so they will act like div tags anyway).
You can also limit the width of the div to ensure that it doesn't appear when you hover just anywhere on the line.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#one,#two { width: 100px; background-color: beige; }
#one:hover+#two,#two:hover {
display: block;
}
#two{
display: none;
}
</style>
</head>
<body>
<div id="one">First Line</div>
<div id="two">Second Line</div>
</body>
</html>
Related
So I made a display: block when the mouse hovers over a certain , and display: none when the cursor moves away. '
A div I have made that displays only when the mouse hovers over a certain link
the div has a display: none when the mouse moves away from the link
this is the code I have used
HTML:
Login/Sign Up
JavaScript:
function LoginShow (){
document.getElementById("log").style.display="block";}
function LoginHide(){
document.getElementById("log").style.display="none";}
But I can't click on the div because as soon as I try to move my cursor to the buttons in the div, the div goes to display none as I have to move my cursor away from the link.
I am new to JS, but I have seen other web pages do it, what's the way for the div to display on mouseover and can be clicked on and goes to display: none only when I move away from the div.
I have also tried
Login/Sign Up
<div class="login" id="log" onmouseover="LoginShow()"
onmouseout="LoginHide()">
It kind of solves the problem, but for the div to go to display none I have to move the cursor away from the div, if the move the cursor away from the anchor tag, it doesn't go away.
You can do it without any js, take a look at below snippet.
let target = document.getElementById('target');
function showLog() {
target.style.display = 'block';
}
function hideLog() {
target.style.display = 'none';
}
.wrapper {
background: #eee;
}
.wrapper .inner-content {
display: none;
position: absolute;
background: red;
}
<div class="wrapper" onmouseover="showLog()" onmouseout="hideLog()">
I am the wrapper
<div class="inner-content" id="target">
<p>Here is some content inside wrapper element</p>
</div>
</div>
i think it can be done with css selectors as you can make other div as the switch to change other elements.
Reference for css selectors
And i think your div is part of button which is the reason why they disappear. if that is the case then you should try giving your button "position:relative" and then your div element the "position:absolute". it might work.
Edited:
here is what i tried, its not appealing but just look at it, if it is what you are trying to achieve.
function LoginShow (){
document.getElementById("log").style.display="block";
}
function LoginHide(){
document.getElementById("log").style.display="none";
}
.container{
width:400px;
height:400px;
background:lightgreen;
border:1px red solid;
}
#log{
background:#efefef;
padding:20px;
width:100px;
text-align: center;
display:none;
}
.log>button{
padding:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div class="container">
Login/Sign Up
<div id="log" onmouseover="LoginShow()" onmouseout="LoginHide()"><button>Sign Up</button></div>
</div>
<script src="main.js"></script>
</body>
</html>
I need to make a button that changes the text inside it when the cursor is over it, and changes it back when the cursor leaves the box.
I have tried on VScode with "document.getElementById().innerHTML" but it just changes the text when the cursor goes on and it doesnt go back to the original text.
button {
background-color: green;
border-color: white;
border-radius: 10px;
align-self: center;
}
body {
background-color: black;
}
h1 {
color:green;
text-align: center;
}
p {
color: chartreuse;
font-family: Verdana;
font-size: 12px;
}
button:hover{
background: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="website.css">
</head>
<body>
<h1>Web Page</h1>
<!-- Buttons -->
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click to display Date and Time</button>
<p id="demo"></p>
<button type="button"
onmouseover="this.innerHTML = Date()"
onmouseout="document.getElementById">What time is it</button>
<script>
var x = "What time is it";
document.getElementById("time").innerHTML = x;
</script>
You can use mouseenter and mouseleave event and then can change innerHTML of the button.
const btnEle = document.getElementById("btn");
btnEle.addEventListener('mouseenter', e => {
btnEle.innerHTML = "Save";
});
btnEle.addEventListener('mouseleave', e => {
btnEle.innerHTML = "Submit";
});
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div>
<button id="btn">Submit</button>
</div>
</body>
</html>
How I would do it is to have two <span>'s in my button. The first <span> will contain the text you want to show by default. The second <span> will contain the text you want to show on hover. This span is hidden by default.
Then, you could add an event listener to your button. On mouseover, hide the default text and show the span containing the hover text. In a mouseleave event listener, just do the opposite.
HTML:
<button id="myid">
<span class="default-text">Text 1</span>
<span class="hover-text" style="display: none;">Text 2</span>
</button>
JS:
var button = document.getElementById('myid')
button.addEventListener('mouseover', function() {
this.querySelector('.hover-text').style.display="block";
this.querySelector('.default-text').style.display="none";
});
button.addEventListener('mouseleave', function() {
this.querySelector('.default-text').style.display="block";
this.querySelector('.hover-text').style.display="none";
});
how i can create a javascript code to add class name to specific divs only
for Exapmle : i want to add a class_name to from div5 to the end of all divs ?
try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>Click the "Try it" button to add the "mystyle" class to the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
<script>
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
</script>
</body>
</html>
If you're looking to add a class name from one div to others, I would recommend using JQuery. This can be done like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function changeColor(){
$( document ).ready(function() {
$("div").addClass("work");
});
}
</script>
<style>
.work {
color: red
}
</style>
<div style="width: 100%" class="work"><h1>Hello</h1></div>
<div style="width: 100%" class=""><h1>Hello</h1></div>
<button onclick="changeColor()">Change second color by inserting class!</button>
function applyClass(elem_position, tagname, classname)
{
var div_elems = document.querySelectorAll(tagname);
for (var i = elem_position-1; i < div_elems.length;i++)
{
div_elems[i].className=classname;
}
}
Usage
Applies class some_class to div elements starting from position 3
applyClass(3,'div','some_class');
I'm working on a Joomla website. Now I need a slider to change when someone hovers over a text link. I'm using some javascript. It's working on the first div with the id=slider, but not on the second div with id=slider in the article. Can someone tell me why it's doing this?
I'm using the following code in a custom code module for Joomla.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css" media="screen">
<!--
.boxVisible {
background-color: #eee;
display: block;
padding: 5px;
float: left;
border: solid 1px #000040
}
.boxHidden {
display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function showHide(slider) {
theBox = document.getElementById(slider);
if (theBox.className == "boxVisible") {
theBox.className = "boxHidden";
} else {
theBox.className = "boxVisible";
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<p>More</p>
</body>
</html>
This is my article:
<div id="slider" class="boxVisible">{loadposition slider1}</div>
<div id="slider" class="boxHidden">{loadposition slider2}</div>
<p><br /><br /><br /> {loadposition java}</p>
IDs must be unique identifiers. For multiple elements, use class names.
Id's should be unique on a page.
You could wrap your slider divs in a wrapper div and use that as basis for iterating through your sliders something like this.
HTML:
<div id="sliders">
<div class="boxVisible"></div>
<div class="boxHidden"></div>
</div>
Javascript:
function showHide2(slider) {
var sliders = document.getElementById(slider).getElementsByTagName("div");
for (s in sliders) {
if (sliders.hasOwnProperty(s)) {
if (sliders[s].className == "boxVisible") {
sliders[s].className = "boxHidden";
alert('changed visible');
} else if (sliders[s].className == "boxHidden") {
sliders[s].className = "boxVisible";
alert('changed hidden');
}
}
}
}
showHide2("sliders");
the dom elements can't have the same id's! if you give the same id to the multiple dom elements, javascript will take only the first one.
I'd like to display a div on a webpage when a user clicks on a button.
Does someone know how to do this ?
My code, so far, is :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />
</head>
<body>
<input id="text" type="text" size="60" value="Type your text here" />
<input type="button" value="When typing whatever text display the div balise on the page" onclick="check();" />
<script type="text/javascript">
function check() {
//Display my div balise named level0;
}
</script>
</body>
</html>
Thanks,
Bruno
EDIT: All my code (I've erased it because it was too long and not very clear)
You can use document.createElement("div") to actually make the div. Then you can populate the div using innerHTML for the text. After that, add it to the body using appendChild. All told, it can look like this:
function check() {
var div = document.createElement("div");
div.innerHTML = document.getElementById("text").value;
document.body.appendChild(div);
}
This will add a div every time the button is pressed. If you want to update the div each time instead, you can declare the div variable outside the function:
var div;
function check() {
if (!div) {
div = document.createElement("div");
document.body.appendChild(div);
}
div.innerHTML = document.getElementById("text").value;
}
If you have the div already in the page with an id of "level0", try:
function check() {
var div = document.getElementById("level0");
div.innerHTML = document.getElementById("text").value;
}
A quick search on google gave me this example:
Demo of hide/show div
The source-code for that example is:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html>
<head>
<title>Demo of Show hide div layer onclick of buttons</title>
<META NAME="DESCRIPTION" CONTENT="Displaying and hiding div layers through button clicks">
<META NAME="KEYWORDS" CONTENT="Show layer, hide layer, display div, hide div, button on click, button on click event, div property, div style set">
<style type="text/css">
div {
position: absolute;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
<br><br>
</body>
</html>
Paste this code somewhere in your body
<div id="myDiv" style="display:none">
Hello, I am a div
</div>
Add this snippet into your check() function to display the otherwise-hidden content.
document.getElementById("myDiv").style.display = "block";
You could also change the div content programmatically thus:
document.getElementById("myDiv").innerHTML = "Breakfast time";
... would change the text to 'Breakfast time'.
You might want to look into jquery, it'll make your life 100 times easier.
Jquery is a javascript library (script) that you include and it allows you to manipulate the DOM very easily.
Start by adding the latest Jquery to your head which will allow you to use something like $(document).ready( )
The function inside .ready( fn ) is a callback function; it get called when the document is ready.
$("#lnkClick") is a selector (http://api.jquery.com/category/selectors/)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#lnkClick").click( function() {
$("#level0").attr("style", "display: block;width: 100px; height: 100px; border: solid 1px blue;");
});
});
</script>
</head>
<body>
<div id="level0" style="display:none;">
</div>
Click me
</body>
</html>
Of course this code can be made cleaner. You want to check: http://api.jquery.com/click/
There are plenty of examples.
Best of luck with Jquery!
you really should be using jquery , there's a little bit of a learning curve but once you get it, developing web apps is much easier.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function() {
$("#show_div_button").click(function() {
$("#div_to_show").show();
return false;
});
});
</script>
</head>
<body>
Click Me to Show the Div
<div style="display:none" id="div_to_show">I will be shown when the link is clicked</div>
</body>
</html>