We Keep Coding

Copying parent <li> content into another <ul> onclick?

On my website i have two lists. One is empty and one filled with some recipes. What I am trying to do is to make user able to add the recipe he likes into his favorites. Actually to copy selected into empty list by clicking on "like" button.
HTML
<div id="myrecipes">
<ul id="recipeList">
</ul>
</div>
<div id="recipes">
<ul>
<li>
<img src="trpeza.jpg" alt="">
<p>recipe 1 <i onclick="like(this)" class="fa fa-thumbs-up"></i></p>
</li>
<li>
<img src="trpeza.jpg" alt="">
<p>recipe 1 <i onclick="like(this)" class="fa fa-thumbs-up"></i></p>
</li>
<ul>
</div>
MY JS
function like(x) {
var emptyList = document.getElementById("recipeList");
var listItem = x.parentNode;
x.style.color = "green";
listItem.appendChild(emptyList);
}
Also I would like to add some close button so he can easily remove it from favorites.

Try this below Code Snippet
function like(x) {
var emptyList = document.getElementById("recipeList");
if (x.classList.contains("fa-thumbs-up")) {
// For Copying to Favourite Recipes
var listItem = x.parentNode.parentNode;
var cln = listItem.cloneNode(true);
var oAddedIcon = cln.querySelector(".fa-thumbs-up");
oAddedIcon.classList.remove("fa-thumbs-up");
oAddedIcon.classList.add("fa-thumbs-down");
oAddedIcon.style.color = "red";
x.style.color = "green";
emptyList.appendChild(cln);
} else if (x.classList.contains("fa-thumbs-down")) {
// For deleting from Favourite Recipes
x.classList.remove("fa-thumbs-down");
x.classList.add("fa-thumbs-up");
emptyList.removeChild(x.parentNode.parentNode);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="myrecipes">
<h2>Favourite Recipes</h2>
<ul id="recipeList">
</ul>
</div>
<div id="recipes">
<h2>Recipes</h2>
<ul>
<li>
<img src="trpeza.jpg" alt="Recipe Image 1">
<p>recipe 1 <i onclick="like(this)" class="fa fa-thumbs-up"></i></p>
</li>
<li>
<img src="trpeza.jpg" alt="Recipe Image 2">
<p>recipe 2 <i onclick="like(this)" class="fa fa-thumbs-up"></i></p>
</li>
<ul>
</div>

Select an Image to appear in a div as a bg-img

I'm build a digital poster editor and so i need help setting an image as a background look of a div. I have no clue where to start
I created a div with a couple of images to select from and a empty div with just a div id.
Here is my images div:
<div id="imgopt">
<ol>
<li>
<img src="asset/img/template1.jpg">
</li>
<li>
<img src="asset/img/template2.jpg">
</li>
<li>
<img src="asset/img/template3.jpg">
</li>
<li>
<img src="asset/img/template4.jpg">
</li>
</ol>
</div>
here is my Empty Div:
<div id="designPoster">
</div>
Basic i need help writing the js code or a bit of direction on how to implement this functionality of setting a background image of the empty div[id="designPoster"] by just selecting the an image from div[id="imgopt"].

If you want to do that with Javascript without jQuery, here is how you could achieve it.
Note that I changed the image to have a working example.
var imageElts = document.querySelectorAll("#imgopt img");
var posterElt = document.querySelector("#designPoster");
for (var i = 0; i < imageElts.length; i++) {
imageElts[i].addEventListener("click", changeBgImage);
}
function changeBgImage(e) {
posterElt.style.backgroundImage = "url(" + e.target.src + ")";
posterElt.style.backgroundSize = "contain";
posterElt.style.backgroundRepeat = "no-repeat";
}
#imgopt img {
cursor: pointer;
width: 100px;
height: auto;
}
#designPoster {
width: 400px;
height: 157px;
background: #ccc;
}
<div id="imgopt">
<ol>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
<li>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1">
</li>
</ol>
</div>
<div id="designPoster"></div>
Good luck !

This will do what you are asking...
$(function() {
$('#imgopt img').on('click', function() {
var imageSource = $(this).prop('src');
$('#designPoster').css('background-image', 'url('+imageSource+')');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgopt">
<ol>
<li>
<img src="asset/img/template1.jpg">
</li>
<li>
<img src="asset/img/template2.jpg">
</li>
<li>
<img src="asset/img/template3.jpg">
</li>
<li>
<img src="asset/img/template4.jpg">
</li>
</ol>
</div>
<div id="designPoster">
</div>

Assuming that the img src is the background you would like to set:
$('#imgpot img').onClick(function(){
$('#designPoster').css('background-image', `url(${this.attr('src')})`);
});
What this will do is add an event handler to each image tag within #imgpot, when clicked, it will assign the background-image property of #designPoster to the clicked images src attribute.

using bxslider, no slides till browser gets resized?

I have a problem with bxslider. I use javascript to show the slider only when the user clicks on a button. But when the slider is shown no slides are there? When resizing the browser the slides show up. I made a fiddle to show the effect
https://jsfiddle.net/Yq3RM/1051/
and here is the code
<a class="show_figures" id="show_figures" href="javascript:showOrHidefigure(0);" style="text-decoration: none;">
<b>
Show figures
</b>
</a>
<div id="figures" style="display: none">
<ul class="bxslider">
<li>
<img src="http://ebiznet2u.com/wp-content/uploads/2009/06/online-image-tool-psykopaint.gif" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/trees.jpg" />
</li>
</ul>
</div>
<script type='text/javascript'>
function showOrHidefigure(id_dummy) {
var div = document.getElementById('figures');
var button = document.getElementById('show_figures');
if (div.style.display == "block") {
div.style.display = "none";
button.innerHTML = "<b>Show figures</b>";
} else {
div.style.display = "block";
button.innerHTML = "<b>Hide figures</b>";
}
}
</script>
how can I make the slide show up without resizing the browser?
thanks
carl

I've updated your code a little, basically if you remove display: none from your container and hide it with javascript instead it allows bxslider to calculate the size of the images which I believe it only does after loading when the screen is resized.
https://jsfiddle.net/Yq3RM/1058/
HTML:
<a class="show_figures" id="toggle-figures" href="javascript:;">Show figures</a>
<div id="figures">
<ul class="bxslider">
<li>
<img src="http://ebiznet2u.com/wp-content/uploads/2009/06/online-image-tool-psykopaint.gif" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
</ul>
</div>
JS
var slider = $('.bxslider').bxSlider();
$('#figures').hide();
$('#toggle-figures').on('click', function() {
$('#figures').toggle();
if( $('#figures').is(':visible')) {
$(this).text('Hide figures');
}
else {
$(this).text('Show figures');
}
});
EDIT
Also just a note, don't use b the appropriate element is strong but in this case you should just apply font-weight: bold with css and also avoid using inline styles.

a href link clicked and div displays image

I would like a javascript method to display image in div depending on which a href link is clicked.
I have written some code but it needs developing further.
<script type=" ">
function changeImg(){
var image1 = new Image();
image1.src='car.png'
var imghol = document.getElementById("imageHolder");
var elements = document.getElementById("FS");
if(elements.onclick = function()){
imghol = image1;
}
</script>
<div class="ADS2"><h2>Vehicle Part</h2><p>Please select a part you wish to find;
<div class="vertical_menu">
<ul>
<li><a id="FS" href="#home" onclick="changeImg">Front Side</a></li>
<li><a id="RS" href="#news">Rear Side</a></li>
<li><a id="S" href="#contact">Side</a></li>
<li><a id="US"href="#about">Under Side</a></li>
<li><a id="I" href="#about">Interior</a></li>
</ul>
</div>
<div class="imageholder">
</div>
</div>

Keep it simple. Try this:
<script type="text/javascript">
function changeImg(image){
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>
<div class="ADS2">
<h2>Vehicle Part</h2>
<p>Please select a part you wish to find;</p>
<div class="vertical_menu">
<ul>
<li><a id="FS" href="javascript:" onclick="changeImg('car.jpg');">Front Side</a></li>
<li><a id="RS" href="javascript:" onclick="changeImg('rear.png')">Rear Side</a></li>
<li><a id="S" href="javascript:" onclick="changeImg('caside.png')">Side</a></li>
<li><a id="US" href="javascript:" onclick="changeImg('under.png')">Under Side</a></li>
<li><a id="I" href="javascript:" onclick="changeImg('interior.png')">Interior</a></li>
</ul>
</div>
<div class="imageholder"><img id="imageHolder" /></div>
</div>

use this
HTML
<a onclick="changeImg('pic1.png')">Link 1</a>
<a onclick="changeImg('pic2.png')">Link 2</a>
<a onclick="changeImg('pic3.png')">Link 3</a>
<a onclick="changeImg('pic4.png')">Link 4</a>
.....
<div class="imageholder">
<img id="change_img_target" />
</div>
Javascript
function changeImg(url) {
document.getElementById("change_img_target").src = url;
}

You can also achieve this with jQuery. Be sure to include the jQuery library in your file. :)
HTML:
Link 1
Link 2
<div id="div">
</div>
jQuery (add this to the bottom of your page):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
function changeImg(url) {
var image = "<img src='url' />";
$("#div").html(image);
}
});
</script>

# Naveen,
You can achieve the solution using any of the following 2 answers.
Ans1:
<script type="text/javascript">
function preloader()
{
var imgs = ['chart1.jpg','chart2.jpg','chart3.jpg','chart4.jpg','chart5.jpg']; // take array of images
var container = document.getElementById('photos');
var docFrag = document.createDocumentFragment();
imgs.forEach(function(url, index, originalArray) {
var img = document.createElement('img');
img.src = url;
docFragenter code here.appendChild(img);
});
container.appendChild(docFrag);
}
</script>
<body onload="preloader();">
<div>
<table width="100%" style="height: 100%;" border="0">
<tr>
<td>
<p id="photos" onclick="preloader()" />
</td>
</tr>
</table>`
</div>
Ans2:
function preloader()
{
var imgs=['chart1.jpg','chart2.jpg','chart3.jpg','chart4.jpg','chart5.jpg'];
var container = document.getElementById('photos');
for (var i = 0, j = imgs.length; i < j; i++) {
var img = document.createElement('img');
img.src = imgs[i]; // img[i] refers to the current URL.
container.appendChild(img);
}
}
Link for more Help:
How to add a list of images to the document from an array of URLs?

duplicate functions, how may I combine them?

I have a function that remains pretty much constant except for the changing class names. I was hoping to make the code a little less text heavy. How may I go about making it just a small function instead of repeating it n times. My concern is also about removing the active class for the last li that was clicked. I've provided only 2 instances here, but this code is repeated n number of times.Any ideas would be much appreciated.
$('a.app1-preview').click(function() {
//remove last active classes
$(".app2").removeClass('active');
$(".app2-preview").removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview-2').fadeOut("slow", function () {
$('.app-preview-1').fadeIn("slow");
});
});
$('a.app2-preview').click(function() {
//remove last active classes
$(".app1").removeClass('active');
$(".app1-preview").removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview-1').fadeOut("slow", function () {
$('.app-preview-2').fadeIn("slow");
});
});
HTML code:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink">
<span>ANOTHER<br /> APP</span>
</a>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink">
<span>SECOND<br /> APP</span>
</a>
</li>
</div>

Try to exploit the fact that you have .active class. ;) Preview - http://jsfiddle.net/evSqF/1/
js:
<script>
$('a.blocklink').click(function() {
var self = $(this);
$('.active').fadeOut('slow', function(){
$(this).removeClass('active');
self.fadeIn('slow');
self.addClass('active');
});
});
</script>
html:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink">
<span>ANOTHER<br /> APP</span>
</a>
<div class="app-preview active">App1 preview</div>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink">
<span>SECOND<br /> APP</span>
</a>
<div class="app-preview">App2 preview</div>
</li>
</ul>
</div>

Edit: After I got some caffeine, I noticed the problems with the setup. I've created a demo at JSFiddle. The markup will display a "header" for an app which will display the child description when clicked on, and hide the descriptions of other sibling's descriptions.
In this case, you can show the current element, and hide the siblings, which would be a cleaner solution as it scales as you at more app elements.
$(".app").click(function() {
var $self = $(this);
var $apps = $self.closest(".apps");
var $selfSiblings = $apps.children(".app").not($self);
$self.addClass(".active");
$self.find(".app-preview").addClass("active");
$selfSiblings.removeClass(".active");
$selfSiblings.find(".app-preview").removeClass("active").fadeOut("slow", function() {
$self.find(".app-preview").fadeIn("slow");
});
});​
I would also recommend rewriting your HTML as such:
<div class="app-container">
<ul class="apps">
<li class="app">
App 1<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 1</span>
</a>
</li>
<li class="app">
App 2<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 2</span>
</a>
</li>
<li class="app">
App 3<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 3</span>
</a>
</li>
</div>​

Write a function to make the functions for you:
function makeHandler(deactivate, fadeOut, fadeIn) {
return function() {
//remove last active classes
$(deactivate).removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$(fadeOut).fadeOut("slow", function () {
$(fadeIn).fadeIn("slow");
});
});
Then:
$('a.app1-preview').click(makeHandler('.app2, .app2-preview', '.app-preview-2', '.app-preview-1'));
$('a.app2-preview').click(makeHandler('.app1, .app1-preview', '.app-preview-1', '.app-preview-2'));
You could probably simplify things further by re-thinking the naming conventions you've got.

I would suggest to define a single function:
function single(index_main, index_aux) {
// Does all your magic
}
$('a.app1-preview').click(function() {
single("1", "2");
});
$('a.app2-preview').click(function() {
single("2", "1");
});
And that does the trick.

I made a jsfiddle example for you. Have a look at it here, it uses as much code that you wrote as possible, so nothing that should surprise you will be there :)
http://jsfiddle.net/2ZPxx/
Basically I ended up with this HTML:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink" id="app1">
<span>ANOTHER<br /> APP</span>
</a>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink" id="app2">
<span>SECOND<br /> APP</span>
</a>
</li>
</div>
<div class="app-preview-app1 app-preview">App1 preview</div>
<div class="app-preview-app2 app-preview">App2 preview</div>
And this javascript:
$('.apps li a').click(function() {
var id = $(this).attr('id');
$('.apps li').removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview').fadeOut("slow", function () {
$('.app-preview-'+id).fadeIn("slow");
});
});