[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 436
  • Last Modified:

Allow user to change font colour in one iframe

Hi everyone,

I am currently designing a site in photoshop and would like to be able to offer my visitors the opportunity to change the font colour in one of my iframes.  The colour will be changed by clicking on images of pencils, the bottom of which is the default.  The style that is selected by the user must be applied to all other pages that open in that iframe.  You can see an image of what I mean at: http://www.3doubleu.co.uk/main2.jpg

Forgot to mention, it also needs to change the colour as soon as the pencil is clicked.

Many thanks is advance,

John.
0
john-formby
Asked:
john-formby
1 Solution
 
VirusMinusCommented:
make your button type image and use this

In the button's OnClick Event type "changecol();"
Add the the begining:
<SCRIPT> <!--
function changecol() {
  document.clear
  document.writeln("<FONT COLOR='colorcode'>");
  document.writeln("Your document text");
  document.writeln("</FONT>");
}
// --> </SCRIPT>

a solution specific to your case would be to load a different stylesheet for every section, i.e. about.css, photos.css, etc.

Then within the page that loads up in the iframe use this code to change the color within that page in the iframe only.
0
 
john-formbyAuthor Commented:
Hi,
Thanks for replying.  A friend told me that I could have 3 separate stylesheets, one for each colour. e.g. grey.css (default), red.css and purple.css.  When the web page is loaded it automatically loads grey.css and displays all the text in the first iframe in that colour.  However, if a visitor wants to change the colour to red they can click on the pencil and it will change all the iframe text to red. The same would happen for purple.  Now say for example, the visitor has changed the iframe colour on the about page to red and they click another link, e.g. photos.  This page should automatically inherit the red stylesheet that was selected on the previous page.

I have no problem with defining the stylesheets, but I was told that I need to use JavaScript to make the changover of colours and I don't know how to do this.

Many thanks,

John.

0
 
devicCommented:
hi John,

here is an example:
---------------------------------------------------

in main page, where are pencils:
===============================
<script>
var defaultCssColor="grey";
function changeColor(newClolor)
{
      defaultCssColor=newClolor;
      document.iframeName.document.styleSheets[0].href=newClolor+".css"
}
</script>

<img src=pencil_grey onclick="changeColor('grey')"><br>
<img src=pencil_grey onclick="changeColor('red')"><br>
<img src=pencil_grey onclick="changeColor('purple')"><br>

in iframe:
============================================
<script>
document.write('<link rel="stylesheet" href="'+parent.defaultCssColor+'.css">')
</script>
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!

 
john-formbyAuthor Commented:
Ok, I am absolutely hopeless with JavaScript and I am not sure how to implement the above code.  I have quickly made up a working version of the site and I am really hoping that you can shoiw me where it is supposed to go.

The working site can be viewed at: http://www.3doubleu.co.uk/test/index.html

Here is the code for the pages:

INDEX.HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3DoubleU</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
td img       {
      display: block;
      border: 0px;
      }

body      {
      background-color: #cccccc;
      }
</style>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" align="center">
      <tr>
      <td>

<table border="0" cellpadding="0" cellspacing="0" width="750">
        <tr>
         <td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="36" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="319" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="19" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="67" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="77" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="62" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="66" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="76" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="15" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
        </tr>

        <tr>
         <td colspan="10"><img src="images/title.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="117" border="0" alt="" /></td>
        </tr>
        
      <tr>
         <td colspan="2"><img src="images/red.jpg" alt="" /></td>

         <td rowspan="4"><img src="images/index_r2_c3.jpg" alt="" /></td>
         <td rowspan="4" colspan="2"><a href="about.html" target="main"><img src="images/about.jpg" alt="" /></a></td>
         <td rowspan="4"><a href="photos.html" target="main"><img src="images/photos.jpg" alt="" /><a/></td>
         <td rowspan="4"><a href="links.html" target="main"><img src="images/links.jpg" alt="" /></a></td>
         <td rowspan="4"><a href="misc.html" target="main"><img src="images/misc.jpg" alt="" /></a></td>
         <td rowspan="4" colspan="2"><a href="contact.html" target="main"><img src="images/contact.jpg" alt="" /></a></td>
         <td><img src="images/spacer.gif" width="1" height="16" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td colspan="2"><img src="images/purple.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="9" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td colspan="2"><img src="images/grey.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="10" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td rowspan="5"><img src="images/index_r5_c1.jpg" alt="" /></td>
         <td><img src="images/index_r5_c2.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="10" border="0" alt="" /></td>
        </tr>
        
      <tr>
         <td rowspan="3" colspan="2"><iframe src="about.html" width="355" height="371" frameborder="0" marginheight="0" marginwidth="0" name="main" scrolling="no"></iframe></td>
         <td rowspan="2"><img src="images/index_r6_c4.jpg" alt="" /></td>
         <td colspan="6"><img src="images/index_r6_c5.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="45" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td colspan="5"><iframe src="news.html" width="348" height="310" frameborder="0" marginheight="0" marginwidth="0" name="main" scrolling="no"></iframe></td>
         <td><img src="images/index_r7_c10.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="310" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td rowspan="2"><img src="images/index_r8_c4.jpg" alt="" /></td>
         <td rowspan="2" colspan="6"><img src="images/index_r8_c5.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="16" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td colspan="2"><img src="images/index_r9_c2.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="17" border="0" alt="" /></td>
        </tr>
      </table>

      </td>
      </tr>
      </table>

</body>
</html>



ABOUT.HTML (ALL THE LINKS LOOK LIKE THIS PAGE)

<html>
<head>

<style type="text/css">
body   {
      background-image:url(images/iframe1.jpg);
      background-position:left top;
      background-repeat:no-repeat;
      background-attachment: fixed
      }
</style>

</head>

<body>
gsdgs gsd g d g  dg  dg sg s dg sdg sdg sdg dg sdg sdg  dsg  g s dg s dg sdg sd g d g sdg sdg sdg dg
</body>

</html>



GREY.CSS (

body      {
      font-family: verdana, arial, helvetica, sans-serif;
      font-size: 10pt;
      color: #555555;
      }


RED.CSS

body      {
      font-family: verdana, arial, helvetica, sans-serif;
      font-size: 10pt;
      color: #FF0000;
      }

PURPLE.CSS

body      {
      font-family: verdana, arial, helvetica, sans-serif;
      font-size: 10pt;
      color: #993399;
      }


Sorry to be a pain,

John
0
 
riyasjefCommented:
hi
<script>
function changeCSS(newClolor)
{
   document.iframeName.createStyleSheet(newColor+".css");
}
</script>
0
 
devicCommented:
John, don't afraid javascript, just try it :)

in page where you have the pencils, add this code:
=============================================================
<script>
var defaultCssColor="grey";
function changeColor(newClolor)
{
    defaultCssColor=newClolor;
    document.iframeName.document.styleSheets[0].href=newClolor+".css"
}
</script>

<img src=pencil_grey.jpg onclick="changeColor('grey')"><br>
<img src=pencil_grey.jpg onclick="changeColor('red')"><br>
<img src=pencil_grey.jpg onclick="changeColor('purple')"><br>

in iframe where you want to change colors, in header section (between <head></head>) add this code:
==============================================
<script>
document.write('<link rel="stylesheet" href="'+parent.defaultCssColor+'.css">')
</script>

that's all.
0
 
john-formbyAuthor Commented:
I still can't get it to work :-(

I have added the code (not sure if it is right).  My code now looks like the following:

INDEX.HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3DoubleU</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
td img       {
      display: block;
      border: 0px;
      }

body      {
      background-color: #cccccc;
      }
</style>

<script>
var defaultCssColor="grey";
function changeColor(newClolor)
{
    defaultCssColor=newClolor;
    document.iframeName.document.styleSheets[0].href=newClolor+".css"
}
</script>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" align="center">
      <tr>
      <td>

<table border="0" cellpadding="0" cellspacing="0" width="750">
        <tr>
         <td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="36" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="319" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="19" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="67" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="77" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="62" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="66" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="76" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="15" height="1" border="0" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
        </tr>

        <tr>
         <td colspan="10"><img src="images/title.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="117" border="0" alt="" /></td>
        </tr>
        
      <tr>
         <td colspan="2"><img src="images/red.jpg" onclick="changeColor('red')" alt="" /></td>

         <td rowspan="4"><img src="images/index_r2_c3.jpg" alt="" /></td>
         <td rowspan="4" colspan="2"><a href="about.html" target="main"><img src="images/about.jpg" alt="" /></a></td>
         <td rowspan="4"><a href="photos.html" target="main"><img src="images/photos.jpg" alt="" /><a/></td>
         <td rowspan="4"><a href="links.html" target="main"><img src="images/links.jpg" alt="" /></a></td>
         <td rowspan="4"><a href="misc.html" target="main"><img src="images/misc.jpg" alt="" /></a></td>
         <td rowspan="4" colspan="2"><a href="contact.html" target="main"><img src="images/contact.jpg" alt="" /></a></td>
         <td><img src="images/spacer.gif" width="1" height="16" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td colspan="2"><img src="images/purple.jpg" onclick="changeColor('purple')" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="9" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td colspan="2"><img src="images/grey.jpg" onclick="changeColor('grey')" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="10" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td rowspan="5"><img src="images/index_r5_c1.jpg" alt="" /></td>
         <td><img src="images/index_r5_c2.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="10" border="0" alt="" /></td>
        </tr>
        
      <tr>
         <td rowspan="3" colspan="2"><iframe src="about.html" width="355" height="371" frameborder="0" marginheight="0" marginwidth="0" name="main" scrolling="no"></iframe></td>
         <td rowspan="2"><img src="images/index_r6_c4.jpg" alt="" /></td>
         <td colspan="6"><img src="images/index_r6_c5.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="45" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td colspan="5"><iframe src="news.html" width="348" height="310" frameborder="0" marginheight="0" marginwidth="0" name="main" scrolling="no"></iframe></td>
         <td><img src="images/index_r7_c10.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="310" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td rowspan="2"><img src="images/index_r8_c4.jpg" alt="" /></td>
         <td rowspan="2" colspan="6"><img src="images/index_r8_c5.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="16" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td colspan="2"><img src="images/index_r9_c2.jpg" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="17" border="0" alt="" /></td>
        </tr>
      </table>

      </td>
      </tr>
      </table>

</body>
</html>




ALL LINKS PAGES

<html>
<head>

<style type="text/css">
body   {
      background-image:url(images/iframe1.jpg);
      background-position:left top;
      background-repeat:no-repeat;
      background-attachment: fixed
      }
</style>

<script>
document.write('<link rel="stylesheet" href="'+parent.defaultCssColor+'.css">')
</script>

</head>

<body>
gsdgs gsd g d g  dg  dg sg s dg sdg sdg sdg dg sdg sdg  dsg  g s dg s dg sdg sd g d g sdg sdg sdg dg
</body>

</html>


I have probably entered it wrongly,

John
0
 
devicCommented:
ok, now you have two mistakes.

1. every iframe must have unique name. For example LeftIframe and RightIframe
2. in function changeColor() i had --> document.iframeName.document.styleSheets[0].href=newClolor+".css"
iframeName means the name of iframe, where you want to change color.

If you need to change color in both iframes, then wee need add new line in function.
so here is your new example:
==================================================


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href=http://www.3doubleu.co.uk/test/index.html>
<title>3DoubleU</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
td img      {
    display: block;
    border: 0px;
    }

body     {
    background-color: #cccccc;
    }
</style>

<script>
var defaultCssColor="grey";
function changeColor(newClolor)
{
   defaultCssColor=newClolor;
   document.LeftIframe.document.styleSheets[0].href=newClolor+".css"
   document.RightIframe.document.styleSheets[0].href=newClolor+".css"
}
</script>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td>

<table border="0" cellpadding="0" cellspacing="0" width="750">
      <tr>
       <td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="36" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="319" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="19" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="67" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="77" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="62" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="66" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="76" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="15" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>

      <tr>
       <td colspan="10"><img src="images/title.jpg" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="117" border="0" alt="" /></td>
      </tr>
     
     <tr>
        <td colspan="2"><img src="images/red.jpg" onclick="changeColor('red')" alt="" /></td>

       <td rowspan="4"><img src="images/index_r2_c3.jpg" alt="" /></td>
       <td rowspan="4" colspan="2"><a href="about.html" target="main"><img src="images/about.jpg" alt="" /></a></td>
       <td rowspan="4"><a href="photos.html" target="main"><img src="images/photos.jpg" alt="" /><a/></td>
       <td rowspan="4"><a href="links.html" target="main"><img src="images/links.jpg" alt="" /></a></td>
       <td rowspan="4"><a href="misc.html" target="main"><img src="images/misc.jpg" alt="" /></a></td>
       <td rowspan="4" colspan="2"><a href="contact.html" target="main"><img src="images/contact.jpg" alt="" /></a></td>
       <td><img src="images/spacer.gif" width="1" height="16" border="0" alt="" /></td>
      </tr>
 
    <tr>
       <td colspan="2"><img src="images/purple.jpg" onclick="changeColor('purple')" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="9" border="0" alt="" /></td>
      </tr>
 
    <tr>
       <td colspan="2"><img src="images/grey.jpg" onclick="changeColor('grey')" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="10" border="0" alt="" /></td>
      </tr>
 
    <tr>
       <td rowspan="5"><img src="images/index_r5_c1.jpg" alt="" /></td>
       <td><img src="images/index_r5_c2.jpg" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="10" border="0" alt="" /></td>
      </tr>
     
     <tr>
       <td rowspan="3" colspan="2"><iframe src="about.html" width="355" height="371" frameborder="0" marginheight="0" marginwidth="0" name="LeftIframe" scrolling="no"></iframe></td>
       <td rowspan="2"><img src="images/index_r6_c4.jpg" alt="" /></td>
       <td colspan="6"><img src="images/index_r6_c5.jpg" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="45" border="0" alt="" /></td>
      </tr>
 
    <tr>
       <td colspan="5"><iframe src="news.html" width="348" height="310" frameborder="0" marginheight="0" marginwidth="0" name="RightIframe" scrolling="no"></iframe></td>
       <td><img src="images/index_r7_c10.jpg" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="310" border="0" alt="" /></td>
      </tr>
 
    <tr>
       <td rowspan="2"><img src="images/index_r8_c4.jpg" alt="" /></td>
       <td rowspan="2" colspan="6"><img src="images/index_r8_c5.jpg" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="16" border="0" alt="" /></td>
      </tr>
 
    <tr>
       <td colspan="2"><img src="images/index_r9_c2.jpg" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="17" border="0" alt="" /></td>
      </tr>
    </table>

    </td>
    </tr>
    </table>

</body>
</html>
0
 
john-formbyAuthor Commented:
Ok, I have changed it but it still doesn't work.  It defaults the colour to grey but it will not change the text colour when I click on a coloured pencil.  How do I make them clickable?

They are each images named, red.jpg, purple.jpg and grey.jpg stored in an images folder

Here is the code where they are located:

      <tr>
         <td colspan="2"><img src="images/red.jpg" onclick="changeColor('red')" alt="" /></td>

         <td rowspan="4"><img src="images/index_r2_c3.jpg" alt="" /></td>
         <td rowspan="4" colspan="2"><a href="about.html" target="main"><img src="images/about.jpg" alt="" /></a></td>
         <td rowspan="4"><a href="photos.html" target="main"><img src="images/photos.jpg" alt="" /><a/></td>
         <td rowspan="4"><a href="links.html" target="main"><img src="images/links.jpg" alt="" /></a></td>
         <td rowspan="4"><a href="misc.html" target="main"><img src="images/misc.jpg" alt="" /></a></td>
         <td rowspan="4" colspan="2"><a href="contact.html" target="main"><img src="images/contact.jpg" alt="" /></a></td>
         <td><img src="images/spacer.gif" width="1" height="16" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td colspan="2"><img src="images/purple.jpg" onclick="changeColor('purple')" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="9" border="0" alt="" /></td>
        </tr>
 
      <tr>
         <td colspan="2"><img src="images/grey.jpg" onclick="changeColor('grey')" alt="" /></td>
         <td><img src="images/spacer.gif" width="1" height="10" border="0" alt="" /></td>
        </tr>



John
0
 
devicCommented:
you are right, you had another style in css collection.

here is working example for you:
=======================
http://home.arcor.de/athens/expexc/js/test/john-formby/
0
 
john-formbyAuthor Commented:
Ah I see now.  Thanks so much, you have been brilliant. (and very patient)

Thanks again,

John
0
 
devicCommented:
you are welcome!
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.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now