We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

interaction iframe --- I Think

melvint91
melvint91 asked
on
Medium Priority
433 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

Comment
Watch Question

iGottZFrontend Engineer

Commented:
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/
iGottZFrontend Engineer

Commented:
oh no. its this in php:
<?php
   echo $_POST['code'];
?>

Open in new window

Author

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

iGottZFrontend Engineer

Commented:
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
iGottZFrontend Engineer

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

Author

Commented:
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
iGottZFrontend Engineer

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

Author

Commented:
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>
iGottZFrontend Engineer

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

Author

Commented:
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.

Author

Commented:
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 "."
iGottZFrontend Engineer

Commented:
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.

Author

Commented:
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.
iGottZFrontend Engineer

Commented:
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.

Author

Commented:
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>
iGottZFrontend Engineer

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

Author

Commented:
iGottZ,

What browser and version you are using?

Frontend Engineer
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.