Develop Reference

jQuery - Append dynamic content into textarea

I have several elements that were dynamically added to my web page and now I'm trying to append them to textarea, but I keep getting only the last element to show up.
I figured I need to use val() instead of append(), but with val() I only get last option that was stated.
Can someone help me out? I'm trying to include all rows in the textarea.
I've recreated my problem in a snippet bellow.
function getDetails() {
// Clear content
$("#save-content").val('');
// First headline
$("#save-content").val("First group: \n");
// Content from first group
$(".first-item .row").each(function(){
var firstGroupName = $(this).find(".name").text();
var firstGroupSurname = $(this).find(".surname").text();
$("#save-content").val(firstGroupName + " " + firstGroupSurname + "\n");
});
// Second headline
$("#save-content").val("Second group: \n");
// Content from second group
$(".second-item .row").each(function(){
var secondGroupName = $(this).find(".name").text();
var secondGroupSurname = $(this).find(".surname").text();
$("#save-content").val(secondGroupName + " " + secondGroupSurname + "\n");
});
// Third headline
$("#save-content").val("Third group: \n");
// Content from third group
$(".third-item .row").each(function(){
var thirdGroupName = $(this).find(".name").text();
var thirdGroupSurname = $(this).find(".surname").text();
$("#save-content").val(thirdGroupName + " " + thirdGroupSurname + "\n");
});
}
$('button').on('click', function() {
getDetails();
});
.row>div {
display: inline-block;
}
button {
display: block;
margin: 10px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imported-content">
<div class="first-item">
<div class="row">
<div class="name">Penelope</div>
<div class="surname">Smith</div>
</div>
<div class="row">
<div class="name">Jane</div>
<div class="surname">Dalton</div>
</div>
</div>
<div class="second-item">
<div class="row">
<div class="name">Kate</div>
<div class="surname">Davidson</div>
</div>
</div>
<div class="third-item">
<div class="row">
<div class="name">David</div>
<div class="surname">Peters</div>
</div>
<div class="row">
<div class="name">Brad</div>
<div class="surname">Lucas</div>
</div>
</div>
</div>
<button>Import</button>
<textarea id="save-content" rows="5"></textarea>

You can add the val when settings the val when you want to append.
For example:
$('#save-content').val($('#save-content').val() + yourContentHere);

How to replace scrollbars of a div with overflow:auto with arrows

I am trying to make a small div that will be used to scroll between pictures in a jquery image zoom plugin for an eCommerce website.
Here is what I have so far.
<div style="width:125px;height:300px;overflow:auto;margin:auto;">
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>
Here is a jsfiddle https://jsfiddle.net/2o482ofp/
I need to hide the scrolls bars and instead have fixed arrow buttons to move up and down within the div.
I am trying to mimic the functionality that can be found on https://www.daraz.pk/ca-sports-black-pu-running-shoes-for-men-6605753.html
I did a lot of googling but could not find any tutorial, guide, plugin or anything regarding what I am trying to do so if anyone can please help much appreciated.

var blockHeight = 75;
var marginTop = 10;
$('.up').click(function(){
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
console.log('currentOffset', currentOffset);
var result = currentOffset - blockHeight - marginTop;
$elem.css("margin-top", result + "px");
});
$('.down').click(function(){
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
var result = currentOffset + blockHeight + marginTop;
console.log('.currentOffset', currentOffset)
$elem.css("margin-top", result + "px");
})
div > div {
transition: margin 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<button class="up">up</button>
<button class="down">down</button>
<div style="width:125px;height:300px;overflow:hidden;margin:auto;">
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>

How to send emojis using jquery?

In my webpage, I have an input method and a button which opens a popup with smiles. When a user taps a smile once, the input value is changed to 'current value' + ':smile1:', for example. However, I have about 28 smile icons and this way to send emojis is a little bit difficult. How can I make this process easier? Because after this, I'll need to parse all 28 smiles and check if the input value equals one of them.
My popup:
<div class="smile-popuptext" id="smPopup">
<div class="smile1"></div>
<div class="smile2"></div>
<div class="smile3"></div>
//.....and other 25 divs
</div>
My function that sends the smile:
$('.smile1').on('click', function () {
var message = $('#message').val() + ' :smile1:';
$('#message').val(message);
});

I'd recommend giving all the buttons a single class and giving them unique id's.
So something like this:
<div class="smile-popuptext" id="smPopup">
<div class="smile" id="smile1"></div>
<div class="smile" id="smile2"></div>
<div class="smile" id="smile3"></div>
//.....and other 25 divs
</div>
Then:
$('.smile').on('click', function () {
var message = $('#message').val() + ' :' + this.id + ':';
$('#message').val(message);
});
JSFiddle

You could bind an EventListener on the container and defining the value as a data attribute:
var container = document.querySelector('.smile-popuptext');
container.addEventListener('click', function(event) {
var target = event.target;
var emoji = target.getAttribute('data-emoji');
if(emoji) {
console.log('clicked', [':', emoji, ':'].join(''));
}
});
<div class="smile-popuptext" id="smPopup">
<div class="sm1" data-emoji="smile1">1</div>
<div class="sm2" data-emoji="smile2">2</div>
<div class="sm3" data-emoji="smile3">3</div>
</div>

With no changes in your markup:
$('#smPopup div[class^="smile"]').on('click', function () {
var message = $('#message').val() + ' :' + this.className + ':';
$('#message').val(message);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smile-popuptext" id="smPopup">
<div class="smile1">smile 1</div>
<div class="smile2">smile 2</div>
<div class="smile3">smile 3</div>
</div>
<textarea id="message"></textarea>

Remove Link on scroll

In my application I have 4 links with different IDs and 4 DIV with same ID as each link (I use them for anchor-jumping).
My current code:
One
Two
Three
Four
<div class="col-md-12 each-img" id="1">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="2">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="3">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="4">
<img src="img/album-img.png">
</div>
Sometime users just scroll to second div id="2" first before they click on buttons and when they do so, they are sent to top id="1" first instead of continue to next ID id="3".
Only one button is visible at a time with use of CSS and when link is clicked, I remove that link.
CSS
a.btn{display: none}
a.btn a:first-child{display: block !important;}
jQuery
$(document).ready(function(){
$('a.btn').click(function () {
$(this).remove(); // remove element which is being clicked
});
});
How can I achieve so if user scroll down, each link that has same ID as the DIV get removed.
For instance: If user scroll down to <div class="col-md-12" id="1">, One gets removed and Next link would be Two to click on.
PS: This is for a dynamic page and IDs will change, so we need another selector maybe
This is what I have tried until now, but problem is that it removes all the links and not first one only
$(function() {
var div = $('.each-img').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$('.each-img').each(function(){
if (scrollTop >= div) {
$("a.btn:eq(0)").remove();
//$("a.btn:first-child").remove();
}
});
});
});
PS: The way HTML & CSS is setup doesn't need to like this and I can change it to whatever that will be better for the function

It's no problem to make it dynamic:
JSFiddle: https://jsfiddle.net/rc0v2zrw/
var links = $('.btn');
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
links.each(function() {
var href = $(this).attr('href');
var content = $(href);
if (scrollTop > content.offset().top) {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="http://lorempixel.com/400/500/">
</div>
<div class="col-md-12" id="2">
<img src="http://lorempixel.com/450/500/">
</div>
<div class="col-md-12" id="3">
<img src="http://lorempixel.com/480/500/">
</div>
<div class="col-md-12" id="4">
<img src="http://lorempixel.com/500/500/">
</div>

I think this is more or less what you're after:
JSFiddle
https://jsfiddle.net/wc0cdfhv/
It's good to cache the position of your elements outside the scroll function, this way it doesn't need to be calculated every time.
You should also keep in mind this won't scale too well if you have dynamic content but if you're just working with 4 static links it will do fine.
Code
$(function() {
var scroll1 = $('#1').offset().top;
var scroll2 = $('#2').offset().top;
var scroll3 = $('#3').offset().top;
var scroll4 = $('#4').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop >= scroll4) {
$("#go1, #go2, #go3, #go4").hide();
}
else if (scrollTop >= scroll3) {
$("#go1, #go2, #go3").hide();
$("#go4").show();
}
else if (scrollTop >= scroll2) {
$("#go1, #go2").hide();
$("#go3, #go4").show();
}
else if (scrollTop >= scroll1) {
$("#go1").hide();
$("#go2, #go3, #go4").show();
}
else {
$("#go1, #go2, #go3, #go4").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0; background:#CCC">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="2">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="3">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="4">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

use scrollEvent listener
$(window).scroll(function(e){
if($(this)).scrollTop >= $('div#1').offset().top){
$("a#1").hide();
}
});
Use Something like that and it will work .. Hope this helps

change color of div depending numeric value jquery

I have 15 divs with the same class but different id and i want to change the color of the value.
For example, if one or five div's value is under 15 the color of the value will be red, if three or one the value of it is up to 15 but under 45 the color of the value is green and if the value of the div is up to 45 the color will be yellow but all of the colors i want to see at the same time.
My div's are like this:
<div id="listado">
<div id="cuautitlan" class="dfedo">15</div>
<div id="coacalco" class="dfedo">54</div>
<div id="atizapan" class="dfedo">65</div>
<div id="tlalne" class="dfedo">2</div>
<div id="tlalne2" class="dfedo">5</div>
<div id="naucalpan" class="dfedo">90</div>
<div id="neza" class="dfedo">105</div>
<div id="huixqui" class="dfedo">65</div>
<div id="azca" class="dfedo">75</div>
<div id="gustavo" class="dfedo">45</div>
<div id="miguel" class="dfedo">35</div>
<div id="cuauh" class="dfedo">2</div>
<div id="venus" class="dfedo">1</div>
<div id="coaji" class="dfedo">58</div>
<div id="alvaro" class="dfedo">5</div>
<div id="benito" class="dfedo">95</div>
<div id="izta" class="dfedo">43</div>
<div id="magda" class="dfedo">35</div>
<div id="coyoacan" class="dfedo">33</div>
<div id="iztapa" class="dfedo">65</div>
<div id="tlalpan" class="dfedo">89</div>
<div id="xochi" class="dfedo">99</div>
<div id="tlahuac" class="dfedo">9</div>
<div id="milpa" class="dfedo">0</div>
</div>
My jquery is like this
$("div.dfedo").each(function()
{
$(this).value < 15 ? $(this).css('color','red');
});
My fiddle

Make this jQuery plugin:
$.fn.colorize = function () {
return this.each(function() {
var $this = $(this), number = $this.text();
$this.css({color: number < 15 ? "red"
: number < 45 ? "green"
: "yellow"});
});
};
And just run:
$("div.dfedo").colorize();
See DEMO.
Making a jQuery plugin for things like these is a good habit. That way you can reuse your code easily and do interesting things like this:
$("div.dfedo").hide().colorize().show("slow");
By making a simple plugin you basically make a new jQuery command that does what you want.

Please check the demo :
https://jsfiddle.net/pj4c40qq/1/
$("div.dfedo").each(function() {
$(this).html() < 15 ? $(this).css('color', 'red') : null;
($(this).html() >= 15 && $(this).html() < 45) ? $(this).css('color', 'green'): null;
$(this).html() >= 45 ? $(this).css('color', 'yellow') : null;
});

Your issue was on the Conditional (ternary) Operator:
$('div.dfedo').each(function() {
var $elem = $(this),
val = $elem.html(),
color = (val < 15)
? 'red'
: (val >= 15 && val < 45)
? 'green'
: 'yellow';
$elem.css('color', color);
});
.dfedo {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listado>
<div id="cuautitlan" class="dfedo">15</div>
<div id="coacalco" class="dfedo">54</div>
<div id="atizapan" class="dfedo">65</div>
<div id="tlalne" class="dfedo">2</div>
<div id="tlalne2" class="dfedo">5</div>
<div id="naucalpan" class="dfedo">90</div>
<div id="neza" class="dfedo">105</div>
<div id="huixqui" class="dfedo">65</div>
<div id="azca" class="dfedo">75</div>
<div id="gustavo" class="dfedo">45</div>
<div id="miguel" class="dfedo">35</div>
<div id="cuauh" class="dfedo">2</div>
<div id="venus" class="dfedo">1</div>
<div id="coaji" class="dfedo">58</div>
<div id="alvaro" class="dfedo">5</div>
<div id="benito" class="dfedo">95</div>
<div id="izta" class="dfedo">43</div>
<div id="magda" class="dfedo">35</div>
<div id="coyoacan" class="dfedo">33</div>
<div id="iztapa" class="dfedo">65</div>
<div id="tlalpan" class="dfedo">89</div>
<div id="xochi" class="dfedo">99</div>
<div id="tlahuac" class="dfedo">9</div>
<div id="milpa" class="dfedo">0</div>
</div>