[jQuery] Add class (highlight) to link if other element has given attribute
Hey everybody,
I'm trying to get a link to be highlighted on page load if another
element (in this case, an iframe) has an inline style of "display:
block;".
This is what I've got so far:
$(document).ready(function() {
if ($("#clientA").is("iframe[style*='block']")) {
$("a:contains('ClientA')").addClass("highlight");
}
});
I'm new to jQuery, so I can't tell what's wrong with the above; I
mean, it reads right to me, but something about it prevents all
javascript from running on the page.
Maybe a look at the bigger picture would help; I've got a set of links
and a set of iframes. The links trigger the iframes to hide or show
by using inline css on the iframe (display: none or block). Also,
through use of cookies, the browser remembers which iframes were being
shown or hidden, and on-load will show or hide the same set of iframes
that were visible last time you viewed the page. I can't change any
of that. What I need to do though, is highlight the links if the
iframe is set to display:block. I figured I'd do this with a
highlight css class, and toggle the class on click:
$("#clientList > a").click(function(){
$(this).toggleClass("highlight", "fast");
});
This works just fine, but it doesn't take into account whether the
iframe was already being shown or hidden, hence the first block of
code that I thought would add the class if the iframe was set to
display:block.
Is there something wrong with my first function, or is there a better
way to accomplish what I'm trying to do?