[Ladymusicc]

So I have my layout the way I want it. Everything in place. Except there's one effect on the page that is not acting the way I wish it would. And after examining everything, I'm afraid I'm at a loss for words. I knew I had to go somewhere and ask for help.

What I am trying to do is have my words appear on another part of the page, after someone clicks on part of the navigation. I have attached a file "example1" to demonstrate.

What is happening now is the words are there, but they are hidden and are not appearing when I click on my navigation. I'm not quite sure what the problem may be. Perhaps layers are overlapping each other and it's confusing the coding? I'm not sure. But I would appreciate some help.

Here is a page where the effect does work. click here
And down below is the area I think the problem is coming from.

<style type="text/css">
		body {font-family: Arial Black, Arial;
		background-color: #000000;
		background-image: url('http://ladymusicc.com/SP/e/click.png') }
		a { outline: none;}
		#songlistings {width: 200px; color: #000; height: 620px; margin-top: 205px;}
		#songlistings ul {width: 495px; margin-left: -40px; margin-top: -205px;}
		#songlistings ul li {list-style-type: none; cursor: pointer; outline: none;}
		#container {width: 855px; position: absolute; }
		#mainimg p {width: 855px; text-align: justify; margin: 0px; position: absolute; left: 350px; top: 12px; font-size:15px;}
		object {margin: 0; padding: 0; background-color: #000000;}
		#left {position: absolute; top: 0px; left: 648px; }
		#right {position: absolute; top: 250px; left: 1078px; width: 200px;}
		#song1, #song2, #song3, #song4, #song5, #song6, #song7, #song8, #song9, #song10, #song11, #song12, #song13, #song14, #song15, #song16 {display:none ; position: absolute;  height: 800px; top: 10px; left: 200px; font-size: 12px;}	
		#songleft {position: absolute; left: 648px; top: 10px; width: 340px;}
		#songright {position: absolute; left: 1078px; top: 10px; width: 380px;}
		#farrighth1 {position: absolute; top: 10px; left: 1102px; width: 260px; height: 50px; display: none;}
		h1 {font-family: Arial Black; text-transform: uppercase; margin: 0; padding: 0; margin-bottom: 10px;}
		#image img {border: 0px;}
		.selected {font-weight: 700; color: #497ead;}
		</style>

Please help. Thank you.

[andrewsw]

It is not possible to assist you with the information you have supplied. You need to post relevant code where it is not working. CSS on its own doesn't tell us very much.

[Ladymusicc]

Actually I'm gonna wait on this, I think I found someone to help me. If not, I'll come back to this.

I don't see my file attached? That's strange. I just noticed it. I would change that but I don't see an edit button? (hence why I am double posting)

Actually I'm gonna wait on this, I think I found someone to help me. If not, I'll come back to this.

I don't see my file attached? That's strange. I just noticed it. I would change that but I don't see an edit button?

Actually I'm gonna wait on this, I think I found someone to help me. If not, I'll come back to this.

I don't see my file attached? That's strange. I just noticed it. I would change that but I don't see an edit button?

Oh man. This stupid thing is so crazy.

[b]I am so sorry about my post.[ b]I wanted to edit it but it kept quoting me and I can't fix it. Don't you guys have an edit button!? So sorry.

[FerretHolmes]

Andrewsw is right, there's no way to tell. I know you said you would find help elsewhere but what you want to achieve isn't done through css alone. That site uses a jquery script to trigger the effect.

$(document).ready(function() {
   $('#list li').click( function() {	
		$('#farrighth1').fadeIn();
		$('#songs').find('div:visible:first').fadeOut();
		$('#list li').removeClass('selected');
		$(this).addClass('selected');
  		$('#song' + this.id).fadeIn(); 
    });
});

Basically when you click on any list element of parent id #list, it activates a fade in on the #farright1 div container.

[Ladymusicc]

I see. that's what i was afraid of. Is there a way I can make a jquery script?

Oh and thank you for your response. I appreciate the insight.

[FerretHolmes]

Ladymusicc, on 18 February 2013 - 04:30 PM, said:

I see. that's what i was afraid of. Is there a way I can make a jquery script?

Oh and thank you for your response. I appreciate the insight.

The script I posted is the script you would use. You just need to create the empty divs for the lyrics to go. If you go to the site you are trying to mimic and view it's source you can see that all the lyrics for each song are already coded in the html. What the script is doing is merely revealing the lyrics to the user and hiding them again. You already copied the css, now all you need to do is copy the html too if you like and put the script within the head section. You will also need to load the jquery library also by putting

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

into the head section as well. Tinker around with it and learn how it works. Reverse engineering can go a long way in understanding things.

[Ladymusicc]

thank you very much for your help. I actually found a site that helps me better understand jquery. I think I'm getting close to making it do what I want it too. Thank you for your help.

[FerretHolmes]

No problemo. I'm just glad I can actually help.

Also, I'm not sure what site you are using to learn, but a fantastic way to learn Javascript, JQuery, and a bit of python is at codecademy.

Codecademy

This post has been edited by FerretHolmes: 20 February 2013 - 03:26 PM

[Ladymusicc]

Thanks so much. I'll be sure to check it out.