SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast O_o.moo's Avatar
    Join Date
    Aug 2007
    Location
    South Africa
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Struggle to swop image with $('projects').setStyle({backgroundImage... [prototype]

    Hi,

    I've been hacking and "googling" at this all morning. I'm trying to swap the background image of

    <h1 class="accordion_toggle" onclick="toggleProjects()"></h1>

    In between I've tried all the options I could find

    Code:
    var isOpen = new Boolean(false);
    
      function toggleProjects(){
       Effect.toggle('projects','blind');
    
     //if (isOpen){
     
      Effect.toggle('architecture','blind', {duration: 1.0});
    
       //document.getElementById("projects").setAttribute('backgroundImage', 'url(images/headings/projects-active.gif');
    
       //$('projects').setStyle('backgroundImage: url(images/headings/projects-active.gif)');
    
         $('projects').setStyle({backgroundImage: 'url(images/headings/projects-active.gif)'});
    
    }
    Could some one please have a look at it. It started out as an accordion, but we don't need a accordion, a blind works fine. The image should get a minus.

    http://wilbur.snowball.co.za/scott/index.html

    Ta in advance

  2. #2
    SitePoint Enthusiast O_o.moo's Avatar
    Join Date
    Aug 2007
    Location
    South Africa
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    k, I've tried this as well...

    Code:
    var isOpen = new Boolean(false);
    
     function toggleProjects(){
    
      Effect.toggle('projects','blind');
        
    //if (isOpen){
            
      Effect.toggle('architecture','blind', {duration: 1.0});
      
      Element.toggleClassName('projects', 'accordion_toggle_active');
    
    }
    Code:
    ar isOpen = new Boolean(false);
    
     function toggleProjects(){
    
      Effect.toggle('projects','blind');
        
    //if (isOpen){
            
       Element.toggleClassName('projects', 'accordion_toggle');
       
       Element.toggleClassName('projects', 'accordion_toggle_active');
    
    }
    Neither works, plus loads other ideas and samples.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    At the provided link when the Features Projects is clicked, the plus changes to a minus, and when clicked again changes back to a plus. It works for me on both Firefox and IE
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast O_o.moo's Avatar
    Join Date
    Aug 2007
    Location
    South Africa
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry ye, fixed it yesterday

    Script -
    Code:
    var isOpen = new Boolean(false);
        
      function toggleProjects(){
        
        Effect.toggle('projects','blind');
        
                //if (isOpen){
            
        Effect.toggle('architecture','blind', {duration: 1.0});
    
        Element.toggleClassName('toggler', 'accordion_toggle');
    
        Element.toggleClassName('toggler', 'accordion_toggle_active');
    
    }
    And the thing we missed was that the <h1> needed an id, so the html would look like this -

    <h1 id="toggler" class="accordion_toggle" onclick="toggleProjects()"></h1></a>
    <div class="accordion_content" id='projects' style="display:none;">
    <div style="height:211px; background:url(some-image.gif);">
    <div align="center">Content goes here</div>
    </div>
    </div>

    Thanks to whomever looked at this and I hope someone will find this useful.

    ps. the url wil prolly not be there for long.


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
  •