?
Solved

unable to change a class in an included file

Posted on 2012-09-04
5
Medium Priority
?
322 Views
Last Modified: 2012-09-05
My website consists of only html pages

I have a menu bar, which i first put into my home page. then through javascript i changed the class of one of the link to show the current page. i worked properly.

i then shifted my menu bar into another html file, and included that file in my home page this way:

<script type="text/javascript">
         function pf_loadContent() {
             $("#MainHeader").load('usercontrols/Header.htm');
             $("#navHeader1").load('usercontrols/Navigation.htm');
             $("#MainFooter").load('usercontrols/Footer.htm');
         }
    </script>
<script language="javascript" type="text/javascript">
    pf_loadContent();
</script>

Now, when i am trying to change the class of my menu bar, it giver error that object does not exist. what is the problem?

<script language="javascript" type="text/javascript">
    function pf_HighlightMenu(strMenu, strLink) {
        document.getElementById(strMenu).className = 'tdHomeHover';
        document.getElementById(strLink).className = 'aHomeHover';
    }
    pf_HighlightMenu('menu1', 'link1');

</script>
0
Comment
Question by:RTKHOT
5 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38363295
Are you executing this script before the elements are rendered on the page?
0
 

Author Comment

by:RTKHOT
ID: 38363400
no, it is at the end. also, when i do a view source, the included content doesnt show, even though it is there on the page
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38363440
Sorry about that. I just read your question again. I missed the part that these elements are loaded externally by jscript/jquery. We'll need a jscript/jquery expert to comment. I don't know at what point the load takes place, but probably after the page loads since it's not in your source code. If that's the case, your script is being executed before the those items are added to the page in which case you'll probably have to set up an interval to check for those items before executing your script.
0
 
LVL 12

Expert Comment

by:zappafan2k2
ID: 38363521
Can you link to a live site?
0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 800 total points
ID: 38363650
Because you're using jQuery, you should encapsulate your loading scripts in $(document).ready(). That way they only execute once the DOM is loaded. The problem with your script is that if you call pf_HighlightMenu before the Navigation is loaded you will get the error. You best bet would probable delay the event binding until after the content is loaded.

<script type="text/javascript">
$(document).ready(function(){
     pf_loadContent();
});

function pf_loadContent() {
     $("#MainHeader").load('usercontrols/Header.htm');
     $("#navHeader1").load('usercontrols/Navigation.htm', function() {
          //bind you navigation events here
          $('#navigation a').click(function(e) {
               strLink = $(this).attr('id');
               strMenu = "somethingelse";
               pf_HighlightMenu(strMenu, strLink);
          });
     });
     $("#MainFooter").load('usercontrols/Footer.htm');
}

function pf_HighlightMenu(strMenu, strLink) {
     $('#' + strMenu).addClass('tdHomeHover');
     $('#' + strLink).addClass('aHomeHover');
}
</script>

Open in new window

You'll have to tweak the event binding to accomodate your own code / variables, but that's the general idea.
0

Featured Post

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!

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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)
Suggested Courses

831 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