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>
purplesoupAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
>does it?

No...

change .log to iframe

http://jsfiddle.net/xBbTE/1/
0
 
leakim971PluritechnicianCommented:
or replace :
$('<iframe src="http://www.bbc.co.uk/?logifile=1.log"></iframe>').appendTo(button);
by :
$('<iframe class="log" src="http://www.bbc.co.uk/?logifile=1.log"></iframe>').appendTo(button);
0
 
Rajar AhmedConsultantCommented:
If your looking to apply css for iframe you can try like below

Open in new window

<!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;
}
      .iframecss {
          width: 600px;
    height:600px;
      }


  </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" class="iframecss" ></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>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Alan WarrenApplications DeveloperCommented:
It's not doing anything, you can remove the css and still get the same results.

The iframes are being populated by this: http://fiddle.jshell.net/fwQeu/show/
If you view source for that link, the css for width and height are defined.
<style type='text/css'>
    .log {
    width: 400px;
    height:200px;
}


  </style>

Open in new window

Alan
0
 
Chris StanyonCommented:
Another way:

$('<iframe src="http://www.bbc.co.uk/?logifile=1.log"></iframe>').addClass('log').appendTo(button);

Open in new window

0
 
purplesoupAuthor Commented:
ok thanks - I was just puzzled why it would have that css when it didn't seem like it did anything - thanks for confirming I wasn't missing anything.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.