Develop Reference

Jquery to amend href except where href is #

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?

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)

setting variables in javascript

I need to create on snippet of javascript that, based on an A tags id, the window will navigate to the proper html file. I've got something together that when I look at it, it should work but for some reason it doesnt. Here's what I got.
<script>
$(document).bind('pageinit', function() {
$('a').each(function (index){
var elementId = $(this).attr("id");
elementId= elementId + '.html';
$(function(){
$(elementId).click(function (event) {
event.preventDefault();
window.location.assign(elementId);
});
});
});
});
</script>
This part is so that I can load an external html in an ios web app with out exiting the web app window
$(function(){ $(elementId).click(function (event) {
event.preventDefault();
window.location.assign(elementId);
Did I write the variable wrong some how? Any help would be appreciated

I'll take a wild guess:
$(function(){
$('a').on('click', function(e) {
e.preventDefault();
window.location.assign(this.id + '.html');
});
});

This is a simplified version of what you have there...
<script>
$(function() {
$("a").on("click", function(e) {
e.preventDefault();
window.location.href = this.id + ".html";
});
});
</script>

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.

jQuery changing attribute and changing it back

I want to make all links on the page unaccessible until the user clicks a button.
$('a').attr('href','#');
$("#button-yes").click(function(){
$('a').attr('href',function(){
$(this).attr('href');
});
});

How about just keeping track of state instead of rewriting all the hrefs?
var buttonClicked = false;
$('a').click(function(){
if(! buttonClicked) {
return false;
}
});
$("#button-yes").click(function(){
buttonClicked = true;
});

Have a var outside your function that says something like:
button_clicked = false;
Then use this to disable all links
$('a').click(function(){
if(!button_clicked){
return false;
}
});
Returning false will cause the link to do nothing.

The simplest example would be to hijack the click event of all links:
$('a').live('click.disable', function() {
return false;
});
$("#button-yes").click(function() {
$('a').die('click.disable');
});
(see this fiddle: http://jsfiddle.net/A6QPn/) but anyone can right-click the link and open it in new tab or something like that.
Another example would be to store the href attributes as data and restore them later:
$('a').each(function() {
var $this = $(this);
$this.data('href', $this.attr('href'));
$this.attr('href', '#');
});
$("#button-yes").click(function() {
$('a').each(function() {
var $this = $(this);
$this.attr('href', $this.data('href'));
});
});
(see this fiddle: http://jsfiddle.net/eQDdQ/) and here the links are just not working because they all point to '#' on the current page.
Another example would be to basically do the same but remove the href attribute altogether making the links look like normal text until the button is clicked:
$('a').each(function() {
var $this = $(this);
$this.data('href', $this.attr('href'));
$this.removeAttr('href');
});
$("#button-yes").click(function() {
$('a').each(function() {
var $this = $(this);
$this.attr('href', $this.data('href'));
});
});
(see this fiddle: http://jsfiddle.net/gmLTP/)

You need to stash the value of the href so that it can be recovered later. I'll stash the href value into the rel attribute.
$('a').each(function(){
$(this).attr('rel', $(this).attr('href')); //store the href values
$(this).attr('href', ''); //clear the href values
});
$("#button-yes").click(function(){
$('a').each(function(){
$(this).attr('href', $(this).attr('rel')); //recover the href values
});
});
This is a simple approach, but it leaves the address in the rel attribute. A clever user might find and use this to circumvent your button, so here's another approach as suggested by #rsp.
$('a').each(function(){
$(this).data('link', $(this).attr('href')); //store the href values
$(this).attr('href', ''); //clear the href values
});
$("#button-yes").click(function(){
$('a').each(function(){
$(this).attr('href', $(this).data('link')); //recover the href values
});
});
By storing the href using .data(), the link address is a little more obscure so users shouldn't be able to circumvent the button as easily (though disabling JavaScript will sidestep this completely).