SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question className Not Changing back ground image?

    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
    Code:
    #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
    Code:
    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.

    index.html
    HTML Code:
    <div id="logo" class="logo">
    Almost forgot the html starts with class=logo. Any help greatly appreciated!
    Last edited by Heinz Stapff; Oct 11, 2011 at 14:08. Reason: Almost forgot the html

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,342
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    In your JS I see this:
    Code:
    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.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question className Not Changing back ground image?

    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
    Code:
    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!

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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');
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb className Not Changing back ground image?

    felgall & parkinT wierd but this started working

    index.js
    Code:
    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.

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question className Not Changing back ground image?

    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
    Code:
    logo.style.backgroundImage='url("sources/'+p+'.jpg")';
    This Doesnt?
    Code:
    logo.className=p;
    I guess it's good because I stumbled onto the backgroundImage technique when className stopped working??

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question className Not Changing back ground image?

    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!
    1. HTML<div id="logo" class="logo"><!--other stuff--></div>
    2. CSS #logo {//exists as absolute positioned object with background image sources/logo.jpg}
    3. CSS .logo {//exists as absolute positioned object with background image sources/logo.jpg}
    4. CSS .articles {//exists as absolute positioned object with background image sources/articles.jpg}
    5. CSS .silver {//exists as absolute positioned object with background image sources/articles.jpg}
    6. JS var logo=document.getElementById('logo');
    7. JS logo.className='silver'; //should work and did but doesn't now?
    8. JS logo.style.backgroundImage='url("sources/silver")'; //Works


  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You shouldn't be applying absolute positioning using classes - that would result in everything with that class being stacked on top of one another.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question className Not Changing back ground image?

    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?

  11. #11
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool RESSOLVED!!!className Not Changing back ground image?

    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 '#':
    Code:
    #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
    Code:
    addEvent(placeorder,'click',function( ){ 
    document.getElementById('logo').className='silverstones';},false);
    I found this out by commenting out #logo{...} in index.css like this
    Code:
    /* 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
    Code:
    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
    Code:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •