Need some CSS help [Archive]

joecool85

Mar 27, 2006, 09:18 PM

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.

NoNameBrand

Mar 27, 2006, 10:40 PM

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

<html>
<head>
<style type="text/css" media="screen">

</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>

joecool85

Mar 28, 2006, 07:37 AM

CSS only example:

http://www.lonelyfridge.com/poems.html

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.

NoNameBrand

Mar 28, 2006, 10:09 AM

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.

joecool85

Mar 28, 2006, 10:13 AM

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.

But I don't want the entire div to go bold, just the title of the poem...

NoNameBrand

Mar 28, 2006, 10:42 AM

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.
onclick="swapStyles(this)"

Or something.

joecool85

Mar 28, 2006, 11:40 AM

I guess I'm confused...

NoNameBrand

Mar 28, 2006, 01:40 PM

I guess I'm confused...

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":

<div id="firstPoem" class="justTitle" onclick="swapStyles('firstPoem')">
<h6>First Poem Title</h6>
<div class="poem">
line 1<br />
line 2<br />

</div>
</div>

Javascript:
EDIT Note: this script isn't quite right, see post #10.

function swapStyles(theID) {
poem = document.getElementByID(theID)
if (poem.class == "justTitle") {
poem.class = "poemToo"
} else {
poem.class = "justTitle"
}
}

And then css of:

.poem {
font-size: 10pt;
}
h6 {
font-size: 12pt;
font-weight: normal;
}
.justTitle div {
display: none;
}
.poemToo h6 {
font-weight: bold;
}
.poemToo div {
display: block;
}

floyde

Mar 28, 2006, 01:46 PM

hmm, how about this:

First off, you should set an id for your links:

<a id="link1" href="javascript:toggle('one')">One first,</a>

then you need two css rules such as these:

.notSelected {
/*style for a link which is not selected*/
}
.selected {
font-weight: bold;
}

you also need to add the notSelected class to the links, such as:

<a id="link1" href="javascript:toggle('one')" class="notSelected">One first,</a>

add the link's id as a parameter for your toggle function:

<a id="link1" href="javascript:toggle('one', 'link1')" class="notSelected">One first,</a>
your toggle function should look something like this:

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 :o
or maybe you could use something more simple like:

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

not sure that works though...:D

NoNameBrand

Mar 28, 2006, 01:57 PM

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:

<script type="text/javascript">

</script>

joecool85

Mar 28, 2006, 02:21 PM

Perfect, poems three and four are exactly what I want! Thanks guys!

joecool85

Apr 9, 2006, 07:04 PM

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.

NoNameBrand

Apr 10, 2006, 10:32 AM

add the following to the css (based on my page from before):

.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.

bunkre

Apr 20, 2006, 09:15 AM

maybe im not following, but isn't that spacing problem just the default margins on your h6's? just add margin:0 where needed?

joecool85

Apr 23, 2006, 02:29 PM

maybe im not following, but isn't that spacing problem just the default margins on your h6's? just add margin:0 where needed?

Wow! You the man! That's exactly what I needed, it works perfect now!

joecool85

May 8, 2006, 09:21 PM

Thanks for the help guys, it came out exactly how I wanted it.

http://cordova.asap.um.maine.edu/~raymondj/nmd303/brotherlyv2_2.html