Develop Reference

Facebook share button with diverse links

I am trying to use the regular Facebook share button, but instead of giving it a specific link. I wan't the link to be diverse, by this I mean, I wan't the link to change depending on a certain function of which happens inside of a php script.
The only issue is the fact, that I can't seem to make it work.
Underneath here I have attached my code, along with a short break down of what I have done so far.
First off I have a div with the id "passToJ", inside this div I have a php code of which gets a post value and then uses "echo" to write and show it on my page. This part is working, as the exact value, which needs to be showed, is showed.
Second part is a javascript of which gets the value inside the "passToJ" div. After that it then adds that value to a link, to make a larger link, with an added variable. It then takes this link and implements in the Facebook href link, of which is necessary. This is a little complicated, but it is a bunch of numbers, which according to the Facebook docs page needs to be there and then inside I have added my own real link by the javascript.
The Javascript then adds those links(href and data-href) to the actual Facebook button of which is written below the javascript function. This is where I guess the issue is. In the "data-href" field it has to include the "complLink" variable value and in the regular "href" it has to include the "complLinkDos".
The value is showing on the page, so far so good. But the actual function of getting the link values to the Facebook, isn't working.
An important note, might be the fact that when trying to use the "share" button. It does work, it just isn't using the right link, it is just using the link of the actual page it is on. Which it isn't supposed to.
<div id="passToJ">
<?php
$linkAffId = $_POST['hiddenAffIDH'];
echo htmlspecialchars($linkAffId);
?>
</div>
<script type="text/javascript">
var div = document.getElementById("passToJ");
var linkToSha = div.textContent;
var complLink = "https://example.com/" + linkToSha;
var complLinkDos = "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%example.com"+"%2F"+linkToSha+"&src=sdkpreparse";
document.getElementById("fbSBut").data-href=complLink;
document.getElementById("fbLinking").href=complLinkDos;
</script>
<div class="fb-share-button" id="fbSBut" data-href="" data-layout="button" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" id="fbLinking" target="_blank" href="">Share</a></div>

Force a URL to open in a new tab

I have a webpart on a site that allows you to insert a "Show more" link to an external page that expands on the information displayed in the webpart. Unfortunately this option only takes a regular URL as the value for the link, it doesn't let you construct the HTML link itself. I need this link to open in a new tab but since I only get to put the URL in, I can't use the normal target="_blank" HTML code. Is there a way to craft the URL itself to force a new tab?

In javascript:
window.open("url");
Or adding the attr:
document.getElementById("theLink").setAttribute("target", "_blank");
With the following html
<a id="theLink" href="url">

If you cannot modify any part the a tag, you can use jquery.
The following script will try to open all links on a different tab/window:
$("a").on("click",function(){
event.preventDefault();
window.open($(this).attr('href'),'_blank');
});
NOTE:
Make sure you read this answer

Jquery toggleClass loses the class once links is clicked or page is refreshed

When the link is not pointing to anywhere (href="#") my toggleClass works as it is suppose to. But as soon as I fill in the "href" with an URL it doesnt work anymore. I suspect it is because the page is refreshed? But I'm quite new to JS. If this is the problem how can I work around it? and if it's not, then what have I done wrong?
So this is my current javascript using jquery:
$(document).ready(function()
{
$('.button').click(function()
{
$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');
});
});
And this is my HTML code:
<nav>
<ul>
<li>
<a class="button" href="?page=frontpage"> HOME </a>
</li>
</ul>
</nav>
There are more links in the list, but that is irrelevant for this question.
Yes, I'm using PHP include.
Also, how can I set a link to "toggleClass" when the page loads so that it gets that class when someone first enters the website.
Thank you for the help!

You are right. The class goes away because the page is reloaded. If you need a specific link to have a specific class when the page loads, you'll need to hard code something to that link. Either manually put the class on the link with php or distinguish it in some other way so that JavaScript can find it.
If the link that should have the class is different based on which link you clicked previously, you will have to use a cookie or the localStorage object to retain that information.
Better yet, you should try to figure out a way to pass this information around that doesn't involve reloading the page. That would be ideal as, in most cases, users don't like to have a page reload on them when they're not expecting it.
EDIT:
The answer by #pszaba is great if you don't need to utilize query string variables.

You can use event.preventDefault()
$('.button').click(function( event )
{
event.preventDefault(); // default action of the event will not be triggered.
$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');
});
EDIT:
If you want to load your frontpage (as in your link) and give it a "buttonselected" class
than you need to use PHP.
Something like this
if( isset($_POST['page']) ){
$selectedPage = $_POST['page'];
}
View
<a class="button <?php echo ($selectedPage=='frontpage')?' buttonselected':'' ?>" href="?page=frontpage"> HOME </a>

Prefixing a URL in an window.open function jQuery

I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.

You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});​
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.

Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});

What is the difference between these two HTML anchors?

I tried to use Link Checker to find any broken links, but the second one is not included, the displayedPage.html shows 404 error, but it will not show in the Link Checker's report. What is the difference between the two <a></a>? Why wasn't the second one being checked as a link?
<a href="showpage.go?page=mypage&room=yours">
<span>my own room</span>
</a>
second:
<a onclick="javascript:window.open('my/displayedPage.html', '',
'width=590,height=450,scrollbars=no,resizable=no'); return true;"
href="javascript:void(0)">Show Me</a>

The second one does not have an href attribute that can be checked with the link checker you are using.
Presumably, the program you are using does not understand the javascript: protocol and/or ignores any other protocols than http and ftp.

It seems that your tool ignores javascript links. The second link is not a pure html link, it's a link created by calling javascript.

The second isn't a valid link, it requires javascript in order to work, something the link checker probably isn't checking (it is doing essentially static analysis I guess).
You should always have the href set to the link you want to open and attach javascript enhanced behavior, something like:
<a onclick="window.open(this.href, '',
'width=590,height=450,scrollbars=no,resizable=no'); return true;"
href="my/displayedPage.html" target="_blank">Show Me</a>

because in second one browser just executes javascript when you click this link.
this script is opening link in new window with given params

The Link Checker doesn't know javascript