Modifying href with JS

JS beginner here;

Ok, I’m trying to manipulate the functions of Codaslider for a layout. What I need is the ability to use an image for slide dynamic slide navigation.

I’ve solved the issue for dynamic hashing, however I’m stuck at modifying the HTML. I’ve tried a few things but I figure this is the easiest way…

This is what I’ve got so far;

function navigate ()
{
    var url = document.getElementById('back');
    url.href = page_back();
    return url;
}

function page_back(inward)
{
    new Object(inward.location.hash);
    var rehash = inward.location.hash.match(/[^#]/);
    if (rehash == 1) {
        rehash = 5;
    }
        else if(rehash == 2) {
            rehash = 1;
        }
            else if(rehash == 3) {
                rehash = 2;
            }
                else if(rehash == 4) {
                    rehash = 3;
                }
                    else if(rehash == 5) {
                        rehash = 4;
                    }
                        else if(rehash == null) {
                            rehash = 5;
                        }
                            else{rehash = "Invalid URL or REFERRER"}
    inward.location.hash = rehash;
    return inward.location.href;
};

Implemented here;

<a href="#5" id="back" class="cross-link"> <input type="image" class="left_arrow" src=
        "images/leftarrow.png"  onclick="navigate()" /></a>

What I expect this to do is change the href value to “#1” so that Codaslider will do it’s thing while I provide a stationary dynamic image for slide browsing.

Anyone have any idea what i’m doing wrong? page_back works fine but navigate seems to be useless.

The hash must start with a letter. It can’t start with a number.

The hash begins with “#” hence the regexp call. Like i said the back_page function works perfectly however the navigate() html modification snippet isn’t working at all.

hmm navigate still isn’t working with these corrections

function navigate (pass)
{
	new Object(passed) = pass;
	var url = document.getElementById('back');
	url.href = page_back(passed);
	return url;
}

    <a href="#5" id="back" class="cross-link"> <input type="image" class="left_arrow" src=
		"http://www.sitepoint.com/forums/images/leftarrow.png"  onclick="navigate(window)" /></a>

Like felgall said, the problem is with #5
A hash must not begin with a number, it must begin with a letter.
For example #a5 would be fine

codaslider has no problem beginning the hash with a number though… the link to #5 works perfectly. I just need to change the number with my script.

codaslider works by changing the number in it’s packed file and it can be cross-linked simply by changing that number.

You’re saying i cannot change the HTML of the link simply because it is a number?

Care to elaborate?

example…

i’d love to know how this author pulled off the impossible.

It says right here, The global structure of an HTML document, that the id attribute is of the name variant. The name variant is described [URL=“http://www.w3.org/TR/html401/types.html#type-name”]here, and it says

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-”), underscores (“_”), colons (“:”), and periods (“.”).

So, the fact that the author of that script got it working does not mean it is correct, or that you should use it …

Anyway, aside from all this handbagging about technicalities, try this:


function navigate () {
	this.href = page_back(document);
}

function page_back(inward) {
	new Object(inward.location.hash);
	var rehash = inward.location.hash.match(/[^#]/);

	if (rehash == 1 || rehash==null) {
			rehash = 5;
	}	else if(rehash >= 2 && rehash <=5) {
			rehash = rehash-1;
	} else {
		rehash = "Invalid URL or REFERRER"
	}

	inward.location.hash = rehash;
	return inward.location.href;
}

(not tested)

nope… that only changes the url in the bar and doesn’t change the HREF value of the <a> tag

The slider script wasn’t written by me. I’m not interested in rewriting someone else’s work for the sake of a w3 suggestion. Must != Should

i cannot make the slider slide without changing the <a> tag.

this is a demo of the page

Foothills Animal Rescue

The URL of the example page doesn’t seem to work … :shifty:

yeah sorry cuz i gave up lol

the codaslider page should work though