i made this button but it dosen't work at first click.
it is work when i clicked twice;;
is there anything that i miss?
or something wrong?
any help will be so appreciated :)
thanks!
function myFunction99() {
var gwbtn = document.getElementById("discountbigbox");
var gwbtnbig = document.getElementById("discountprice");
if (gwbtn.style.height === "0px") {
gwbtn.style.height = "210px";
gwbtnbig.style.border = "1px solid black";
gwbtnbig.style.color = "black";
} else {
gwbtn.style.height = "0px";
gwbtnbig.style.border = "1px solid #cccccc";
gwbtnbig.style.color = "#999";
}
}
#discountbigbox {width:100%;
height:0px;
overflow:hidden;
text-align:left;
background-color: #f7f9ff;
margin-bottom:20px;
transition: all 0.5s ease;
font-size:13px;
margin-top:45px;
}
#discountprice { border: 1px solid #cccccc;
width: fit-content;
float: right;
padding: 0px 10px;
border-radius: 4px;}
#discountprice:hover { border: 1px solid black;
color:black;}
<div id="discountprice" onclick="myFunction99()" > + click this button</div>
<div id="discountbigbox">
<p>test</p>
</div>
On first click the height property value is empty, add the condition to check empty:
if (gwbtn.style.height === "0px" || gwbtn.style.height === "") {
function myFunction99() {
var gwbtn = document.getElementById("discountbigbox");
var gwbtnbig = document.getElementById("discountprice");
if (gwbtn.style.height === "0px" || gwbtn.style.height === "") {
gwbtn.style.height = "210px";
gwbtnbig.style.border = "1px solid black";
gwbtnbig.style.color = "black";
} else {
gwbtn.style.height = "0px";
gwbtnbig.style.border = "1px solid #cccccc";
gwbtnbig.style.color = "#999";
}
}
#discountbigbox {width:100%;
height:0px;
overflow:hidden;
text-align:left;
background-color: #f7f9ff;
margin-bottom:20px;
transition: all 0.5s ease;
font-size:13px;
margin-top:45px;
}
#discountprice {
border: 1px solid #cccccc;
width: fit-content;
float: right;
padding: 0px 10px;
border-radius: 4px;
}
#discountprice:hover {
border: 1px solid black;
color:black;
}
<div id="discountprice" onclick="myFunction99()" > + click this button</div>
<div id="discountbigbox">
<p>test</p>
</div>
The height property starts off as not set (i.e. empty). Setting it in the CSS doesn't mean there's a value in the JS style property in the DOM - that reads from the inline style property of the element.
If you account for that in your initial if then it will work fine:
if (gwbtn.style.height === "0px" || !gwbtn.style.height) {
Demo:
function myFunction99() {
var gwbtn = document.getElementById("discountbigbox");
var gwbtnbig = document.getElementById("discountprice");
console.log(gwbtn.style.height);
if (gwbtn.style.height === "0px" || !gwbtn.style.height) {
gwbtn.style.height = "210px";
gwbtnbig.style.border = "1px solid black";
gwbtnbig.style.color = "black";
} else {
gwbtn.style.height = "0px";
gwbtnbig.style.border = "1px solid #cccccc";
gwbtnbig.style.color = "#999";
}
}
#discountbigbox {width:100%;
height:0px;
overflow:hidden;
text-align:left;
background-color: #f7f9ff;
margin-bottom:20px;
transition: all 0.5s ease;
font-size:13px;
margin-top:45px;
}
#discountprice { border: 1px solid #cccccc;
width: fit-content;
float: right;
padding: 0px 10px;
border-radius: 4px;}
#discountprice:hover { border: 1px solid black;
color:black;}
<div id="discountprice" onclick="myFunction99()" > + click this button</div>
<div id="discountbigbox">
<p>test</p>
</div>
Alternatively, you can use getComputedStyle to detect the style values of the element as computed when stylesheets are taken into account:
function myFunction99() {
var gwbtn = document.getElementById("discountbigbox");
var gwbtnbig = document.getElementById("discountprice");
var st = getComputedStyle(gwbtn);
console.log(st.height);
if (st.height === "0px") {
gwbtn.style.height = "210px";
gwbtnbig.style.border = "1px solid black";
gwbtnbig.style.color = "black";
} else {
gwbtn.style.height = "0px";
gwbtnbig.style.border = "1px solid #cccccc";
gwbtnbig.style.color = "#999";
}
}
#discountbigbox {width:100%;
height:0px;
overflow:hidden;
text-align:left;
background-color: #f7f9ff;
margin-bottom:20px;
transition: all 0.5s ease;
font-size:13px;
margin-top:45px;
}
#discountprice { border: 1px solid #cccccc;
width: fit-content;
float: right;
padding: 0px 10px;
border-radius: 4px;}
#discountprice:hover { border: 1px solid black;
color:black;}
<div id="discountprice" onclick="myFunction99()" > + click this button</div>
<div id="discountbigbox">
<p>test</p>
</div>
You have two states you need to cover "blank or zero" and "210".
You can craft the if logic differently to only use the fixed value, eg:
if (thing.style.height !== "210px") {
// it's blank or zero
} else {
// it's 210
}
Related
I'm trying to make it so when a user clicks on a triangle/the text next to it, the triangle turns and shows a PHP variable under it. However, when I do this it does not appear to work and the cursor pointer does not even appear. Any help would be appreciated.
Thanks, Code is below
function triangleChange1() {
var x = document.getElementById("triangle1")
var y = document.getElementById("bID")
if (y.style.display === "none") {
x.style.transform = "rotate(90deg)";
y.style.display = "block";
}
else {
x.style.transform = "rotate(-90deg)";
y.style.display = "none";
}
}
.triangle1/*, .triangle2, .triangle3, .triangle4, .triangle5*/{
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 14px solid #555;
border-bottom: 6px solid transparent;
margin-left: -25px;
cursor: pointer;
transition: 0.5s;
}
<div class="triangle1" id="triangle1" onclick="triangleChange1()"></div> <div class = "balance" onclick="triangleChange1()"> Student Card Balance </div><br>
<div class = "bID" id="bID"> $<?php echo $Balance;?> </div><br>
I don't see a triangle shape but you have to give the size property for the div to be seen, I guess you're missing that.
function triangleChange1() {
var x = document.getElementById("triangle1")
var y = document.getElementById("bID")
if (y.style.display === "none") {
x.style.transform = "rotate(90deg)";
y.style.display = "block";
} else {
x.style.transform = "rotate(-90deg)";
y.style.display = "none";
}
}
.triangle1
/*, .triangle2, .triangle3, .triangle4, .triangle5*/
{
width: 30px;
height: 30px;
border-top: 6px solid transparent;
border-left: 14px solid #555;
border-bottom: 6px solid transparent;
margin-left: 25px;
cursor: pointer;
transition: 0.5s;
border: 1px solid red;
background: teal;
}
<div class="triangle1" id="triangle1" onclick="triangleChange1()"></div>
<div class="balance" onclick="triangleChange1()"> Student Card Balance </div><br>
<div class="bID" id="bID"> $
<?php echo $Balance;?> </div><br>
I was working on project which required to change background color of webpage when user hover mouse on a textfield and whole webpage theme must change when mouse pointer is on that textfield. It worked well but when I added a submit button and made a function to change its properties on mouse over and on mouse out, whole Javascript code stopped working!
<!DOCTYPE html>
<?php
function redirect($url){
ob_start();
header('Location: '.$url);
ob_end_flush();
die();
}
$error = "";
$myurl = $_SERVER['REQUEST_URI'];
if (isset($_GET['name'])) {
$name = $_GET['name'];
} else {
$name = "";
}
//$name = $_GET["name1"];
$name = trim($name);
if(empty($name)){
$error="";
}else{
echo $myurl;
}
?>
<html>
<head>
<title>We Wish</title>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
#import url('https://fonts.googleapis.com/css?family=Comfortaa:700&display=swap');
body{
background-color: #1a1a1a;
}
input{
background-color: transparent;
border-radius: 50px;
border: 1.5px solid white;
}
#pallete{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#nametf{
width: 200px;
height: 20px;
padding: 5px 10px;
color: white;
font-size: 15px;
font-family: 'Comfortaa', cursive;
}
#nametf:hover{
border: 1.5px solid #1a1a1a;
}
#btn{
color: white;
font-family: 'Comfortaa', cursive;
background-color: transparent;
border: 1.5px solid white;
border-radius: 50px;
padding: 9px 20px 8px 20px;
margin-top: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
cursor: pointer;
transition-duration: 0s;
}
#btn:hover{
color: #1a1a1a;
background-color: cyan;
border-color: cyan;
box-shadow: 0px 0px 15px cyan;
}
</style>
</head>
<body>
<center>
<div id="pallete">
<form method="get" action="wwhome.php">
<input type="text" name="name1" id="nametf" onmouseover="bgChange('white','#1a1a1a')" onmouseout="bgChange('#1a1a1a','white')" onchange="widen()" value="" required>
</form>
<span>
<input type="submit" name="submit" id="btn" value="CREATE" onmouseover="glow('on')" onmouseout="glow('off')">
</span>
</div>
</center>
</body>
<script type="text/javascript">
var nametf = document.getElementById('nametf');
function bgChange(bg,color){
document.body.style.background = bg;
nametf.style.color = color;
var btn = document.getElementById('btn');
if(bg=='white'){
//btn.style.transition-duration = "0s";
btn.style.border = "1.5px solid #1a1a1a";
btn.style.color = "#1a1a1a";
} else {
//btn.style.transition-duration = "0s";
btn.style.border = "1.5px solid white";
btn.style.color = "white";
}
}
function widen(){
var value = nametf.value;
if(value.length > 17){
nametf.style.width = '300px';
} else {
nametf.style.width = '200px';
}
}
function glow(mode){
if(mode=='on'){
btn.style.transition-duration = "0.4s";
btn.style.color = "#1a1a1a";
btn.style.background-color = "cyan";
btn.style.border-color = "cyan";
btn.style.box-shadow = "0px 0px 15px cyan";
} else {
btn.style.transition-duration = "0.4s";
btn.style.color = "white";
btn.style.background-color = "transparent";
btn.style.border-color = "white";
btn.style.box-shadow = "0px 0px 0px transparent";
}
}
</script>
</html>
I even tried alerting a message without any function but still it didn't work!!
btn.style.transition-duration is going to be the first place where you're getting issues. you can't have a dash in a property name just bare like that. Try changing those properties with dashes in them in another way
btn.style['transition-duration'] may work, I'm not 100% sure, but I am sure that the dashes are creating basically a syntax error.
You are assigning values to property that has hyphen in them ( - ). In Javascript, this is not allowed.
You should change the property assignement that has hyphen ( btn.style.transition-duration = "0.4s"; for example) to use CamelCase
instead.
btn.style.transitionDuration = "0.4s";
This might fix one of your problems. There might be more, but we can't be sure until you tell us if there is any error in the JS console and what they are.
var arrlength;//////////////////////////////////////////////////////////////////
function opentextarea(borderColor) {
var arr = document.getElementsByClassName("myCustomTextarea");
arrlength=arr.length;
var goOut= 1;
Array.prototype.forEach.call(arr, function(el) {
if (el.style.backgroundColor!=='lightblue'){
goOut=0;
alert("Enter or delete the previus commnet!");
}
});
if (goOut===1){
//////////////
var comentwindow = document.getElementById("StatusID"); //StatusID
var d1 = new Date();
var d2= d1.toDateString();
var d3= d1.toLocaleTimeString();
var dateTimeUser = document.createTextNode(d2+" "+d3+" username");
//dateTimeUser.style.fontSize = "8px";
dateTimeUser.className = 'dateTimeUserClasN';
dateTimeUser.id = arrlength+"dateTimeUserID";
comentwindow.appendChild(dateTimeUser); /////////////////////////////////////////1
var input = document.createElement('textarea');
input.maxLength = 5000;
input.cols = 28;
input.rows = 5;
input.style.borderColor = borderColor;
input.className = 'myCustomTextarea';
var arr = document.getElementsByClassName("myCustomTextarea");
input.id = arrlength+"textarea";
//var comentwindow = document.getElementById("StatusID"); //StatusID
comentwindow.appendChild(input);//////////////////////////////////////////////////2
var ele = document.getElementById(arrlength+"buttonSE");
if(ele === null){
var buttonSE = document.createElement('button');
buttonSE.className = 'enterCommentBut';
buttonSE.id=arrlength+"buttonSE";
buttonSE.onclick = function() {
if(document.getElementById(arrlength+"textarea").value != ''){
document.getElementById(arrlength+"textarea").style.backgroundColor= "lightblue";
var e1 = document.getElementById('StatusID');
var e2 =(e1.children.length);
e1.removeChild(e1.children[e2-1]);
e1.removeChild(e1.children[e2-2]);
}else{
alert("It is not posible to enter empty comment.");
}
}
var SE = document.createTextNode("Enter");
buttonSE.appendChild(SE);
comentwindow.appendChild(buttonSE);/////////////////////////////////////////////3
}
var ele2 = document.getElementById(arrlength+"buttonSC");
if(ele2 === null){
var buttonSC = document.createElement('button');
buttonSC.className = 'clearCommentBut';
buttonSC.id=arrlength+"buttonSC";
buttonSC.onclick = function() {
var e1 = document.getElementById('StatusID');
var e2 =(e1.children.length);
var myNode = document.getElementById("StatusID");
while (myNode.lastChild) {
myNode.removeChild(myNode.lastChild);
}
};
var SC = document.createTextNode("Clear");
buttonSC.appendChild(SC);
comentwindow.appendChild(buttonSC);//////////////////////////////////////4
}
}
}
function createObject2(){
var e3 = document.getElementById("StatusID");
var e4 = document.getElementById("Status0ID");
var e5 = document.getElementById("Status2ID");
e3.style.display = 'block';
e4.style.display = 'block';
e5.style.display = 'block';
}
document.getElementById("clickMe2").onclick = createObject2;
function updateScroll(){
var element = document.getElementById("StatusID");
element.scrollTop = element.scrollHeight;
}
function ObjectRed(){
var borderColor= "red";
opentextarea(borderColor);
updateScroll();
}
document.getElementById("ObjectRed").onclick = ObjectRed;
function ObjectGreen(){
var borderColor= "green";
opentextarea(borderColor);
updateScroll();
}
document.getElementById("ObjectGreen").onclick = ObjectGreen;
*,
*::before,
*::after {
box-sizing: border-box;
}
div.Status0 {
position: absolute;
top: 15px;
width: 250px;
height:40px;
margin: 0;
padding: 1em;
font-size: 12px;
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: white;
}
div.Status1 {
position: absolute;
top: 70px;
width: 250px;
height:700px;
margin: 0;
padding: 1em;
font-size: 12px;
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: white;
}
div.Coment1{
float: left;
width: 130px;
height:100px;
margin: 0;
padding: 1em;
font-size: 12px;
/* height: 100%;
overflow: auto;*/
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: yellow;
}
.content {
padding: 18px 0;
border-bottom: solid 2px #cfcfcf;
}
.myCustomTextarea {
border:0;
padding:1px;
font-size:1.0em;
font-family:"Times New Roman";
color:black;
border:solid 2px #ccc;
margin:0 0 4px;
width:215px;
height:50px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.myCustomTextarea:focus {
resize: none;
border-radius: 5px;
outline: none !important;
}
.dateTimeUserClasN{
}
.startbutton{
position: absolute;
left: 270px;
top:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom </title>
</head>
<body>
<div class="Status0" id="Status0ID" style="display: none">
<input type="button" id="ObjectRed" value="Problem" />
<input type="button" id="ObjectGreen" value="Okay" />
</div>
<div class="Status2" id="Status2ID" style="display: none">
<div class="Status1" id="StatusID" style="display: none"></div>
</div>
<input class =" startbutton" type="button" id="clickMe2" value="New object2" />
<script src="js/createObject.js"></script>
<link rel="stylesheet" href="css/styleIvan.css">
</body>
</html>
I have a "div" inside main "div". Status1 inside Status2. Status1 has a time date text, textarea and two buttons (enter and cancel).
When I call opentextarea function I get this 4 elements.
Below is this code for comments managing. The problem is that when i press on "cancel" button. It deletes all. But i would like to delete only last packet of
4 elements (last Status1 div). I need Status1 to be child of Status2. So when i press on cancel to delete only last child.
I can not make this work for me, so I am asking here for help.
How to do it?
I have pasted my JS code, CSS and HTML respectively below.
var hgt=0,newhgt=0,bsh=0,diff=0;
$('#footS').resizable({
alsoResize:"#footC",
handles:"n",
start: function(event,ui){
oldhgt = ui.size.height;
bsh = $('#bodyS').height();
}, resize:function(event,ui){
diff = oldhgt - ui.size.height;
if(diff<0)
newhgt = bsh - Math.abs(diff);
else
newhgt = bsh + diff;
$('#bodyS').height(newhgt);
}, stop:function(event,ui){
newhgt = bsh - Math.abs(oldhgt - ui.size.height);
$('#bodyS').css("height",newhgt+"px");
$('#bodyC').css("height",newhgt+"px");
$('#footS').css("height",ui.size.height+"px");
}
});
#vscale,#canvas {
height: auto;
width: auto;
/* border: 1px solid gray; */
margin-left: 5px;
float: left;
position:absolute;
}
#canvas{
margin-left:100px;
}
.scale {
height:150px;
width:50px;
border: 1px dotted gray;
}
#headS,#headC{border-color: red;min-height:50px;}
#bodyS,#bodyC{border-color: blue;min-height:50px;}
#footS,#footC{border-color: green; min-height:50px;}
.ui-resizable-helper {
border: 1px dotted #999;
}
.fscale{top:0.0px;position:relative;}
.cont{
border: 1px dotted gray;
height:150px;
width:auto;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="vscale" style="top:75px;">
<div id="headS" class="scale">HScale</div>
<div id="bodyS" class="scale">BScale</div>
<div id="footS" class="scale fscale">FScale</div>
</div>
<div id="canvas" style="width:300px;top:75px;">
<div id="headC" class="cont">HeadContainer</div>
<div id="bodyC" class="cont">BodyContainer</div>
<div id="footC" class="cont">FootContainer</div>
</div>
The problem is when I re-size the north handle of the #footS div I am unable to change the height of #bodyS div and #bodyC div while re-sizing and also when re-size stops. I also need to decrease the top of the #footC div as I am re-sizing the #footS div dynamically. Any sort of help would be helpful.
Below is the logic i wrote to get the re-size working for #bodyC and #bodyS accordingly.
var oldFSH=0,newBSH,oldBSH=0,diff;
$('#footS').resizable({
ghost:true,
handles:"n",
start: function(event,ui){
oldFSH = $('#footS').height();
oldBSH = $('#bodyS').height();
newBSH=diff=0;
}, resize:function(event,ui){
var newFSH = ui.size.height;
diff = oldFSH > newFSH?oldFSH - newFSH:newFSH - oldFSH;
newBSH = oldFSH > newFSH?oldBSH+diff:oldBSH-diff;
$('#bodyS,#bodyC').height(newBSH);
}, stop:function(event,ui){
var newFSH = ui.size.height;
$('#bodyS,#bodyC').css("height",newBSH+"px");
$('#footC').css("height",newFSH + "px");
$("#footS").css("top","0px");
}
});
#vscale,#canvas {
height: auto;
width: auto;
/* border: 1px solid gray; */
margin-left: 5px;
float: left; /*Here you can also use display: inline-block instead of float:left*/
position:absolute;
}
#canvas{
margin-left:100px;
}
.scalecont {
height:144px;
border: 1px dotted gray;
}
.bodycss{
height:200px;
border: 1px dotted blue;
}
#footS{top:0px;position:relative;}
#headC,#bodyC,#footC{width:auto;}
.ui-resizable-helper {
border: 1px dotted #999;
}
<div id="vscale" style="top:100px;">
<div id="headS" class="scalecont">HScale</div>
<div id="bodyS" class="bodycss">BScale</div>
<div id="footS" class="scalecont">FScale</div>
</div>
<div id="canvas" style="width:300px;top:100px;">
<div id="headC" class="scalecont">HeadContainer</div>
<div id="bodyC" class="bodycss">BodyContainer</div>
<div id="footC" class="scalecont">FootContainer</div>
</div>
And, also I added an option called "ghost:true" to the jquery resizable widget.
In my HTML I have got 4 boxes that I want to increase in size and appear in the middle of the website by onclick. But it doesn't work with this clone version.
function changeSize(id, weight, height){
//$( "." + id ).clone().appendTo( "new" + id );
var elem = document.getElementById(id);
clone = elem.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "newid" +id;
document.body.appendChild(clone);
if(elem.getAttribute('style')){
elem.removeAttribute('style');
} else {
elem.style.width = weight + 'px';
elem.style.height = height + 'px';
elem.style.fontSize = '30px';
elem.style.position = 'absolute';
elem.style.left= '40%';
}
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
.kaesten{
width:240px;
height:300px;
background-color:darkgrey;
background-position:center;
background-repeat:no-repeat;
text-shadow:0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align:top;
text-shadow: 3px 3px 4px #777;
float:left;
margin-left:30px;
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
Question: How can I clone the box by onclick and show it in the middle of the site? How can I remove it by onclick?
You can modify CSS with jQuery css() Method :
source : http://api.jquery.com/css/
To set a specified CSS property, use the following syntax:
css("propertyname","value");
$(document).ready(function() {
$('.kaesten').click(function() {
$('.kaesten').removeAttr('style');
var id = $(this).attr('id');
$('#' + id).css({
"width": "30em",
"height": "18em",
"top": "50%",
"left": "50%",
"position": "fixed",
"margin-top": "-9em",
"margin-left": "-15em",
"background-color": "blue"
});
});
});
.kaesten {
cursor: pointer;
width: 240px;
height: 300px;
background-color: darkgrey;
background-position: center;
background-repeat: no-repeat;
text-shadow: 0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align: top;
text-shadow: 3px 3px 4px #777;
float: left;
margin-left: 30px;
color: #fff;
font-family: 'helvetica';
}
.container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
</div>
If you just need to bring the div in middle and on clicking it should go back to the original position .Try this code , no jquery required.
function changeSize(id, weight, height){
var elem = document.getElementById(id);
if(elem.className == 'absoluteclass'){
elem.setAttribute('class','kaesten');
}else{
var currentAbsoluteElem = document.getElementsByClassName('absoluteclass');
if(currentAbsoluteElem.length > 0){
console.log(currentAbsoluteElem[0])
currentAbsoluteElem[0].setAttribute('class','kaesten');
}
var elem = document.getElementById(id);
elem.setAttribute('class','absoluteclass');
/* for making the height , width dynamic you can change it from here
elem.style.width = weight + 'px';
elem.style.height = height + 'px';
elem.style.left= '40%';
*/
}
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
.kaesten{
width:240px;
height:300px;
background-color:darkgrey;
background-position:center;
background-repeat:no-repeat;
text-shadow:0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align:top;
text-shadow: 3px 3px 4px #777;
float:left;
margin-left:30px;
}
.absoluteclass{
position:absolute;
background-color:darkgrey;
width:600px;
height:600px;
left:calc(50% - 300px);
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
No Need to clone the div , If still you need to clone the div we might need to change the code accordingly.You can check the JSFIDDLE here
Updated Code : Hope this is what you were looking for :)
function changeSize(id, weight, height){
var elem = document.getElementById(id);
var currentAbsoluteElem = document.getElementById('dummy');
var text = elem.innerHTML;
currentAbsoluteElem.innerHTML = text;
currentAbsoluteElem.style="display:block";
/*Extra styling neeed to be done here*/
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
var absoluteCl = document.getElementsByClassName('absoluteclass');
absoluteCl[0].onclick = function(){
console.log(document.getElementsByClassName('absoluteclass'))
document.getElementsByClassName('absoluteclass')[0].setAttribute('style','display:none');
}
.kaesten{
width:240px;
height:300px;
background-color:darkgrey;
background-position:center;
background-repeat:no-repeat;
text-shadow:0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align:top;
text-shadow: 3px 3px 4px #777;
float:left;
margin-left:30px;
}
.absoluteclass{
position:absolute;
background-color:darkgrey;
width:600px;
height:600px;
left:calc(50% - 300px);
display:none;
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
<div id="dummy" class="absoluteclass"></div>