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
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/
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)
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);
}
});
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.
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 */ }