Clone div and alter style by onclick - javascript

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>

Related

onclick trigger doesn't work at first click

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
}

Child div element managing

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?

Slow background position change in IE

<body onload ="start()">
<div id="masc">
<div id="cont">
</div>
</div>
</body>
I run into a problem with background-position change in Microsoft Edge. It is slow. Other browsers is just fine. Here is my sketch. Maybe it is because of the width of the #cont div. It is preaty big. But in other browsers there is no problem...
function start(){
var cont = document.getElementById("cont");
for(var i = 0; i<1440; i++){
var celda = document.createElement("DIV");
celda.className = "celda";
celda.id=Math.floor(i/60) + ":" + (i%60);
celda.innerHTML = Math.floor(i/60) + ":" + (i%60);
celda.offsetRight = function(){return (this.offsetLeft + this.offsetWidth + (this.style.borderWidth*2));};
cont.appendChild(celda);
}
}
.celda {
display: inline-block;
margin-left:5px;
border:solid 1px red;
width:30px;
height:80px;
margin-top: 225px;
color: white;
padding-top: 40px;
background-image : url("difusor_cerrado.png");
background-position : 0px -80px;
background-repeat : no-repeat ;
}
.celda:hover{
background-position : 0px 0px;
}
#cont {
margin-top:44%;
background : transparent; ;
display:table;
white-space: nowrap;
height:350px;
position:relative;
border:solid 1px black;
}
#masc {
width:1000px;
height:800px;
margin:auto;
overflow-y :hidden;
overflow-x : auto;
border:solid 1px blue;
background-image : url("hierva.png");
background-position : 0% 99%;
background-repeat: repeat-x;
}
This are the images I am using as backgrounds

Re-sizing a div should re-size other div's proportionately

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.

Can't hover no more a div after I've clicked on it

I'm actually trying to do a menu using CSS and jQuery.
It uses images 2 images per button, one for when it's not active and the other for the hover.
This part is made with the stylesheet.
When you click on a li, it take the same style as if the mouse was over. But only one li can be clicked at a time so if you click on another(or the same) li it undo the previous one for the other(or none). This part is done with jquery.
My problem is that when I click on a LI and then unselect it, I can no longer hover it. I think there is a collision between the CSS applied by jQuery and the style sheet.
There is the HTML Part :
<body>
<div id="wrap"><!--Header Menu TagBar -->
<div id="header"></div>
<div id="menu">
<ul>
<li id="genre"></li>
<li id="author"></li>
<li id="home">
<div id="hmIcon"></div>
</li>
<li id="artist"></li>
<li id="year"></li>
</ul>
</div>
This is the CSS Part :
#menu {
background-color:#fff;
width:1000px;
height:60px;
position:relative;
}
#menu ul {
margin:0;
padding:0;
list-style:none;
overflow: hidden;
}
#menu ul li {
width:200px;
float:left;
list-style:none;
text-align:center;
height:60px;
line-height:60px;
opacity:.9;
}
#menu li:hover {
opacity:1;
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.6);
}
#genre {
background-image:url(../images/genreHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}
#genre:hover {
background-image:url(../images/genre.jpg);
}
#author {
background-image:url(../images/authorHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}
#author:hover {
background-image:url(../images/author.jpg);
}
#hmIcon {
width:100%;
height:100%;
background-image:url(../images/HomeIcon.png);
background-position:center center;
background-size:50px 50px;
background-repeat:no-repeat;
}
#home {
background-image:url(../images/homeHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}
#home:hover {
background-image:url(../images/home.jpg);
}
#artist {
background-image:url(../images/artistHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}
#artist:hover {
background-image:url(../images/artist.jpg);
}
#year {
background-image:url(../images/yearContour.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}
#year:hover {
background-image:url(../images/year.jpg);
}
And the best for the last (the headache), the Jquery Part :
function clouds(cssDiv, otherOpened) {
var Div = "#Cloud_" + cssDiv;
var idButton = "#" + cssDiv;
var h = "200px";
if (otherOpened === null) {
var clickedImg = "url(./images/" + cssDiv + ".jpg)";
$(Div).fadeIn(1);
$(Div).animate({
height: h,
}, 600);
$(idButton).css({
'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)',
'background-image': clickedImg
});
return Div;
} else {
var buttonToUnclick = otherOpened.slice(7);
var buttonToClick = cssDiv;
var unClickedImg = "url(./images/" + buttonToUnclick + "Hover.jpg)";
$(otherOpened).animate({
height: "0",
}, 600);
$(otherOpened).fadeOut(1);
$("#" + buttonToUnclick).css({
'box-shadow': ' inset 0px 0px 0px rgba(0,0,0,0.45)',
'background-image': unClickedImg
});
if (Div == otherOpened) {
return null;
} else {
var clickedImg = "url(./images/" + buttonToClick + ".jpg)";
setTimeout(function() {
$(Div).fadeIn(1);
$(Div).animate({
height: h,
}, 600);
$("#" + buttonToClick).css({
'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)',
'background-image': clickedImg
});
console.log(buttonToClick);
console.log(clickedImg);
}, 800);
return Div;
}
}
}
And its call :
$("#genre").click(function() {
whichCloudsOn = clouds("genre", whichCloudsOn);
});
$("#artist").click(function() {
whichCloudsOn = clouds("artist", whichCloudsOn);
});
$("#author").click(function() {
whichCloudsOn = clouds("author", whichCloudsOn);
});
$("#year").click(function() {
whichCloudsOn = clouds("year", whichCloudsOn);
});
Thanks for the help, I'm open to any advices or solutions.
jQuery.css() adds inline styling, which will override your external css. Try adding !important on your hover, like this:
#year:hover {
background-image:url(../images/year.jpg) !important;
}
I made an example fiddle. (click both and then hover)

Categories