PDA

View Full Version : executing <br> instead of displaying it in a yellow box

joonstar
08-06-2006, 02:32 PM
<acronym title="London, Paris, New york">cities</acronym>
The code above is using acronym.
If users put their mouse on cities, a yellow box will pop saying London, Paris, New York.

My problem is that all words is shown in horizently.

I like to display it vertically by each word.

I mean I like to put a line break per each city.

The following code producing the following result will show what I want.

code

<acronym title="London,<br> Paris,<br> New york">cities</acronym>

result when a user put his or her mouse on the word cities

London,<br> Paris<br>, New york

my target result when a user put his or her nouse on the word cities

London,
Paris,
New york
harbingerOTV
08-06-2006, 06:42 PM
Its not possible in anything except IE using any standard way of doing things. This works in IE:

<acronym title="London New York Chicago Casablanca">cities</acronym>


Everything else ignores the line break code and instead inserts a charchter.

http://www.codingforums.com/archive/index.php?t-48941.html

you can "fake it" with something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>-z-</title>

<style type="text/css">
acronym {
position:relative;
}
acronym span {
display: none;
}
acronym:hover span {
display: block;
position: absolute;
top: 0;
left: 120%;
background: #fc3;
padding: 4px;
}

</style>
</head>
<body>
<div>
<acronym>cities<span>London<br>New&nbsp;York<br>Chicago</span></acronym><br><br>

<a href="what" title="what?">what?</a>
</div>

</body>
</html>

I know it defeats the purpose of the Acronym and IE will need the hoverclass.js to handle it, but visually it sort of works.

you could also try the code here:
http://neo.dzygn.com/archive/id/34

and change the css to something like:

/*** NICE TITLES
*********************************************************/
div.nicetitle {
background-color: #333;
color: #fff;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
left: 0;
padding: 4px;
position: absolute;
top: 0;
z-index: 20;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 10px;
-moz-opacity: .87;
/* changes: */
width: 70px;
height: auto;
}

div.nicetitle p {
margin: 0;
padding: 0 3px;
-moz-opacity: 1;
}

div.nicetitle p.destination {
font-size: 9px;
padding-top: 3px;
text-align: left;
-moz-opacity: 1;
}

div.nicetitle p span.accesskey {
color: #d17e62;
}


and the html ould look something like:

<acronym title="London Paris New&nbsp;York Casablanca">cities</acronym>


But youll notice it's buggy. You need to define a width to the div.nicetitle thats skinny enough to force line breaks but as you can see that long city names will over shoot the size of the tag. And nay kind of text enlargement will cause failure.
harbingerOTV
08-06-2006, 07:30 PM
http://www.walterzorn.com/tooltip/tooltip_e.htm

actually that seems doable. it's javascript.

a few things need to changes to make it work though. you can style it how you want but in order for it to work with acronyms you need to add this to the .js file:



////////////// TAGS WITH TOOLTIP FUNCTIONALITY ////////////////////
// List may be extended or shortened:
var tt_tags = new Array("a","acronym","area","b","big","caption","center","code","dd","div","dl","dt","em","h1","h2","h3","h4","h5","h6","i","img","input","li","map","ol","p","pre","s", "select", "small","span","strike","strong","sub","sup","table","td","th","tr","tt","u","var","ul","layer");
/////////////////////////////////////////////////////////////////////


i played with it and writning this:

<acronym title="London Paris New&nbsp;York Casablanca" onmouseover="return escape('London<br>Paris<br>New&nbsp;York<br>Casablanca')">cities</acronym>


produces the desired effect. With javascript turned off it shows the title as normal. With it on you can use line breaks and concievably a list inside it.

I did notice that IE likes to leave off the underline for the acronym though. So a little of this

* html acronym {
text-decoration: underline;
}

should clear that up. Not sure what IE 7 will do with any of it though.
glenngv
08-07-2006, 03:14 AM
Its not possible in anything except IE using any standard way of doing things. This works in IE:

<acronym title="London
New York
Chicago
Casablanca">cities</acronym>


FWIW, this also works in IE.
<acronym title="London New York Chicago Casablanca">cities</acronym>