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>
Related
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);
}
I need to do tank animation, where according to the liquid level, the height of the tank(image) changes. For this I have written HTML code as below:
<div>
<img id='T1' style="height:0px;position:absolute">
</div>
Now I am obtaining the level information from database using ajax and trying to change the height of the image according to the value of the level parameter using JavaScript.
var level=response;
document.getElementById('T1').height=level."px";
This is changing the height from top to down, but I want down to top.
Inverting the div using transform is not working. Also transition is not working as transition-time cannot be specified in this case.
Please provide me some suggestions.
Position the image absolute to the bottom of the container with bottom: 0 so that it always starts at the bottom and extends from there.
To demonstrate:
var level=14;
document.getElementById('T1').style.height = level+"px";
var changeLevel = function() {
var level = document.getElementById('level').value;
document.getElementById('T1').style.height = level+"px";
}
div {
margin-top: 20px;
position: relative;
height: 50px;
background-color: #eee;
}
#T1 {
height: 0px;
background-color: #909;
width: 100%;
position: absolute;
bottom: 0;
}
<input id="level" type="text" placeholder="Level" />
<input type="button" value="Change Level" onclick="changeLevel()"/>
<div>
<div id='T1'></div>
</div>
You can add following CSS for this
#t1 {
position: absolute;
left: 0px;
bottom: 0px;
}
or
<div>
<img id='T1' style="height:0px;position:absolute; bottom: 0px; left: 0px;">
</div>
Hard to figure out what you are trying to do. Maybe a link would help. Only thing I could see is style.height is written incorrectly.
document.getElementById("T1").style.height = level + "px";
I'm pretty sure there is already an example for this but I couldn't find one, and I don't know exactly what to search for.
http://imgur.com/a/hHNkZ
I am trying to make a resizable div from the button circled in red above.
The photo behind this div comes from a slick slider ( http://kenwheeler.github.io/slick/ ).
<div class="slider-for">
<img src="images/product0.jpg" alt="">
<img src="images/product1.jpg" alt="">
<img src="images/product2.jpg" alt="">
<img src="images/product3.jpg" alt="">
</div>
I was thinking of making a width 0 div above, and then with the slider, increase its width with js maybe.
In this div, I want to put a recipe for that certain product. I have 4 photos, so the content has to change depending on picture. ( so it's not static content).
Does this need to be made in php?
I think this would be helpful to you:
https://jsfiddle.net/u0Ljnttg/1/
Its little bit complicated, but still good enough. :)
Just for sake of SO:
JS:
var links = document.getElementById("imageLinks");
links.onmousedown = function(e) {
var theSrc = e.target.dataset.src;
if (theSrc) {
str = "url(\"" + theSrc + "\");";
//Sorry for using this:
document.getElementById("imageBack").setAttribute("style", "background-image:" + str)
}
}
var resizer = document.getElementById("content-resize");
resizer.onmousedown = resizableStart;
function resizableStart(e) {
var elem = document.getElementById("content");
elem.originalW = elem.clientWidth;
this.onmousemove = resizableCheck;
this.onmouseup = this.onmouseout = resizableEnd;
}
function resizableCheck(e) {
var elem = document.getElementById("content");
if (elem.clientWidth === elem.originalW) {
elem.originalX = e.clientX;
this.onmousemove = resizableMove;
}
}
function resizableMove(e) {
var elem = document.getElementById("content");
var newW = elem.originalW - e.clientX + elem.originalX;
if (newW < elem.originalW) {
elem.style.width = newW + 'px';
}
}
function resizableEnd() {
this.onmousemove = this.onmouseout = this.onmouseup = null;
}
HTML:
<div class='container'>
<div class='images' id="imageBack" style="background-image: url('http://data.whicdn.com/images/20948152/large.png')">
<div class='content' id="content">
<div id="imageLinks">
<a href="#" data-src='http://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg'>1</a>
<a href="#" data-src='http://i.imgur.com/NhDejjN.jpg'>2</a>
<a href="#" data-src='https://s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg'>3</a>
<a href="#" data-src='http://data.whicdn.com/images/20948152/large.png'>4</a>
</div>
<span id="content-resize"></span>
</div>
</div>
</div>
CSS:
html,
body {
min-height: 100% !important;
height: 100%;
}
.container {
width: 100%;
min-height: 100%;
height: 100%;
}
.images {
width: 100%;
min-height: 100% !important;
height: 100%;
}
#content {
min-height: 100% !important;
height: 100%;
/*Change this to change width*/
width: 70%;
resize: horizontal;
float: right;
position: relative;
background: white;
}
div {
border: 1px solid black;
}
span {
border: 1px solid black;
border-radius: 50%;
position: absolute;
top: calc(50% - 20px);
left: -10px;
cursor: pointer;
height: 40px;
width: 40px;
display: inline-block;
background: white;
}
I am not sure if you already solved this issue, but since you helped me on the other question, I am interested in helping you with this.
You have some options.
Use pure JavaScript. You can use a lib (eg: this) for that.
Use Jquery $().draggable() propriety. This might help for styling the button..
Using pure HTML & CSS resize. This is not good, since you cannot apply any style to the <div>.
You can make a workaround mixing three <div> elements,
One of them with position: fixed. This is your background.
Another for the container (with a width set manually to hide the page from user). Remove the scrollbar and force the width of your html, body to match your screen.
Another <div> inside the container for your content. This should be able to move horizontally to show and hide the elements.
I have created website which code can be found here: https://jsfiddle.net/7y373j8x/2
I have created a box which appears when clicking on "Portfolio". (The box is called "object2").
I want to insert PNG images inside of this box. Some have suggested to me to do a jQuery slider but I don't want a slideshow. I want the images to be placed next to each other (as thumbnails) and then the user can click on an image and it should become bigger.
HTML:
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map" />
<div class="container">
<p>About me</p>
<div id="portfolio" onclick="show();">Portfolio</div>
<p>Contact me</p>
<div id="object2" onclick="show();">
</div>
</div>
CSS:
#map {
background-attachment: fixed;
}
.container {
color: yellow;
position: fixed;
top: 54%;
left: 58px;
font-family: normal normal 15px Calibri;
}
#object2 {
border-radius: 15px 50px;
background: black;
position: fixed;
bottom: 200px;
right: 400px;
width: 650px;
height: 350px;
cursor: pointer;
display: none;
z-index: 999;
opacity: 0.4;
}
JavaScript:
function show() {
document.getElementById("object2").style.display = "block";
}
you can append the images using javascript or jquery.
update your show() method like this.
function show(){
document.getElementById("object2").style.display = "block";
var image = new Image();
image.src = 'https://placehold.it/350x150';
var image1 = new Image();
image1.src = 'https://placehold.it/200x100';
$('#object2').html('');
$('#object2').append(image);
$('#object2').append(image1);
}
here's the updated JSFIDDLE for the same. hope it helps.
The reason why your function is not working is because onclick operates within the page scope so it can't execute any functions outside of it.
If I moved the script within the same scope, it will work as you can see here:
JavaScript jsfiddle: https://jsfiddle.net/AndrewL32/saTfR/60/
( I have replaced your style.display = "block" with .style.cssText = 'display: block'; )
jQuery Approach
If you are interested in using jQuery, here is a cleaner and easier jQuery approach to modifying css properties with js:
$("#portfolio").click(function(){
$("#object2").css("display", "block");
});
jQuery jsfiddle: https://jsfiddle.net/AndrewL32/saTfR/58/
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>