Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Need some CSS help

joecool85

joecool85

macrumors 65816
Original poster
Mar 9, 2005
1,355
4
Maine
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.
 
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>
 
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.
 
NoNameBrand said:
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.
Click to expand...

But I don't want the entire div to go bold, just the title of the poem...
 
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.
 
joecool85 said:
I guess I'm confused...
Click to expand...

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;
}
 
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
 
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>
 
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.
 
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.
 
maybe im not following, but isn't that spacing problem just the default margins on your h6's? just add margin:0 where needed?
 
bunkre said:
maybe im not following, but isn't that spacing problem just the default margins on your h6's? just add margin:0 where needed?
Click to expand...

Wow! You the man! That's exactly what I needed, it works perfect now!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back