?
Solved

how does the css code work in this example?

Posted on 2012-09-18
6
Medium Priority
?
1,834 Views
Last Modified: 2012-09-20
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>
0
Comment
Question by:purplesoup
6 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 800 total points
ID: 38410199
>does it?

No...

change .log to iframe

http://jsfiddle.net/xBbTE/1/
0
 
LVL 83

Assisted Solution

by:leakim971
leakim971 earned 800 total points
ID: 38410204
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
 
LVL 18

Assisted Solution

by:Rajar Ahmed
Rajar Ahmed earned 400 total points
ID: 38410255
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 26

Assisted Solution

by:Alan Warren
Alan Warren earned 400 total points
ID: 38412130
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
 
LVL 45

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 400 total points
ID: 38414558
Another way:

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

Open in new window

0
 

Author Closing Comment

by:purplesoup
ID: 38417009
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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month13 days, 20 hours left to enroll

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question