Solved

Allow user to change font colour in one iframe

Posted on 2004-10-10
12
427 Views
Last Modified: 2013-12-03
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
Comment
Question by:john-formby
12 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 12270711
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
 
LVL 14

Author Comment

by:john-formby
ID: 12270923
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
 
LVL 25

Expert Comment

by:devic
ID: 12271121
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
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 14

Author Comment

by:john-formby
ID: 12271494
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
 
LVL 9

Expert Comment

by:riyasjef
ID: 12271502
hi
<script>
function changeCSS(newClolor)
{
   document.iframeName.createStyleSheet(newColor+".css");
}
</script>
0
 
LVL 25

Expert Comment

by:devic
ID: 12271520
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
 
LVL 14

Author Comment

by:john-formby
ID: 12271573
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
 
LVL 25

Expert Comment

by:devic
ID: 12271643
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
 
LVL 14

Author Comment

by:john-formby
ID: 12271686
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
 
LVL 25

Accepted Solution

by:
devic earned 500 total points
ID: 12271752
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
 
LVL 14

Author Comment

by:john-formby
ID: 12272037
Ah I see now.  Thanks so much, you have been brilliant. (and very patient)

Thanks again,

John
0
 
LVL 25

Expert Comment

by:devic
ID: 12272052
you are welcome!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question