Solved

Allow user to change font colour in one iframe

Posted on 2004-10-10
12
425 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 14

Author Comment

by:john-formby
Comment Utility
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
Comment Utility
hi
<script>
function changeCSS(newClolor)
{
   document.iframeName.createStyleSheet(newColor+".css");
}
</script>
0
 
LVL 25

Expert Comment

by:devic
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 14

Author Comment

by:john-formby
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Ah I see now.  Thanks so much, you have been brilliant. (and very patient)

Thanks again,

John
0
 
LVL 25

Expert Comment

by:devic
Comment Utility
you are welcome!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now