asked on

how does the css code work in this example?

I'm looking at this example

http://jsfiddle.net/fwQeu/

I'll paste the code below. I can't see how the css works - does it? Where is the log class? I'm guessing it is meant to control the height and width of the iframe but the frame doesn't have any class specified does it?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>

<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>
.log {
width: 400px;
height:200px;
}

</style>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(".logfile").click(function(){
var button = $(this);
if (button.text()=='+') {
button.text('-');
$('<iframe src="http://www.bbc.co.uk/?logifile=1.log"></iframe>').appendTo(button);
}
else {
button.text('+');
}
});
});//]]>

</script>

</head>
<body>
<h1>this is a test</h1>
<a class="logfile" href="#">+</a><br />
<a class="logfile" href="#">+</a><br />
<a class="logfile" href="#">+</a><br />

</body>

</html>

ASKER CERTIFIED SOLUTION