Jquery to amend href except where href is # - javascript

I am trying to amend the links on my website to jump to a div when clicked with 2 exceptions, 1. when the link is index.php and 2. when the link already contains #.
I have got it working for the first instance using the code below.
$(function() { $('a').each(function() {
if ($(this).attr('href').trim() == "index.php") {
$(this).attr('href', 'index.php');
} else {
$(this).attr('href', function (_, oldHref) {
return oldHref + "#bodyContent";
});
}
});
});
So at the moment if the link is <a href='index.php'> </a> then the link stays as it is. All other links have #bodyContent added. This means I am getting links that are #pt_sizes#bodyContent this is not good.
If I specify the exact # in the code as below it works for that link.
$(function() { $('a').each(function() {
if ($(this).attr('href').trim() == "index.php") {
$(this).attr('href', 'index.php');
} else if ($(this).attr('href').trim() == "#pt_sizes") {
$(this).attr('href', function (_, oldHref) {
return oldHref;
});
} else {
$(this).attr('href', function (_, oldHref) {
return oldHref + "#bodyContent";
});
}
});
});
However I have 4 # links on one page and potentially more across the whole site so specifying for each eventuality doesn't work.
What are my options for getting around this?

Related

Preventing Redirect to main page when clicking skip-link using jquery

The problem I am facing is that because of a tag in my html layout, I am being redirected to the main landing page when clicking a "skip to main content" link.
I am using the following JQuery to prevent this behavior, but it also prevents the direction to main content.
$(document).ready(function () {
$('#skip-link').click(function () {
$("#" + $(this).attr("href").slice(1) + "").focus()
alert("link Skipped")
event.preventDefault()
});
});
My question is, how can I prevent the redirection to the relative address, without using prevent Default.
Perhaps something like this:
$(document).ready(function () {
$('#skip-link').click(function (e) {
e.stopPropagation();
$("#" + $(this).attr("href").slice(1) + "").focus();
alert("link Skipped");
});
});
UPDATE:
Ok if I understood you correctly, this is what you want, simply:
Jump to main
<a name="skip-link"></a><div class="row" id="anchor">blabla</div>
or jQuery:
<a id="skip-link" href="#anchor">Jump to main</a>
<div class="row" id="anchor">blabla</div>
$(document).ready(function () {
$('#skip-link').click(function (e) {
e.stopPropagation();
var hash = $(this).attr("href").slice(1);
alert(hash);
$("#" + hash).focus();
$("#" + hash).css('background-color', 'red');
});
});
https://jsfiddle.net/75k7u4w3/

Add a class to the current active link using YUI

I got this function in jQuery:
jQuery(function() {
jQuery('.primary-nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('current');
}
});
});
but unfortunately I need to do accomplish the same with the YUI library. Add a class to the a element if the a href is the same as the current active page.
Thanks a lot!
An alternative:
YUI().use('node', function(){
Y.all('.primary-nav li').each(function(node){
var href = node.getAttribute('href');
node.toggleClass('current', href === window.location.pathname);
});
});
Adds the class if the second parameter is true, otherwise removes it.
An almost direct translation of the JQuery above would be something like:
YUI().use('node', function(){
Y.all('.primary-nav li').each(function(node){
var href = node.getAttribute('href');
if (href === window.location.pathname){
node.addClass('current');
}
});
});
However, I would imagine you could do something like:
YUI().use('node', function(){
Y.one('.primary-nav li a[href="' + window.location.pathname + '"]').addClass('current');
});
To achieve the same effect. (code tested only in my head)

Jquery not selecting proper href's

This script:
$(function() {
$('a').each(function() {
var href = $(this).attr('href');
if ("a:not(http://)") {
$(this).attr('href', '/' + href);
}
});
});
Add the slash to every link even links with the contain "http://" Not sure why? I do not get any errors?
Any ideas on how I can fix this?
You mixed up two things:
jQuery selectors:
$(function() {
$('a:not([href^="http://"])').each(function() {
var href = $(this).attr('href');
$(this).attr('href', '/' + href);
});
});
and pure javascript if statements:
$('a').each(function() {
var href = $(this).attr('href');
if (href.substr(0, 'http://'.length) == 'http://'){
$(this).attr('href', '/' + href);
}
});
Both do the same.
Note that they will generate invalid links for other schemes than http (e.g. /https://example.com/index.html). Depending on how clean the HTML code you're working with is, you may simply look for the colon to identify absolute links:
$(function() {
$('a:not([href*=":"])').each(function() {
var href = $(this).attr('href');
$(this).attr('href', '/' + href);
});
});
First, you code is equal to the following
$(function() {
$('a').each(function() {
var href = $(this).attr('href');
if(true) { $(this).attr('href', '/' + href); }
});
});
if you really want to update href based on condition, if statetment should be different:
$(function() {
$('a').each(function() {
var href = $(this).attr('href');
if(href.indexOf('http://') == -1 ) { $(this).attr('href', '/' + href); }
});
});
Another way would be the one offered by #Yogu, where you simple don't loop for links which you are not going to update
Just a addon to Yogu,
Remember that your in the context of each tag. "Inside the object itself".
So, you can access the href directly.
$('a').each(function() {
if (this.href.substr(0, 'http://'.length) == 'http://'){
this.setAttribute('href', '/' + href);
}
});

Load function is not working after satisfying if condition in jQuery

In the code below, the if condition is working as I have checked with an alert but load function is not working.
My code:
$("a").click(function() {
hreff = $(this).attr('href');
if(hreff == "something" )
{
$("#dump").load("someurl");
}
});
$("a").click(function(e) {
e.preventDefault(); // prevent page reload
var hreff = $(this).attr('href');
if (hreff == "something") {
$("#dump").load("someurl");
}
});
the function load will load the response from an defined url, but you hasn't defined an url.
if $(this).attr('href') has an real url than you will never get them, becaus you check in your if for "something"
$("a").click(function() {
href = $(this).attr('href');
if (href.length >0) {
$("#dump").load(href, function() {
alert('Load was performed.');
});
}
});
This will work.

remove the hash from the Navigation bar

I'm loading successfully external content to my div with Jquery, the only problem is that I wish to not display: "PastURL+#+NewURL" just the NewURL
For example, right now if I click in some of my links I will have: http://mydomain.com/#http://mydomain.com/loaded-content
What I want to show is just: http://mydomain.com/loaded-content
This is my code:
jQuery(document).ready(function(){
jQuery('.portfolio-item a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#contenthome').fadeOut(500).load(link + ' #content-wrapper', function(){ jQuery('#contenthome').fadeIn(500); });
$('html, body').animate({scrollTop:0}, 'slow');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
});
});
Any ideas?
Thanks in advance!
you can rewrite the url in the address bar using the following script:
Notes:
you can only write paths of the same domain
this is only supported in modern browsers (like Chrome, FF 5, etc.)
-
try {
if (window.location.search.substring(1).length == 0) { // if no query string
window.history.pushState('page', browser_title, browser_url);
}
}
catch (e) { /* browser doesn't support */ }

Categories

Resources