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

iFrame Play with 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: