We Keep Coding

scroll event after append item Not working

Trying to call scroll event after append item but it is not working. what I do wrong?
Please help me Thank you.
you can check the code here
https://jsfiddle.net/4uk92cxe/1/
$(document).ready(function () {
$('#myDiv2').append(
"<table class='scroll-item'><tr><td> YYYYYYYYYYYYYY</td></tr></table>"
);
$('.scroll-item').on('scroll', function () {
console.log('scrolling');
});
$(document).on('scroll', "table[class='scroll-item']", function () {
console.log('scrolling');
});
$('.scroll-item').scroll(function () {
console.log('scrolling');
});
$(document).on('scroll', '.scroll-item', function () {
console.log('scrolling');
});
});
.wrapper {
width:100px;
overflow-x: scroll;
overflow-y: hidden;
}
table {
width: 300px;
}
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="wrapper">
<table class="scroll-item">
<tr>
<td> XXXXXXXXXXXXXXXXXX</td>
</tr>
</table>
</div>
<div id="myDiv2" class="wrapper"></div>

Try change the class scroll-item in the table. Rmove it from table, and put it in the div content .wrapper that is holding the scrollbar.
Example
$(document).ready(function () {
$("#myDiv2").addClass("scroll-item");
$('#myDiv2').append(
"<table ><tr><td> YYYYYYYYYYYYYY</td></tr></table>"
);
$('.scroll-item').on('scroll', function () {
console.log('scrolling');
});
});
.wrapper {
width: 100px;
overflow-x: scroll;
overflow-y: hidden;
}
table {
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="scroll-item wrapper">
<table>
<tr>
<td> XXXXXXXXXXXXXXXXXX</td>
</tr>
</table>
</div>
<div id="myDiv2" class="wrapper"></div>
Just add the class in the div: $("#myDiv2").addClass("scroll-item"); and also, replace this class here <div class="scroll-item wrapper">.
You can also remove this: $("#myDiv2").addClass("scroll-item"); and add the class directly in the HTML to avoid more work with Jquery.

The answer to your question what I do wrong? is, you are calling on scroll on .scroll-item but the scroller is in the .wrapper.
use this instead,
$('.wrapper').on('scroll', function(){
console.log('scrolling');
});

What's a simple, non-jquery way to toggle between two divs using two buttons?

I'm looking for a simple, non-jquery method of toggling between two divs. Specifically, clicking button A will show div A content (and hide div B content), and clicking button B will show div B content (and hide div A content. I want div A content to appear by default when the page loads.
The code I have isn't hiding the appropriate divs from the onclick
I've looked around, but every solution seems overly complex or seems to involve jquery - which I would really prefer not to use, because I have to work with an old jquery library on a site where I shouldn't be updating that stuff.
<button class="button" onclick="content_A(); Hide_Content_B;">Content A</button>
<button class="button" onclick="content_B(); Hide_Content_A;">Content B</button>
<script>
function Content_A() {
var x = document.getElementById("A");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script>
function Hide_Content_B() {
var x = document.getElementById("B");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
</script>
<script>
function Content_B() {
var x = document.getElementById("B");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script>
function Hide_Content_A() {
var x = document.getElementById("A");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
</script>
<div id="A"> stuff</div>
<div id="B"> other stuff </div>

Create one function showContent that takes the id of the element you want
to toggle as parameter and just toggles a CSS class, i.e visible on the element with that id.
Use CSS classes to initially hide the "toggleable" elements. You can set the visible class directly on the element you want shown on page load.
Here's an example:
function showContent(id) {
document.getElementById(id).classList.toggle('visible')
}
/*
All elements with class "toggleable"
should be hidden.
*/
.toggleable {
display: none;
}
/*
All elements that have both
class "toggleable" and "visible"
should be visible.
*/
.toggleable.visible {
display: block;
}
<button onclick="showContent('a');" >Show Content A</button>
<button onclick="showContent('b');" >Show Content B</button>
<div class="toggleable visible" id="a">
Hello Content A!
</div>
<div class="toggleable" id="b">
Hello Content B!
</div>

About your code:
You have to call the function using parenthesis like Hide_Content_A() and Hide_Content_B(); which are misssing in onclick of the <button>
The functions Content_B and Content_B start with uppercase C.
The fix your own code, just run Hide_Content_B(); at the end to hide the second one.
Note that you can also use a single <script> block.
function Content_A() {
var x = document.getElementById("A");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function Hide_Content_B() {
var x = document.getElementById("B");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
function Content_B() {
var x = document.getElementById("B");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function Hide_Content_A() {
var x = document.getElementById("A");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
Hide_Content_B();
<button class="button" onclick="Content_A(); Hide_Content_B();">Content
A
</button>
<button class="button" onclick="Content_B(); Hide_Content_A();">Content
B
</button>
<div id="A"> stuff</div>
<div id="B"> other stuff</div>

If you dont want to use jQuery, you should consider not using javascript at all.
You can do the same with pure css. Also the styling of button tags some times brakes in other devices, so I suggest to use tag or just a span
Here is a pure CSS solution:
input {
display:none;
}
input[name="toggle"] + .toggleContent{
max-height: 0;
overflow: hidden;
transition: max-height .4s;
}
input[name="toggle"]:checked + .toggleContent{
max-height: 100px;
}
<label for="A">A Button</label>
<input type="radio" name="toggle" value="1" id="A" checked="checked">
<div class="toggleContent">This is content for A</div>
<label for="B">B Button</label>
<input type="radio" name="toggle" value="2" id="B">
<div class="toggleContent">This is content for B</div>

Here's a simple solution that requires jQuery 1.7 or above, since you mentioned that you're working with an old jQuery library!
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
button{
width: 5%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point-sm" data-show=".a">
<div class="content">
<div class="centered-y">
<p>A</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".b">
<div class="content">
<div class="centered-y">
<p>B</p>
</div>
</div>
</button>
</div>
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>A Content here</p>
</div>
<div class="a hide">
<p>A Content here</p>
</div>
<div class="b hide">
<p>B Content here</p>
</div>
</div>
</div>

There are some great answers here, but I think I'll probably go with The fourth bird's because it's the simplest. Thanks everybody!

If you are interested in a non-JS solution, you can use sibling input elements to perform a button toggle effect. Simply match the for attributes with the id attributes.
form {
display: flex;
flex-wrap: wrap;
}
input {
display: none;
}
input:checked + label {
background-color: #eee;
}
label {
cursor: pointer;
padding: 12px;
display: inline-block;
}
.container {
display: none;
background-color: #eee;
order: 1;
padding: 12px;
width: 100%;
}
input:checked + label + .container {
display: block;
}
<form>
<input id="a" type="radio" name="container" checked="checked">
<label for="a">button a</label>
<div class="container">content a</div>
<input id="b" type="radio" name="container">
<label for="b">button b</label>
<div class="container">content b</div>
</form>

document.getElementById can't select more than one element

I'm working on loading. I have div #loading which is visible. And more divs #message which are hidden. I have js function.
function loading() {
setTimeout(function() {
document.getElementById("loading").style.display = "none";
document.getElementById("message").style.display = "block";
}, 500, "fadeOut");
}
But that row document.getElementById("message").style.display = "block"; selects only first div #message.
function loading() {
setTimeout(function() {
document.getElementById("loading").style.display = "none";
document.getElementById("message").style.display = "block";
}, 500, "fadeOut");
}
loading();
#loading {
display: block;
}
#message {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages" onload="loading();">
<div id="loading">
...
</div>
<div id="message">
QWERTY
</div>
<div id="message">
123456
</div>
</div>

As the others have mentioned ids are unique and can only be used once on a page, so use a class instead. Here I've used querySelectorAll to grab a static list of classes.
The other issue is that you seem to be trying to use jQuery to fade the elements out, but you're not using jQuery for anything else. I'm going to suggest you CSS transitions. They're easy to use, and you don't have the need of loading a huge library. Here I add new classes fadein and fadeout which (based on your code) increases/reduces the opacity of the specified elements to zero over three seconds.
function loading() {
setTimeout(function() {
// use a class for the loader too otherwise the transition
// won't work properly
const loader = document.querySelector('.loading');
loader.classList.add('fadeout');
// grab the elements with the message class
const messages = document.querySelectorAll('.message');
// loop over them and add a fadeout class to each
[...messages].forEach(message => message.classList.add('fadein'));
}, 500);
}
loading();
.loading {
opacity: 1;
}
.message {
opacity: 0;
}
.fadein {
transition: opacity 3s ease-in-out;
opacity: 1;
}
.fadeout {
transition: opacity 3s ease-in-out;
opacity: 0;
}
<div class="messages">
<div class="loading">
Loading
</div>
<div class="message">
QWERTY
</div>
<div class="message">
123456
</div>
</div>

You need to use unique ID's for your DOM elements. Try modify your code like this:
<script type="text/javascript">
function loading() {
setTimeout(function() {
document.getElementById("loading").style.display = "none";
var el = document.getElementsByClassName('message');
console.log(el);
$.each(el, function(i, item){
item.style.display = 'block';
});
}, 500, "fadeOut");
}
loading();
</script>
<style>
#loading {
display: block;
}
.message{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages" onload="loading();">
<div id="loading">
...
</div>
<div class="message">
QWERTY
</div>
<div class="message">
123456
</div>
</div>

ID attribute must be unique. You can't use same ID multiple times on the page. If you like to use same key then use it as a class or data-id which can be same or differ.

You cannot have same id twice in a document in order to select multiple elements group them by same Class rather than by id and then use the following to select them all.
document.querySelectorAll(".ClassName")
Or
document.getElementsByClassName(".ClassName");
Note that both methods returns a collection of all elements in the document with the specified class name, as a NodeList object.

function loading() {
setTimeout(function() {
document.getElementById("loading").style.display = "none";
document.getElementById("message").style.display = "block";
}, 500, "fadeOut");
}
loading();
#loading {
display: block;
}
#message {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages" onload="loading();">
<div id="loading">
...
</div>
<div id="message">
QWERTY
</div>
<div id="message">
123456
</div>
</div>

How to use jquery to get style attribute of an element

I have a div which contains a h2 tag and a p tag.
i wan a case where if the div is hovered (moverenter), the background colors of the h2 tag and the p tag get exchanged and when move leave it resets.
I am looking at this solution because i have many of the panels with different h2 tag and p tags. my approve so far:
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
on the jQuery i tried
$(document).ready(function(){
$(".panel").mouseenter(function(){
exchange($(this));
}).mouseleave(function(){
exchange($(this));
});
function exchange(e){
var x = e.children(".title"),
y = e.children(".desc");
x.css("background", "y.css('background')");
}
});
I am sorry, just learning JS
NB: since i have not gotten it working, i was also looking for a smooth transition effect on the exchange

Do you mean something like
$(".panel").mouseenter(function () {
var $this = $(this),
$h2 = $this.children('h2'),
$p = $this.children('p'),
h2c = $h2.css('background-color'),
pc = $p.css('background-color');
$h2.css('background-color', pc);
$p.css('background-color', h2c);
}).mouseleave(function () {
$(this).children('h2, p').css('background-color', '');
})
.panel h2 {
background-color: lightgrey;
}
.panel p {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>

I didn't check everything but that won't work :
x.css("background", "y.css('background')");
Try something like :
var bgY = y.css('background');
x.css("background", bgY);

I made minor changes to your code
Hope it solves your problem.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<link href="Content/jquery-ui-1.10.4.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$(".panel").mouseenter(function () {
$(".panel").toggle();
}).mouseleave(function () {
$(".panel").toggle();
});
})
</script>
</head>
<body>
<div class="panel" style="display:none" >
<h2 class="title" style="background-color:gray">This is the title</h2>
<p class="desc" style="background-color:lightgray">This is a decription</p>
</div>
<div class="panel" style="display:block" >
<h2 class="title" style="background-color:lightgray">This is the title</h2>
<p class="desc" style="background-color:gray">This is a decription</p>
</div>
</body>
</html>

For only exchanging CSS of p and h2 elements :-
$('div.panel').on('hover',function(){
$(this).find('.title').css('background-color','blue');
$(this).find('.desc').css('background-color','green');
},function(){
$(this).find('.title').css('background-color','green');
$(this).find('.desc').css('background-color','blue');
});
Now suppose , Lets say you set some background-color to your p and h2 elements .
CSS
.title{
background-color: green;
}
.desc{
background-color: blue;
}
SCRIPT
$('div.panel').on('hover',function(){
$(this).find('.title').css('background-color','blue');
$(this).find('.desc').css('background-color','green');
},function(){
$(this).find('.title').removeAttr('style');
$(this).find('.desc').removeAttr('style');
});

You can find all the children of the panel and change their backgroundcolor.
You can do this on mouseEnter:
$(".panel").children().css("background-color","red");
And on mouseLeave take another backgroundcolor.

And for the animation part, if you're working with simple background colors you could use animate().
...
function exchange(e)
{
var x = e.children(".title"),
y = e.children(".desc");
bg1 = x.css('background-color'),
bg2 = y.css('background-color');
x.animate({ "background-color": bg2 }, 1500);
y.animate({ "background-color": bg1 }, 1500);
}
...

Here you are a working example http://jsfiddle.net/9a1qe9q9/2/
jQuery
$(".panel").mouseenter(function () {
exchange($(this));
}).mouseleave(function () {
exchange($(this));
});
function exchange(e) {
var x = e.children(".title"),
y = e.children(".desc"),
xColor = x.css('background'),
yColor = y.css('background');
x.css("background", yColor);
y.css("background", xColor);
}

Add on drop event to a div (No Jquery)

I'm trying to make a drag/drop excercise, I have a dinamically generated table and a div with a trash bin, so the rows have the "draggable" attribute , but I can't add the "drop" element to my trash bin.
Here is what i'm doing:
<div id="tabla" style="margin:30px auto; display:none;">
<div id="bin" ondrop="drop(event)">
<img src="icono.png" style="width:100px; margin-left:500px;display:inline;"/><p>
</div>
<table id="grid" class="grid">
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Correo</th>
<th>Password</th>
</tr>
</table>
</div>
And my JS (fragment):
window.onload = function() {
if(localStorage==undefined) {
alert("Éste navegador no soporta Local Storage");
} else {
generarTabla();
if (localStorage.length > 0) {
document.getElementById('tabla').style.display = 'block';
var bote = document.getElementById("bin");
bote.addEventListener("dragleave",handlerLeave,false);
bote.addEventListener("dragover",handlerOver,false);
bote.addEventListener("drop",drop,false);
}
}
}
function drop(e){
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
alert("ola");
}

You need to enable dropping on the target element. Add the ondragover attribute to your div like this:
<div id="bin" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="icono.png" style="width:100px; margin-left:500px;display:inline;"/><p>
</div>
and an allowDrop function such as this:
function allowDrop(e) {
e.preventDefault();
}