We Keep Coding

Change all of a specific term in href to another specific term with javascript

I am looking to change part of many links on a webpage. I want to change any link that has "oldTag" to "newTag".
Ex.
www.google.com/WillBeDifferent/oldTag
to
www.google.com/WillBeDifferent/newTag
Basically any link where oldTag shows up I want to replace it with newTag. I am new to this but I have been researching for a few days and nothing I can come up with seems to work.
The context is I have Google Tag Manager checking to see if a cookie is present and if it is then it will trigger a tag to change all of the links to the newTag.
Not sure if I should or can use jQuery or Regex...
Here is what I have played with from scouring the internet.
var anchors = document.querySelectorAll('a[href*="oldTerm"]');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href ="newTerm"; });
It replaced all of the links with the oldTerm but replaced them with http://www.google.com/newTerm.
$("a[href^='oldTerm']")
.each(function() {
this.href = this.href.replace(/oldTerm/g,
"newTerm");
});
Could not get this to work but found it somewhere else on here.
Not sure where to look now... any help would be great.

you are very close but need to use * instead of ^
$("a[href*='oldTerm']")
.each(function() {
this.href = this.href.replace(/oldTerm/g, "newTerm");
});

Trigger an 'onClick' via URL, but do not visit that URL

Trying to launch a click event of .register-btn a nav item when visiting a given URL, but not allow the browser to visit that URL.
So, home.com/memberlogin would remain on home.com ( or redirect to home.com if I must ), and proceed to activate the click of a button.
This is what I have so far, which redirects nowhere as that ended up taking longer than the click event, and it also was quite messy having to load the 404, then wait, then redirect, then wait, then wait for the click event.
I would like something clean and smooth if possible.
jQuery(document).ready(function() {
jQuery(function() {
switch (window.location.pathname) {
case '/memberlogin':
jQuery('.register-btn a').trigger( "click" );
return False;
}
});
});
Probably explained it dreadfully so apologies all - the .register-btn a already exists so I can't create this element, I simply wish to trigger the click for it when visiting a URL/link. Open to suggestions but I assumed something like /memberlogin would suffice, then the link would trigger. The snag is I don't want to "visit" that URL, but use it for the trigger only.
Open to an easier way and tell me if I am asking for something that doesn't work, just figured there must be a way.

Have you tried e.preventDefault() ?
click
and the jQuery:
$('.dontGo').on('click',function(e){
e.preventDefault();
//do stuff
})
fiddle: https://jsfiddle.net/b9x7x4m6/
docs: http://www.w3schools.com/jquery/event_preventdefault.asp

A full javascript solution is (snippet updated as asked):
window.onload = function () {
[].slice.call(document.querySelectorAll('.dontGo')).forEach(function(element, index) {
element.addEventListener('click', function(e) {
e.preventDefault();
alert(e.target.textContent);
}, false);
});
// in order to target a specific URL you may write code like in reported,
// assuming the result is only one element,
// otherwise you need to use the previous [].slice.call(documen.....:
document.querySelectorAll('.dontGo[href="linkedin.com"]')[0].addEventListener('click', function(e) {
e.preventDefault();
alert('Linkedin anchor: ' + e.target.textContent);
}, false);
};
stackoverflow <br/>
google <br/>
linkedin <br/>
twitter <br/>
The querySelector let you select elements in a lot of different ways:
if you need to select an anchor with a specific href value you can write:
document.querySelectorAll('.dontGo[href="linkedin.com"]')
Remember, always, that the result of querySelectorAll is a NodeList array. You can test against the length of such array in order to get, just for instance, only the second element if it exists, like:
var nodEles = document.querySelectorAll('.dontGo[href="linkedin.com"]');
if (nodEles.length > 1) {
nodEles[1]......
}
or you can use the format:
[].slice.call(...).forEach(....
to convert the NodeList to a normal array and than apply the event listener for each element.
Yes, you may prefix the href attribute of anchor tag with an hash (#) to avoid page redirecting. But, in this case, the hash tag is used to jump in another page section and this will change your url.

Simply create a function
function theAction(){
return false;
}
Then your link will be
page name

IE not marking links as "visited" when rendered via javascript

I am working with a site where all content is rendered via ajax postbacks using jquery. I am using Ben Alman's hashchange (http://benalman.com/projects/jquery-hashchange-plugin/) to manage the hash history which allows me to bookmark pages, use the back button etc... Everything works perfectly on everything but IE 9 of course. In IE there is a small issue with "visited" links not being marked as visited. You can see that the link turns purple(visited) for a split second after you click it before the new content is loaded. But once you click the back button the link appears as though it has never been visited. Here is a jfiddle example of what I am talking about:
http://jsfiddle.net/7nj3x/3/
Here is the jsfiddle code assuming you have jquery and the hashchange plugin referenced in head:
$(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
alert("Hash changed to:"+location.hash);
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
//simulate body being rendered by ajax callback
if(hash == ""){
$("body").html("<p id='nav'><a href='#test1'>test 1</a> <a href='#test2'>test 2</a> <a href='#test3'>test 3</a></p>");
}
else{
$("body").html("Right click within this pane and select \"Back\".");
}
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});

You can simply use IE conditional comments to load a specific style:
<!--[if IE]>
a:visited {
padding-left: 8px;
background: url(images/checkmark.gif) no-repeat scroll 0 0;
}
<![endif]-->

Why not setup a code block only to be used by IE that sets the value of a hidden input tag to reflect the click behavior. If a link is clicked you could set the value of the input tag equal to that link id and allow you js to update the elements class to reflect the change.
HTML if IE
<input type="hidden" id="clicked_link" />
JQuery JS if IE
$(function() {
$(a).click(function() {
$(this).attr('id').addClass('visited_link_class');
});
});
CSS
.visited_link_class { color:#your color;}

Maybe if you create the proper elements and building a DOM segment before appending it to the document.
Not sure it would work, can't test it here, but here goes my try adapting your code.
$(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
alert("Hash changed to:"+location.hash);
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
//simulate body being rendered by ajax callback
if(hash == ""){
$("body").html(
$("<p>").id("nav")
.append($("<a>")
.attr("href","#test1")
.text("teste 1"))
.append($("<a>")
.attr("href","#test2")
.text("test 2"))
.append($("<a>")
.attr("href","#test3")
.text("test 3"))
);
}
else{
$("body").text("Right click within this pane and select \"Back\".");
}
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});

Try to consider css LVHA roles, which means the order of an a tag pseudo class matters.
First time to define those class:
A:link
A:visited
A:hover
A:active
If this still did not solve your problem, you can use another js router(hashchange): https://github.com/flatiron/director
I used this one a lot and it works perfectly in many situations.

An option would be to also fake the browser history using the HTML5 history API. This way only after deleting the browser history the link will be 'unvisited'.
Like said on this useful page:
[...] method above switches out the URL in the address bar with
'/hello' despite no assets being requested and the window remaining on
the same page. Yet there is a problem here. Upon hitting the back
button we'll find that we don't return to the URL of this article but
instead we'll go back to whatever page we were on before. This is
because replaceState does not manipulate the browser's history, it
simply replaces the current URL in the address bar.
So like also mentioned on that page you'll have to do a:
history.pushState(null, null, hash);

You can simply use IE conditional comments to load a specific style:
<!--[if IE]>
a:visited {
padding-left: 8px;
background: url(images/checkmark.gif) no-repeat scroll 0 0;
}
<![endif]-->

This is a security feature in ie. The functionality of :visited has been restricted in many modern browsers to prevent CSS exploit.
Hence, there's no workaround for this issue.

URL hash based slider

JS Fiddle
Original Idea / Another version of this question
Attention!
The other version of this idea/the original idea has been answered so if the other version works for you, your welcome :)
This question is still open
So here is my new idea that I am having trouble with. I want to make an image slider. The slider has all the images inside of it and when the page turns to a hash like #home I want the slider to update to a new image. The slider is floating. The other thing is I don't want it to scroll passed other images. I just want it to scroll directly to that image. I also needs to scroll vertically since the images are different widths. I feel bad that I am basically making a job request so this is what I think is right. I can write the code if someone tells me what I need to do.
Here is the code on JS Fiddle. I just have the link so it can be worked on:
//This also need to execute when the hash is updated/an anchor link is clicked
window.onLoad = function hashLogo() {
var hash = window.location.hash;
//Image 1 Hashes
var image1 = [
'#image1',
'#home'
];
//Image 2 Hashes
var image2 = [
'#image2',
'#about'
];
if (image1.indexOf(hash) > -1) {
//Do jQuery Sliding
}
if (image2.indexOf(hash) > -1) {
//Do jQuery Sliding
}
};

What I think you need is an event interception on the hashchange event:
$(window).hashchange( function(){
// Do something when the hash changes
// alert( location.hash );
});
If you also use Ben Alman's fabulous hashchange plugin (0.8kb), it will also ensure the event is polyfilled into browsers that don't support it.

Javascript to determine beginning scroll position on page?

I have a site that features a "fixed" header, the problem is that it really messes up links that link further down the page a la "http://mysite.com/#lower_div_on_the_page"
Is it even possible to use javascript to do something like
if (URL has #hashtag) {starting scroll position = normal position + (my_header_height)}
Is this even possible?
EDIT:
Thanks for all the replies... really appreciated. For reference, I am DEFINITELY using jQuery... how would I do this with jQuery?

Yes, it's possible.
Here are the steps you need to take:
Set up a DOM Loaded event handler. There's more than one way to do this and here's a link to a web page that explains how to do this. Also if you're using a javascript framework such as jQuery (see .ready()) or Prototype.js (see observe extension) it would be a lot easier.
In the DOM loaded event handler function parse the URL (window.location) for the hashtag.
var hashTag = window.location.href;
hashTag = hashTag.substr(hashTag.indexOf('#') + 1);
// now hashTag contains the portion of the URL after the hash sign
Then if you recognize the anchor tag compute the desired scroll location based on that element's location in the DOM tree or whatever logic you would like to use. Again, jQuery (see .offset()) or Prototype.js (see cumulativeScrollOffset) should be able to help with determining the correct offset to scroll to.
Set the scroll of the page. Again jQuery (see .scrollTop()) or Prototype.js (see scrollTo) both have extensions to help with this.
Here's a jQuery example:
$(document).ready(function() {
var hashTag = window.location.href;
if(hashTag.indexOf('#') > 0)
{
hashTag = hashTag.substr(hashTag.indexOf('#'));
// now get the element's offset relative to the document
var offsetTop = $(hashTag).offset().top;
// and finally, scroll the document to that offset
$(document).scrollTop(offsetTop);
}
});

Sure is, you could do something as simple as:
if(window.location.hash != ''){
elementOffset = document.getElementById(window.location.hash.substr(1)).offsetTop;
window.scrollTo(0,elementOffset + my_header_height);
}
Using jQuery it'd obviously be simpler, and you would need to get extra offset depending on containing elements and such, but that should get you started.