Solved

Creating a Progress Bar

Posted on 2004-10-10
20
711 Views
Last Modified: 2013-11-19
Hi,

I am using Javascript to load an XML file. Since the XML file is humungus it takes really long to load it. So in order to alleviate the problem, I am planning to have a page that would show a progress bar, when the XML is being loaded via the loading function. How do I link that page and the progress bar with that function, so that I would have a percentage display of how much far, it has gone loading the xml.

Regards,
Prerak
0
Comment
Question by:sapandesai
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 8
20 Comments
 
LVL 1

Expert Comment

by:jet-fuel
ID: 12274118
You could get the XML tag count of your file and store your xml by chunks (say 20 lines per chunk until complete) into a javascript array (or a DIV tag as a parent with a display:hidden until you finished loading the whole document) and update the ratio of xml lines downloaded to the page vs. the total amount of XML lines to parse through.

Cheers,
Jet-Fuel.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12274773
Below an example of a javascript progress bar.

You could neat up things by editing the css.

Regards

-r-

<html>
<head>
<style type="text/css">
 #progress {
  height:100%;
  background-color:#0f0;
 }
 #progressbar {
  width:400px;height:20px;
  border:inset 2px; background-color:#fff;
 }
 #progresscnt {
  float:left;
  height:100%;width:20px;font-size:10px;
  background-color:blue;
  color:#fff;
 }

</style>
<script type="text/javascript">
<!--
function setprogress(perc)
{
 if(perc < 0) perc = 0;
 if(perc > 100) perc = 100;
 document.getElementById('progresscnt').innerHTML = (perc + "%");
 document.getElementById('progress').style.width = (perc + "%");
}

var vdemo = 0;
var step = 1;

function demo()
{
  vdemo += step;
  if(vdemo <= 0) {vdemo = 0; step = 1;}
  if(vdemo >= 100) {vdemo = 100; step = -1;}
  setprogress(vdemo);
  setTimeout('demo();', 100);
}
//-->
</script>
</head>
<body onload="demo();">
<div id="progressbar">
   <div id="progresscnt"></div>
   <div id="progress">
   </div>
</div>
</body>
</html>
0
 

Author Comment

by:sapandesai
ID: 12279360
I am using an open source XML for SCRIPT to load the XML, so it is not really under my control on how to load the XML : by chunks or as a whole.

Also, regarding the XMLHTTPRequest method, I got the XML document using this method, but if i try to access the attributes of a node using hte getAttribute() method it works fine in IE, but doesnt workin Mozilla..

Please suggest me,
Prerak
0
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 
LVL 1

Expert Comment

by:jet-fuel
ID: 12279756
This might be a good place to start if you want to have more control over parsing through your XML document:
http://www.webreference.com/programming/javascript/xml/

Regarding the getAttribute() method, I haven't had any problems using it with Mozilla. In fact, Mozilla follows the DOM spec moer rigourously than IE needless to say. Perhaps there is something in your source that isn't interpreted correctly. Maybe if you show a snippet, it might shed some light. (FYI: Saving a checkbox html tag (IE) into a javascript string/array will discard the CHECKED status.. ?)

If you are trying to access all the attributes of an xml tag, use node.attributes. This property of the node contains all the existing attributes for a tag in an array.

I believe the currently supported DOM specification for browsers is level 1:
http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html

The current spec is level 3:
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html

Hope this helps...

Cheers!
0
 

Author Comment

by:sapandesai
ID: 12279919
Hi,

I came across a few sample example where getAttribute() method is used in mozilla. But none of them use XMLHTTPRequest to load the xml document. Could this be the reason.

I  am attaching my html file, and my script.

///////////////////////////////////////////////////////////

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
      <HEAD>
            <title>Product Display</title>
            <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
      </HEAD>
      <body>
            <form name="Form1" method="get" action="WebForm1.aspx" id="Form1">
<input type="hidden" name="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" value="dDw1MTA5OTA5NzA7Oz6U6BfKjUHfLEycI2OjXxdLv7n3lA==" />

<script language="javascript">
<!--
      function __doPostBack(eventTarget, eventArgument) {
            var theform;
            if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
                  theform = document.forms["Form1"];
            }
            else {
                  theform = document.Form1;
            }
            theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
            theform.__EVENTARGUMENT.value = eventArgument;
            theform.submit();
      }
// -->
</script>

                  <br>
                  <!--<table border="0" cellpadding="3">
                        <tr>
                              <td>
                                    <span style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">Rep:</span>
                              </td>
                              <td>
                                    <select name="ddlRepList" onchange="__doPostBack('ddlRepList','')" language="javascript" id="ddlRepList">

</select>
                              </td>
                              <td>
                                    <span style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">Created:</span>
                              </td>
                              <td>
                                    <span id="lblDateCreated"></span>
                              </td>
                        </tr>
                        <tr>
                              <td>
                                    <span style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">Ordered By:</span>
                              </td>
                              <td>
                                    <input name="tbxOrderedBy" type="text" size="30" id="tbxOrderedBy" />
                              </td>
                              <td>
                                    <span style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">Modified:</span>
                              </td>
                              <td>
                                    <span id="lblLastModified"></span>
                              </td>
                        </tr>
                        <tr>
                              <td>
                                    <span style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">PO #:</span>
                              </td>
                              <td>
                                    <input name="tbxPurchaseOrderCode" type="text" size="30" id="tbxPurchaseOrderCode" />
                              </td>
                              <td>
                                    <span style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">Cart ID:</span>
                              </td>
                              <td>
                                    <span id="lblCartID"></span>
                              </td>
                        </tr>
                        <tr>
                              <td>
                                    <span style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">Marketing
                                          Code:</span>
                              </td>
                              <td>
                                    <input name="tbxPromotionCode" type="text" size="30" id="tbxPromotionCode" />
                              </td>
                              <td>
                                    <span style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">CartItem ID:</span>
                              </td>
                              <td>
                                    <span id="lblCartItemID"></span>
                              </td>
                        </tr>
                  </table>-->
                  <hr width="100%" noshade>
                        <table align="center"><tr><td>
                        <div style="font-size:8pt;padding:2px;border:solid black 1px">
                        <span id="progress1">   </span>
                        <span id="progress2">   </span>
            <span id="progress3">   </span>
<span id="progress4">   </span>
<span id="progress5">   </span>
<span id="progress6">   </span>
<span id="progress7">   </span>
<span id="progress8">   </span>
<span id="progress9">   </span>
<input type="text" id="checking">
</div>
</td></tr></table>
                  
                  <table id="page_table">
                  </table>
                  <!--<span style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">Notes:</span><br>
                  <textarea name="tbxNotes" rows="8" cols="60" id="tbxNotes" style="MARGIN-LEFT:20px"></textarea><br>
                  <br>
                  <br>-->
                  <div id="divgrandtotal"></div>
                  <br>
                  <br>
                  <input type="submit" name="Button1" value="Continue To Shipping Address(es)" id="Button1" style="width:150px;MARGIN-LEFT:20px" />
                  <input type=button onclick="xmlscript()">
            </form>
            <script language="javascript" src="include/jsXMLParser/xmlsax.js"></script>
            <script language="javascript" src="include/jsXMLParser/xmlw3cdom.js"></script>
            <script language="javascript" src="include/xmlEscape.js"></script>
            <script language="javascript" src="include/ProductDisplay.js"></script>
            <script language="javascript" src="include/ProgressBar.js"></script>            
            <script language="javascript" src="include/sarissa.js"></script>
      </body>



</HTML>
/////////////////////////////////////////////////////////////

////////////////script//////////////////////////////////////
function xmlscript()
            {
                  //debugger
                  //roundup(20.3433);
                  /*var productname=document.getElementById("productname");
                  var productdesc=document.getElementById("productdesc");
                  
                  load_name_desc(productname.value,productdesc.value);
                  
                  var loadingfromcart=document.getElementById("loadingfromcart");
                  file=document.getElementById("xmlfile")*/
      
                  //xmldoc=xmlUnescapeHTMLToXML(file.value)
                  //xmldoc=file.value
                  alert("before")
                  var xmlhttp = Sarissa.getXmlHttpRequest();
                  alert("after")
                  xmlhttp.open("GET", "http://impactprerak.impact-i.com/test1.xml", false);
// if needed set header information
// using the setRequestHeader method
                  alert("1");
                  xmlhttp.send(null);
                  alert("2");
                  //alert(xmlhttp.responseXML.xml);
                  //parser=xmlhttp.respsonseXML.xml;
                  //parser = Sarissa.getDomDocument();
            //      progress_update();
                  //domDoc = parser.loadXML(xmldoc);
                  //progress_stop();
                  //docRoot = domDoc.getDocumentElement();
                  //firstTag1 = docRoot.getElementsByTagName("ProdAttrs").item(0);
                  var root=xmlhttp.responseXML;
                  var list = root.selectSingleNode("company");
                  //alert(firstTag1.hasChildNodes());
                  alert("3")
                  alert("root")
                  alert("child")
                  alert(list.firstChild)
                  alert(list.firstChild.getAttribute("id"))
                  alert("list")
                  alert(list)
                  alert("nodevalue")
                  alert(list.firstChild.nodeValue)
                  if(loadingfromcart.value=="true")
                        alreadyexists(firstTag1,25)
                  else if(loadingfromcart.value=="false")
                        displaychild(firstTag1,"",25);
            }
      ///////////////////////////////////////////////
0
 

Author Comment

by:sapandesai
ID: 12283758
Hi,

. I am running into a strnage error. Following is my XML file, and my script

/****************************HTML with script***************************/
<HTML>
      <body>
      <form id="form1">
      <input type="button" onclick="xmlscript()">      
      </form>

<script language="javascript">
function xmlscript()
{
      var xmlhttp=new XMLHttpRequest();
      var x;
      alert("here");
      xmlhttp.open("GET", "http://impactprerak/test1.xml", false);
      alert("1");
      xmlhttp.send(null);
      alert("2");
                  
      var root=xmlhttp.responseXML;
      var tag=root.getElementsByTagName("company");
      
      child = tag.childNodes;

      for(x=0;x<child.length;x++)
      {
            alert(child.item(x).getAttribute("age"));
      }
            
}      
</script>
</body>
</HTML>
/********************************************************************/
<?xml version="1.0" ?>  
<company>
 <employee id="001" sex="M" age="20">Premshree Pillai</employee>
 <employee id="002" sex="M" age="24">Kumar Singh</employee>
 <employee id="003" sex="M" age="21">Ranjit Kapoor</employee>
 <turnover>
   <year id="2000">100,000</year>
   <year id="2001">140,000</year>
   <year id="2002">200,000</year>
 </turnover>
</company>


/*******************************My xml*******************************/

?********************************************************************/

Here, when I try to get the age of the employees, I run into error.
I get the childnodes of the node "company". When I try to loop trhough the nodelist, it gives me an error, as the firstchild chilnodes.item(0), is of the the type DOM Text and not DOM Element, I dont know why?

Please help me,
Prerak
0
 
LVL 1

Expert Comment

by:jet-fuel
ID: 12286474
  child = tag.childNodes;

     for(x=0;x<child.length;x++)
     {
          alert(child.item(x).getAttribute("age"));
     }

Try this instead:

if (tag.hasChildNodes()) {
    child = tag.childNodes;

    for (int i = 0; i < child.length; i++) {
        alert(child[i].getAttribute("age"));
    }
}

Cheers
0
 
LVL 1

Expert Comment

by:jet-fuel
ID: 12286639
Let me add that if you aren't sure whether or not you have child nodes that are not ELEMENT nodes, an exception may be raised if you're trying to fetch an attribute from a comment tag for example.
0
 

Author Comment

by:sapandesai
ID: 12286644
Hi,

I am doing this on the client side, so for the function hasChildNodes(), it returns me an error as tag.hasChildNodes is not a function.

Please help me,
Prerak
0
 
LVL 1

Expert Comment

by:jet-fuel
ID: 12287382
Hmmm. That's odd. It is a client-side function.. After some seraching, I came across an interesting article. I believe the functions aren't recognized because the connection to the XML document couldn't be made.

The following site gives a demo on how to implement the XML loader from a Linux Mozilla... ? I tried it on my Windows platform, and it seems to be working ("The Mozilla Web browser version used to run the code examples is 1.4.1-the one that is bundled with PCQLinux 2004", quote from the article). I'm currently trying to use it under Mozilla Firefox version 0.9.3.
http://www.pcquest.com/content/coding/2004/104080302.asp

Another site which show an implementation, but this one through IE.
http://www.w3schools.com/dom/dom_examples.asp

Here's sample code for you:

The HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
      <script LANGUAGE="JavaScript" TYPE="text/javascript">
      function search(fname){
            xmlDoc = document.implementation.createDocument("","",null);
            xmlDoc.async = false;
            xmlDoc.load("test1.xml");

            employees = xmlDoc.getElementsByTagName("employee");

            for(var i=0; i<employees.length; i++) {
                  firstName = employees[i].getElementsByTagName("first_name")[0].childNodes[0].nodeValue;
                  if(firstName==fname){
                        lastName = employees[i].getElementsByTagName("last_name")[0].childNodes[0].nodeValue;
                        email = employees[i].getElementsByTagName("email")[0].childNodes[0].nodeValue;
                        alert("Entry found\n Name: "+firstName+" "+lastName+"\n Email:"+email);
                        return;
                  }
            }
            alert("Entry not found");
      }
      </script>
</head>
<body>
      <script LANGUAGE="JavaScript" TYPE="text/javascript">
            search("Anindya");
      </script>
</body>
</html>


The XML file:
<?xml version="1.0" ?>
<department name="pcqlabs">
      <employee designation="editor">
            <first_name>Krishna</first_name>
            <last_name>Kumar</last_name>
            <email>kkkg@cmil.com</email>
      </employee>
      <employee designation="senior manager">
            <first_name>Anil</first_name>
            <last_name>Chopra</last_name>
            <email>anilc@cmil.com</email>
      </employee>
      <employee designation="senior reviewer">
            <first_name>Anoop</first_name>
            <last_name>Mangla</last_name>
            <email>anoopm@cmil.com</email>
      </employee>
      <employee designation="reviewer">
            <first_name>Anindya</first_name>
            <last_name>Roy</last_name>
            <email>anindyar@cmil.com</email>
      </employee>
</department>


This example should give you a good idea on how to proceed.


Cheers!

0
 
LVL 1

Expert Comment

by:jet-fuel
ID: 12287420
Just to precise,

I took the snippet of code from the article. So I do not own it or did not create it.. I just condensed it! ;)

Regards to author!
0
 
LVL 1

Expert Comment

by:jet-fuel
ID: 12287715
You can run a check before you start parsing in order to make the correct calls depending on the browser.. Here's a quick example I cooked up for you. Remember to remove the first XML load lines from your function and pass the xmlDoc var to it instead.

if (navigator.userAgent.indexOf("Mac") != -1 || navigator.userAgent.indexOf("MSIE 6") != -1)
{
      // Microsoft XML Parser loading solution
      var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
      xmlDoc.async="false"
      xmlDoc.load("test1.xml")
      search(xmlDoc, "Anindya");
}

else if (navigator.userAgent.indexOf('Gecko') != -1) {
      // Mozilla XML Parser loading solution
      var xmlDoc = document.implementation.createDocument("","",null);
      xmlDoc.async = false;
      xmlDoc.load("test1.xml");
      search(xmlDoc, "Anindya");
}


Good luck!
0
 

Author Comment

by:sapandesai
ID: 12287856
Hi,

Thank you very much for all your help. I figured that the problem I am running into is due to the carriage return.

For my xml if i do childNodes, for the node Company the length it returns is 9 instead of 4. The reason being it takes into consideration all the carriage returns, and identifies them as child nodes.

I don't know how to overcome this. i tried setting the preserveWhiteSpace to false, but that also didnt work.

Please suggest me,
Prerak
0
 
LVL 1

Expert Comment

by:jet-fuel
ID: 12288236
Try running this to see if you arrive to the same result as I do. (Btw, my second post had mistakes. Apologies for that). I am getting 4 child nodes for the first company node using your XML file as 'test1.xml'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
      <script LANGUAGE="JavaScript" TYPE="text/javascript">
      function search(xmlDoc, fname){
            companies = xmlDoc.getElementsByTagName("company");
            alert('Company length: '+companies.length);
            alert('Company [0]\'s length: ' + companies[0].childNodes.length);

            for (i = 0; i < companies.length; i++) {
                  alert('Company count: ' + i);
                  if (companies[i].hasChildNodes() && companies[i].nodeType == 1) {
                        var children = companies[i].childNodes;
                        for (j = 0; j < children.length; j++) {
                              alert(children[j].nodeName);
                        }
                  }

            }
      }
      </script>
</head>

<body>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
if (navigator.userAgent.indexOf("Mac") != -1 || navigator.userAgent.indexOf("MSIE 6") != -1)
{
      // Microsoft XML Parser loading solution
      var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
      xmlDoc.async="false"
      xmlDoc.load("test1.xml")
      search(xmlDoc, "Anindya");
}

else if (navigator.userAgent.indexOf('Gecko') != -1) {
      // Mozilla XML Parser loading solution
      var xmlDoc = document.implementation.createDocument("","",null);
      xmlDoc.async = false;
      xmlDoc.load("test1.xml");
      search(xmlDoc, "Anindya");
}
</script>
</body>
</html>

0
 

Author Comment

by:sapandesai
ID: 12288430
Hi,

For me in Netscape 7.2 it returns the childNodes of length : 9.

It does show me the alert(childrent[j].nodeName) with value of "#text" for the carriage return, also it doesnt show me the alert('Company count:' + i)

Please suggest me,
Prerak
0
 
LVL 1

Expert Comment

by:jet-fuel
ID: 12289725
Ah ok.... Yikes! Hehehe.

It considers the content (as a text node) in your employee nodes and turnover nodes as child nodes of the company node. And no, there are no attributes for #text nodes, so it's normal that it raises an exception when calling getAttribute.. This seems to be a bug/feature in Netscape. I don't believe it's standard however...

Since you're interested in the children of your company nodes, you should check the node type and make sure it is an Element type before processing it. That will work for all the mentioned browsers just by adding that condition.

      function search(xmlDoc, fname){
            companies = xmlDoc.getElementsByTagName("company");
            alert('Company length: '+companies.length);
            alert('Company [0]\'s length: ' + companies[0].childNodes.length);

            for (i = 0; i < companies.length; i++) {
                  alert('Company count: ' + i);
                  if (companies[i].hasChildNodes() && companies[i].nodeType == 1) {
                        var children = companies[i].childNodes;
                        for (j = 0; j < children.length; j++) {
                              if (children[j].nodeType == 1)
                                    alert(children[j].nodeName+', '+children[j].nodeValue);
                        }
                  }

            }
      }

As you will note. The length is still 9, but I only 'alerted' the child nodes that are elements.

I added this condition:

if (children[j].nodeType == 1)
      alert(children[j].nodeName+', '+children[j].nodeValue);

This will check if it's an element, so that you can make your getAttribute() call without raising an exception.

Text nodes and comment nodes don't have attributes, so you have to be careful with that.

Cheers!


0
 
LVL 1

Expert Comment

by:jet-fuel
ID: 12289774
I suggest that you go through the DOM CORE specification that I provided in a link in a previous post. It will give you the standard way of doing things. Then you can adapt your code to browser specific implementation of the standard.

Perhaps you're wondering why I chose '1' to compare to the nodeType. You will find your answer in that spec.
Snippet of the spec:

IDL Definition

interface Node {

  // NodeType
  const unsigned short      ELEMENT_NODE                   = 1;
  const unsigned short      ATTRIBUTE_NODE                 = 2;
  const unsigned short      TEXT_NODE                      = 3;
  const unsigned short      CDATA_SECTION_NODE             = 4;
  const unsigned short      ENTITY_REFERENCE_NODE          = 5;
  const unsigned short      ENTITY_NODE                    = 6;
  const unsigned short      PROCESSING_INSTRUCTION_NODE    = 7;
  const unsigned short      COMMENT_NODE                   = 8;
  const unsigned short      DOCUMENT_NODE                  = 9;
  const unsigned short      DOCUMENT_TYPE_NODE             = 10;
  const unsigned short      DOCUMENT_FRAGMENT_NODE         = 11;
  const unsigned short      NOTATION_NODE                  = 12;


Hope this helped!
0
 

Author Comment

by:sapandesai
ID: 12289888
Hi,

Thank you very much for all your help. this has really helped me. I just wanted to confirm one more thing though. Instead of comparing the nodetype, i compare the nodeName, i do it as
if(childnode.nodeName=="#text")
      alert("It is a text")
else
     alert("It is an element")

Since i dont use comments in xml, it will be either a carriage return or an element. Please let me know.

Thanks a million.
Regards,
Prerak
0
 
LVL 1

Accepted Solution

by:
jet-fuel earned 125 total points
ID: 12289983
Nono.. I don't think that's a very good idea... You should compare the nodeType instead.. That's what it's there for..

In doing so, you will ensure that you are processing the correct node type. As you saw in the list of node types, we aren't limited to simply the text, comments, and element node types.. You might as well do a CASE statement and filter out those that you want or don't want to use.

But I discourage the idea of using the nodeName to identify the type.

0
 

Author Comment

by:sapandesai
ID: 12290468
Hi,

Thank you very much.

I also had another issue, I have posted another question for it. It is related to the eventhandler for a button. I'd appreciate if you could give me ur views on that as well..

The link is :
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21160023.html

The thread is really long, so would take some time to load.

Regards,
Prerak
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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)

728 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