className Not Changing back ground image?

Heinz_Stapff · October 11, 2011, 7:57pm

Ok. I have an onclick that does things and changes the className of my ‘logo’ div. All of the background images for div id ‘logo’ are styled by external CSS. A button I setup with addEvent alerts the className of ‘logo’ correctly but the ‘logo’ background doesn’t change?

index.css


#logo { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841;
background-image:url(../sources/articles.jpg); background-position:center center; 
background-repeat:no-repeat;
border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d;}

.logo { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841;
background-image:url(../sources/articles.jpg); background-position:center center; 
background-repeat:no-repeat;
border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d;}
//maybe redundant but neccessary to call again?

.silver { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841; 
background-image:url(../sources/silver.jpg); background-position:center center; 
background-repeat:no-repeat;
border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d; }

.silvergold { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841; 
background-image:url(../sources/silvergold.jpg); background-position:center center; 
background-repeat:no-repeat;
border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d; }

.silverstones { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841;
background-image:url(../sources/silverstones.jpg); background-position:center center; 
background-repeat:no-repeat;
border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d; }

index.js


var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');   
for(i=0;i<sidebarli.length;i++){   
if(sidebarli[i].className=='item' && sidebarli[i].parentNode.className=='prod'){ 
sidebarli[i].onclick=function(){   
EvalSound1();
var p=this.id;
logo.className=p; //not changing background image? Was a week ago?
alert(p+': Is sending your request.');
products.push(p);
getproduct(p);
document.getElementById('logo').className=p;
f1.className='product';
document.getElementById('blank').src='scripts/product.js';
hidewelcome(); //runs but logo background doesn't change?
};
}
else{
//do something else
}}

var placeorder=document.getElementById('placeorder'); 
//utilizing existing button to alert change in className
addEvent(placeorder,'click',function( ){ 
alert(logo.className); //alerts correct change but logo background doesn't change
},false);

Wierd but true. I must have altered the CSS a hundred times but not the logo classNames.nono:

index.html


<div id="logo" class="logo">

Almost forgot the html starts with class=logo. Any help greatly appreciated!

ParkinT · October 11, 2011, 8:09pm

In your JS I see this:

logo.className=p; //not changing background image? Was a week ago?

I don’t see anywhere in your code the ‘logo’ var is defined.
Test for the value of logo with an alert just before this line.

Heinz_Stapff · October 11, 2011, 8:41pm

parkinT thanks for the responce var logo is declared at the top of the index.js. The other thing is when I try style backgroundImage in the onclick it also doesn’t work even though the utility button declares the correct className change.

Index.js


var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');   
for(i=0;i<sidebarli.length;i++){   
if(sidebarli[i].className=='item' && sidebarli[i].parentNode.className=='prod'){ 
sidebarli[i].onclick=function(){   
EvalSound1();
var p=this.id;
logo.style.backgroundImage='url("sources/'+p+'.jpg")';//doesn't work either?
alert(p+': Is sending your request.');
products.push(p);
getproduct(p);
document.getElementById('logo').className=p;
f1.className='product';
document.getElementById('blank').src='scripts/product.js';
hidewelcome();
};

This is getting anoying!

felgall · October 11, 2011, 8:52pm

There is nothing in that code that creates logo. The code just attempts to apply a style to it without actually defining it first.

You need the following line of code to define it.

var logo = document.getElementById(‘logo’);

Heinz_Stapff · October 11, 2011, 9:21pm

felgall & parkinT wierd but this started working

index.js


var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');   
for(i=0;i<sidebarli.length;i++){   
if(sidebarli[i].className=='item' && sidebarli[i].parentNode.className=='prod'){ 
sidebarli[i].onclick=function(){   
EvalSound1();
var p=this.id;
logo.style.backgroundImage='url("sources/'+p+'.jpg")'; //is working??
alert(p+': Is sending your request.');
products.push(p);
getproduct(p);
//document.getElementById('logo').className=p; //wasn't working??
f1.className='product';
document.getElementById('blank').src='scripts/product.js';
hidewelcome();
};

One thing about the ‘is working??’ method is that it doesn’t remove a list in the logo div. It still doesn’t explain why ‘wasn’t working??’ still isn’t. Must be the order their in. I’ll have to mess with it some more and post back.

Heinz_Stapff · October 11, 2011, 9:47pm

felgall & parkinT var logo has always been declared at the top of the index.js as I try to put the scripts in the order of the HTML and this can cause a few problems when I tidy up the external.js or forget to add it to my post. Thanks, it is there as the utility button indicated. For now the new technique is better as the old one bloated the CSS file and removed a ul with site list in it, though I still can’t figure out why
logo.className=p stopped working?

This Works


logo.style.backgroundImage='url("sources/'+p+'.jpg")';

This Doesnt?


logo.className=p;

I guess it’s good because I stumbled onto the backgroundImage technique when className stopped working??:x

felgall · October 12, 2011, 1:12am

You have logo defined - you don;'t have it attached to anything in the web page though so any changes you make to it will be ignored.

Heinz_Stapff · October 12, 2011, 3:13pm

felgall
I’m not sure you are right. logo className equals worked till about 3 days ago. As far as I know I haven’t changed the CSS class list for .logo is long and bloted so I’m only posting a few as demonstration!

HTML<div id=“logo” class=“logo”><!–other stuff–></div>
CSS #logo {//exists as absolute positioned object with background image sources/logo.jpg}
CSS .logo {//exists as absolute positioned object with background image sources/logo.jpg}
CSS .articles {//exists as absolute positioned object with background image sources/articles.jpg}
CSS .silver {//exists as absolute positioned object with background image sources/articles.jpg}
JS var logo=document.getElementById(‘logo’);
JS logo.className=‘silver’; //should work and did but doesn’t now?
JS logo.style.backgroundImage=‘url(“sources/silver”)’; //Works

felgall · October 12, 2011, 6:00pm

You shouldn’t be applying absolute positioning using classes - that would result in everything with that class being stacked on top of one another.

Heinz_Stapff · October 12, 2011, 6:22pm

felgall That maybe why the utility button alerting the class of logo shows the correct class but since there is no z-index the new class is actually under the original class? I’ll try using stepped z-index on each. What I do know is that div id logo contained a ul id logolist that would dissapear when I called ‘logo.className=“silver”;’ even though I cssed logolist with z-index 100? Which implied that the class .logo had been totaly rewriten with class silver and I thought that that was the draw back of changing the className rather than the backgroundImage. IE. changing className changed the whole html of div id logo?

Heinz_Stapff · October 13, 2011, 5:11pm

felgall

You have logo defined - you don;'t have it attached to anything in the web page though so any changes you make to it will be ignored.

If div id ‘logo’ is defined in index.css like so with ‘#’:


#logo { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841;
background-image:url(../sources/articles.jpg); background-position:center center; 
background-repeat:no-repeat;
border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d;}

Calls like this will not work!
index.js


addEvent(placeorder,'click',function( ){ 
document.getElementById('logo').className='silverstones';},false);

I found this out by commenting out #logo{…} in index.css like this


/* comment out css refrence by id '#logo{...}'
#logo { position:absolute; left:0%; top:0%; width:99.8%; height:24%; background-color:#fdd841;
background-image:url(../sources/articles.jpg); background-position:center center; 
background-repeat:no-repeat;
border-left:2% solid  #e8b23d; border-right:2% solid  #e8b23d; border-top:2% solid  #e8b23d;}
*/

Then Calls like this will work!
index.js


addEvent(placeorder,'click',function( ){ 
document.getElementById('logo').className='silverstones';},false);

The truth is that having many different classNames written for ‘logo’ div in index.css bloats that file and turns it into a monster. So I’m going to use backgroundImage changing technique for this particular div. Uncomment #logo {…} in index.css and get rid of all other classNames for ‘logo’ div. Then this call works!
index.js


addEvent(placeorder,'click',function( ){ 
document.getElementById('logo').style.backgroundImage='url("sources/silverstones")';},false);

You have to use quotes and doublequotes on the url carefully but it beats bloating the index.css