Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getElementById problem in IE (works Firefox/Chrome)

    Hi,

    This code uses the getElementById to change the background of certain <tr>'s.

    In a nutshell there are two buttons, the code checks which one has been clicked, then checks the background colour of a relevant <tr> and depending what it finds changes the colours of the cells.

    Works fine in Chrome and Firefox but not in IE and I'm now sorely vexed by it.

    Can anyone shed light on the solution please?

    Code:
    <script language="javascript" type="text/javascript">
            function changeBackgroundColor(objDivID)
            {
                var backColor = new String();
    
    		if ( objDivID == "lifesciences" ) 
    		
    		{
                backColor = document.getElementById('claire').style.backgroundColor;
    		}
    		
    		if ( objDivID == "healthcare" ) 
    		
    		{
    			backColor = document.getElementById('adrienne').style.backgroundColor;
    		}
    
    		if(backColor.toLowerCase()=='#ffffff' || backColor.toLowerCase()=='rgb(255, 255, 255)')
                // IE works with hex code of color e.g.: #eeeeee
                // Firefox works with rgb color code e.g.: rgb(238, 238, 238)
                // Thats why both types are used in If-condition below
                
    			{
    			
    			if ( objDivID == "lifesciences" )
    					
            	{
    
                    document.getElementById('david').style.backgroundColor = '#c0c0c0';
    				document.getElementById('claire').style.backgroundColor = '#c0c0c0';
    				document.getElementById('adrienne').style.backgroundColor = '#ffffff';
    				document.getElementById('karen').style.backgroundColor = '#c0c0c0';
    				document.getElementById('alice').style.backgroundColor = '#c0c0c0';
    				document.getElementById('kelly').style.backgroundColor = '#ffffff';
    				document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
    				document.getElementById('carolyn').style.backgroundColor = '#c0c0c0';
    				document.getElementById('paul').style.backgroundColor = '#c0c0c0';
    				document.getElementById('kayleigh').style.backgroundColor = '#c0c0c0';
    				document.getElementById('tim').style.backgroundColor = '#c0c0c0';
    				document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
    				document.getElementById('lee').style.backgroundColor = '#c0c0c0';
    				document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
    				
    			}
    			
    			else
    			
    			{
    
                    document.getElementById('david').style.backgroundColor = '#c0c0c0';
    				document.getElementById('claire').style.backgroundColor = '#ffffff';
    				document.getElementById('adrienne').style.backgroundColor = '#c0c0c0';
    				document.getElementById('karen').style.backgroundColor = '#c0c0c0';
    				document.getElementById('alice').style.backgroundColor = '#c0c0c0';
    				document.getElementById('kelly').style.backgroundColor = '#c0c0c0';
    				document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
    				document.getElementById('carolyn').style.backgroundColor = '#ffffff';
    				document.getElementById('paul').style.backgroundColor = '#ffffff';
    				document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
    				document.getElementById('tim').style.backgroundColor = '#c0c0c0';
    				document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
    				document.getElementById('lee').style.backgroundColor = '#c0c0c0';
    				document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
    			}
    			
                }
                else
    			
    			{
    
                    document.getElementById('david').style.backgroundColor = '#ffffff';
    				document.getElementById('claire').style.backgroundColor = '#ffffff';
    				document.getElementById('adrienne').style.backgroundColor = '#ffffff';
    				document.getElementById('karen').style.backgroundColor = '#ffffff';
    				document.getElementById('alice').style.backgroundColor = '#ffffff';
    				document.getElementById('kelly').style.backgroundColor = '#ffffff';
    				document.getElementById('sarah').style.backgroundColor = '#ffffff';
    				document.getElementById('carolyn').style.backgroundColor = '#ffffff';
    				document.getElementById('paul').style.backgroundColor = '#ffffff';
    				document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
    				document.getElementById('tim').style.backgroundColor = '#ffffff';
    				document.getElementById('chantal').style.backgroundColor = '#ffffff';
    				document.getElementById('lee').style.backgroundColor = '#ffffff';
    				document.getElementById('lisa').style.backgroundColor = '#ffffff';
    				
    			}
    			
    		}
                
    
        </script>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 545 Times in 542 Posts
    can we see the html?

    and FF doesn't work with hex?!?

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <input class="healthcarebutton" onclick="changeBackgroundColor('healthcare')" type="button" value="Highlight Healthcare Profiles" /> <input class="lifebutton" onclick="changeBackgroundColor('lifesciences')" type="button" value="Highlight Life Science Profiles" />
    <table border="0">
    <tbody>
    
    
    <tr id="david">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/David-WEB.jpg" alt="David Robinson" /></td>
    <td><strong>David Robinson</strong><strong><em> Managing Director
    </em></strong>Delivers the goods with a smile…Great ideas and an ordered mind make David the perfect sort for creating and managing integrated marketing campaigns. Stuck for newsflow? David can make news out of nothing!
    
    Client responsibilities: <em>Strategic planning and campaign management</em></td>
    </div>
    </div>
    </tr>
    
    <tr id="clare">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/Clare-WEB.jpg" alt="Clare Jones" /></td>
    <td><strong>Dr Clare Jones</strong><strong><em> Account Director - Life Science
    </em></strong>Sound science; bright thinking...Combining a totally organised mind and in-depth scientific understanding, Clare loves to tackle anything to do with cells and assays, through to robotics.
    
    Client responsibilities: <em>Strategic planning and campaign management, PR, media relations and integrated marcomms</em></td>
    </tr>
    
    <tr id="adrienne">
    <td><img src="http://healthcare.alto-marketing.com/wp-content/uploads/2010/09/Adrienne-WEB.jpg" alt="Adrienne Walder" /></td>
    <td><strong>Adrienne Walder </strong><strong><em>Account Director - Healthcare
    </em></strong>Passionate, versatile, resourceful and rather boisterous...Passionate about healthcare, Adrienne pulls on her diverse industry knowledge, enthusiasm and creativity to plan and implement successful integrated campaigns.
    
    Client responsibilities: <em>Strategic planning and campaign management</em></td>
    </tr>
    
    etc...
    
    </tr>
    </tbody>
    </table>

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 545 Times in 542 Posts
    this works in firefox???

    Code:
    <tr id="clare">
    
    backColor = document.getElementById('claire').style.backgroundColor;

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, copied a version where I hadn't corrected the spelling.

    That's not the problem as the spelling is corrected in the latest version.

    (But I ask you who spells Claire without the i?!)

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 545 Times in 542 Posts
    well, Clare Jones for one

    uh, I don't know... the rest of the code worked with the html you posted in IE (but you chopped off a bit, so obviously it was hard to test that...) I don't really understand what's supposed to happen the first time you click a button... it turns everybody's background white... but they are already white...

    I suspect there is a much simpler way to do what you are trying to do... it seems top me that all you want to do is highlight all the healthcare people when you click on button and all the life science people when you click another. And that some people fall into both categories.

    is that it?

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, that's the long and the short of it.

    Here's the actual page - http://alto-marketing.com/about-us/meet-the-team/

    For completeness the rest of the code I chopped was...

    Code:
    <input class="healthcarebutton" onclick="changeBackgroundColor('healthcare')" type="button" value="Highlight Healthcare Profiles" /> <input class="lifebutton" onclick="changeBackgroundColor('lifesciences')" type="button" value="Highlight Life Science Profiles" />
    <table border="0">
    <tbody>
    
    
    <tr id="david">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/David-WEB.jpg" alt="David Robinson" /></td>
    <td><strong>David Robinson</strong><strong><em> Managing Director
    </em></strong>Delivers the goods with a smile…Great ideas and an ordered mind make David the perfect sort for creating and managing integrated marketing campaigns. Stuck for newsflow? David can make news out of nothing!
    
    Client responsibilities: <em>Strategic planning and campaign management</em></td>
    </div>
    </div>
    </tr>
    
    <tr id="clare">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/Clare-WEB.jpg" alt="Clare Jones" /></td>
    <td><strong>Dr Clare Jones</strong><strong><em> Account Director - Life Science
    </em></strong>Sound science; bright thinking...Combining a totally organised mind and in-depth scientific understanding, Clare loves to tackle anything to do with cells and assays, through to robotics.
    
    Client responsibilities: <em>Strategic planning and campaign management, PR, media relations and integrated marcomms</em></td>
    </tr>
    
    <tr id="adrienne">
    <td><img src="http://healthcare.alto-marketing.com/wp-content/uploads/2010/09/Adrienne-WEB.jpg" alt="Adrienne Walder" /></td>
    <td><strong>Adrienne Walder </strong><strong><em>Account Director - Healthcare
    </em></strong>Passionate, versatile, resourceful and rather boisterous...Passionate about healthcare, Adrienne pulls on her diverse industry knowledge, enthusiasm and creativity to plan and implement successful integrated campaigns.
    
    Client responsibilities: <em>Strategic planning and campaign management</em></td>
    </tr>
    
    <tr id="karen">
    <td><a href="http://alto-marketing.com/wp-content/uploads/2007/07/Karen-web-crop-140x140.jpg"><img class="aligncenter size-full wp-image-3217" title="Karen web crop 140x140" src="http://alto-marketing.com/wp-content/uploads/2007/07/Karen-web-crop-140x140.jpg" alt="" width="140" height="132" /></a></td>
    <td><strong>Karen Nicholls</strong><strong><em>*Marketing Communications Services Manager (Maternity Cover)
    </em></strong>Eye for results, ear to the ground...Karen has a passion for marketing and is covering the management of our marketing communications ‘hub’. Developing and managing advertising, email promotions, websites, direct marketing and exhibition graphics, Karen keeps the plans running smoothly.
    
    Client responsibilities: <em>Management of print and digital communications</em><em></em></td>
    </tr>
    <tr>
    
    <tr id="alice">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/Alice-WEB.jpg" alt="Alice Dickinson" /></td>
    <td><strong>Alice Dickinson </strong><strong><em>Marketing Communications Services Manager
    </em></strong>As quick as a horse, as crazy as a cat...Alice is our communications 'hub'. Developing and managing advertising, email promotions, websites, direct marketing and exhibition graphics, Alice keeps it all going to plan.
    
    Client responsibilities: <em>Management of print and digital communications</em></td>
    </tr>
    
    <tr id="kelly">
    <td><img src="http://healthcare.alto-marketing.com/wp-content/uploads/2010/09/Kelly-WEB.jpg" alt="Kelly Friend" /></td>
    <td><strong>Kelly Friend</strong><strong><em> PR Account Manager - Healthcare
    </em></strong>Tweet-tastic, LinkedIn-loving islander...A convert from technology PR specialising in social media, Kelly is a member of the Twitter flock and understands the importance and benefits of delivering instant information at the click of a mouse - all in 140 characters or less.
    
    Client responsibilities: <em>Strategic planning and campaign management, PR, media relations and integrated marcomms</em></td>
    </tr>
    <tr>
    
    <tr id="sarah">
    <td><img src="http://healthcare.alto-marketing.com/wp-content/uploads/2010/09/Sarah-WEB.jpg" alt="Sarah Perceval" /></td>
    <td><strong>Dr Sarah Perceval </strong><strong><em>PR and Media Relations Specialist
    </em></strong>Green fingers and writing flair...There’s not many in the industry who know scientific PR as well as Sarah. Name a publication that you would like to be seen in, and she will no doubt have written articles for them.
    
    Client responsibilities: <em>PR and media relations</em></td>
    </tr>
    <tr>
    
    <tr id="carolyn">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/Carolyn-WEB.jpg" alt="Carolyn Butchers" /></td>
    <td><strong>Carolyn Butchers <em>PR Account Manager - Life Science
    </em></strong>Mad about writing and ginger cats…With an excellent blend of experience and skills from her background in molecular biology and medical writing, Carolyn is an invaluable resource to the Science Communications team.
    
    Client responsibilities:<em> PR and media relations</em></td>
    </tr>
    <tr>
    
    <tr id="paul">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/Paul-WEB.jpg" alt="Paul Avery" /></td>
    <td><strong>Dr Paul Avery <em>PR Account Manager - Life Science
    </em></strong>Dedicated to the details, whether it’s in science or DJing...Take a PhD in molecular biology, a healthy sprinkling of microscopy and a touch of creativity and you have Paul, a science writer with passion and knowledge that clients can rely upon.
    
    Client responsibilities:<em> PR and media relations</em></td>
    </tr>
    <tr>
    
    <tr id="kayleigh">
    <td><a href="http://alto-marketing.com/wp-content/uploads/2007/07/Kayleigh-web-crop-140x140.jpg"><img class="aligncenter size-full wp-image-3215" title="Kayleigh web crop 140x140" src="http://alto-marketing.com/wp-content/uploads/2007/07/Kayleigh-web-crop-140x140.jpg" alt="" width="140" height="135" /></a></td>
    <td><strong>Kayleigh Martin*<em>Science Writer
    </em></strong>A passion for communicating developments in scienceFresh from the world of research, Kayleigh brings her knowledge of Immunology and passion for life science and science in general to the science writer role.
    
    Client responsibilities:<em> PR and media relations</em></td>
    </tr>
    <tr>
    
    <tr id="tim">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/Tim-Web.jpg" alt="Tim Cullum" /></td>
    <td><strong>Tim Cullum <em>Marketing Communications*Executive
    </em></strong>Sports mad marketing grad...Always on the ball, marketing grad Tim is a real team player. His diligence, creativity and passion for marketing communications make him a welcome addition to the team.
    
    Client responsibilities:<em> Print and digital marcomms, PR and media relations</em></td>
    </tr>
    <tr>
    
    <tr id="chantal">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/Chantal-WEB.jpg" alt="Chantal Jones" /></td>
    <td><strong>Chantal Jones <em>Finance and HR Officer
    </em></strong>Step one… two… three... Keeping count...With a head for figures and finance Chantal keeps things running smoothly. Friendly and welcoming she’s someone we can all turn to and rely on.
    
    Client responsibilities:<em> All accounts and HR</em></td>
    </tr>
    <tr>
    
    <tr id="leigh">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/Leigh-WEB.jpg" alt="Leigh Dilley" /></td>
    <td><strong>Leigh Dilley </strong><em><strong>Marketing Communications Coordinator
    </strong></em>Keeps the Alto team fighting fit...Organised and practical, Leigh liaises with media on digital campaigns; booking, clipping, reporting and keeping us up to date. With a bubbly personality she also keeps the office smiling.
    
    Client responsibilities:<em> Media bookings and PR support </em></td>
    </tr>
    <tr>
    
    <tr id="lisa">
    <td><img src="http://lifesciences.alto-marketing.com/wp-content/uploads/2010/10/Lisa-Web.jpg" alt="Lisa Houston" /></td>
    <td><strong>Lisa Houston </strong><em><strong>Admin Support
    </strong></em>Musically minded aspiring science studentKeen to learn about science and business, Lisa supports Leigh and Chantal with all administration activities.
    
    Client responsibilities:<em> All admin support </em></td>
    </tr>
    </tbody>
    </table>

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 545 Times in 542 Posts
    there's something in this style sheet:
    http://alto-marketing.com/wp-content..._new/style.css

    that IE doesn't like.

    take it out and it works fine. Looks ugly, but works fine. Your javascript works.


  •  

    Posting Permissions

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