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.
Related
Please check my code. It is almost working but whenever i click one of the thumbnails it doesnt show image.
<script>
function thumbChange(num){
var thumb = "gata" + num + ".jpg";
document.getElementById("mainImg").src = thumb;
}
</script>
<div class="main">
<img id="mainImg" src="biokovo.jpg" />
</div>
<ul class="thumbs">
<li onclick="thumbChange(0)"><img src="biokovo.jpg"></li>
<li onclick="thumbChange(1)"><img src="grac.jpg"></li>
<li onclick="thumbChange(2)"><img src="lokvica.jpg"></li>
<li onclick="thumbChange(3)"><img src="hike.jpg"></li>
<li onclick="thumbChange(4)"><img src="gradac.jpg"></li>
</ul>
Here is a working example,
what i did, i passed the thumb as the img src.
and i pass the original size img url, as the argument of the function.
then inside the function im just passing the img url to the img tag.
<img id="mainImg" src="https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1">
</div>
<ul class="thumbs">
<li onclick='thumbChange("https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li>
<li onclick='thumbChange("https://images.pexels.com/photos/70850/butterflies-insect-bezkregowiec-macro-70850.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/70850/butterflies-insect-bezkregowiec-macro-70850.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li>
<li onclick='thumbChange("https://images.pexels.com/photos/929773/pexels-photo-929773.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/929773/pexels-photo-929773.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li>
</ul>
<script>
function thumbChange(img){
document.getElementById("mainImg").src = img;
}
</script>
im sorry for the long img urls. you can replace them with shorter ones ofcourse.
I am learning about the DOM and incorporating Javascript in html files, I have tried this code that display and hide pictures using the event listener click. however, pictures don't seem to appear even no error is detected in the Chrome console.
NOTE: I only posted the concerned code, I omitted some of the HTML tags
<style>
.hide{
display: none;
}
</style>
<main>
<ul>
<li><a data-img="face" id="facebook" href="#"> Facebook </a></li>
<li><a data-img="insta" id="instagram" href="#"> Instagarm </a></li>
<li><a data-img="snap" id="snapchat" href="#"> Snapchat </a></li>
</ul>
<img class="hide" id="face" scr="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" scr="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png" >
<img class="hide" id="snap" scr="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
if(pic.className === "hide"){
pic.className="";
} else {
pic.className= "hide";
}
}
</script>
First off, you issues is that it is src and not scr, so change that attribute and the images will show.
Second, I would recommend using classList with add, remove and contains. You could also use toggle to make your code even smaller like so:
<style>
.hide {
display: none;
}
</style>
<main>
<ul>
<li> <a data-img="face" id="facebook" href="#"> Facebook </a> </li>
<li> <a data-img="insta" id="instagram" href="#"> Instagarm </a> </li>
<li> <a data-img="snap" id="snapchat" href="#"> Snapchat </a> </li>
</ul>
<img class="hide" id="face" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" src="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png">
<img class="hide" id="snap" src="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
pic.classList.toggle('hide', !pic.classList.contains('hide'))
}
</script>
I added the event input to your show function. I modified your show function like below. Check if this works for you:
function show(e) {
let picId = e.target.dataset.img;
let pic = document.getElementById(picId);
if(pic.classList.contains('hide'){
pic.classList.remove('hide');
}
else{
pic.classList.add('hide');
}
}
I'm wanting to change the list-style of the li tag after the corresponding image has been clicked. This is what I have got so far.
jsFiddle
$('#foodOrder').click(function() {
$(this " > li").css('list-style', 'disc');
});
#foodOrder {
list-style: circle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="foodOrder"><img id="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt="" /><li>CIABATTA</li></span>
<span id="foodOrder"><img id="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt="" /><li>BAKERS BUN</li></span>
Fixed your jQuery selector (syntax mistake) and HTML:
<li> must be only in <ul>, <ol> or <menu>.
<span> must contain only Phrasing content, <ul> is Flow content. You should use <div> then.
JSFiddle
$('.foodOrder').click(function() {
$('li', this).css('list-style', 'disc');
});
.foodOrder li {
list-style: circle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foodOrder">
<img class="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt=""/>
<ul>
<li>CIABATTA</li>
</ul>
</div>
<div class="foodOrder">
<img class="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt=""/>
<ul>
<li>BAKERS BUN</li>
</ul>
</div>
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.
I have inside my html code repeating elements like this:
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div> <!-- synth-faq-content -->
</li>
and I use the following command so I can toggle the class 'content-visible' that will make this element slide to reveal the contents of <p>, in this case Text.
What I am trying to do is before doing this in my code, find the previous element that had a class of 'content-visible' and toggle it, so only one element remains visible at all times.
$(this).next('.synth-faq-content').slideToggle(200).end().parent('li').toggleClass('content-visible');
I tried various things lastly being
$(this).closest('synth-faq-trigger').next().find('.synth-faq-content').toggleClass('content-visible');
that has no effect at all. Moreover the suggestions from w3school on finding an element by class failed all together.
How can I make sure that I find all my items containing 'content-visible' and I remove this class from them?
I notice you are already using hash links in your example code, and because of this, you can achieve what you are trying without any JavaScript. Browsers already have functionality to handle displaying elements depending on the hash target, so let's exploit this browser feature rather than implementing it again in JavaScript.
Live demo: http://jsfiddle.net/g105b/cj5fscah/
The href of the anchor is to a hash link, which will be put into the URL bar of the browser. Each li element has an ID that corresponds to the hash targets, and using the :target CSS selector, you can style elements differently depending on what the hash is.
With some fancy CSS you can add animations too, that will perform much better than any JavaScript can.
<ul>
<li id="0">
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for one</p>
</div> <!-- synth-faq-content -->
</li>
<li id="1">
<a class="synth-faq-trigger" href="#1">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for two</p>
</div> <!-- synth-faq-content -->
</li>
<li id="2">
<a class="synth-faq-trigger" href="#2">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for three</p>
</div> <!-- synth-faq-content -->
</li>
</ul>
ul {
width: 320px;
}
li {
background: #aaf;
}
.synth-faq-content {
overflow: hidden;
height: 0;
transition: height 200ms ease-in-out;
}
li:target .synth-faq-content {
height: 3em;
}
Edit: if you still need to manipulate the class names, a simple piece of JavaScript can trigger when the hash changes to accomplish having a class added to the correct LI element.
window.addEventListener("hashchange", function(e) {
// Remove all .content-visible elements:
[].forEach.call(document.querySelectorAll(".content-visible"), function(li) {
li.classList.remove("content-visible");
});
// Add .content-visible to the li that contains the clicked anchor:
document.querySelector("a[href='" + location.hash + "']").parentElement.classList.add("content-visible");
});
Updated demo: http://jsfiddle.net/g105b/cj5fscah/1/
You can use the sibling relation like
$('a').click(function() {
var $li = $(this).next('.synth-faq-content').slideToggle(200).closest('li').toggleClass('content-visible');
$('li.content-visible').not($li).removeClass('content-visible').find('.synth-faq-content').slideUp();
})
.content-visible > a {
color: green;
}
.synth-faq-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
</ul>