We Keep Coding

Dynamically change href and link to a url fragment

Hope someone can help.
I'm trying to dynamically change hrefs on a page and then point the user to a url which includes a fragment as:
$(document).ready(function(){
if (document.location.pathname.indexOf('cab2') > -1){
document.getElementsByClassName('resourceLink').setAttribute('href','http://www.myserver.net/cab2/#linkResources');
} else {
document.getElementByClassName('resourceLink').setAttribute('href','http://www.myserver.net/cab/#linkResources');
};
});
In the HTML I'm using several links like this:
<a class="resourceLink" href="" title="Link to Resources section" target="_blank">Resources</a>
What I was hoping for was the script would check what url the visitor had used to arrive at the site, either
http://www.myserver.net/cab/ or,
http://www.myserver.net/cab2/ and then set the appropriate hrefs to either:
http://www.myserver.net/cab/#linkResources or,
http://www.myserver.net/cab2/#linkResources
What happens though is the link opens up the base page (www.myserver.net/cab or cab2) and not the #fragment page.
What am I doing wrong?
My thanks for your interest.

.getElementsByClassName() returns an HTMLCollection, not a single element. You can use .each() to iterate all .resourceLink elements, .attr() to set href attribute value
$(document).ready(function(){
var link = document.location.pathname.indexOf('cab2') > -1 ? "cab2" : "cab";
$('.resourceLink')
.each(function() {
$(this)
.attr('href','http://www.myserver.net/'+ link +'#linkResources')
});
});

How to set a custom href into a button when onClick?

I have a URL
http://localhost:8080/BIM/teacher/reports/section-exercise/assignment?x=1&y=2&z=3
I have 2 btns
I'm not sure how would I bind those 2 btn to the correct URL.
If the Remediation is clicked, I want to set the href to
http://localhost:8080/BIM/teacher/reports/section-exercise/remediation?x=1&y=2&z=3
The only different is the 4th segment, the rest stay the same.
Any helps / suggestions on them will be much appreciated !
I guess - I might have to :
grab the whole URL
re-construct the newURL, store it in a variable
bind that newURL to my btn.
I hope I'm in the right track for this.
Let me know if you guys, notice something.

Here you can change the URL to what ever you like.
I am using Replace fucntion to change the URL on the fly
var url='http://localhost:8080/BIM/teacher/reports/section-exercise/assignment?x=1&y=2&z=3'
$('button1').click(function() {
$(this).attr('href', url);
});
$('button2').click(function() {
$(this).attr('href', url.replace('assignment','remediation');
});

$(/*remediation button selector*/).click(function() {
$(/*assignment performance button selector*/).attr('href', 'http://localhost:8080/BIM/teacher/reports/section-exercise/remediation?x=1&y=2&z=3');
});
I'm not sure if you meant you want the Remediation button to change the href for the first button, or if you want them to just have different hrefs; if it's the latter, they can just have the different hrefs directly in the HTML, no JS needed.

Aminas answer is good, but in case the first URL isn't always the same I would recommend this function (using Regex) to change only the file name of an URL:
function changeFileName(strURL, strNewName) {
return strURL.replace(/[^\/?]*(?=\?|$)/, strNewName);
}
This (a) works no matter what the original file name was, and (b) won't cause problem if the path contains the file name.

How to find the href path of the anchor tag using jquery?

How can I get and check if the href path contain image path or some other link using jquery.
For Example:
<img src="image.png"/>
In the above example anchor text contain the image src then only jquery function should work to find the href path.i.e., Fetch the href path only when anchor text contain img tag.
I reviewed the .has in jquery api for checking the image. But how can i check if the href contain image path or some other path.
Something i am going to do based on SO User's Suggestion, like.
<script type="text/javascript">
jQuery(document).ready(function($) {
if (jQuery('a').has("img")) { // it return the no. of img tag within a
jQuery('a').has("img").prop('href', '#');
}
});
</script>
See the Above script do the action to check if anchor text contain image tag then only # on href link of anchor tag.
By the same way to add like to do the above script to check if the href contain any image path or link. If the Image Path Contain on href then the above script should execute or else it won't.
Any Possible Reason For #Downvoters.?
Is it possible to do in jquery, Any Suggestion would be much appreciated.

you can do
$('a:has(img)').click(function(){
var href = this.href; //or $(this).attr('href')
if(/\.(png|gif|jpg|jpeg)$/i.test(href)){
alert('do')
}
})

First find the href using attr() jQuery function:
var href = $link.attr('href');
Then you have to verify if the href is an image using the indications from the answers of this question.

Use attr - documentation here.
Example:
My Link
console.log($('#myLink').attr("href"));

var href = $('a').attr('href');
or
var href = $('a').prop('href');

First you must select the link
e.g
<a href="link" id="ourlink" ></a>
Then you can use the attr method to get or set href
$("#ourlink").attr('href'); // Here you get it
$("#ourlink").attr('href','anotherlink'); //here you set it

Do somthing like this-
var url = $('a').attr('href');
if(verify url is of type image here){
//true
}
else{
//false
}

Use regexp to check for strings in the href attribute:
var patt=/(png|jpg|gif)/g;
if(patt.test($('a').attr('href'))){
//do something if image
} else {
//do something else
}

You can test the attribute of anchor tag and check using regex that href has a file with extension of an image file.
//Get the value of href attribute of anchor tag
var anchorHref = $("a:has(img)").attr("href");
//Check the extention of the file
if((/\.(gif|jpg|jpeg|tiff|png|bmp)$/i).test(anchorHref))
{
alert("It is Image Path");
}

jQuery Make a Link in Active Status

I am working on a HTML template, but I cannot touch the HTML code, I can only work on CSS and JS files. So I cannot in any way edit the HTML code.
What I am trying to achieve is to put some links in active status when jQuery or Javascript recognizes that the current page URL is the same one of the link I want to put in active status, without editing the HTML code.
Is there a way to do it? I tried in many ways but with no luck.
Here is the HTML code ( Remember I cannot edit it ).
<span class="Tag_Nav_Aux">
Create Account
|
Login
|
My Cart
</span>
The jQuery or Javascript code should work on different links, other than the ones I reported above, since the HTML changes when the user is logged in or logged out.
So the jQuery should point the class Tag_Nav_Aux and add the Active class to any a tag it will find that has the link the same of the current URL.

You can do something like this. Your file name from the URL
var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
After that get the anchor from the navigation and apply some class.
$("span.Tag_Nav_Aux a[href*="+filename+"]").addClass('active');
Here you have to write a CSS active class which will make that link to appear like an active link.

Try this script
jQuery(function($){
$('.Tag_Nav_Aux a').filter(function(){
return $(this).attr('href').toLowerCase() === window.location.pathname.toLowerCase();
}).addClass('active');
});
and create a CSS rule for
.Tag_Nav_Aux a.active{
// style you want the active link to have
}

$(document).ready(function() {
var url = window.location.href.toLowerCase();
$(".Tag_Nav_Aux a").each(function() {
var $this = $(this);
var href = $this.attr("href").toLowerCase();
if(url.indexOf(href) > -1) {
$this.addClass("active");
}
});
});​

I think you need to check the current page url and assign a class to the item like to active.
I usually do putting class="active" based on current URL match with help of server side code.
But if you dont want server code you can do with help of JavaScript
var currentPage=window.location.href;
if(currentPage=="")
{
//logic to find and add a Class for the proper anchor tag
}

Setting active link dynamically on static navigation

I have "navigation.html" (static coded navigtaion ) file loaded on multiple pages, using jQuery .load()
Now I need to dynamically set active <li> for each page user clicking on. I can not use body id for specific reasons.
Any other ways to do this?

If you can identify your current page by class or id (ex: body > div#contacts) for contacts.html and this class/id is unique then you have to match it with you navigation, other way is to match window.location.href value (parsed if you want) against your navigation.
changeActiveLink is defined in JS (ex:init.js) file which you include to each page
function changeActiveLink() {
var currentLocation = window.location.href;
currentLocation = currentLocation.replace('//', '/').split('/');
var page = currentLocation[currentLocation.length - 1];
if (page == "") { page = 'index.html'; }
$('#leftNav1 a[href*="'+ page +'"]').addClass('active');
}
This line is called from each file when "init.js" is included.
$('#leftNav1').load('navigation.html', changeActiveLink);

Or you can use any HTML or even HTML5 tag to specify li item.
<li class="some">
or
<li title="some">
or
<li attr-specify="some-specific-in-url">
and jQuery with window.location object
$('li[title="' + window.location.path + '"]').addClass("active");

You could set up some jquery script to get the url and then find the href of the li that matches that. This will allow you to addClass() to that li of active.
This of course will only work if your href matches the url