Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

interaction iframe --- I Think

Posted on 2011-04-18
18
Medium Priority
?
414 Views
Last Modified: 2012-05-11
Can someone please tell me how to create an interactive interface like what they do on www.w3schools.com.  Basically you can make a change to frame on right, then click button and the web display is shown on right side frame.

here's a link example:  http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

0
Comment
Question by:melvint91
  • 10
  • 8
18 Comments
 
LVL 9

Expert Comment

by:iGottZ
ID: 35422211
its pretty simple.
when you look up the source code of the w3c editors html you can see this:

<form style="margin:0px" action="tryit_view.asp" method="post" target="view">
the target "view" is this:
<iframe class="result_output" width="100%" height="400px" frameborder="0" name="view" src="tryit_view.asp?filename=tryhtml_intro"></iframe>

so when you press this button:
<input style="margin-bottom:5px;font-family:verdana;" name="submit" type="submit" value="Edit and Click Me >>" onclick="displayad()">

it submits the form into iframe after the following javascript has run through:

if you have javascript enabled, the onclick="displayad()" is fired wich has this content:
function displayad()
{
   var t=document.getElementById("pre_code").value;
   document.getElementById("code").value=t;
   document.getElementById("adframe").src="/tryitbanner.asp?secid=tryhtml&rnd=" + Math.random();
}

Open in new window

theese lines:

   var t=document.getElementById("pre_code").value;
   document.getElementById("code").value=t;

Open in new window


grab the code from the textarea and put it into a hidden input value.

<input type="hidden" name="code" id="code" />

 strange but thats their way to submit whats within the textarea into the iframe.


when it submits, tryit_view.asp will simply return what has been submitted to it.
its like this in php:
<?php
   echo $_get['code'];
?>

Open in new window



besides take a look at this:
http://blog.chapagain.com.np/w3c-validation-iframe-error-with-xhtml-1-0-strict-doctype/
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35422223
oh no. its this in php:
<?php
   echo $_POST['code'];
?>

Open in new window

0
 

Author Comment

by:melvint91
ID: 35455017
iGottZ:,

I understand your breakdown, but could you provide a quick example,,, How many different webpages will I need?

also could you explain this:  document.getElementById("adframe").src="/tryitbanner.asp?secid=tryhtml&rnd=" + Math.random();

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Expert Comment

by:iGottZ
ID: 35456105
also could you explain this:  document.getElementById("adframe").src="/tryitbanner.asp?secid=tryhtml&rnd=" + Math.random();
thats for showing a new advertisement (wich you could see if you dont use an ad blocker)

I understand your breakdown, but could you provide a quick example,,, How many different webpages will I need?
lemme try creating one
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35456572
<?php
  if (isset($_GET['frame'])) {
    echo isset($_POST['code']) ? $_POST['code'] : 'whoop whoop';
    exit;
  }
?>
<html>

<head>
<title>HTML Editor</title>
</head>

<body style="margin:0;padding:0">
  <form style="margin:0px" action="?frame" method="post" target="frame">
    <table width="100%" height="100%" border="1">
      <tr>
        <td width="50%">
          <textarea id="in" name="code" style="width:100%;height:100%;border:0;"></textarea>
        </td>
        <td width="1px">
          <input name="submit" type="submit" value=">>" />
        </td>
        <td width="50%">
          <iframe id="out" style="width:100%;height:100%" frameborder="0" name="frame" src="?frame"></iframe>
        </td>
      </tr>
    </table>
  </form>
</body>

</html>

Open in new window


save it as what php filename you want and open it in your browser.

works fine for me in firefox 4

paste this code for testing:
<html>
<head>
<style>
#lol {
  font-size: 32px;
  background-color: #000000;
  color: #00ff00;
  width: 400px;
  height: 400px;
  text-align: center;
}
#lol:hover {
  color: #ff0000;
}
</style>
<script>
function init () {
  var lol = document.getElementById("lol");
  lol.onmouseover = function() {
    this.innerHTML = "mouse over";
    this.style.backgroundColor = "#00ff00";
  }
  lol.onmouseout = function() {
    this.innerHTML = "mouse out";
    this.style.backgroundColor = "#ff0000";
  }
  lol.onclick = function() {
    this.innerHTML = "click";
    this.style.backgroundColor = "#0000ff";
  }
}
</script>
</head>
<body onload="init();">
<div id="lol">hover me</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:melvint91
ID: 35456999
iGottZ:,

That was a great example.  I totally see how it works.  Only one thing...for some reason whatever style I use within the <style> </style> tags, it's not working.  Any idea what could be causing this.

Thanks,

Melvint91
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35457355
mind showing me an example of what you tryed to implement?
0
 

Author Comment

by:melvint91
ID: 35459577
iGottZ,

See code I'm using below:

<?php
  if (isset($_GET['frame'])) {
    echo isset($_POST['code']) ? $_POST['code'] : 'whoop whoop';
    exit;
  }
?>
<html>

<head>
<title>HTML Editor</title>
</head>

<body style="margin:0;padding:0">
  <form style="margin:0px" action="?frame" method="post" target="frame">
    <table width="100%" height="100%" border="1">
      <tr>
        <td width="50%">
          <textarea id="in" name="code" style="width:100%;height:100%;border:0;"></textarea>
        </td>
        <td width="1px">
          <input name="submit" type="submit" value=">>" />
        </td>
        <td width="50%">
          <iframe id="out" style="width:100%;height:100%" frameborder="0" name="frame" src="?frame"></iframe>
        </td>
      </tr>
    </table>
  </form>
</body>

</html>
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35460625
i do not understand your problem if you simply post what i wrote.
why dont you quote a simple try of yourself modifying it?
0
 

Author Comment

by:melvint91
ID: 35467626
iGottZ,

I notice my code is fine when I include any styles directly within tags, but not when I include <style> </style> tags.  see below: works fine this way

<html>
<head>
<title>This is a test</title>
</head>
<body>

<table width="60%" cellspacing="3" cellpadding="2" border="1">

<tr BGColor="#808000>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</th>
<tr>
<td>John Doe</td>
<td>888-888-8888</td>
<td>john.doe@yahoo.com</td>
</tr>
<tr>
<td>Jenny Jamey</td>
<td>777-777-7777</td>
<td>jenny.james@yahoo.com</td>
</tr>
</table>

</body>

</html>

But I want to include <style> </style> tags for training purposes... Any idea what could be the problem why <style> </style> tags won't work.
0
 

Author Comment

by:melvint91
ID: 35470275
iGottZ,

I also noticed some things do work withing <style> </style> tags...it's when I use the # or . the style isn't recognized.

For example when I use #test { font-size: 18px; } or .test {font-size: 18px; } the style doesn't display when I use <div id="test"> This is a Test </div> . . .  But when I use the following within <style> </style> tags:  h2 {font-size: 22px;}  -   <h2> This is a Test </h2> . . . my content display correctly...

Could the PHP not recognize "#" or "."
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35478668
why cant you just show me a try of modifying my code?

besides.. why dont you remove my styles within the tags if you want to use a css file or the <style> tag for that purpose?


besides.. php has nothing to do with css. not even with html.

my code is html including some php code wrapped into this: <?php ?> wich the server recognizes as serversided scripting language.
everything send through echo and everything outside theese php tags is pure html, css and javascript?
do you not fully understand what you are playing around with?

i'm not having any problems using <style> within this code.
0
 

Author Comment

by:melvint91
ID: 35486041
iGottZ,

"why cant you just show me a try of modifying my code?" What exactly are you asking when you say modify your code

"besides.. why dont you remove my styles within the tags if you want to use a css file or the <style> tag for that purpose?"  I did remove your styles while trying several techniques to get my <style> to show

I'm just trying to figure out why <style> code doesn't work when I use # or . as explained above.
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35490520
What exactly are you asking when you say modify your code
a code example of what you have not got working as you mentioned by this:
I'm just trying to figure out why <style> code doesn't work when I use # or . as explained above
for me it does work.
0
 

Author Comment

by:melvint91
ID: 35492561
iGottZ,

See code below..this part ain't working:

#testtbl{
          font-size: 12px;
          font: Arial;
          color: green;
          cellspacing: 2px;
          cellpadding: 2px;
          border: 2px;
          border-style: solid;
}

====================================
example page below:


<html>
<head>
<title>This is a test</title>

<style>
#testtbl{
          font-size: 12px;
          font: Arial;
          color: green;
          cellspacing: 2px;
          cellpadding: 2px;
          border: 2px;
          border-style: solid;
}

h2{
    font-size: 22px;
    color: green;
}

</style>
</head>
<body>

<div id="testtbl"> Testing my style above to see if works with # or . signs...text color should be green.</div>

<h2>This is testing without # or . signs </h2>

</body>

</html>
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35696218
what is not working?
http://gyazo.com/6cdc3cc012f68d3948f1483bb8c1f8e2.png
for me your code does work.
0
 

Author Comment

by:melvint91
ID: 35721479
iGottZ,

What browser and version you are using?

0
 
LVL 9

Accepted Solution

by:
iGottZ earned 2000 total points
ID: 35729423
srware iron. also known as google chrome
besides it works for me in IE, Firefox and Opera and Opera Mobile
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

571 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