• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

iFrame Play with Pages

Using IFrames inside your pages

masterchief

Well-known member
#1
masterchief submitted a new resource:

iFrame Play with Pages - Using IFrames inside your pages

Sample html code for your page

Code:
<div class="baseHtml">

<?php
  include ("test.php");
?>

<ul>

  <li><a href="test.php?do=sampletext" target="iframe1"><span>Sample Text</span></a></li>
  <li><a href="test.php?do=moresampletext" target="iframe1"><span>More Sample Text</span></a></li>

</ul>

<iframe
  name="iframe1"
  src=""
  width="800"
  height="450"
  frameborder="0">

  Frames are not supported on your browser

</iframe>

</div>
Read more about this resource...
 

masterchief

Well-known member
#2
In the page HTML code replace the UL section with the following code to show buttons instead of links

Code:
<ul>

  <li  style="display: inline-block;  width: 115px; height: 25px; background: #4E9CAF; padding: 10px; text-align: center; border-radius: 5px; color: white; font-weight: bold;"><a href="test.php?do=sampletext" target="iframe1"><span>Sample Text</span></a></li>

  <li  style="display: inline-block;  width: 115px; height: 25px; background: #4E9CAF; padding: 10px; text-align: center; border-radius: 5px; color: white; font-weight: bold;"><a href="test.php?do=moresampletext" target="iframe1"><span>More Sample Text</span></a></li>

</ul>
 

Kintaro

Well-known member
#3
to have buttons instead of links you can use:

HTML:
<input type="button" value="TEXT" onclick="TARGET.location.href='LINK'">
 

masterchief

Well-known member
#4
to have buttons instead of links you can use:
NOPE! does not work as you have posted.... please try again

new button code with help from EQnoble
HTML:
<div class="cstmButtonWrap">
  <a class="cstmButtonTxt" href="test.php?do=sampletext" target="iframe1">Sample Text</a>
  <a class="cstmButtonTxt" href="test.php?do=moresampletext" target="iframe1">More Sample Text</a>
</div>
code for extra.css
HTML:
.cstmButtonWrap{
  display: inline-block;
  list-style: none outside none;
  margin: 10px;
}
.cstmButtonWrap a:hover {
  text-decoration:none;
}
.cstmButtonTxt {
  background-color: @secondaryMedium;
  border-radius: 4px;
  color: #000000;
  padding: 4px;
}
.cstmButtonTxt:hover {
  background-color: @secondaryMedium;
  color:#ffffff;
}
 
Last edited: