Thread: Anyone know how to do this? CSS/Javascript

Here is the thing, I have tabs across the top of my pages and I want to change the css class when it is clicked.

Example :

Code:

  <li class="homeNavTab" id="homeNavTab"><a href="default.aspx">Home</a>

  </li> 
  <li class="fooNavTab" id="fooNavTab"><a href="foo.aspx">Foo</a>

  </li>

When Home is clicked i'd like to change the class from homeNavTab to homeNavTabOn. This won't work with an onclick as once that returns it loads the page and resets the class again.

Any ideas on ways to accomplish this?

Is there a way at getting at a skin token in javascript in 9.x? I have a new skin token in the SkinBase class

In 8.0.1.2 this worked

Code:

element.setAttribute("className", '(!NAVCLASS!)');

but no longer works in 9.x

Ive tried this to no avail

Code:

element.setAttribute("className", '<asp:Literal ID="NAVCLASS" runat="server" Text="" />');

For 9.x I get The ID 'NAVCLASS' is already used by another control. Im calling this javascript on an onload event

For your first question you will need to prevent the link from completing its normal task, which is to load the page linked. In javascript you would do this with:

return false;

This should be the last thing in the onclick event or it will prevent anything else listed after it from firing.

Keep in mind that this will break your link. If you didn't want it to link to another page but have it there for someone to click to get an action on the current page then that should work just fine.

As for your second question, tokens are handled differently in the lastest version:

http://manual.aspdotnetstorefront.co...in-tokens.aspx

But I'm not sure if you can use the skin tokens from within Javascript code. I suppose you could but I haven't tried it.

In SkinBase.cs does this method never get called anymore?

private string ReplaceTokens(String s)

I added a new token here but debugging I never see this method being called.

Using a javascript library, like jquery for example you could do the following:
1) select the elements you want to update using the $ function in jquery
2) reset the standard click event with your css style change

I am not even close to getting my menu the way I want as far as the data out of the system yet, but I think you should be able to do this via jquery after the page loads.

David

@davlun or anyone

I am trying to get jquery to work inside my master page and I can't seem to get it. I would like to include the js and css files I need in the master page and use them ON the master page as well as child pages. I have tried the resolveUrl, Script Manager, I simply cannot get it to work.

Let me know how you included the files in your template.master if you would.

Thanks

I am not that far yet, still working on figuring out how things are put together. However, in general, you should just need to include the js files you need in your master page, in the head.

Then set on onload event handler, kind of like they talk about here: http://docs.jquery.com/Tutorials:Int...29.ready%28%29