Simple Javascript Fix?

[Lantyssa]

I need to make a set of web pages under a content management system.  They want a uniform look, so certain elements, such as the header and top menu, are outside of my control.  The problem is there is one link in the menu we would like to change but do not have access to it under normal circumstances.

I know text can be altered as we saw in that silly 'ignore' thread, but that was with a Greasemonkey script.  Is it possible to alter the text in the page itself as it is being generated?  If it's possible it seems like it should be simple.  The only examples I find assume you have the string as a variable though.

For example, I have:

http://www.someplace.com/bob/

and I want it to be:

http://www.noplace.com/bobby/

[Righ]

Javascript will let you do it in the browser. If you have access to the server, you can just use a URL rewrite:

http://httpd.apache.org/docs/2.0/misc/rewriteguide.html
http://www.iis.net/download/URLRewrite

You could also use a (transparent) proxy to do the rewrite, but you'll need access to the network infrastructure to make that work.

[Murgos]

This probably doesn't exactly answer your question but a web page is a tree structure that can be truncated at any node and have any other node appended to it.

So, in general, yes what you want to do is possible.  You can grab the head of the tree and navigate through it to find the element you want, snip it out, substitute in the new element and then append the rest of that particular leaf behind it.  This is much easier if every element has a unique name but not impossible even if they don't.

Javascript has functions for getElementbyName() or getElementbyType() and etc... that return an array of the appropriate matching elements and then you can create a new element, copy the essential properties over and sub in the ones you want to change and then move the pointer.

I haven't done web dev in 5+ years so some of this info is probably not quite right but should be close enough to put you on the right track.  Try w3schools and the DOM sections.

[Lantyssa]

I do not have access to the server.

I have the CMS front-end, where I can write my piece of the page which gets inserted much like an include.  (I think it actually generates the full page after publishing, but I'm so far abstracted from actual control of the system I feel lost.)

It's a start, and I'll play around with it.  Here's a snippet though since someone may very well be able to write it out while I'm half-way through figuring out which function calls to make:

Code:

<li><a href="http://www.uh.edu/admit/" id="admissions-nav">Admit List</a> 
<ul> 
<li><a href="http://www.uh.edu/admit/undergrad/">Undergrad Admit</a></li> 
<li><a href="http://www.uh.edu/admit/graduate/">Graduate Admit</a></li> 
<li><a href="http://www.uh.edu/admit/international/">Internat</a></li> 
<li><a href="http://www.uh.edu/moneypit/">Costs &amp; Financial Aid</a></li> 
</ul> 
</li>

That graduate link needs to change.  I can use getElementByID to get the "Admit List".  Not rewriting it or anything yet, just displaying it in an alert.

[craan]

Code:

for(var i=0; i<document.links.length; i++) {
  if (links[i].href == "http://www.uh.edu/admit/graduate/") {
    links[i].href = "some different url";
    break;
  }
}

It loops through all the links on the page so it won't win any efficiency awards.  The .href is what you want to change the underlying url.

Edit: I left out a .href.  I think it'll work but I haven't tested it.

[naum]

jQuery will make your life much simpler.

Don't even need to DL and place on server, you can simply reference Google CDN (or AOL CDN).

And you need to be aware that different browsers (IE) may auto-insert the host name to the link even if tag is a relative link.

[Lantyssa]

Craan, the if statement needs those links{i} changed to document.links{i}, but it works.  This is exactly what I need.  I don't care that it's kludgy, the bureaucrats wouldn't work with us.

Naum, jQuery probably would be helpful, but I don't have much call for javascript.  I'm only using it here because I've lost control of everything about my web pages except base content once this goes live.  And it's been a sticking point because my Chair and I have been holding these people off for too long.

Thanks everyone.

Edit: Bother.  They must do their own link add-ins later.  Once on the system this doesn't work.  <sigh>

[Murgos]

Edit: Bother.  They must do their own link add-ins later.  Once on the system this doesn't work.  <sigh>

If it's a timing issue of who is the last to set the href target you could hack something sneaky in.  Like attaching a mouseover event to the anchor tag that swaps the href target to the one you want only while the mouse is hovering over the link.

Same code as craan gave you before but with document.links.onmouseover="this.href='<someNewHref>'"

I don't know if that will work as written, I don't recall if you can use 'this' in that context but at worst you could just call a function that swaps the href target from the mouseover event.

[Tarami]

Try this to delay it:

Code:

setTimeout(function() {
...craans code...
}, 0);

The zero is usually the time to wait in ms, but just a zero will make it wait for immediate scripts to finish before it runs (since it's synchronous.)

[Lantyssa]

It would also help if I added in the 'document' correction I mentioned.  I lost it in the course of multiple cut-n-pastes and hair pullings.  Thanks, y'all.

Take THAT, The Man!