I found this nifty code:
<div style="width: 80px; height: 20px; background-color: red;"
onmouseover="document.getElementById('div1').style.display = 'block';">
<div id="div1" style="display: none;" onmouseout="document.getElementById('div1').style.display = 'none';"> Text</div>
</div>
and I've been trying to use to show/hide a div onto of pre-determined divs on Tumblr, but I'm probably using it wrong, will this work or will I have to use another code?
Here is the functionality you need.
html
<div class="divStyle" onmouseover="showHide()" onmouseout="showHide()">
<div id="div1" class="displayNone"> Text</div>
</div>
css
.divStyle { width: 80px; height: 20px; background-color: red; }
.displayNone { display: none; }
javascript
function showHide() {
var obj = document.getElementById('div1');
if(obj.style.display == 'block'){
obj.style.display = 'none';
}
else
{
obj.style.display = 'block';
}
}
Related
I am trying to show buttons in a div when I hover over the div and hide the text inside it, and then hide the buttons but show the div's text. I keep getting the undefined error. What did I do wrong?
Error:
coreScript.js:12 Uncaught TypeError: Cannot set property 'display' of
undefined
at showButton (coreScript.js:12)
at HTMLDivElement.onmouseover (Core.html:33)
coreScript.js:6 Uncaught TypeError: Cannot set property 'display' of
undefined
at hideButton (coreScript.js:6)
at HTMLDivElement.onmouseout (Core.html:33)
function hideButton() {
document.getElementsByClassName('xOne').style.display = 'none';
document.getElementsByClassName('xTen').style.display = 'none';
document.getElementsByClassName('all').style.display = 'none';
document.getElementsByClassName('name').style.display = 'block';
}
function showButton() {
document.getElementsByClassName('xOne').style.display = 'block';
document.getElementsByClassName('xTen').style.display = 'block';
document.getElementsByClassName('all').style.display = 'block';
document.getElementsByClassName('name').style.display = 'none';
}
.main-div {
border: 1px solid black;
min-width: 198px;
max-width: 198px;
min-height: 33px;
max-height: 33px;
font-size: 16px;
vertical-align: middle;
background-color: #fff;
margin: 5px;
line-height: 34px;
overflow: hidden;
text-align: center;
cursor: pointer;
animation: boxShadowNone 0.1s;
box-shadow: none;
}
<div class="main-div" onmouseover="showButton()" onmouseout=" hideButton()" onclick="sell()" id="sellMeat">
<div class="name">SELL MEAT</div>
<div class="xOne" style="display: none;">x1</div>
<div class="xTen" style="display: none;">x10</div>
<div class="all" style="display: none;">All</div>
</div>
<br>
<div class="main-div" onmouseover="showButton()" onmouseout="changeText(this, 'SELL LEATHER', '16px'); hideButton()" onclick="sell()" id="sellLeather">
<div class="name">SELL Leather</div>
<div class="xOne" style="display: none;">x1</div>
<div class="xTen" style="display: none;">x10</div>
<div class="all" style="display: none;">All</div>
</div>
getElementsByClassName returns a HTMLCollection which is an array-like object of all child elements.
Replace getElementsByClassName(class) by querySelector(.class) for right behavior.
You can also do getElementsByClassName(class)[0] to access the element but I think querySelector works well for this particular use-case.
function hideButton(e) {
const element = e.currentTarget;
element.querySelector('.xOne').style.display = 'none';
element.querySelector('.xTen').style.display = 'none';
element.querySelector('.all').style.display = 'none';
element.querySelector('.name').style.display = 'block';
}
function showButton(e) {
const element = e.currentTarget;
element.querySelector('.xOne').style.display = 'block';
element.querySelector('.xTen').style.display = 'block';
element.querySelector('.all').style.display = 'block';
element.querySelector('.name').style.display = 'none';
}
.main-div {
border: 1px solid black;
min-width: 198px;
max-width: 198px;
min-height: 33px;
max-height: 33px;
font-size: 16px;
vertical-align: middle;
background-color: #fff;
margin: 5px;
line-height: 34px;
overflow: hidden;
text-align: center;
cursor: pointer;
animation: boxShadowNone 0.1s;
box-shadow: none;
}
<div class="main-div" onmouseover="showButton(event)" onmouseout=" hideButton(event)" id="sellMeat">
<div class="name">SELL MEAT</div>
<div class="xOne" style="display: none;">x1</div>
<div class="xTen" style="display: none;">x10</div>
<div class="all" style="display: none;">All</div>
</div>
<br>
<div class="main-div" onmouseover="showButton(event)" onmouseout=" hideButton(event)" id="sellLeather">
<div class="name">SELL Leather</div>
<div class="xOne" style="display: none;">x1</div>
<div class="xTen" style="display: none;">x10</div>
<div class="all" style="display: none;">All</div>
</div>
Lakshya Thakur gave you various great solutions. As he said, getElementsByClassName returns a collection; but if you want to apply the style to all elements with a specific class (in case you will have more than one in the future) you can apply the style inside a loop.
function hideButton() {
document.getElementsByClassName('xOne').forEach(
element => element.style.display = 'none';
);
}
I dind't try the code, but this is the logic.
i have a simple function
function myFunction(id) {
var e = document.getElementById(id);
if (e.style.display === "block") {
e.style.display = "none";
}
}
but for some reason, when i call the function, i get an error that says that i cant know what style null is. i want the x button to close the "window" when clicked, but it wont to do that.
css:
body{
background-color: black;
font-family: 'arial';
}
.draggable {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
size: 100%
}
.title {
z-index: 9;
background-color: #f1f1f1;
}
p{
text-align: left;
margin: 2px;
margin-left: 5px;
}
button{
margin-right: 5px;
}
html:
<div id="div1" class="draggable">
<div class="title">
<p><button onclick="myFunction('div1');">X</button>timer</p>
</div>
<iframe src="timer.html" title="description" height="620px" width="1300px"></iframe>
</div>
<div id="div2" class="draggable">
<div class="title">
<p><button onclick="myFunction('div2');">X</button>tetris</p>
</div>
<iframe src="games/tetris.html" title="description" height="650px" width="340"></iframe>
</div>
js
function myFunction(id) {
var e = document.getElementById(id);
if (e.style.display === "block") {
e.style.display = "none";
}
}
You have to set the initial value of style.display in your divs, try this:
function myFunction(id) {
var e = document.getElementById(id);
if (e.style.display == "block") {
e.style.display = "none";
}
}
<input type=text id="input" style="display: block">
<button onclick="myFunction('input')">Click!</button>
I am working on my own website and not good with codes yet. When I am scrolling down I want to appear another content of the navbar and when I am on the top, original navbar is appearing. I want this to be done in pure JavaScript with no libraries or framewokrs. Please see codes below and I know that codes are not organised. I will do that later on.
var nav = document.querySelector("nav");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
window.onscroll = function(){
if(document.body.scrollTop > 70){
hide.style.display = "block";
appear.style.display = "none"
} else {
hide.style.display = "none";
appear.style.display = "block"
}
}
nav{
list-style-type: none;
text-align: center;
background-color: #3FA9A5;
position: sticky;
top: 0;
}
.hide{
font-size: 70px;
font-family: 'Long Cang', cursive;
display: block;
}
.appear{
height: 70px;
display: none;
}
.appear img{
width: 210px;
}
ul{
margin: 0 auto;
padding: 0;
}
body{
margin: 0;
}
.container{
max-width: 1080px;
width: 95%;
margin: 10px auto;
display: grid;
grid-template-columns: 25% 50% 25%;
}
.text{
text-align: center;
}
.profile {
border: 1px solid black;
padding: 0 10px 20px 10px;
}
#main{
width: 100%;
}
.post{
margin-left: 4.165%;
}
#image{
width: 100%;
}
#post-divide{
margin-left: 10px;
margin-right: 10px;
}
.comments{
width: 100%;
margin-top: 68.5px;
padding-bottom: 293.5px;
border: 1px solid black;
}
h2{
text-align: center;
}
.center{
grid-column: 2;
}
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
<title>test</title>
</head>
<body>
<nav>
<ul>
<li class="hide">Unknown</li>
<li class="appear"><img src="cat.png"></li>
</ul>
</nav>
<div class="container">
<div class="col-1">
<div class="profile text">
<img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
<hr>
<p>12 posts</p>
<p>instagram</p>
<button>Subscribe!</button>
</div>
</div>
<div class="col-1">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
<div class="col-1 center">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
</div>
I think I should add something to the JS code but don't know why
Would be thankful if you would advise me how could I write HTML/CSS code so I do not have to create 2 navbars if it is possible
The following instruction:
document.querySelector("hide");
Will query for elements like:
<hide></hide>
Since plain selectors without prefix (div, header, span) will query for the whole element tags, not for classes or attrbitues.
Maybe you meant to query for the class, using the .:
document.querySelector(".hide");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
So you should use class selector
You are using "hide" and "appear" as selectors but they do not exist in your HTML.
Use ".hide" and ".appear" in your querySelector instead.
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear");
Since both navbars have a static data, I would suggest to keep both of them and follow with answers of guys, that suggested to update querySelector param. Or you can hide/show the data inside of navbar (in your case it's only ul element) and leave the whole navbar always visible. So you can put classes appear/hide on ul element instea of navbar and then in JS get them with document.querySelector('.navbar .hide') and document.querySelector('.navbar .appear').
Using framework/library will definitely simplify it.
However, if you still want to have only one navbar in pure js/html/css (or it's data just dynamic) I would probably do like this:
HTML:
<nav class="navbar">
<ul>
<li><img src="cat.png"></li>
</ul>
</nav>
somewhere in JS:
var navbarUl = document.querySelector('.navbar ul');
window.onscroll = function() {
if (document.body.scrollTop > 70) {
navbarUl.innerHtml = '';
navbarUl.appendChild(getTopNavbarHTML);
} else {
navbarUl.innerHtml = '';
navbarUl.appendChild(getNavbarHTML);
}
}
getNavbarHTML and getTopNavbarHTML - will return documentFragment with li elements, see for details https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp
But changing DOM during a scroll event can drastically decrease performance of a web app
I've created 4 containers which can be clicked to reveal content beneath. I would like to show only one hidden div at once. So, if a user clicks another container, all others are hidden. Current I cannot hide any of the containers once they have been clicked. I really appreciate any help :)
JS
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
CSS
html, body { height: 100%; padding: 0 ; margin: 0; }
a { width: 100%; height: 100%; color: #000; display: block; position: absolute; background: #647070; }
.section { width: 49.9%; height: 49.9%; float: left; position: relative; overflow: hidden; }
#div1, #div3 { border-right: 1px solid black; }
#div3, #div4 { border-top: 1px solid black; }
HTML
<div id="div1" class="section">
<div id="festival">
Festival™
</div>
<p>This is the content of Q1</p>
</div>
<div id="div2" class="section">
<div id="register">
Register
</div>
<p>This is the content of Q2</p>
</div>
<div id="div3" class="section">
<div id="connect">
Connect
</div>
<p>This is the Q3 content.</p>
</div>
<div id="div4" class="section">
<div id="forth">
Forth
</div>
<p>This is the Q4 content.</p>
</div>
You could add something like this:
var divsToHide = document.querySelectorAll(".section > div")
for (var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "block";
}
This will loop through each of the .section and show the direct div of it.
Demo
function toggle_visibility(id) {
var divsToHide = document.querySelectorAll(".section > div")
for (var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "block";
}
var e = document.getElementById(id);
if (e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
a {
width: 100%;
height: 100%;
color: #000;
display: block;
position: absolute;
background: #647070;
}
.section {
width: 49.9%;
height: 49.9%;
float: left;
position: relative;
overflow: hidden;
}
#div1,
#div3 {
border-right: 1px solid black;
}
#div3,
#div4 {
border-top: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" class="section">
<div id="festival">
Festival™
</div>
<p>This is the content of Q1</p>
</div>
<div id="div2" class="section">
<div id="register">
Register
</div>
<p>This is the content of Q2</p>
</div>
<div id="div3" class="section">
<div id="connect">
Connect
</div>
<p>This is the Q3 content.</p>
</div>
<div id="div4" class="section">
<div id="forth">
Forth
</div>
<p>This is the Q4 content.</p>
</div>
I have the following code to show and hide a div but if I want to click on the image I can add the class but if I want to remove it by clicking the image then it will open it again. Can anyone explain to me how this works?
https://jsfiddle.net/bmhv3edw/
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(this).addClass('active');
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
You can see that when you clicked on the img, the e.target is <img>, as it don't have class .active, it'll always trigger the false part.
Solution, change
if($(e.target).is('.active')) {
to
if($(this).is('.active')) {
See jsFiddle
You can greatly simplify your logic by using slideToggle() on the current .answer-section-content, and slideUp() on all the rest:
$('.question-text').click(function() {
var answer= $(this).next('.answer-section-content');
answer.slideToggle(300);
$('.answer-section-content').not(answer).slideUp(300);
});
This allows you to remove the ids from the answers and the hrefs from the divs.
$(document).ready(function() {
$('.question-text').click(function() {
var answer= $(this).next('.answer-section-content');
answer.slideToggle(300);
$('.answer-section-content').not(answer).slideUp(300);
});
});
body{ background: black };
.questions{
padding-top: 25px;
padding-left: 170px;
padding-bottom: 25px;
}
.question{
padding: 5px;
font-size: 18px;
font-weight: 100;
color: #ffffff;
}
.answer-section-content {
display:none;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions">
<div class="question">
<div class="question-text">
<img src="images/plus-eclipse.png">Question 1</div>
<div class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
<div class="question">
<div class="question-text">
<img src="images/plus-eclipse.png" />Question 2</div>
<div class="answer-section-content">
<p>Answer 2</p>
</div>
</div>
</div>