Styling one Top Menu (RadTabStrip) differently

I had to style one top navigation menu (RadTabStrip) from the navigation widget differently.

This is how I did it. Since it took me a while to find the right way to do it I thought I share it.

It might be a bad way (I was thinking about addCSS and style it in my theme but was lazzy so this is one way that worked.

In my template I added the following JavaScript to be added before the closing body tag.

If you want to make it run a bit faster...

$("span.rtsOut:contains('My Menu Text')", "#PARENTCONTAINERSELECTOR")

It'll constrain the jQuery search for the rtsOut span to the selector specified instead of parsing the entire DOM every time.

Dear Steve

This was the first time I even worked with jQuery so you can imagine how hard is was for me to find the solution (fist find the right class of the menu then set the css.

Can you provide the mentioned solution completele for my 4 lines with the css settings?

Markus

jQuery is awesome :)

Ok, so you're solution isn't wrong :)  addClass is always easier to read\change, but there certainly isn't anything wrong with what you're doing.

So what this does:
$("span.rtsOut:contains('My Menu Text')")

Is it looks over your entire HTML DOM and finds something that matches that selector...so depending on how large the markup is, that might take a second...so if you RESTRICT the search to a parent div, then it will only have to find that element from that point

So lets say your HTML is like this

Thanks for the explaination.

I think to understand that by the way you do it you restrict jQuery only to search part of the HTML.

Do I simply add my .css at the end of your line like

$("span.rtsOut:contains('My Menu Text')","#navigation").css('background-position':'100% -310px','font-size':'12px','color':'yellow');

Markus


You got it!....everything else works as normal, it's just a little trick to squeeze a bit more performance out of a selector

*EDIT* let me elaborate

So jQuery works in Chaining right...each set of braces kind of becomes an object context.  So this
$("span.rtsOut:contains('My Menu Text')","#navigation")
becomes an object, and then the .css executes that function on that object.

So it's EXACTLY the same as doing
$("span.rtsOut:contains('My Menu Text')").css

However the completion of that initial object selector just happens faster

Dear Steve

I tried you solution wich worked but somehow I had the feeling it was slower. So I took the time to rewrite the whole thing and hope its faster now.

I post it here if someone else looks for the a similar thing to do.

What do you think?

Regards Markus

----------------------------------------------------------

In my template I added the following JavaScript (to be run before closing of body). 
'My Link' beeing the text of top Menu Item

$(".RadTabStrip li:contains('My Link')").addClass('MMClass');

In my TabStrip.MYSKIN.css (which i have in ~/css/ and added to my .master template)
I added the following code at the bottom (so it will not be overwritten later in the CSS