Need some CSS help

Discussion in 'Web Design and Development' started by joecool85, Mar 27, 2006.

  1. joecool85 macrumors 65816

    joecool85

    Joined:
    Mar 9, 2005
    Location:
    Maine
    #1
    Here is my site:
    http://cordova.asap.um.maine.edu/~raymondj/nmd303/brotherlyv2_0.html

    What I want it to do when you click "One first" or "The other right behind" is to load in the poem, and bold the line you clicked on so its evident it is the title. I used an active link color, but that only bolds it while you are clicking, as soon as you let off it goes back. I don't think I want a visited one because then it would stay bold when you "close" that section.
     
  2. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #2
    You could do it via CSS with hovering rather than clicking - or use JavaScript+CSS for clicking.

    CSS only example:

    http://www.lonelyfridge.com/poems.html
    Code:
    <html>
    <head>
    <style type="text/css" media="screen">
    <!--
    	body {
    		font-size: 12pt;
    		text-align: center;
    	}
    	a.hideAndSeek {
    		color: black;
    		text-decoration: none;
    	}
    	a.hideAndSeek h6 {
    		font-size: 12pt;
    		font-weight: normal;
    	}
    	a.hideAndSeek div {
    		display: none;
    		color: black;
    	}
    	a.hideAndSeek:hover h6 {
    		font-size: 12pt;
    		font-weight: bold;
    	}
    	a.hideAndSeek:hover div {
    		display: block;
    	}
    -->
    </style>
    </head>
    <body>
    <a href="#" class="hideAndSeek">
    	<h6>poem the first</h6>
    	<div>
    		da-da-da-da-da-daaa<br />
    		dee-de-da-de-da-dee<br />
    		do-do-da-doo<br />
    		da-da-de-doo<br />
    		de-da-de-da-de-da-de<br />
    	</div>
    </a>
    <a href="#" class="hideAndSeek">
    	<h6>poem the second</h6>
    	<div>
    		I have never met a poem<br />
    		as lovely as a tree.<br />
    <br />
    		life is an existential mess<br />
    	</div>
    </a>
    </body>
    </html>
    
     
  3. joecool85 thread starter macrumors 65816

    joecool85

    Joined:
    Mar 9, 2005
    Location:
    Maine
    #3
    Thats perfect, except I would rather use CSS+Javascript for clicking. How would I do that? Right now I have all the javascript working to load and unload the sections properly, the only thing I'm missing is to have it bold the title when its toggled.
     
  4. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #4
    Get the Javascript to change the styles on the <div>s, rather than using the :hover to do it. I don't know the specifics as I really don't use Javascript a whole lot.
     
  5. joecool85 thread starter macrumors 65816

    joecool85

    Joined:
    Mar 9, 2005
    Location:
    Maine
    #5
    But I don't want the entire div to go bold, just the title of the poem...
     
  6. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #6
    No, you have two styles defined - 'hidden' and 'displayed' - the first of which has a non-bold title and the poem hidden, the second has a bold title and a displayed poem.

    Works very much like what I did above, but the a:hover styles become the 'displayed' styles.

    You just need a Javascript function that does the switch that you call when the title is clicked.
    Code:
    onclick="swapStyles(this)"
    Or something.
     
  7. joecool85 thread starter macrumors 65816

    joecool85

    Joined:
    Mar 9, 2005
    Location:
    Maine
  8. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #8
    In what way?

    If you enclose each poem in a <div>, which has an ID (so you can get it with the Javascript), and a class of "justTitle":
    Code:
    <div id="firstPoem" class="justTitle" onclick="swapStyles('firstPoem')">
    <h6>First Poem Title</h6>
    <div class="poem">
    line 1<br />
    line 2<br />
    <!-- etc -->
    </div>
    </div>
    
    Javascript:
    EDIT Note: this script isn't quite right, see post #10.
    Code:
    function swapStyles(theID) {
     poem = document.getElementByID(theID)
     if (poem.class == "justTitle") {
       poem.class = "poemToo"
     } else {
       poem.class = "justTitle"
     }
    }
    


    And then css of:
    Code:
    .poem {
     font-size: 10pt;
    }
    h6 {
     font-size: 12pt;
     font-weight: normal;
    }
    .justTitle div {
     display: none;
    }
    .poemToo h6 {
     font-weight: bold;
    }
    .poemToo div {
     display: block;
    }
    
     
  9. floyde macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #9
    hmm, how about this:

    First off, you should set an id for your links:
    Code:
    [I]<a [B]id="link1"[/B] href="javascript:toggle('one')">One first,</a>[/I]
    
    then you need two css rules such as these:
    Code:
    [I].notSelected {
        /*style for a link which is not selected*/
    }
    .selected {
        font-weight: bold;
    }[/I]
    
    you also need to add the notSelected class to the links, such as:
    Code:
    [I]<a id="link1" href="javascript:toggle('one')" [B]class="notSelected"[/B]>One first,</a>[/I]
    
    add the link's id as a parameter for your toggle function:
    Code:
    [I]<a id="[B]link1[/B]" href="javascript:toggle('one', [B]'link1'[/B])" class="notSelected">One first,</a>[/I]
    your toggle function should look something like this:
    Code:
    function toggle(list, linkId) {
        //do what you did before
    
        //using similar code as the line below , reset all of the links to 'notSelected'
    
        //switch the css class of the newly selected link
        document.getElementById(linkId).className = 'selected';
    }
    
    hmm... I'm very sleepy right now, so this is probably a bit inefficient :eek:
    or maybe you could use something more simple like:

    document.getElementById(linkId).style.font-weight = 'bold';

    not sure that works though...:D
     
  10. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #10
    Thanks floyde, I got my solution working when you showed that the class atribute was "className" and not "class".

    See "poems" three & four:
    http://www.lonelyfridge.com/poems.html

    I had to fix the Javascript function to this:
    Code:
    <script type="text/javascript">
    <!--
            function swapStyles(theID) {
                    var poem = document.getElementById(theID)
                    if (poem.className == "justTitle") {
                            poem.className = "poemToo"
                    } else {
                            poem.className = "justTitle"
                    }
            }
    -->
    </script>
    
     
  11. joecool85 thread starter macrumors 65816

    joecool85

    Joined:
    Mar 9, 2005
    Location:
    Maine
    #11
    Perfect, poems three and four are exactly what I want! Thanks guys!
     
  12. joecool85 thread starter macrumors 65816

    joecool85

    Joined:
    Mar 9, 2005
    Location:
    Maine
    #12
    Ok, so I started implimenting this and found a problem. How can I get the lines to not be so spaced out. IE - when it lists:

    Poem the first

    Poem the second

    Poem the third

    Poem the forth

    I want:

    Poem the first
    Poem the second
    Poem the third
    Poem the forth

    The reason why is because when you load the page it will come up with a poem, each line of the poem can be clicked on and it will expand into a poem within a poem.
     
  13. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #13
    add the following to the css (based on my page from before):
    Code:
    .justTitle {
        padding: 0px;
        margin: 0px;
    }
    
    .justTitle h6 {
        padding: 0px;
        margin: 0px;
    }
    
    .poemToo {
       margin-top: 20px; /* or whatever */
       margin-bottom: 20px; /* or whatever */
    }
    Haven't tested this.
     
  14. bunkre macrumors member

    Joined:
    Mar 10, 2004
    #14
    maybe im not following, but isn't that spacing problem just the default margins on your h6's? just add margin:0 where needed?
     
  15. joecool85 thread starter macrumors 65816

    joecool85

    Joined:
    Mar 9, 2005
    Location:
    Maine
    #15
    Wow! You the man! That's exactly what I needed, it works perfect now!
     
  16. joecool85 thread starter macrumors 65816

    joecool85

    Joined:
    Mar 9, 2005
    Location:
    Maine

Share This Page