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>
Related
This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.
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>
Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?
You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!
Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.
The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.
I am trying to change a link programmatically.
Example:
I want to call a dialog and change an image buttons url link based upon the call it gets.
so:
<a href="javascript:myHref('http://www.google.com')" onclick="$('.hiddendiv').dialog('open');" > Edit Address </a>
the function myHref would change a link within the div (let's call it myAnchor) to http://www.google.com.
Thoughts on how to go about this?
I've seen methods for changing a designated link, but not in this manner.
I think this code might be what you are looking for:
var linkattributes=document.getElementById("link-id").attributes;
linkattributes.getNamedItem("href").value = 'http://www.google.com';
Here is what I have in my member.php for my fancybox:
<script type="text/javascript">
$(document).ready(function()
{
$("a#uploadpage").fancybox({
'titleShow' : false
});
});
</script>
.
.
.
<a id="uploadpage" href='uploadpage.php'>Change Image</a> <br/>
This works perfectly, and by perfectly I mean it opens the fancybox containing the php code in uploadpage.php. Once the user pushes the submit button in uploadpage.php to upload there image I want it to either display an error message(invalid file type or file size too big), or a progressbar if the image is a valid file type and below 1MB. How do I do this within the SAME FANCYBOX? (I have the code for the error messages and progressbar already so I just need to know how to either refresh the fancybox or how to use javascript to accomplish this.)
Thanks a lot, I greatly appreciate it.
-Matt
I don't know if this will work, I've never used fancybox the way you are trying to use it, but, here's my suggestion: you could try using a class name instead of an ID. The anchor would be <a class="uploadpage" ...> instead of the id you use now. Also, change
$("a#uploadpage").fancybox({
to
$("a.uploadpage").fancybox({
fancybox makes a new instance of the box for each invokation when using id. It tries to reuse it if you use class names instead. Also, could try marking with a rel="myuploadbox", i.e.
<a rel="myuploadbox" class="uploadpage" ...>
Fancybox uses the rel attribute to group related things together, this might keep it from closing the box on your submit. Also, wrap everything you want inside that same fancybox in a div tag with the same rel attribute (I don't know if it would be supported that way by fancybox.. give it a try).