PDA

Click to See Complete Forum and Search --> : Span Positioning

sincilite
10-20-2006, 07:21 AM
I've been playing around with the script below which, when you rollover the span with the class of jargon, a little expanation of the keyword will be shown with in the span (class=explanation).

My problem is I cannot get the "explanation" span to appear in the same position x-browser. If anyone can see where the problem lies it would be much appreciated.

Thanks
Mike

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo date("d/m/Y") . " " . date("H.i:s"); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript">
function jargon() {
//LOAD SPANS
var spans=document.getElementsByTagName("span");
for(var i=0; i<spans.length; i++) {
//DOES SPAN HAVE CLASS
if(spans[i].className=="jargon") {
//GET CHILDNODES
var explanation=spans[i].childNodes;
spans[i].onmouseover=function() {
for(var x=0; x<explanation.length; x++) {
//SPAN HAS CLASS
if(explanation[x].className=="explanation") {
//SHOW IT
explanation[x].onmouseover=explanation[x].style.display="block";
}
}
}

spans[i].onmouseout=function() {
for(var x=0; x<explanation.length; x++) {
if(explanation[x].className=="explanation") {
explanation[x].onmouseout=explanation[x].style.display="none";
}
}
}
}
}
}

function loadfunctions() {
jargon();
}

//LOAD FUNCTIONS
window.onload=function() { loadfunctions(); }
</script>
<style type="text/css">
<!--
body
{
margin: 0px;
padding: 0px;
background-color: #fff;
background-image: url(ZZZZmike/pageImages/bg_menu.gif);
background-position: 10px 10px;
background-repeat: repeat-x;
font-family: "Trebuchet MS", arial, sans-serif;
color: #acacac;
font-size: 70%;
}

div#control
{
width: 690px;
margin: 10px 0px 0px 0px;
border-left: 10px solid #fff;
}

span.jargon {
cursor: pointer;
position: relative;
display: inline;
}

span.explanation {
marin: 0px;
padding: 0px;
width: auto;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='bg_mike.png');
color: #fff;
border: 1px solid #7ba952;
padding: 20px;
position: absolute;
display: none
}
span.explanation[class] {
background: transparent url("bg_mike.png") repeat top left;
}
-->
</style>
</head>

<body>
<div id="control">
<p>This is some text with a <span class="jargon">keyword<span class="explanation">This is the explanation of jargon.</span></span> within it.</p>
</div>
</body>
</html>
WebJoel
10-20-2006, 07:27 AM
Are you using javascript to help do this? For the benefit of those whom do not use javascript (and, the CSS method is alot easier to work with!), -why not try this:

http://meyerweb.com/eric/css/edge/popups/demo.html

I've been using this techniue for some time and it works wonderfully in IE, Moz, Fx, Opera. :)
sincilite
10-20-2006, 07:39 AM
Thanks that link has sorted me right out.
WebJoel
10-21-2006, 04:55 PM
Especially useful as some 10% of all computer-users either have javascript turned off, or do not use it at all. What springs to mind is users of "WEBtv", which does not support javascript-anything. For them, they are denied the content that you are trying to position with *js.

That link I gave, -it looks difficult and it bugged me for quite some time to get it working right. Now I just sort-of write it without thinking much about it. It is easier than it looks at first glance. If you encounter any problems, post back here and show your code and myself or someone will help you out. :)
sincilite
10-23-2006, 02:59 AM
I see your point regarding the javascript - but I also don't want to put it in an <a> tag as I would have to leave it empty because it doesn't have anywhere to go. Thats something that I'll have to think about.

Anyway everything works, it's pretty straight forward, was just the positioning that was causing the problems.

Thanks
Sincilite