CODEWITHSUNDEEP
javascriptclassiframehtmlhyperlink
Mr. Sanders
Mr. Sanders

Reputation: 51

Link changing class of parent <div>, content of two <iframe> elements

Interesting (and rather complex) issue here...
What I have is a page with two iframes and a set of links at the top, each contained inside a div with an image background. What I want is for the contents of both iframes to change (to two separate html documents) when the link is clicked, and for the background image of the link's parent div to also change. I also, however, want the parent div to automatically change back to the original class when a different link is clicked (i.e. I have two classes, 'active' and 'waiting'. When a link is clicked (and its contents subsequently displayed in the iframes) I want it to switch to class 'active'. At all other times, though, (including after a different link might be clicked and become active) I want it to go back to using the 'waiting' class.)

Here's my current code / markup:

Javascript:
function changeFrame(link) {
$('#first iframe').src=link.href;
$('#second iframe').src= (Here would be the second link, not sure how to define that) link.ParentNode.addclass("activebutton");

HTML:
<div class="waitingbutton">
<a href="yes.html" (Somewhere here would be the second link for the second iframe) class="waitingbutton" onclick="changeFrame(this);
return false;">Button Text</a>
</div>
(After this come four more divs, each identical bar Button Text and links)

As I suspect you can tell, I'm really just guessing here. Still not hugely familiar with Javascript, hoping someone can help me out.

Upvotes: 1

Views: 1073

Answers (1)

Asherah
Asherah

Reputation: 19347

You seem to be using jQuery.

Here's an ugly way to do it; but it works:

<a href="yes.html" secondary-href="somewhere-else.html" class="waitingbutton" onClick="return changeFrame(this);">Button Text</a>

And your JavaScript:

function changeFrame(link) {
    $('#first iframe').attr("src", $(link).attr('href'));
    $('#second iframe').attr("src", $(link).attr('secondary-href'));
    return false;
}

Note that it'd be more idiomatic jQuery to do this without any onClick handlers, but simply initialise it all in your <head>/<script> from the beginning:

<script type="text/javascript">
    $(function() {
        $("a.iframe-link").click(function(event) {
            $("#first iframe").attr("src", $(link).attr("href"));
            $("#second iframe").attr("src", $(link).attr("secondary-href"));

            // Whatever used to be the activebutton, make it 'waitingbutton', and remove
            // the 'activebutton' class.
            $(".activebutton").
                addClass("waitingbutton").
                removeClass("activebutton"); 

            // Remove .waitingbutton from this, add .activebutton.
            $(this).removeClass("waitingbutton").addClass("activebutton");

            // Don't allow the link's default action (to follow the href in the normal
            // way).
            event.preventDefault();
        });
    });
</script>

Then later:

<a class="iframe-link waitingbutton" href="yes.html" second-href="whatever.html">Hello!</a>

Upvotes: 2

Related Questions