I have made some progree to converting an old Flash movie into a JS page at www.get2thepoint.org/g2p/projects-new.php
I’ve only checked it on Chrome so far but using the property inspector when I mouse over any of the project titles the JS seems to change the display and class properties of the appropriate div and it is displayed. However, although the div is given the class visible it doesn’t fade in. I guess it’s something pretty basic I’m missing…
Sorry, I should have said the CSS for the “effects” is the projects.css file.
Hi there,
I would have thought you would have had to have used keyframes for this.
Here’s an example that will work in Chrome.
<!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">
<base href="http://www.get2thepoint.org/g2p/" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>get2thepoint :: projects</title>
<link href="resources/style.css" rel="stylesheet" type="text/css" />
<link href="resources/style2.css" rel="stylesheet" type="text/css" />
<link href="projects.css" rel="stylesheet" type="text/css" />
<script>
function showbox(boxId) {
document.getElementById(boxId).style.display = 'block';
document.getElementById(boxId).className = 'fade-in';
}
function hidebox(boxId) {
document.getElementById(boxId).className = 'fade-out';
setTimeout(function(){document.getElementById(boxId).style.display = 'none';}, 500);
}
</script>
<style>
@-webkit-keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-webkit-keyframes FadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
.fade-in {
-webkit-animation-name: FadeIn;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.5s;
}
.fade-out {
-webkit-animation-name: FadeOut;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.5s;
}
</style>
</head>
<body>
<div id="body"><!-- end menu -->
<div id="contents">
<div id="squiggle">
<div id="pr01"><a href="#" onmouseover="showbox('de01')" onmouseout="hidebox('de01')">READ<br />International</a></div>
<div id="pr02"><a href="#" onmouseover="showbox('de02')" onmouseout="hidebox('de02')">Projects in<br />development</a></div>
<div id="pr03"><a href="#" onmouseover="showbox('de03')" onmouseout="hidebox('de03')"></a></div>
<div id="pr04"><a href="#" onmouseover="showbox('de04')" onmouseout="hidebox('de04')">International Association of Facilitators</a></div>
<div id="pr05"><a href="#" onmouseover="showbox('de05')" onmouseout="hidebox('de05')">PLB Consulting, Geneva World Economic Forum</a></div>
<div id="pr06"><a href="#" onmouseover="showbox('de06')" onmouseout="hidebox('de06')">Senior Executives</a></div>
<div id="pr07"><a href="#" onmouseover="showbox('de07')" onmouseout="hidebox('de07')">Phyllis Tuckwell<br />Hospice</a></div>
<div id="pr08"><a href="#" onmouseover="showbox('de08')" onmouseout="hidebox('de08')"></a></div>
<div id="pr09"><a href="#" onmouseover="showbox('de09')" onmouseout="hidebox('de09')">UN Convention<br />on Combatting<br />Diversification</a></div>
<div id="pr10"><a href="#" onmouseover="showbox('de10')" onmouseout="hidebox('de10')">ACEVO</a></div>
<div id="pr11"><a href="#" onmouseover="showbox('de11')" onmouseout="hidebox('de11')">Tropical Health<br />Education Trust</a></div>
<div id="de01"><br />Chair<br /><br />Martin</div>
<div id="de02">The Partnership Consultancy<br /><br />vMeetings</div>
<div id="de03"></div>
<div id="de04"><br />Europe Director<br /><br />Martin</div>
<div id="de05">Facilitating team awaydays<br /><br />Martin</div>
<div id="de06"><br />Coaching<br /><br />Martin</div>
<div id="de07">Facilitation of board awayday<br /><br />Martin</div>
<div id="de08"></div>
<div id="de09">Facilitating<br />intersessional working groups<br /><br />Martin</div>
<div id="de10">ACEVO CEO crisis coaching<br /><br />Martin, Lois</div>
<div id="de11">Facilitating boad/staff awayday<br /><br />Martin</div>
</div>
</div>
</div>
</body>
</html>
Might I point out however, that my CSS animation skills are not excellent and there are plenty of people better qualified to help you with this than me.
Another point worth noting:
document.getElementById(boxId).className -= ' visible';
won’t work as you are expecting.
JavaScript will try and coerce the string ’ visible’ into a number before subtracting it, resulting in your element receiving a class of “NaN” (Not a Number).
Out of interest, would you be open to using jQuery to achieve this effect?
Hey Pullo, very many thanks for this. I’ve not come across keyframes before - something else for me to read up on.
I have noticed that that subtracting the visible class left a class of NaN but it seemed to work even in later versions of IE.
I guess I would be open to using jQuery. I’ve used it in the past but recently noticed that the base code seems rather large nowadays.
Hi,
Glad I could help so far 
Regarding jQuery, you can make a custom build nowadays, selecting just the parts that you need and to be honest, it is ideal for this kind of thing.
I’m away from the PC right now, but leave it with me and I’ll knock you up a demo later on, which, even if you don’t use it, will hopefully be educational.
I would really appreciate that Pullo, thanks.
Howdy,
Using jquery, it is as easy as this:
<!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">
<base href="http://www.get2thepoint.org/g2p/" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>get2thepoint :: projects</title>
<link href="resources/style.css" rel="stylesheet" type="text/css" />
<link href="resources/style2.css" rel="stylesheet" type="text/css" />
<link href="projects.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="body">
<div id="contents">
<div id="squiggle">
<div id="pr01"><a href="#">READ<br />International</a></div>
<div id="pr02"><a href="#">Projects in<br />development</a></div>
<div id="pr03"><a href="#"></a></div>
<div id="pr04"><a href="#">International Association of Facilitators</a></div>
<div id="pr05"><a href="#">PLB Consulting, Geneva World Economic Forum</a></div>
<div id="pr06"><a href="#">Senior Executives</a></div>
<div id="pr07"><a href="#">Phyllis Tuckwell<br />Hospice</a></div>
<div id="pr08"><a href="#"></a></div>
<div id="pr09"><a href="#">UN Convention<br />on Combatting<br />Diversification</a></div>
<div id="pr10"><a href="#">ACEVO</a></div>
<div id="pr11"><a href="#">Tropical Health<br />Education Trust</a></div>
<div id="de01"><br />Chair<br /><br />Martin</div>
<div id="de02">The Partnership Consultancy<br /><br />vMeetings</div>
<div id="de03"></div>
<div id="de04"><br />Europe Director<br /><br />Martin</div>
<div id="de05">Facilitating team awaydays<br /><br />Martin</div>
<div id="de06"><br />Coaching<br /><br />Martin</div>
<div id="de07">Facilitation of board awayday<br /><br />Martin</div>
<div id="de08"></div>
<div id="de09">Facilitating<br />intersessional working groups<br /><br />Martin</div>
<div id="de10">ACEVO CEO crisis coaching<br /><br />Martin, Lois</div>
<div id="de11">Facilitating boad/staff awayday<br /><br />Martin</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#squiggle > div > a").hover(
function(e) {
var tip = "#" + $(this).parent().attr("id").replace("pr", "de");
if (e.type == "mouseenter"){
$(tip).fadeIn(500);
} else {
$(tip).fadeOut(500);
}
}
);
</script>
</body>
</html>
Minified jQuery currently weighs in at 90.8 KB
If you want to build your own, you can do so here (just taking the parts you need) and reduce the size considerably.
Thanks a lot, squire! I’ll try the build-my-own jQuery option with it… G:)
Hi again,
Just a thought, but you could also store the tips as a data attribute of the links they are assosciated with:
<!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">
<base href="http://www.get2thepoint.org/g2p/" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>get2thepoint :: projects</title>
<link href="resources/style.css" rel="stylesheet" type="text/css" />
<link href="resources/style2.css" rel="stylesheet" type="text/css" />
<link href="projects.css" rel="stylesheet" type="text/css" />
<style>
#target{
display: none;
position: absolute;
top: 90px;
left: 160px;
width: 90px;
height: 80px;
border-radius: 50%;
background: #fff;
color: #000;
padding: 25px;
}
</style>
</head>
<body>
<div id="body">
<div id="contents">
<div id="squiggle">
<div id="pr01"><a href="#" data-tip="<br />Chair<br /><br />Martin">READ<br />International</a></div>
<div id="pr02"><a href="#" data-tip="The Partnership Consultancy<br /><br />vMeetings">Projects in<br />development</a></div>
<div id="pr03"><a href="#" data-tip=""></a></div>
<div id="pr04"><a href="#" data-tip="<br />Europe Director<br /><br />Martin">International Association of Facilitators</a></div>
<div id="pr05"><a href="#" data-tip="Facilitating team awaydays<br /><br />Martin">PLB Consulting, Geneva World Economic Forum</a></div>
<div id="pr06"><a href="#" data-tip="<br />Coaching<br /><br />Martin">Senior Executives</a></div>
<div id="pr07"><a href="#" data-tip="Facilitation of board awayday<br /><br />Martin">Phyllis Tuckwell<br />Hospice</a></div>
<div id="pr08"><a href="#" data-tip=""></a></div>
<div id="pr09"><a href="#" data-tip="Facilitating<br />intersessional working groups<br /><br />Martin">UN Convention<br />on Combatting<br />Diversification</a></div>
<div id="pr10"><a href="#" data-tip="ACEVO CEO crisis coaching<br /><br />Martin, Lois">ACEVO</a></div>
<div id="pr11"><a href="#" data-tip="Facilitating boad/staff awayday<br /><br />Martin">Tropical Health<br />Education Trust</a></div>
<div id="target"></div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#squiggle > div > a").hover(
function(e) {
var tip = $(this).data("tip");
if (e.type == "mouseenter"){
$("#target").html(tip).fadeIn(500);
} else {
$("#target").html(tip).fadeOut(500);
}
}
);
</script>
</body>
</html>
Again, many thanks Pullo. So many learnings. I am having a go with my other Flash movie now…