PDA

View Full Version : Javascript powered Navigation, Alter HTML Code on Clicked Links



chrismwiggs
01-07-2012, 12:19 AM
Hello all!

I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more.

It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca).

My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time.

Here is my Javascript:






var categoryLink=new Array();
var counter;
var link = "";
categoryLink[0] = "";
categoryLink[1] = "";
categoryLink[2] = "";
counter = "0";

$(document).ready(function() {
$(".atonal").live('click', function() { {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "atonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);


else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}

});
});

$(document).ready(function() {
$(".tonal").live('click', function() {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "tonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);


else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}

});
});


$(document).ready(function() {
$(".being").live('click', function() {
alert("sometext");
categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);


if (categoryLink[1]=="") {
categoryLink[1] = "being";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);


else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}

});
});

$(document).ready(function() {
$(".doing").live('click', function() {
alert("sometext");
if (categoryLink[1]=="") {
categoryLink[1] = "doing";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);


else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}

});
});


$(document).ready(function() {
$(".abstract").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "abstract";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);


else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}

});
});

$(document).ready(function() {
$(".documentary").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "documentary";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);


else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}

});
});




and the HTML in question:


<table>
<tr>
<td height="35" width="210" valign="top">choose your sound</td>
<td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td>
<td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td>
</tr>
<tr>
<td height="35" width="210" valign="top">choose your text</td>
<td width="165" valign="top"><a href="#" id="being">being words</a></td>
<td width="165" valign="top"><a href="#" id="doing">doing words</td>
</tr>
<tr>
<td height="35" width="210" valign="top">choose your image</td>
<td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td>
<td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td>
</tr>
</table>

I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great!