Forum Moderators: open
Can someone help me here please. I am trying to figure out how to populate a form with different information, driven by a hyperlink click.
Doc Type:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Test Case:
So basically, let say I have 3 hyperlinks on the page:
Song1
Song2
Song3
What I want to do is that when I click 'Song1' for example, the scrolling window next to the hyperlink would populate with the information below(i have taken out the info as it isn't relevant, but you get the idea i mean i hope. Then, If I now press song 2, that info would populate in the same box, and then song3 etc etc....
<div class="important_note" id="divlyrics" style="PADDING-RIGHT: 5px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; OVERFLOW: auto; WIDTH: 311px; PADDING-TOP: 7px; HEIGHT: 278px"
>
<p align="center" class="style3"><b><u><span class="style3">
<font size="4">Song1</font></span></u><font size="4" color="#FFFFFF">
</font> </b> <span class="style3">
<b><font size="4" color="#FFFF00"><br>
</font><font color="#FF9900" size="2">Copyright Info</font><br><br>
</b></SPAN>
<font color="#FFFFFF" face="Arial">
<strong style="font-weight: 400">Information goes here</strong></font></p>
</div> </td>
</tr>
I should mention that this idea above is what I ended up with after trying to find another solution to no avail. What I had originally hoped was to have a music player playing songs and then when i clicked on the song title in the player, it would launch the lyrics is a window where the lyrics would rise automatically at a readable speed.... but I couldn't find anyone who knew how to do this, so I am happy with this solution is someone can help me out!
Thanx in advance,
Maceman
Not sure if this is what you are looking for, but the following is one way to show/hide information. It is possible to make the displayed information scroll, but I wonder if that is really necessary.
Opera and winSafari hide the lyrics on mouseout- per browser design. Tested on ie6&7, FF2&3, Opera9, winSafari
In your css
div { /* styles applied for testing */
width: 200px;
border: 1px solid red;
margin:4em;
float:left;
}a.lyrics {
text-decoration:none;
display:block;
height:100%; /* display and height mean can activate anywhere in box */
cursor: hand; /* signals a change for the user */
}span.lyrics {
visibility:hidden; /* hides lyrics until activated */
}a:hover .lyrics, a:active .lyrics, a:focus .lyrics {
visibility:visible;
display: block;
color: red; /* for testing */
}
In your html
<div>
<h2>Song 1</h2>
<h3>Copyright info</h3>
<a class="lyrics" href="#">Lyrics
<span class="lyrics">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</span>
</a>
</div>
You will need to adapt this to your existing table design, but it should work if you make a cell the required dimensions.
I presume you are still using DW?
I didn't adapt this myself because the code is quite awful - and must be making it hard to learn as well. The font, bold and underline elements, especially are redundant and could all be dealt with via css styles.
If you have a newer version it should be possible to set it not to automatically insert those things - it might be worth checking the settings.
So how can I now accomplish 2 more things with this:
1. How do i make a hyperlink on the same page called "Song1" that when i click that hyperlink, the lyric box populates and
2. How can make the lyrics appear in the format of lyrics rather than one long sentence that wraps, so for example:
Duis autem vel eum iriure
dolor in hendrerit
in vulputate velit esse
molestie consequat
Sorry, I never did this before. This may answer the part about why i want a scrolling window as well, unless I did something wrong. The reason for that is that if the lyrics are longer than the box height, the user can scroll to see them(unless they are automated)...
Thanx for the help!
Maceman
pss. I am using CoffeeCup more these days as I found DW too hard to manipulate. It would be easy I am sure with lessons however, but I haven't taken any as of yet....
Ok, Ignore that last post... I guess my CSS didn't update and what i was describing was the results of the HTML only. When i went to save everything, i saw the changes working better. Hey, that is pretty good. Now when i hover over the box, the lyrics appear.
Ok, revised questions:
1. How do i put Song1 on the page (say on the far left of the page) and how when i mouse over the word song1 can i make the lyrics appear in the box to the far right of the page(or anywhere for that matter). I am seeing that this may work wonderfully!
Maceman
Ok, Ignore that last post...
How can make the lyrics appear in the format of lyrics rather than one long sentence that wraps, so for example
Terminology / explanation / some thinks to think about:
First, I overlooked the statement re populating a form and realised too late to change the post.
This is not "populating". That would suggest lyrics stored in a file, and written into the page when "called" by an event (such as a user mouse click). This is quite possible, but not using css at this stage, so they are always there, just not displayed to a visual user.
Also the lyrics aren't white/the same colour as the background - they are manipulated by the declaration "hidden/visible". That means they take up space in the document, but are ordered to only become visible when hovered/focussed/clicked. (This means that in some browsers they will display if the user keyboard/tabs to the "link", or clicks, and will remain visible until the keyboard/mouse focuses elsewhere.)
A real easy option is to colour the words of the lyrics the same as the background, wrap them all in a link, and have that change colour on hover/focus. That has the advantage of the containing "box" always being the "correct" size for all the lyrics, but making text "invisible" by this technique used to be penalised by search engines so I personally avoid it.
Another option is to set the lyrics to display:none, and on hover/focus change to display:block. That means the lyrics take up no space in the "page" until activated. This is a common technique, but I didn't use it as some assistive devices and winSafari do not understand the change so the lyrics remain invisible/inaccessible.
In terms of a "box" size that is smaller, but scrolls. Frankly I find browser implementation differences so idiosyncratic I personally avoid it. Plus I expect users want to read the lyrics rather than trying to control scrolling in a smallish box. If you want scrolling though, I think a good option would be an iframe.
That means I also wonder if users would want to hover/focus a link to read lyrics as well. Its not really that usability/accessibility friendly. But then, they are such fun to code - depends on your target audience, I think.
Back to your code
can i make the lyrics appear in the box to the far right of the page(or anywhere for that matter).
Wherever you like!
In your css:
modify
a.lyrics {
text-decoration:none;
display:block; /* cannot be display:none for winSafari, so must adjust height and font-size */
/*height:100%; removing height allowed for invisible lyrics */
/*cursor: hand; not required*/
height:20px; /* set a height to allow for the "Song1" link, but prevent space being allocated to the invisible lyrics (Opera9 ignores max-height) */
}add
a.lyrics span {
visibility:hidden;
font-size:0;/* for Opera9 and ie6 which will otherwise expand the div regardless of the height setting above*/
}add new rule
a.lyrics:hover span {
font-size:1em; /* reset the 0 font size */
position:absolute; /* positions relative to viewport - use position:relative to position relative to the position of "Song1" */
top:40px;
left:700px; /* use top and left to position the lyrics - avoid bottom/right if you can*/
width:200px; /* eg of giving lyrics a width/height if desired */
border:1px solid red; /* for testing */
}
It's possible to modify the :hover span - colours, backgrounds etc, as well as "positioning" dimensions. Such fun!
pss. I am using CoffeeCup more these days as I found DW too hard to manipulate
Yes, DW is an industry standard, but there is a learning curve that can often interfere with learning the css and html. Not a discussion for this forum, but once you have a little confidence, you might search for a text-editor that suits as they allow you to really learn the code. After that DW and others become tools that seem easy to use.
I appreciate the time you have spent here and I am trying all these changes.
"This is not "populating". That would suggest lyrics stored in a file, and written into the page when "called" by an event (such as a user mouse click). This is quite possible, but not using css at this stage, so they are always there, just not displayed to a visual user."
Yes, understood. I did indeed mean populate because my original thought was that because I have had success with an XML file to poppulate the MP3 jukebox, I thought maybe under the same principle that I could do likewise and have another XML file populate the text box. so for example, when a user passes over a hyperlink called Song1 and clicks, the text box is them populated from the info in the XML file for that title.
Having said that and understanding that that is for the XML forum, I came to appreciate what your script is doing, that is, it is quite neat. I realize that i don't necessarily need the XML file per say, but can accomplish similar to what i wanted to accomplish, that is, to have the user pass over a link and see the lyrics 'appear' in the text box.
My next question is, what code do I need on the link itself to trigger the text to appear?
So, for example, I now have this:
Song1
Song2
Song3
So when the user passes over 'song1', your code should generate the appearance of a nicely formatted set of lyrics using the proper 'symantic code' in the text box.
If the user now passes over 'Song2' link, the same box would have lyrics for song2 appear. Now is typing this, I am realizing an added bonus code. One which keeps the first song1 lyric in the box and perhaps fades it out at a nice rate so that the appearance of each lyrics isn't so abrupt, but that is for the fine tuning of a later exercise perhaps.
So far I have the code working, but i do not have the link triggering the lyrics appearance i nthe box, they are still not joined.
Thanx,
Maceman
ps. I have been looking locally for someone who can teach me some classes in basic CSS, HTML,and perhaps DW, but so far have only found very expensive full blown 'careers' type courses :) Still looking.....
pss. You'll notice that i have been quoting things you said by using "" becasue i do not know how you do the same using those boxes, but it is very handy!
ps. I have been looking locally for someone who can teach me some classes in basic CSS, HTML,and perhaps DW, but so far have only found very expensive full blown 'careers' type courses Still looking.....
Try [w3schools.com...] - excellent for the accurate do-it-yourself tutorial.
pss. You'll notice that i have been quoting things you said by using "" becasue i do not know how you do the same using those boxes, but it is very handy!
See [webmasterworld.com...]
[edited by: tedster at 9:14 pm (utc) on Oct. 14, 2008]
See [webmasterworld.com...]Ahh, wonderful! Thank-you!
http://www.w3schools.com/
