I am trying to add a button using .js to my HTML. That button is supposed to show up everytime I click on another button (with the id "imageChoose") which loads the preview of an image. The new button(id: removeBttn) is a delete button, it deletes the image and then it disappears
This is the html code:
<div class="row fileinput-control">
<img id="preview" src="default5.png" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
<br/>
<input type="file" id="image" style="display: none;" />
<!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->
<a href="javascript:changeProfile()">
<div class="file-btns">
<span class="btn btn-default btn-file" id="imageChoose">
<i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i></span></div>
</a>
<a id="removeBttnFrame" href="javascript:removeImage()">
</a>
</div>
</div>
The below .js code is adding that button along with some styling:
function addDeleteBttn() {
var removeBttn = document.createElement("BUTTON");
removeBttn.title="Entfernen";
removeBttn.innerHTML='<i class="fa fa-trash-o"></i>'
removeBttn.class="removeBttnClass";
document.getElementById("removeBttnFrame").appendChild(removeBttn);
}
.removeBttnClass {
position: absolute;
top:91%;
left: 22.7%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: white;
cursor: pointer;
border-radius: 5px;
color: black;
text-align: center;
border-color: lightgray;
height: 50px ! important;
width: 53px;
border-radius: 4px;
padding: 10x 17px;
border-width: thin
}
The above function is not working properly: The button shows up as expected but without the styling. The .css is completely ignored for some reason. I'm new to HTML and cant figure it out.It looks like others have asked similar questions at How to dynamically create CSS class in JavaScript and apply? and here :How to style dynamically created elements with CSS.. These didn't really help me though. how can I do it?
Instead of using removeBttn.class you should use removeBtn.className
Why not just toggle a class on the remove button so that it's hidden from the DOM when clicked and visible when "imageChoose" is clicked?
You can do this by adding a function to the "imageChoose" button that toggles a css class name to "removeBttn"
function loadPreviewImage() {
// your code here to load preview. below is dummy to demonstrate
const previewImageDiv = document.querySelector('#preview-image');
previewImageDiv.classList.remove('hide');
}
function removePreviewImage() {
const previewImageDiv = document.querySelector('#preview-image');
previewImageDiv.classList.toggle('hide');
}
#preview-image.hide {
display: none;
}
#preview-image {
display: block;
width: 200px;
position: relative;
}
#remove-button {
position: absolute;
right: 0;
}
img {
max-width: 200px;
}
<div class="row fileinput-control">
<button id="image-choose" type="button" onclick="loadPreviewImage()">Load Preview</button>
<div id="preview-image">
<button id="remove-button"
type="button"
title="remove preview"
onclick="removePreviewImage()">x</button>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F6%2F66%2FLagothrix_lagotricha4.JPG%2F1200px-Lagothrix_lagotricha4.JPG&f=1&nofb=1" alt="monkey" title="monkey" />
</div>
</div>
I would also change "imageChoose" to a button element instead of an anchor tag. Buttons trigger actions on the page and anchor tags take you places. This is an accessibility standard.
You can change your javascript to this and it gonna work.
function addDeleteBttn() {
var removeBttn = document.createElement("BUTTON");
removeBttn.title="Entfernen";
removeBttn.innerHTML='<i class="fa fa-trash-o"></i>'
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.removeBttnClass { position: absolute; top:91%;'
+'left: 22.7%transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);'
+'background-color: white;cursor: pointer;border-radius: 5px;color: black;'
+'text-align: center;border-color: lightgray;height: 50px ! important;'
+'width: 53px;border-radius: 4px;padding: 10x 17px;border-width: thin}';
document.head.appendChild(style);
removeBttn.className="removeBttnClass";
document.getElementById("removeBttnFrame").appendChild(removeBttn);
}
Related
i want javascript to display html content when button is clicked but it just shows code instead of the content what am i doing wrong?
let btn = $('button');
let socials = $("#popup");
let theDiv = document.getElementById("btnclick");
let content = document.createTextNode('<button class="circle"><img class="share" src="images/icon-share.svg"></button>');
btn.click(function() {
socials.toggle();
theDiv.appendChild(content);
});
#popup {
position: absolute;
z-index: 5 !important;
top: 160px;
background-color: red;
width: 235px;
height: 55px;
border-radius: 10px;
}
.circle {
z-index: 1;
position: absolute;
float: right;
background: hsl(210, 46%, 95%);
border-radius: 50%;
height: 30px;
width: 30px;
margin: 0;
right: 0px;
bottom: 58px;
left: 352px;
}
<div id="popup" class="window">
<div class="windowtext">SHARE
<img class="icons iconfirst" src="images/icon-facebook.svg" />
<img class="icons" src="images/icon-twitter.svg" />
<img class="icons" src="images/icon-pinterest.svg" />
<div id="btnclick"></div>
</div>
<span class="triangle"></span>
</div>
</div>
<button class="circle"><img class="share" src="images/icon-share.svg"></button>
The 'content' you have created is TEXT. The createTextNode can also used to escape HTML characters. You should create a button element by using something like createElement, append it to your DOM and set its TEXT value to what you want.
Have a look at this link to learn how to use createElement.
The first problem is that you are running the function of ".click()", rather than using ".onclick()" or ".on('click', func..)". ".click()" literally clicks the element.
The second problem is that you are creating a text node, then appending that text to the div.
Here is achieving what you want:
//button to be clicked
let btn = $('#demo');
//create new button tag with class circle
var newBtn = $('<button>').addClass('circle');
//create new img tag with class share and src of the image
var newImgTag = $('<img>').addClass('share').attr('src', 'https://i.pinimg.com/474x/aa/91/2d/aa912de6d6fe70b5ccd0c8b9fc7a4f26--cartoon-dog-cartoon-images.jpg')
//append the img tag to the newBtn
newImgTag.appendTo(newBtn);
//on click of the btn, the new button will be appended to the div and available on the DOM
btn.on('click', function(){
$('#demoDiv').append(newBtn)
});
<button id="demo">Click for puppy</button>
<div id="demoDiv" style="position: fixed; top: 50px; left: 0px;"></div>
I'm trying to add an image in a span with data-pic, but now I want to try a picture carousel, how can I use JavaScript to index data-pic to achieve the effect?
I follow this instruction:
W3C
$(".product-colors span").click(function () {
$(".product-colors span").removeClass("active");
$(this).addClass("active");
$("body").css("background", $(this).attr("data-color"));
$(".product-price").css("color", $(this).attr("data-color"));
$(".product-button").css("color", $(this).attr("data-color"));
$(".product-pic").css("background-image", $(this).attr("data-pic"));
});
.product-colors span {
width: 14px;
height: 14px;
margin: 0 10px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.blue {
background: #7ed6df;
}
.green {
background: #badc58;
}
.yellow {
background: #f9ca24;
}
.rose {
background: #ff7979;
}
.product-colors .active:after {
content: "";
width: 22px;
height: 22px;
border: 2px solid #8888;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
left: -4px;
top: -4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
<body>
<div class="product-card">
<h1>A new model of free group travel</h1>
<p>Travel destination</p>
<div class="product-pic"></div>
<div class="product-colors" id="Banner">
<span class="blue active" data-color="#7ed6df" data-pic="url(1.jpg)"></span>
<span class="green" data-color="#badc58" data-pic="url(2.jpg)"></span>
<span class="yellow" data-color="#f9ca24" data-pic="url(3.jpg)"></span>
<span class="rose" data-color="#ff7979" data-pic="url(4.jpg)"></span>
</div>
<div class="product-info">
<div class="product-price">$90</div>
Add to Cart
</div>
</div>
</body>
I am learning the basics of JavaScript, I don’t know how to implement this feature.
Hope you can help me
Thanks for your help :)
you can't use background and background-image together, one will overwrite the other,
By the way ,what are you trying to create? a carousel or what?
well, I guess this is what you're trying to do,
in order to achieve this, you need to declare the $('body') twice, add background-color to the first, then background-image to the second or (vice-versa),
below is the final code
var span = $('.product-colors span');
span.on('click', function() {
span.removeClass('active');
$(this).addClass('active');
$('body').css("background-color", $(this).attr('data-color'));
$('body').css('background-image', $(this).attr('data-pic'));
});
then go the css, I added background-blend property to it, so as to blend the background-color and background-image together, I also set the span to display: inline-block
check out this codepen link to see all the changes made here
https://github.com/UneSaltedFish/landingpage.git (github link to view full html/css/js)
Here I am developing a landing page, and On the right bar vector picture, I used a hover effect(When I enter this pic, It will change to another picture and there will have two clickable text on it.)
<div class="rightCon">
<img onmouseenter="right2()" onmouseleave="right1()" src="right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></div>
<div id= "right2" class = "text"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></div>
</div>
and it is looks like this.
img
Here is the css code:
a{
color:black;
text-decoration: none;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:150px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.text{
font-family: "Arial Rounded MT Bold", sans-serif;
font-size: 30px;
}
and the js code
function right2(){
document.getElementById("right").src = "right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
The problem is the onmouseenter is work when go in to right area, but when I go in to right1 and right 2 area, onmouseleave is work, which I don't want to. I want this hover only work when enter right and leave right.
After I search online, I try to make div as a child of img but I don't know How to make children of a img.And I am stuck here.
Thank you in advance for all help.
If you want the events to be on the image and the other siblings, you should put the event listeners on their parent. Now anywhere you hover in the parent, the mouse will remain.
<div class="rightCon" nmouseenter="right2()" onmouseleave="right1()">
<img o src="right.png" alt="right" class="right" id = "right">
...
Other option just pure css
.rightCon .details {
display: none;
}
.rightCon:hover .default {
display: none;
}
.rightCon:hover .details {
display: block;
}
<div class="rightCon">
<img class="default" src="http://placekitten.com/g/400/200">
<img class="details" src="http://placekitten.com/400/200">
<div class="default">FOOOOOO</div>
<div class="details">Meow</div>
</div>
I am using Dreamweaver for the first time to code. I am intermediate in HTML.
I've been trying to use a png file as a button. I've found some sources stating that a ...
<button src=Home_button> </button>
... will work, but I have tried it, and to no avail, it does not work. Any suggestions?
NOTE:
I am also using a CSS to build this Very basic website.
Just add background-image to your button.
<button id="home_button">click me</button>
and then add:
#home_button {
background-image: url(...);
}
You may need to add further styling to it of course, such as widths and other background properties to get it just right. But this is how you add a background image to a button.
Here's a working demo as well:
#home_button {
width: 150px;
height: 150px;
background-image: url('http://i.stack.imgur.com/sfed8.png');
background-size: cover;
background-color: #eee;
}
<button id="home_button"></button>
You can add an img tag inside your button tag.
<button id="bar" type="submit"><img src="http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" /></button>
There are many ways to create something that looks like an image and behaves like a button.
Here-below are code examples demonstrating 5 options worth considering...
Option 1 :
You could put an <img> element inside a <button> element :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
button, img {
padding: 0;
font-size: 0;
border: none;
}
<button id="myButton">
<img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
</button>
(see also this Fiddle)
Option 2 :
You could use an <a>-tag instead :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
a {
border: none;
display: inline-block;
font-size: 0;
}
<a id="myButton" href="#">
<img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
</a>
(see also this Fiddle)
Option 3 :
You could just attach your click handler directly to your image :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
<img id="myButton" src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
(see also this Fiddle)
Option 4 :
You could set your image as a background-image of a <button>-tag or other tag that represents a button.
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
input[type=submit] {
background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150");
width: 150px;
height: 150px;
border: none;
}
<input type="submit" id="myButton">
(see also this Fiddle)
Option 5 :
You could set your image as a background-image of an <a>-tag, a <div>-tag or another tag that doesn't represent a button :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
div {
background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150");
width: 150px;
height: 150px;
border: none;
}
<div id="myButton"></div>
(see also this Fiddle)
You could do <img src="#" alt="" /> to achieve what you want.
There are several ways to use an image as a button..
<a href="your_link.html">
<img id="mypic' src="path_to_your.png" alt="MyImage" width="200" height="300" />
</a>
css..
#mypic {
background: #390239;
color:#7e4a00;
border:#7e4a00 2px solid;
border-color:;
outline:none;
padding: 6px;
border-radius:5px;
text-align: center;
}
Chris also has a good answer... it depends on what looks good on the page, as well as your coding knowledge.
Here's what you can do...
HTML
<button>Click Me</button>
CSS
button {
display: inline-block;
height: 50px // height of your button image
text-indent: -9999px // hide if you have text inside <button>
width: 100px // width of your button image
}
Hope this will help :)
I've created this little toggle, since i"m starting with javascript, but it's not working as I would like to. The brown box should appear and disappear both on hover and click (for ipad mostly).
Right now it's fine for hover, but not for clicking on ipad, it just appears once, and thats it.
I think it's also getting confused with my sharing icons.
Any help is appreciated.
jsfiddle
function toggleDisplay (toBlock, toNone) {
document.getElementById(toBlock).style.display = 'block';
document.getElementById(toNone).style.display = 'none';
}
#toggle_hero
{
float:left;
}
.leftHalf
{
display: block;
height: 100%;
width: 50%;
float: left;
position: absolute;
z-index: 2;
}
.leftHalf div
{
display:none;
}
.leftHalf:hover
{
}
.leftHalf:hover div
{
display:block;
width: 100%;
height: 23%;
overflow: auto;
margin: auto;
position: absolute;
left: 0;
bottom: 70px;
right: 0;
background: white;
color: #fff;
background-color:rgba(207,167,80,0.7);
padding:10px;
font-size: 0.8em;
font-weight: 200;
}
.leftHalf:hover div h3
{
font-weight: 500;
float:left;
}
.leftHalf:hover div span{
float:right;
text-align: center;
padding-bottom:5px;
color:black;
}
hover (on a pc) or click me (on ipad)
<div id="toggle_hero" onclick="toggleDisplay('comment', 'toggle_hero')">
<div class="leftHalf clearfix" id="comment">
<div>
<span>
<a target="_blank" class="icon-facebook fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">facebook </a>
<a target="_blank" href="http://twitter.com/share?url=http://google.com" class="fa fa-twitter"> twitter</a>
</span>
<h3>this text should appear both on hover and click (for ipad)</h3>
</div>
</div>
</div>
You could just create an event listener that captures the current toggled state in a var.
var toggle = false;
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', function() {
if (toggle === false) {
this.getElementsByTagName('p')[0].style.display = 'none';
toggle = true;
} else {
this.getElementsByTagName('p')[0].style.display = 'initial';
toggle = false;
}
});
http://jsfiddle.net/scott88/bLkdt6mc/
You can add another listener for the 'mouseover'.
Your HTML structure is a bit weird. The text that you want to hover/click is actually outside of the target area for your click event. It happens to work for me locally because of the absolute positioning, but I wouldn't be surprised if the iPad browser behaves differently.
I would suggest defining a clear target for what is to be clicked/hovered, apply a class on click/hover, and handle the rest in CSS. I put together a sample of what I envision. You can remove the mouseenter and mouseleave events to simulate on a computer how it works with the touch events. I'm not sure exactly how you want it to behave, but hopefully this is enough to get you started.
function setHover(isHover) {
var element = document.getElementById("toggle_hero");
if (isHover)
element.className = "hovered";
else
element.className = "";
}
function toggleHover() {
var element = document.getElementById("toggle_hero");
setHover(element.className === "");
}
#toggle_hero {
float:left;
}
#comment {
display:none;
width: 100%;
height: 23%;
overflow: auto;
margin: auto;
position: absolute;
left: 0;
right: 0;
background: white;
color: #fff;
background-color:rgba(207,167,80,0.7);
padding:10px;
font-size: 0.8em;
font-weight: 200;
}
.hovered #comment {
display: block;
}
<div id="toggle_hero" onclick="toggleHover()" onmouseenter="setHover(true);" onmouseleave="setHover(false);">
hover (on a pc) or click me (on ipad)
<div id="comment">
<div>
<span>
<a target="_blank" class="icon-facebook fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">facebook </a>
<a target="_blank" href="http://twitter.com/share?url=http://google.com" class="fa fa-twitter"> twitter</a>
</span>
<h3>this text should appear both on hover and click (for ipad)</h3>
</div>
</div>
</div>