asked on

interaction iframe --- I Think

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

iGottZ

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/

iGottZ

oh no. its this in php:

<?php
   echo $_POST['code'];
?>

Open in new window

melvint91

ASKER

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();

iGottZ

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

iGottZ

<?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

melvint91

ASKER

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

iGottZ

mind showing me an example of what you tryed to implement?

melvint91

ASKER

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>

iGottZ

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

melvint91

ASKER

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.

melvint91

ASKER

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 "."

iGottZ

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.

melvint91

ASKER

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.

iGottZ

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.

melvint91

ASKER

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>

iGottZ

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

melvint91

ASKER

iGottZ,

What browser and version you are using?

ASKER CERTIFIED SOLUTION

iGottZ

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial