Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: changing the color of all links in a div

  1. #1
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,720
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default changing the color of all links in a div

    I am rather stumped on this one. I am trying to create a script where when I clink on the word red all of the links in a particular div will change to red. I seem to be doing fine with altering the text color of regular text or background colors, but with specific anchor links I am only able to change the first link using

    Code:
    document.GetElementById(id).style.color=color;
    I know that id is supposed to only be used for one element as a unique identifier, but it is the only thing that marginally works.
    Last edited by james438; 02-19-2011 at 03:43 AM.
    To choose the lesser of two evils is still to choose evil. My personal site

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there james438,

    have a look at this example, it may suit your requirements...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>black to red, red to black</title>
    
    <style type="text/css">
    #color {
        width:100px;
        padding:5px;
        border:3px double #999;
        text-align:center;
        cursor:pointer;
        background-color:#f0f0f0;
     }
    #lorem {
        width:740px;
        padding:20px;
        border:1px solid #999;
        margin:10px auto 0;
     }
    .hidden {
        display:none;
     }
    .black {
        color:#000;
     }
    .red {
        color:red;
     }
    </style>
    
    <script type="text/javascript">
    
    function init(){
    
       var a=document.getElementById('lorem').getElementsByTagName('a');
       var obj=document.getElementById('color');
           
       obj.className='';
    
       obj.onclick=function() {
    for(var c=0;c<a.length;c++) {
       a[c].className=='red'?
      (a[c].className='black',obj.firstChild.nodeValue='red'):
      (a[c].className='red',obj.firstChild.nodeValue='black');
       }
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    </script>
    
    </head>
    <body>
    
    <div id="color" class="hidden">red</div>
    
    <p id="lorem">
    Lorem ipsum dolor sit amet, consectetuer <a class="black" href="#">adipiscing</a> elit. Cras volutpat, purus ac 
    pellentesque adipiscing, <a class="black" href="#">mauris</a> ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque <a class="black" href="#">penatibus</a> et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque <a class="black" href="#">molestie</a> ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim <a class="black" href="#">tincidunt</a> laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. <a class="black" href="#">Aliquam</a> sed magna. 
    Pellentesque in dui. In <a class="black" href="#">eget</a>. elit. Praesent eu lorem.
    </p>
    
    </body>
    </html>
    
    Edit: I forgot to allow for those with javascript disabled, so made a minor modification to the code.


    coothead
    Last edited by coothead; 02-16-2011 at 10:05 AM.

  3. The Following User Says Thank You to coothead For This Useful Post:

    james438 (02-16-2011)

  4. #3
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,720
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    Much appreciated, thanks. I am rather new to javascript, but feel better this time around about diving into the language. I am pretty sure this is exactly what I need, but I am going to need to study it a little more later later on this afternoon.
    To choose the lesser of two evils is still to choose evil. My personal site

  5. #4
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,720
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    Hi, could you explain these lines?

    Code:
    for(var c=0;c<a.length;c++) {
       a[c].className=='red'?
      (a[c].className='black',obj.firstChild.nodeValue='red'):
      (a[c].className='red',obj.firstChild.nodeValue='black');
       }
    The part that I a bit lost on is the highlighted section. The way I see it a.length is the number of anchors that were found in the div. If the class name is black then change it to red and vice versa. What does the ? and the colon do? Also, is it necessary that the 3 lines are separated by newlines? Is there a place where I can read about the question mark and colon?
    Last edited by james438; 02-17-2011 at 08:01 AM. Reason: added a question.
    To choose the lesser of two evils is still to choose evil. My personal site

  6. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there james438,
    The part that I am a bit lost on is the highlighted section
    Those three lines constitute a ternary operator.
    The way I see it a.length is the number of anchors that were found in the div.
    If the class name is black then change it to red and vice versa.
    That is correct.
    What does the ? and the colon do?
    A very good explanation of the ternary operator can be found here...

    Is it necessary that the 3 lines are separated by newlines?
    No, the ternary operator can be placed on one line. I placed it on three lines for easier readability.
    You probably noticed the other ternary operator in the script...
    Code:
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    ...which is used to remove javascript event handlers from the markup, such as...
    Code:
    
    <body onload="init()">
    
    <div onclick="dosomething()">
    
    <img onmouseover="swapit()" ......>
    
    
    Further reading:-

    I hope that this helps.

    coothead

  7. The Following User Says Thank You to coothead For This Useful Post:

    james438 (02-17-2011)

  8. #6
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,720
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    Thanks for the clarification. I have been having a bit of difficulty finding official or thorough documentation for javascript unlike http://php.net or http://dev.mysql.com/doc/refman/5.5/en/index.html
    To choose the lesser of two evils is still to choose evil. My personal site

  9. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,366
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

    Hello coothead,
    Nice code.
    One small remark. Your code for changing the color is FIXED in the script (nodeValue='black', nodeValue='red'). Wouldn't it be better to put a variable name in the script for the color, and then let something inside 'onclick=...' (in the body) determine what color we eventually want to produce? Something like this, for instance:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>black to red, red to black</title>
    
    <style type="text/css">
    .color{color: black}
    </style>
    
    <script type="text/javascript">
    
    function change_style(tag,className,color) {
    var els = document.getElementsByTagName(tag)
    	for (i=0;i<els.length; i++) {
    		if (els.item(i).className == className){
    		els.item(i).style.color=color;
    
    		
    	}
           }
          }
    </script>
    
    </head>
    <body><div>
    
    
    <div style="display: inline; cursor: pointer; border: 1px solid black;padding:5px; background:#dedede"  onclick="change_style('a','color','red')">red</div>
    <div style="display: inline; cursor: pointer; border: 1px solid black;padding:5px; background:#dedede"  onclick="change_style('a','color','black')">black</div>
    
    <br><br><div >
    Lorem ipsum dolor sit amet, consectetuer <a href="javascript: void(0)" class="color">adipiscing</a> elit. Cras volutpat, purus ac 
    pellentesque adipiscing, <a href="javascript: void(0)" class="color">mauris</a> ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque <a href="javascript: void(0)" class="color">penatibus</a> et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque <a href="javascript: void(0)" class="color">molestie</a> ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim <a href="javascript: void(0)" class="color">tincidunt</a> laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. <a href="javascript: void(0)" class="color">Aliquam</a> sed magna. 
    Pellentesque in dui. In <a href="javascript: void(0)" class="color">eget</a>. elit. Praesent eu lorem.
    </div>
    
    </div></body>
    </html>
    ===
    Arie Molendijk.

  10. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there molendijk,
    Wouldn't it be better to put..............
    I don't know, but bearing in mind that your question is purely subjective, I believe that
    one should just code in the manner that best suits his present ability and temperament.

    Removing presentation from content really seems to please me just now.

    coothead

  11. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,366
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

    Quote Originally Posted by coothead View Post
    Hi there molendijk,
    I don't know, but bearing in mind that your question is purely subjective, I believe that one should just code in the manner that best suits his present ability and temperament.
    No, that's not what I ment. I ment that each time we want to change colors (using your script), we would have to write a new script, right? That's not a question of temperament, but of objective (lack of) economy.
    ===
    Arie.

  12. #10
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,720
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    I shall be studying the script a bit more soon, but the other javascript I have in my page allows me to dynamically change the background color of the page, the article background color, and the article text color by first clicking on the title text and then the color chart. The javascript involved is about as long as the javascript that coothead posted and looks similar to yours molendijk. As I am quite new to javascript I wanted to keep things as simple as possible though and you may notice I still had a question or two about how it worked. It is a good suggestion though.
    To choose the lesser of two evils is still to choose evil. My personal site

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
  •