JavaScript - Javascript Links Don't Work

here is an example of the problem (and how to produce it):

1) go to http://eataustineat.com/testfolder/index.php
2) type in an 'a' into the text field
3) click "view results"
4) select the first result (ie: Dog Almighty)

Notice the javascript slide doesn't happen. In fact, nothing appears to happen. It is suppose to slide the content to the left much like it did when you hit "view results". Why?

I hope this clears the problem up some.

I've created a slideshow on our site using the java template at
http://www.javascriptkit.com/script/.../jsslide.shtml

Are there simple modifications I can make to this code in order to cause clicking on the image links to go straight to them, rather than creating a new window/tab?

Thanks for the help.

Okay, this is a long-winding problem, but I'll do my best to explain it.
I am creating a website for my ICT coursework which I have been making using frames as a basis for the layout.

On one of the pages, I have included a calendar, which itself is in a frame. Essentially, what I have is a frame within a frame.

Certain made up events in the calendar were linked to another page on my site- when you clicked on that link, it closed the calendar frame, and opened the link within the original frame, using this code:

Code:

"<a href='link.htm' rel="nofollow" target='frame' onclick='window.close();'><center><img src='IMAGE' border='0'></a>"

I had to include this within the Javascript file, and because of the original coding, I can't use " "s in the coding, or it breaks the statement, so I can only use ' ' within the two.

I got this code from Script Calendar.

Initially, this code to open the links worked, closing one frame and opening the link in another. However, now when I click it, it opens in a new window. I really don't know what exactly to edit, as my experience is minimal with Javascript.

I know it's very overcomplicated, but I would really appreciate any help at all! Thank you!

Below is a javascript function from my website that loops through nodes in an XML file retrieving certain information about those who joined in the current month/year. The part in red creates a link which when clicked runs a function called show() with the relevant i variable value e.g. show(2) for the second node if that is relevant. Anyway the red part works in Chrome but not Internet Explorer (surprise surprise). I did some research which says that .setattribute is not allowed in IE. How can I change the red code to create links for the relevant records which works in IE?

Thank you for your help

Code:

function displaymember() {
    var d = new Date();

    var curr_month = d.getMonth();
    curr_month++;
    if (curr_month < 10) curr_month = "0" + curr_month;
    var curr_year = d.getFullYear();

    for (i = 0; i < x.length; i++) {

        membershipstatus = (x[i].getElementsByTagName("membership_status")[0].childNodes[0].nodeValue);
        name = (x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
        body = (x[i].getElementsByTagName("body_type")[0].childNodes[0].nodeValue);
        ethnicity = (x[i].getElementsByTagName("ethnicity")[0].childNodes[0].nodeValue);
        sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
        seeking = (x[i].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
        date = (x[i].getElementsByTagName("date_joined")[0]);
        month = (date.getElementsByTagName("month")[0].childNodes[0].nodeValue);
        year = (date.getElementsByTagName("year")[0].childNodes[0].nodeValue);
         newa = document.createElement("a");
        aIdName = "my" + i + "a";
        ahref = "#";
        aclick = "show(" + i + ")";
        newa.setAttribute("id", aIdName);
        newa.setAttribute("href", ahref);
        newa.setAttribute("onclick", aclick);
        newa.innerHTML = name + " | " + body + " " + ethnicity + " " + sex + " with " + membershipstatus + " membership seeks " + seeking + "<br/>"; 

        if (curr_month == month && curr_year == year) {
            document.getElementById("member").appendChild(newa);
        }


    }

}

Can any one please tell me a way to get all the links in a web page using javascript?

Hello,

I'm having a strange problem. I have a visio diagram displayed on a Sharepoint 2010 page. It's a chart, and each item within it links to a relevant item in a Sharepoint list, displayed in a modal window using a bit of JavaScript. The problem is it works in everything but Internet Explorer! Could anyone help?

IE doesn't display any errors.

Code:

function openDialog(id){
	
	var addString = '&ContentTypeID=0x010093E0E47DAEC14BF5AA399AF47613F91F005BDB7D7682432C4F98DF9B7670EF440C';
	var modalUrl = id + addString;	
	options = SP.UI.$create_DialogOptions();
	options.url = "../mysharepoint/display.aspx?" + modalUrl;
	options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);	
	SP.UI.ModalDialog.showModalDialog(options);
}

function CloseCallback(result, target) {
	location.reload(true);
}

Okay. So here's what I'm trying to do. I have my landing page to my site and near the bottom I have 4 little 48x48 class divs (for social network link images if you were wondering ). Each Class div has a background style all to it's own. (so in this case 4 different divs with 4 different class names) .

What I want to do with the javascript is to have a function(s) that when called on (depending on which div.class was/is clicked on) will open up a lightbox/new page containing the new page (pertaining to the appropriate social network, depending on which class has been clicked on).

I don't want to put an <a></a> tag around the div.classes themselves seperately because the landing page itself has 8 different styles, plus the div.classes I would have to hunt down within the site itself. haha

Basically in short I want the classes to have seperate links that when clicked upon it calls the function, opens the lightbox (or opens the new tab/page) and loads the appropriate page.

Think yall can help me out here?

Hey

Im trying to add links in the images for EasySlide but I cant see to see where to put it.....

Here is the .js code:

Code:

/**
 * @author Bruno Bornsztein <bruno@missingmethod.com>
 * @copyright 2007 Curbly LLC
 * @package Glider
 * @license MIT
 * @url http://www.missingmethod.com/projects/glider/
 * @version 0.0.3
 * @dependencies prototype.js 1.5.1+, effects.js
 */
/*  Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/  */

Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
    initialize: function(wrapper, options){
        this.handStopped = false;
        this.animating = false;
        this.wrapper = $(wrapper);
        this.scroller = this.wrapper.down('div.scroller');
        this.contentDiv = this.scroller.down('div');
        this.current = $(this.contentDiv.children[0].id);
        this.sectionWidth = this.contentDiv.children[0].getWidth();
        this.slideRelations = {};

        this.options = Object.extend({
            effectType: 'mosaic',
            duration: 3.0,
            frequency: 3,
            eRows: Prototype.Browser.IE ? 3 : 6,
            eCols: Prototype.Browser.IE ? 6 : 12,
            eColor: '#FFFFFF'
        }, options || {});

        this.effects = {
            'scroll'        : this.scroll,
            'speedscroll'   : this.speedscroll,
            'fade'          : this.fade,
            'blend'         : this.blend,
            'mosaic'        : this.mosaic
        };

        this.sections = this.wrapper.getElementsBySelector('div.section');
        for (var i = 0; i < this.sections.length; i++) {
            var nextSibling = this.sections[i].nextSiblings()[0];
            if (nextSibling){
                this.slideRelations[this.sections[i].id] = nextSibling.id;
            } else {
                this.slideRelations[this.sections[i].id] = this.sections[0].id;
            }
            this.effects[this.options.effectType].bind(this)().prepare(this.sections[i], i);
        }

        this.events = {
            mouseover: this.pause.bind(this),
            mouseout: this.resume.bind(this)
        };

        this.addObservers();
		

        if (this.options.autoGlide) {
            this.start();
        } else {
            this.handStopped = true;
        }
    },
	
	

    scroll: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    $(el).setStyle('left: ' + glider.sectionWidth + 'px;');
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
					
                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');

                new Effect.Parallel([
                    new Effect.Move(elementIdToShow, {
                        sync: true,
                        x: 0,
                        y: 0,
                        mode: 'absolute'
                    }),
                    new Effect.Move(glider.current.id, {
                        sync: true,
                        x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
                        y: 0,
                        mode: 'absolute'
                    })
                ], {
                    duration: glider.options.duration,
                    afterFinish: function() {
                        glider.setAnimating(false);
                    }.bind(glider)
                });

            }
        }
    },
	
	

    speedscroll: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    $(el).setStyle('left: ' + glider.sectionWidth + 'px;');
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);

                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
                $(elementIdToShow).setStyle({zIndex: 5});
                $(glider.current.id).setStyle({zIndex: 1});
                var currentId = glider.current.id;

                new Effect.Move(elementIdToShow, {
                    x: 0,
                    y: 0,
                    mode: 'absolute',
                    transition: Effect.Transitions.linear,
                    duration: glider.options.duration / 2,
                    afterFinish: function() {
                        moveCurrent.cancel();
                        $(currentId).setStyle('left: ' + (direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth) + 'px;');
                        glider.setAnimating(false);
                    }
                });

                var moveCurrent = new Effect.Move(glider.current.id, {
                    x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
                    y: 0,
                    mode: 'absolute',
                    transition: Effect.Transitions.linear,
                    duration: glider.options.duration
                });
            }
        }
    },

    fade: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    el.setOpacity(0);
                    $(el).setStyle({ zIndex : '0' });
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
                    $(el).setStyle({ zIndex : '998' });
                    $$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle({ zIndex : '998' });
                $(glider.current.id).setStyle({ zIndex : '0' });

                new Effect.Opacity(glider.current.id, {
                duration: glider.options.duration,
                from: 1.0,
                to: 0.0,
                afterFinish: function() {
                    new Effect.Opacity(elementIdToShow, {
                        duration: glider.options.duration,
                        from: 0.0,
                        to: 1.0,
                        afterFinish: function() {
                            glider.setAnimating(false);
                        }.bind(glider)
                    });

                }.bind(glider)
            });
            }
        }
    },

    blend: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    el.setOpacity(0);
                    $(el).setStyle({ zIndex : '0' });
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
                    $(el).setStyle({ zIndex : '998' });
                    $$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle({ zIndex : '998' });
                $(glider.current.id).setStyle({ zIndex : '0' });
                new Effect.Parallel([
                    new Effect.Opacity(glider.current.id, {
                        sync: true,
                        duration: glider.options.duration,
                        from: 1.0,
                        to: 0.0
                    }),
                    new Effect.Opacity(elementIdToShow, {
                        sync: true,
                        duration: glider.options.duration,
                        from: 0.0,
                        to: 1.0
                    })
                ], {
                    duration: glider.options.duration,
                    afterFinish: function() {
                        glider.setAnimating(false);
                    }.bind(glider)
                });
            }
        }
    },

    mosaic: function() {
        var glider = this;
        var delayedAppear = function(eSquare) {
            var opacity = Math.random();
            new Effect.Parallel([
                new Effect.Appear ( eSquare, {from: 0, to: opacity, duration: this.options.duration} ),
                new Effect.Appear ( eSquare, {from: opacity, to: 0, duration: this.options.duration/1.25} )
            ], {sync: false});
        };
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    el.setStyle({ zIndex : 0 });
                    el.hide();
                } else {
                    el.setStyle({ zIndex : 999 });
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
					
					
                }
                if (i == (glider.sections.length - 1)) {
                    glider.eSquares 	= [];
                    var elDimension	 	= el.getDimensions();
                    var elWidth  		= elDimension.width;
                    var elHeight 		= elDimension.height;

                    var sqWidth 		= elWidth / glider.options.eCols;
                    var sqHeight 		= elHeight / glider.options.eRows;

                    $R(0, glider.options.eCols-1).each(function(col) {
                        glider.eSquares[col] = [];
                        $R(0, glider.options.eRows-1).each(function(row) {
                            var sqLeft = col * sqWidth;
                            var sqTop  = row * sqHeight;
                            glider.eSquares[col][row] = new Element('div').setStyle({
                                opacity         : 0,
                                backgroundColor : glider.options.eColor,
                                position        : 'absolute',
                                zIndex          : 5,
                                left            : sqLeft + 'px',
                                top             : sqTop + 'px',
                                width           : sqWidth + 'px',
                                height          : sqHeight + 'px'
                            });

                            el.up('div').insert(glider.eSquares[col][row]);
                        }.bind(glider))
                    }.bind(glider));
                }
            },

            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle({ zIndex : 999 });
                $(glider.current.id).setStyle({ zIndex : 0 });
                new Effect.Parallel([
                    new Effect.Fade(glider.current.id, {sync: true}),
                    new Effect.Appear(elementIdToShow, {sync: true})
                ], {
                    duration: glider.options.duration,
                    afterFinish: function() {
                        glider.setAnimating(false);
                    }.bind(glider)
                });
                $R(0, glider.options.eCols-1).each(function(col) {
                    $R(0, glider.options.eRows-1).each(function(row) {
                        var eSquare = glider.eSquares[col][row];
                        var delay = Math.random() * (glider.options.duration / 3) * 1000;
                        setTimeout(delayedAppear.bind(glider, eSquare), delay);
                    }.bind(this))
                }.bind(this));
            }
        }
    },

    setAnimating: function(flag) {
        this.animating = flag;
        if (flag) {
            $$('.easyslidecontrolwr')[0].addClassName('disabled');
        } else {
            $$('.easyslidecontrolwr')[0].removeClassName('disabled');
        }
    },

    addObservers: function(){
        this.wrapper.observe('mouseover', this.events.mouseover);
        this.wrapper.observe('mouseout', this.events.mouseout);

        var descriptions = this.wrapper.getElementsBySelector('div.sliderdescription');
        descriptions.invoke('observe', 'mouseover', this.makeActive);
        descriptions.invoke('observe', 'mouseout', this.makeInactive);

        //Nubmbers
        var controls = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidedirect');
        controls.invoke('observe', 'click', this.numClick.bind(this));

        //Arrows
        var stop = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidestop');
        stop.invoke('observe', 'click', this.stop.bind(this));

        var play = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideplay');
        play.invoke('observe', 'click', this.start.bind(this));

        var prev = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideprev');
        prev.invoke('observe', 'click', this.previous.bind(this));

        var next = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidenext');
        next.invoke('observe', 'click', this.next.bind(this));
    },

    numClick: function(event){
        var element = Event.findElement(event, 'a'); /*clicked link*/
        var nextElementId = element.href.split('#')[1];
        var direction = 'normal';
        for (var i in this.slideRelations) {
            if (i === this.current.id) {
                direction = 'normal';
                break;
            }
            if (i === nextElementId) {
                direction = 'reverse';
                break;
            }
        }
        this.animate(nextElementId, direction);
        Event.stop(event);
    },

    animate: function(elementIdToShow, direction){
        if (this.animating || this.current.id == elementIdToShow) {
            return;
        }
        this.setAnimating(true);
        this.toggleControl($$('a[href="#' + elementIdToShow + '"]')[0]);
		
	
        this.effects[this.options.effectType].bind(this)().animate(elementIdToShow, direction);

        this.current = $(elementIdToShow);
    },

    next: function(event){
        var nextMove = '';
        nextMove = this.slideRelations[this.current.id];
        this.animate(nextMove, 'normal');
        if (event) {
            Event.stop(event);
        }
    },

    previous: function(event){
        var prevMove = '';
        for (var i in this.slideRelations) {
            if (this.slideRelations[i] == this.current.id) {
                prevMove = i;
                break;
            }
        }
        this.animate(prevMove, 'reverse');
        if (event) {
            Event.stop(event);
        }
    },

    makeActive: function(event){
        var element = Event.findElement(event, 'div');
        element.addClassName('active');
    },

    makeInactive: function(event){
        var element = Event.findElement(event, 'div');
        element.removeClassName('active');
    },

    toggleControl: function(el){
        if (!el) return false;
        $$('.easyslidercontrol a').invoke('removeClassName', 'active');
        el.addClassName('active');
    },

    stop: function(event){
        this.handStopped = true;
        clearTimeout(this.timer);
        Event.stop(event);
    },

    start: function(event){
        this.handStopped = false;
        this.periodicallyUpdate();
        if (event) {
            Event.stop(event);
        }
    },

    pause: function(event){
        if (!this.handStopped) {
            clearTimeout(this.timer);
            this.timer = null;
        }
        Event.stop(event);
    },

    resume: function(event){
        if (!this.handStopped) {
            this.periodicallyUpdate();
        }
    },

    periodicallyUpdate: function(){
        if (this.timer != null) {
            clearTimeout(this.timer);
            this.next();
        }
        this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency * 1000);
    }
});

Somewhere there each time a image appears I want it to go to a certain link (for example purposes: google.com). How can I do this?

I imagine there is a onClick event somewhere in there but I just cannot find it.

Thanks!

I hate javascript....

OK, here's my latest challenge with Javascript. I recently went into twp php files and made a few very minor changes to some outdated $date functions. Now, I have three small icons for 'copy', 'paste','delete' using the javascript 'onclick' function that have stopped working.

In fact, when I replace the two recently revised files with the originals, these icons no longer work there either.

Any help would be appreciated. I'm simply at a total loss for ideas here.

From the primary php file is the relevant lines of source code....As far as I can tell, the second paragraph in each area is returning a 'null' value; i.e. o1a.options.selectedIndex is null.

Code:

function aCopy(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

avail_1a = o1a.options.selectedIndex;
avail_1b = o1b.options.selectedIndex;
avail_2a = o2a.options.selectedIndex;
avail_2b = o2b.options.selectedIndex;
avail_3a = o3a.options.selectedIndex;
avail_3b = o3b.options.selectedIndex;
}

function aPaste(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

o1a.options.selectedIndex = avail_1a;
o1b.options.selectedIndex = avail_1b;
o2a.options.selectedIndex = avail_2a;
o2b.options.selectedIndex = avail_2b;
o3a.options.selectedIndex = avail_3a;
o3b.options.selectedIndex = avail_3b;
}

function aDelete(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

o1a.options.selectedIndex = 0;
o1b.options.selectedIndex = 0;
o2a.options.selectedIndex = 0;
o2b.options.selectedIndex = 0;
o3a.options.selectedIndex = 0;
o3b.options.selectedIndex = 0;

From the supporting php file are the following lines of code....
Code:

$s .= "<td nowrap=nowrap class=calendar style='border-left:1px dashed #000;'>";
$s .= "<a href='javascript:void(0);' onclick=\"aCopy('$year-$month-$d');\"><img src='../admin/_calendar/Copy.gif' alt='Copy Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aPaste('$year-$month-$d');\"><img src='../admin/_calendar/Paste.gif' alt='Paste Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aDelete('$year-$month-$d');\"><img src='../admin/_calendar/Delete.gif' alt='Delete/No Availability' width='16' height='16' border='0' /></a>";
$s .= "</td>";

None of these lines of code were changed or altered when I was updating the code.

Any thoughts or suggestions would be deeply appreciated?

Talltom

Hello,

I can tracking outgoing links now for html links. How can I track outgoing links in flash with jquery or something else?

Best Regards
Code:

<html>
 <head>
  <meta charset="utf-8">
  <title>Tracking outgoing links with JavaScript and PHP</title>
 </head>
 <body>
  <p><a href="http://www.google.com/">Test link to Google</a></p>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script>
   $(function() {
    $('a').click(function() {
     $.post('http://www.example.com/trackol.php', { result: 'click' }, 'html');
    });
   });
  </script>
 </body>
</html>

from: http://stackoverflow.com/questions/2077823/tracking-outgoing-links-with-javascript-and-php

Instead of using window.open, which I understand opens a new window, is there a code that will make the link open in the parent window?

Hi guys,

I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category.

So lets say I have a menu that looks like this:

Code:

<img src="notactiveimagemenu1.jpg" alt="">
<ul id="menu1">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>
<img src="notactiveimagemenu2.jpg" alt="">
<ul id="menu2">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>

Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active.

I was hoping to do this with some javascript.
Code:

// i was thinking about something like this:

// first put menu items in a array

// then use document.getElementById(id).onmouseover = function()
// and make some sort of check to see which src should be changed.

Now I really have no clue how to do it.
So if anyone knows a cool solution please let me know.
I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution.
And I think I should be able to use document.getElementById(id).onmouseover = function() for that.

Anyway thanks for any tips.
Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript.

Hi,

I have a page with an iframe in it.

I need my script to search the contents of the iframe for a specified string, and click the link within it. Here is my coding.

Code:

<script>
setTimeout(function() { window.location.reload(); }, 2000); // 2 seconds, e.g.

$(document).ready(function() {
$('a[href*="13468100"]', $("game").contents()).closest('tr').find('.fightActionInnerInner').parent("a").trigger("click");
});
</script>

</head>

<body>

<iframe src="http://vl.storm8.com/hitlist.php" width="100%" height="800px" id="game"></iframe>

In the post below is the content of the iframe.

At the moment the script doesn't want to click the link, it just refreshes the page. Can anyone advise?

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:

Code:

		

		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:

Code:

<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!

Hey, everyone. I wrote a JavaScript for a forum based RPG. This is the first JavaScript that I ever wrote and I was surprised that it actually worked the way it was supposed to. The problem is that when I post it in a thread on the phpBB forum, the link that says "Jump!" doesn't do anything. When I save the code to Notepad and open on my browser, the link works fine.

<html>
<body>
<script type="text/javascript">
function calculate()
{
var RACE, RAND=Math.floor(Math.random()*3);
RACE = document.calcform.RACE.value;
if (RACE == 1 && RAND != 0)
{document.write("<a href=http://desertcolossus.com/adventures/viewforum.php?f=2>Land</a>");
}
if (RACE == 1 && RAND == 0)
{document.write("<a href=http://desertcolossus.com/adventures/viewforum.php?f=2>Secret Area 1</a>");
}
if ((RACE == 2 || RACE == 3 || RACE == 4) && RAND != 0)
{document.write("<a href=http://desertcolossus.com/adventures/viewforum.php?f=3>Land</a>");
}
if ((RACE == 2 || RACE == 3|| RACE == 4) && RAND == 0)
{document.write("<a href=http://desertcolossus.com/adventures/viewforum.php?f=3>Secret Area 2</a>");
}
if ((RACE == 5 || RACE == 6) && RAND != 0)
{document.write("<a href=http://desertcolossus.com/adventures/viewforum.php?f=4>Land</a>");
};
if ((RACE == 5 || RACE == 6) && RAND == 0)
{document.write("<a href=http://desertcolossus.com/adventures/viewforum.php?f=4>Secret Area 3</a>");
};
if (RACE == 7 && RAND != 0)
{document.write("<a href=http://desertcolossus.com/adventures/viewforum.php?f=5>Land</a>");
};
if (RACE == 7 && RAND == 0)
{document.write("<a href=http://desertcolossus.com/adventures/viewforum.php?f=5>Secret Area 4</a>");
};
if (RACE == 8 && RAND != 0)
{document.write("<a href=http://desertcolossus.com/adventures/viewforum.php?f=6>Land</a>");
};
if (RACE == 8 && RAND == 0)
{document.write("<a href=http://desertcolossus.com/adventures/viewforum.php?f=6>Secret Area 5</a>");
};
}


</script>
<form id="calcform" name="calcform">
<label for="RACE">RACE</label>
<input type="text" size="3" id="RACE" name="RACE" />
<a href="javascript:calculate()">Jump!</a>
</form>


Enter the number associated with your character's race.

1 - Goron
2 - Sheikah
3 - Hylian
4 - Human
5 - Gerudo
6 - Zora
7 - Deku
8 - Fairy
</body>
</html>