We Keep Coding

jQuery: Add Class Active to <a> with current page href

I am looking for a way to add an active class to the tag that has an href of the current page.
Say I am on the page localhost:3000/inbox, I need my html to change add the correct class to the correct which are all located in the div with the class sidebar.
So when at "/inbox" jQuery should make my html look like this:
<div class="sidebar">
<a href="/link">
<i class="fa fa-inbox"></i>
<span>A Link</span>
</a>
<a class="active" href="/inbox">
<i class="fa fa-inbox"></i>
<span>Inbox</span>
</a>
</div>
This is what I tried, but it doesn't work, it breaks the code:
var href = $(location).attr('href');
('.sidebar').find('a[href*=href]').addClass("active");
Thank you. Please let me know if I wasn't clear enough.

It looks like you're almost doing it right, with the minor mistake of forgetting to call jQuery or $. You also need to concatenate your selector, so that the value of href is searched for.
$('.sidebar').find('a[href*="' + href + '"]').addClass('active');
You probably also need to find just the path name to match your href values, like so:
var href = window.location.pathname;

How about this?
var path = window.location.pathname;
$(".sidebar a[href*='"+path+"']").addClass("active");
Please note the ' around the path. They are there because jQuery cause syntax error if there are unquoted / in the selector.
When I try it on JSFiddle, I get a / at the end of the path. You might want to add that to your links, or you can remove it from the path variable like this:
if(path.charAt(path.length-1) == "/")
path = path.substring(0, path.length - 1);
Then some browsers might not include the leading / (or at least I think so), so you might want to add it in case it isn't already there:
if(path.charAt(0) != "/")
path = "/" + path;
Since you use *= you might match more than the current page. For instance, if you are on /inbox/ you will also add the class to links to /inbox/sub/folder. To avoid this, use = instead.
Taken together, you would get this:
var path = window.location.pathname;
if(path.charAt(path.length-1) == "/")
path = path.substring(0, path.length - 1);
if(path.charAt(0) != "/")
path = "/" + path;
$(".sidebar a[href='"+path+"']").addClass("active");
Here is a working JSFiddle. (You might need to press run to make it work, as the URL is different the first time the page load.)

As far as I understand your question you want to change all divs that have a href of '/inbox' to have the class "active"
Your code should therefore look like this
$(document).ready(function(){
$(.sidebar a[href=='/inbox']){
$(a[href=='/inbox').addClass('active');
}
}

Split website link into 2 href link?

On my website public: http://abv.mk/company.aspx?id=40056 , i want to split http://www.donholding.com.mk & http://www.webklinika.mk to be separate links (and separate clickable like two different links - hrefs).
But in my admin-panel for the field website i only have 1 field available, where i input 2 web site links splited with ","
So is it possible in the public asp-file "company.aspx", to edit the file and insert some Javascript code, so i split the link from 1 href to 2 hrefs ?
<span id="ctl00_ContentPlaceHolder1_lblComWeb"><a target="_blank" href="http://www.donholding.com.mk, www.webklinika.mk" title="">www.donholding.com.mk, www.webklinika.mk</a> | donholding#live.com</span>

I'm guessing you have one field in the DB which stores the URL. This should probably instead be its own table - company_url, which takes company_id (in thie case, 40056) and the URL. You should bring back a DataSet, and create a HTML string to put in to the Literal (or whatever you're using).
That's the "you should do this" answer.
Now.. you could do...
$(document).ready(function(){
var el = $('span[id$="lblComWeb"]');
var el_a = el.children('a');
links = el_a.html();
links = links.split(',');
el.html('');
$.each(links,function(l){
var e = ''+links[l]+'';
el.append((l > 0 ? ',' : '') + e);
});
});
as you're already using jQuery. However, it's cheap and dirty and nasty and yucky.
Just putting that snippet in to your company.aspx file (between some tags) should do the trick.

This page only allows you to display one website.
The href property of the a html tag only support reference to one address/page.
What you could do is put there the link to another page which is yours, and in this page you can put as many different links to anywhere you want and other information too. Maybe search for some URL shortener service which allows something like this.
Now, if you actually do have access to the source code and modify it, all you have to do is:
<span id="ctl00_ContentPlaceHolder1_lblComWeb">
<a target="_blank" href="http://www.donholding.com.mk" >www.donholding.com.mk</a>, <a target="_blank" href="www.webklinika.mk" >www.webklinika.mk</a> | donholding#live.com
</span>

Popup in new window opens in new tab instead

I have a calendar created with php. In this calendar I have load_id's listed by date. I made a popup to show more data for each load. I want it to show as a popup not in a new tab. I have tried doing it as a function but as I don't know javascript I could not figure out how to pass the load_id to the url. If I replace "this.href" with the url in a function it works like a charm. But again I don't know how to pass the load id as a variable so that won't work for me. If someone could point out where I made my mistake passing the variable I would be much obliged!
This is what I have now:
echo "<span class='load_shipped'>
<a href='cal_popup.php?load_id=".$load_id."'
onclick='window.open(this.href, '_blank','left=100,top=100,width=500,height=500,toolbar=1,resizable=0');'>
".$load_id."
</a>
<br>
</span>\n";
I tried this as well to no avail:
echo "<span class='load_shipped'>
<a onclick='popup(".$load_id.");'>".$load_id."</a><br>
</span>\n";
Javascript:
<script>
function popup(id){
window.open('cal_popup.php?load_id=id', '_blank','left=100, top=100,width=500,height=500,toolbar=1,resizable=0');
}
</script>
All this did though was pass 'id' instead of the real load_id.

Seems like you're having trouble because you're using the same quotes to wrap the attribute onclick and to define the parameters of the window.open call. Try using double quotes on the attribute. You'll also need to return false; at the end of the onclick to prevent the link working as normal.
echo "<span class='load_shipped'>
<a href='cal_popup.php?load_id=".$load_id."'
onclick=\"window.open(this.href, '_blank','left=100,top=100,width=500,height=500,toolbar=1,resizable=0');return false;\">
".$load_id."
</a>
<br>
</span>\n";
In your last example where you have the function popup - please note that you need to concatenate the id variable into the string like 'cal_popup.php?load_id=' + id.

How do I make this link work in javascript

Ok basically I have this javascript file http://assets.revback.com/scripts/share1.js that basically adds a bunch of share buttons via javascript.
What I want to do, is change the twitter image link to use an url shortener:
so instead of:
<a href=\"http:\/\/twitter.com\/home?status=Interesting Post:(UURRLL)\" title=\"Click to share this page on Twitter\"><img src=\"http:\/\/assets.revback.com\/scripts\/images\/twitter.png\" border=\"0\"\/><\/a>
I want to use
<a href="#" onClick="window.location='http://ko.ly?action=shorten&uri=' + window.location + '&dest=twitter.com/?status=Reading ';"><img src=http://assets.revback.com/scripts/images/twitter.png"><\/a>
but I need that bottom one, to be written with javascript friendly syntax. i.e. like in the top one, instead of http://, you have http://

Lose the onclick. There is no benefit to it whatsoever, since it just acts like a normal link (except much more broken). Now you don't have to worry about escaping JavaScript inside JavaScript and the consequent \\\\\\\\ madness.
var buttonhtml= (
'<a href="http://ko.ly?action=shorten&uri='+encodeURIComponent(location.href)+'&dest=twitter.com/?status=Reading">'+
'<img src=http://assets.revback.com/scripts/images/twitter.png">'+
'</a>'
);
(Note that the encodeURIComponent, which is essential to correctly inserting your current URL into another URL without breaking, is also protecting you from HTML-injection, since < and & characters get %-encoded. Without that safeguard, any page that includes your script has cross-site-scripting vulnerabilities.)
Better still, lose the HTML string-slinging altogether and use DOM methods to create your content. Then you don't need to worry about & and other HTML escapes, and you don't have to hack your HTML together with crude, unreliable string replacing. You seem to be using jQuery, so:
var link= $('<a>', {href:'http://ko.ly?action=shorten&uri='+encodeURIComponent(location.href)+'&dest=twitter.com/?status=Reading'});
link.append('<img>', {src: 'http://assets.revback.com/scripts/images/twitter.png'});
link.appendTo(mydiv);
ETA: I'd replace the whole markuppy mess with a loop and the data broken out into a lookup. ie. something like:
(function() {
var u= encodeURIComponent(location.href);
var t= encodeURIComponent(document.title);
var services= {
Facebook: 'http://www.facebook.com/sharer.php?u='+u,
Twitter: 'http://ko.ly?action=shorten&uri='+u+'&dest=twitter.com/?status=Reading',
StumbleUpon: 'http://www.stumbleupon.com\/submit?url='+u+'&title='+t,
// several more
};
var share= $('<div class="ea_share"><h4>Share this with others!</h4></div>');
for (var s in services) {
share.append($('<a>').attr('href', services[s]).attr('title', 'Click to share this on '+s).append(
$('<img>').attr('src', 'http://assets.styleguidence.com/scripts/images/'+s.toLowerCase()+'.png')
));
}
$('#question .vt').append(share);
})();

Try this
<a href="#" onClick="window.location='http://site.com?action=shorten&uri='+
window.location + '&dest=twitter.com/?status=Reading;'">tweet this</a>

<a href="#" onClick="window.location='http://site.com?action=shorten&uri=' + window.location.href + '&dest=twitter.com/?status=Reading ';return false;">tweet this

Change the href of the link in the onclick attribute:
tweet this
The default action (going to the page designated by the href attribute) will always still be executed unless the event handler onclick receives a return value of false. So, changing the href before it happens will cause it to go to the page you want it to as long as you don't return false.

JQuery Copy text & paste into textarea

I've created a javascript function that will take a hidden span, copy the text within that span and insert it into a single textarea tag on a website. I've written a function in JavaScript that does this (well, kinda, only after a few clicks), but I know there's a better way - any thoughts? The behavior is similar to a Retweet for twitter, but using sections of a post on a blog instead. Oh, and I'm also calling out to jquery in the header.
<script type="text/javascript">
function repost_submit(postID) {
$("#repost-" + postID).click(function(){
$("#cat_post_box").empty();
var str = $("span#repost_msg-" + postID).text();
$("#cat_post_box").text(str);
});
}
</script>

Based on the comment in your question, I am assuming you have something like this in your HTML:
copy post
And I am also assuming that because you are passing a post ID there can be more than one per page.
Part of the beauty of jQuery is that you can do really cool stuff to sets of elements without having to use inline Javascript events. These are considered a bad practice nowadays, as it is best to separate Javascript from your presentation code.
The proper way, then, would be to do something like this:
<a href="#" id='copy-5' class='copy_link'>copy post</a>
And then you can have many more that look similar:
<a href="#" id='copy-5' class='copy_link'>copy post</a>
<a href="#" id='copy-6' class='copy_link'>copy post</a>
<a href="#" id='copy-7' class='copy_link'>copy post</a>
Finally, you can write code with jQuery to do something like this:
$(function() { // wait for the DOM to be ready
$('a.copy_link').click(function() { // whenever a copy link is clicked...
var id = this.id.split('-').pop(); // get the id of the post
var str = $('#repost_msg-' + id); // span not required, since it is an ID lookup
$('#cat_post_box').val(str); // empty not required, and val() is the proper way to change the value of an input element (even textareas)
return false;
});
});
This is the best way to do it even if there is only one post in the page. Part of the problem with your code is that on the first click it BINDS the function, and in the subsequent clicks is when it finally gets called. You could go for a quick and dirty fix by changing that around to just be in document.ready.

$("#repost-" + postID).click(function(){
$("#cat_post_box").val(''); // Instead of empty() - because empty remove all children from a element.
$("#cat_post_box").text($("#repost_msg-" + postID).text());//span isn't required because you have and id. so the selector is as efficient as it can be.
});
And wrap everything in a $(document).ready(function(){ /Insert the code here/ }) so that it will bind to $("#repost-" + postID) button or link when the DOM is loaded.

I had a problem with Paolo's example when I clicked on the link the text that appeared in #cat_post_box was "object Object". Once I added ".text()" to the end of that statement I worked.
var str = $('#repost_msg-' + id).text();
Thanks for you example Paolo!