We Keep Coding

How to make a text disappear for mouseout in JS?

I was looking for an answer all over the website but nothing helps, I hope you guys will find the solution for me because it seems I can't :D I am really-really new at JS (and JQuery) so my code may seem dumb/too simple for lots of you
I have 5 different img-s (1 class for all, 1 container for the 5 imgs) and 5 different span-s (5 different ID-s and 1 class).
On mouseover I did 5 functions so when I move my mouse over the img the proper text appears. Great.
But I would like to make the text disappear on mouseout.
I am sure I can solve it calling that one class (.text), but I don't know how.
Any ideas? :)
I am over the "toggle", "for", "if" orders but nothing seems to help.
Thank you in advance :)
function aboutme() {
document.getElementById("aboutme-text").style.visibility = "visible";
}
function classtypes() {
document.getElementById("classtypes-text").style.visibility = "visible";
}
.text {
color: #dfdfdf;
text-shadow: 0px 0px 10px #e75b00;
font-size: 36px;
font-weight: 800;
display: inline;
}
#aboutme-text {
margin-left: 70px;
visibility: hidden;
}
#classtypes-text {
margin-left: 280px;
visibility: hidden;
}
<div id="DT1" onMouseOver="aboutme()" onMouseOut="disappear()">
<img src="assets/images/aboutme-1.jpg" alt="RÓLAM" class="desktopimg">
</div>
<div id="DT2" onMouseOver="classtypes()" onMouseOut="disappear()">
<img src="assets/images/classtypes-1.jpg" alt="ÓRATÍPUSOK" class="desktopimg">
</div>
<span class="text" id="aboutme-text">RÓLAM</span>
<span class="text" id="classtypes-text">ÓRATÍPUSOK</span>

Is this what you're attempting?
I simply added your disappear function and simply applied hidden to each div.
Run the snippet below.
function aboutme() {
document.getElementById("aboutme-text").style.visibility = "visible";
}
function classtypes() {
document.getElementById("classtypes-text").style.visibility = "visible";
}
function disappear() {
document.getElementById("classtypes-text").style.visibility = "hidden";
document.getElementById("aboutme-text").style.visibility = "hidden";
}
.text {
color: #dfdfdf;
text-shadow: 0px 0px 10px #e75b00;
font-size: 36px;
font-weight: 800;
display: inline;
}
#aboutme-text {
margin-left: 70px;
visibility: hidden;
}
#classtypes-text {
margin-left: 280px;
visibility: hidden;
}
<div id="DT1" onmouseover="aboutme()" onmouseout="disappear()">
<img src="assets/images/aboutme-1.jpg" alt="RÓLAM" class="desktopimg">
</div>
<div id="DT2" onmouseover="classtypes()" onmouseout="disappear()">
<img src="assets/images/classtypes-1.jpg" alt="ÓRATÍPUSOK" class="desktopimg">
</div>
<span class="text" id="aboutme-text">RÓLAM</span>
<span class="text" id="classtypes-text">ÓRATÍPUSOK</span>

In your code was missing disappear() function.
In the same way as I did the "disappear()" function, you can also make the function to display the text. In a sense, you can use an argument. The argument is the ID of the element you want to hide
function aboutme() {
document.getElementById("aboutme-text").style.visibility = "visible";
}
function classtypes() {
document.getElementById("classtypes-text").style.visibility = "visible";
}
function disappear(x) {
document.getElementById(x).style.visibility = "hidden";
}
.text {
color: #dfdfdf;
text-shadow: 0px 0px 10px #e75b00;
font-size: 36px;
font-weight: 800;
display: inline;
}
#aboutme-text {
margin-left: 70px;
visibility: hidden;
}
#classtypes-text {
margin-left: 280px;
visibility: hidden;
}
<div id="DT1" onMouseOver="aboutme()" onMouseOut="disappear('aboutme-text')">
<img src="assets/images/aboutme-1.jpg" alt="RÓLAM" class="desktopimg">
</div>
<div id="DT2" onMouseOver="classtypes()" onMouseOut="disappear('classtypes-text')">
<img src="assets/images/classtypes-1.jpg" alt="ÓRATÍPUSOK" class="desktopimg">
</div>
<span class="text" id="aboutme-text">RÓLAM</span>
<span class="text" id="classtypes-text">ÓRATÍPUSOK</span>
It will be more convenient if you use "EventListener"
This script puts "EventListener" on all elements with class link
In the data-id attribute, enter the ID of the target element.
No need to change the script... just enter the attributes of the elements and the script will do everything else itself
Example:
var links = document.getElementsByClassName('link');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("mouseover", function () {
var id = this.getAttribute('data-id');
document.getElementById(id).style.visibility = "visible";
});
links[i].addEventListener("mouseout", function () {
var id = this.getAttribute('data-id');
document.getElementById(id).style.visibility = "hidden";
});
}
.text {
color: #dfdfdf;
text-shadow: 0px 0px 10px #e75b00;
font-size: 36px;
font-weight: 800;
display: inline;
}
#aboutme-text {
margin-left: 70px;
visibility: hidden;
}
#classtypes-text {
margin-left: 280px;
visibility: hidden;
}
<div id="DT1" class="link" data-id="aboutme-text">
<img src="assets/images/aboutme-1.jpg" alt="RÓLAM" class="desktopimg">
</div>
<div id="DT2" class="link" data-id="classtypes-text">
<img src="assets/images/classtypes-1.jpg" alt="ÓRATÍPUSOK" class="desktopimg">
</div>
<span class="text" id="aboutme-text">RÓLAM</span>
<span class="text" id="classtypes-text">ÓRATÍPUSOK</span>

I strongly suggest to delegate
I added the class hide to the spans and wrapped the links in a div
I use the toggle method of the classList to set or remove the hide class
const overout = e => { // one function to rule them all
let tgt = e.target; // the `e` passed is the event(s) listened to. Here mouseover AND mouseout
if (tgt.classList.contains("desktopimg")) tgt = tgt.closest(".link"); // if what is mousedover is the image, point to the div
if (tgt.classList.contains("link")) { // here we have the div in the tgt - we check it is class="link"
document.getElementById(tgt.dataset.id).classList.toggle("hide", e.type === "mouseout"); // toggle the class using the test for event type - mouseout, add class "hide" mouseover remove it
}
};
["mouseover","mouseout"] // the events we are interested in - we could add touchstart for mobiles for example
.forEach(eventType => document.getElementById("container") // the container we want to monitor
.addEventListener(eventType, overout)); // add the listener for the eventType
.text {
color: #dfdfdf;
text-shadow: 0px 0px 10px #e75b00;
font-size: 36px;
font-weight: 800;
display: inline;
}
#aboutme-text {
margin-left: 70px;
}
#classtypes-text {
margin-left: 280px;
}
.hide {
display: none;
}
<div id="container">
<div id="DT1" class="link" data-id="aboutme-text">
<img src="assets/images/aboutme-1.jpg" alt="RÓLAM" class="desktopimg">
</div>
<div id="DT2" class="link" data-id="classtypes-text">
<img src="assets/images/classtypes-1.jpg" alt="ÓRATÍPUSOK" class="desktopimg">
</div>
</div>
<span class="text hide" id="aboutme-text">RÓLAM</span>
<span class="text hide" id="classtypes-text">ÓRATÍPUSOK</span>

Change the HTML tag on click of a button

I am creating a customer form for a project, and while I display them i want the user to be able to click on a button to edit the customer's data.
Here is the thing I need:
<span>Customer_name</span>
<span>Customer_surname</span>
<span>...</span>
<button>Click me to turn spans into inputs</button>
When the user click on the button, I want the spans to turn into inputs.
Any help will be apreciated!

Do you want like this?
HTML
<div class="customerdata">
<span>Customer_name</span>
<span>Customer_surname</span>
<span>...</span>
<button class="editbtn">Click me to turn spans into inputs</button>
</div>
js
$(document).ready(function (){
$(document).on("click",'.editbtn',function (){
$(this).closest(".customerdata").find('span').attr("contenteditable","true");
});
});
fiddlelink

If you want to do it in native javascript..
Hope it helps
var elems = document.querySelectorAll("#span-container > div");
document.getElementById("toggle-btn").addEventListener('click', function(){
for(var i=0; i< elems.length; i++) {
if(elems[i].firstElementChild.className.indexOf("see") === -1) {
elems[i].firstElementChild.className = elems[i].lastElementChild.className += "see";
elems[i].lastElementChild.value = elems[i].firstElementChild.innerText;
} else {
elems[i].firstElementChild.className = elems[i].lastElementChild.className = "";
elems[i].firstElementChild.innerText = elems[i].lastElementChild.value;
}
}
})
* {
padding: 0;
margin: 0
box-sizing: border-box;
}
#span-container > div {
width: 200px;
height:30px;
margin: 5px;
}
#span-container > div span{
display: block;
width: 100%;
height: 100%;
}
#span-container > div input {
height: 100%;
width: 100%;
display: none;
}
#span-container > div span.see {
display: none;
}
#span-container > div input.see {
display: block;
}
button {
padding: 4px 2px 6px;
border-radius: 2px;
background-color: #fff;
box-shadow: none;
border: 0;
cursor: pointer;
min-width: 75px;
}
<div id="span-container">
<div>
<span>Customer_name</span>
<input type="text" />
</div>
<div>
<span>Customer_surname</span>
<input type="text" />
</div>
<div>
<span>Customer_surname</span>
<input type="text" />
</div>
</div>
<button id="toggle-btn">Toggle</button>

Check Here
$('button').click(function()
{
$('span').each(function()
{
$(this).context.innerHTML="";
$(this).context.innerHTML='<input type= text id = textBox></input>';
})
});

How to make slideToggle dynamic in JQuery

I have a page where multiple div and within each div there is a option to click and toggle the information, I am able to create by defining different IDs of DIV but I think that can be done somehow dynamically, here is what I have created in JSFiddle
CSS
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
HTML
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
JQuery
$('#button1').click(function () {
$("#content1").slideToggle(200);
});
$('#button2').click(function () {
$("#content2").slideToggle(200);
});

Check this:
$('.boxwrap > a').click(function () {
$(this).next().slideToggle(200);
});
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>

The previous answers rely on the fact that the DOM is going to remain the same and the next() element after the button will always be the content div.
For a more robust solution, I would add a class to the buttons in the boxwrap(i.e. .boxbtn) and a class to the content divs (i.e. boxcontent) and then I would do something like the following:
$('.boxbtn').click(function () {
$(this).closest('.boxwrap')..find('.boxcontent').slideToggle(200);
});

Try this way,
It's better to specify the element with it's parent on which you're calling a click event.
$('.boxwrap > a').click(function(){
$(this).next('div').slideToggle(200);
});

Here with 2 options
using relative attribute value
using finding relative don element
/*$('.toggle_link').click(function () {
$($(this).data('toggle')).slideToggle(200);
});
OR
*/
$('.toggle_link').click(function () {
$(this).parent().find('.noDisplay').slideToggle(200);
});
.boxwrap{float:left; width:200px; height:250px; border:1px solid #ccc; margin:0 5px 0 0; text-align:center; box-sizing:border-box; padding:10px;}
.boxwrap_inner{float:left; width:100%; background:#ddd; padding:5px 0; text-align:center;}
.noDisplay{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>

Toggle visibility of 2 divs with 2 buttons

I am having issues with my code
I am trying to show 1 div (show_1) by default and then hide it and show a second div (show_2) when button 2 is clicked. And then when button 1 is clicked hide show_2 and show show_1 again
https://jsfiddle.net/mgzurjgL/4/
It is not working though, nothing happens when I click either buttons.
function switch_div(show_1, show_2) {
var a = document.getElementById(show_1);
var a2 = document.getElementById(show_2);
if (a.style.display == 'block') {
a.style.display = 'block';
a2.style.display = 'none';
} else {
a.style.display = 'none';
a2.style.display = 'block';
}
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div('show_1', 'show_2');">
1
</div>
<div class="button" onclick="switch_div('show_1', 'show_2');">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>

You had your settings wrong in JSFiddle, you need to run the script in the head not onload. Also you passed in the same parameters twice. Also why dont you try something simpler like this.
https://jsfiddle.net/mgzurjgL/5/
function switch_div(show) {
document.getElementById("show_"+show).style.display = "block";
document.getElementById("show_"+((show==1)?2:1)).style.display = "none";
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div(1);">
1
</div>
<div class="button" onclick="switch_div(2);">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>

Two items: script placement and a typo. Working version at JSFiddle, tested in Google Chrome.
The script has to run before the divs. In the JSFiddle Javascript settings, I changed "Load Type" to "No wrap - in <head>." This way the switch_div function exists when the divs are loaded.
There was a typo:
if (a.style.display == 'block')
should be
if (a.style.display == 'none')
Otherwise you are setting block display on an element that's already block :) .
Edit: This code still doesn't do what you appear to want, because the function you have written toggles the div visibility regardless of which button is pressed. What you really want is in this fiddle:
<div class="button" onclick="switch_div('show_1', 'show_2', true);">
and
<div class="button" onclick="switch_div('show_1', 'show_2', false);">
together with
function switch_div(show_1, show_2, should_show_1) {
var a = document.getElementById(show_1);
var a2 = document.getElementById(show_2);
if(should_show_1) {
a.style.display = 'block';
a2.style.display = 'none';
}
else {
a.style.display = 'none';
a2.style.display = 'block';
}
}
That way you get only the div you want.

You need to switch the statements in if-else or change the condition in the if to "if (a.style.display !== 'block') "
When a.style.display is 'block' then you have to set it to 'none' to hide it.
function switch_div(show_1, show_2) {
var a = document.getElementById(show_1);
var a2 = document.getElementById(show_2);
if (a.style.display !== 'block') {
a.style.display = 'block';
a2.style.display = 'none';
} else {
a.style.display = 'none';
a2.style.display = 'block';
}
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div('show_1', 'show_2');">
1
</div>
<div class="button" onclick="switch_div('show_1', 'show_2');">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>

I changed the js function and the "call" for buttons.
function switch_div(show_1, show_2) {
var a = document.getElementById(show_2);
var a2 = document.getElementById(show_1);
a.style.display = 'none';
a2.style.display = 'block';
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div('show_1', 'show_2');">
1
</div>
<div class="button" onclick="switch_div('show_2', 'show_1');">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>

This also works with:
<div class="button" onclick="switch_div(1,2);">
1
</div>
<div class="button" onclick="switch_div(2,1);">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>
<script>
function switch_div(n1,n2) {
document.getElementById("show_"+n1).style.display = 'block';
document.getElementById("show_"+n2).style.display = 'none';
}
</script>

How to center all list's elements to parent div

I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>

You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.