I have a website with a photo gallery and i want the plus one button to point to the photo page and not to the gallery itself, meaning that i will need to change it dynamically when the user flips through images. What would be the proper way of doing that?
Write this in head tag:
// Load +1 script
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
The HTML Code:
<div id="plusone_container">
</div>
And write this jQuery anywhere you want to set +1 button's url:
$("#plusone_container").html('<div id="plusone"></div>');
gapi.plusone.render("plusone", { "href": "Your URL" });
From the official documentation:
Setting the +1 target URL
The URL that is +1'd is determined in the following order:
The button's href attribute
This attribute explicitly defines the +1 target URL.
The page's tag
If the +1 button's href attribute is not provided, Google uses the page's canonical URL. For more information on defining the canonical URL for a page, see this help article.
The URL provided by document.location.href , which is not recommended.
If none of these items are present, Google uses the URL of the page as found in the DOM. Because this URL might contain session IDs, anchors, or other parameters that are not actually part of the canonical URL, we highly recommend either setting the href attribute for the +1 button or adding a tag to your page.
Let's assume you have a collection of tags representing different photos. Let's assume each photo is represented by something like this:
<div class="single-photo">
<img/>
My photo
</div>
The easiest way to add a +1 button would be just doing this:
<div class="single-photo">
<img/>
My photo
<div class="g-plusone" data-href="http://single.photo.com/path" data-other-parameter="other-parameter-value"></div>
</div>
Solved the problem by creating a button that is explicitly rendered, and changing the href of the canonical link. If no url is provided to the button it takes it's url from the canonical link attribute, then by re-rendering it i can make it point to a different url every time.
Related
I want to add a hashtag (#) in all pages, the reason is that the header height is too long, and I don't want the user to scroll down every time the page loads to see the content of the page.
I have added a link called "hash" so that the page will point to the title page instead
<!-- Page Title -->
<div class="flexslider">
<a name="hash"></a>
<div class="titlepage"><h2>{{ $page_title }}</h2></div>
</div><!--/flexslider-->
<!-- End Page Title -->
I am using Laravel 4, not sure if Laravel has a function to append it to all URL e.g. my_project/employee#hash
There are two different approaches. (Disclaimer: I'm using jQuery here, not pure javascript)
1. Add the hash to every link
$(document).ready(function(){
$('a[href]').each(function(){
$(this).prop('href', $(this).prop('href')+'#hash');
});
});
2. Add the hash to the current page
$(window).load(function(){
window.location.hash = 'hash';
});
With the second method instead of just setting the hash you could also use javascript to scroll down with an animation. Like described here (without the click handler)
<a href="http://www.linkedin.com/shareArticle?url=MY_URL" class="in-share-button" target="_blank">
<img src="my_img" alt="linkedin share button" title="Share on Linked In" /> </a>
This is currently my share button. I want it to share the url that's currently in the address bar, and not a fixed preset url like it does atm.
I found
<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; echo $url; ?>
what seems to fit my needs. But when I change "MY_URL" with this it just creates a link to the main page of my website.
The URL it SHOULD display looks like "www.myurl.de/#/id_of_a_post".
I feel like the # is the problem. . .
can you provide me any help with this?
You cannot read the hash portion of the URL in your server side code. The part that follows # is never sent to the server by the browser. So if you're trying to tackle this issue with PHP, you won't get the behavior that you're are expecting.
It looks like you're relying on static links to perform the sharing. I can only answer for Google+, but with Google+ you have two options:
Use the Google+ widget rather than a static link and do not specify the HREF parameter:
<div class="g-plusone" data-annotation="none"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
When the href is not specified and you do not specify a canonical URL, the widget falls back to default to the URL value that comes from document.location.href, which will be your visitor's current page, including the hash portion of the URL.
Use JavaScript to rewrite the URLs in your links to append your current hash location, for example, lets assume that you placed all your social links into a div with class "sharing" and then you need to modify all the hrefs within that div using jQuery:
var hash = document.location.hash;
// Loop through each link in the sharing div
$('.sharing a').each(function(){
// Append the hash to the end of each already populated URL
$(this).attr('href', $(this).attr('href') + encodeURIComponent('#' + hash));
});
It just worked another way.
My friend created a script that saves the ID of the individual posts:
(function(){
var numbers = document.URL.match(/\d+/g);
if(numbers != null){
$('#right-col').addClass('shown').removeClass('hidden');
$('#left-col').addClass('colPositioning');
$('#right_'+numbers).addClass('shown1');
;}
}());
Afterwards I was able to use:
<img src="img_src">
The trick about it was to replace the # with the "%23". I think it's called encodedURI.
What do you guys think about this solution?
The share might not work exactly the way you think it will. You're using the anchor part of your URL to link to a specific place on your page, and probably using some javascript to then process that and load new or different information, or display/hide other parts of the page, depending on the value of that anchor.
While this works for people who visit your website, it won't work for bots that visit your website (such as the bots used by Facebook and Google+, although I don't know if Linkedin does this as well) which try to get a snippet of information to show as a preview. So while the link itself might work, the preview shown on the website will almost certainly not reflect the contents of the anchored URL.
I have an overlay popup box (DIV + JavaScript + some CSS) which is toggled by a link, like this:
<a href="#" onclick="popup('popUpDiv')">
The box that pops up contains an iframe. Now I want different links on my page to load different iframes when the box opens; so that link A would toggle the box to appear, and load iframe1.html inside the box, while link B would toggle the same box to appear, but load iframe2.html inside the box, and so forth.
I'm a beginning programmer, and I first figured maybe this could be done with PHP, by putting something like this inside the popUpDiv:
<iframe src="http://mysite.com/iframe<?php echo $_GET ["iframeid"] ?>.html">
... and then simply adding ?iframeid=x to each link's href, where x is the id of the iframe to be loaded.
This obviously won't work in practice though, because it requires a page reload, and when the link is clicked, the popUpDiv is toggled to open, but at the same instant, the page reloads, now with the ?iframeid=x query string in place, but too late, since the popUpDiv disappeared on reload.
Is there perhaps a JavaScript equivalent that could be used, or can anybody suggest another way to make this work?
FYI, this is the kind of popup box I'm working with:
http://www.pat-burt.com/csspopup.html
I finally found a really simple way of accomplishing this without additional JavaScripting, by simply using the target attribute:
<iframe name="myfavoriteiframe">
Then:
This is a link.
P.S. Just FYI for any of those out there who might want to use this feature with Vimeo's JavaScript API, as I'm doing: In order to make API buttons work with this target method, it seems like the iframe src-attribute cannot be left blank. You need to specify a link to any of your videos in the src, so that a video loads into the iframe on page load, like this:
<iframe name="myfavoriteiframe" id="player_1" src="http://player.vimeo.com/video/[the_number_of_your_video]?api=1&player_id=player_1">
I simply inserted the URL to the first video on my page, but you can use any of them, since they're hidden anyway.
Then link to any of your videos using the target method described above, and the pre-set iframe video will be replaced by a video of your choice.
Create two divs with the two variations of content (the two iframes with each specific URL). Then toggle by the name of the div.
<a href="#" onclick="popup('popUpDiv1')">
<a href="#" onclick="popup('popUpDiv2')">
Set the id attributes of the div elements appropriately.
Rather than adding something to the popup DIV element, I would add a required link to the href property of the link that you use to open the popup:
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
And then inside the popup function I would take the href parameter of the link that has triggered the event and use it in a popup:
function pre_popup(id) {
// Take the href parameter of the link
var href = this.href;
// And then use it in the iframe
window.frames["your_iframe"].src = href;
// And then pop it
popup(id);
}
I want to show a page of my website within iframe in another page.
I mean you can see helper.html while you are navigation main.php.
but I want to change some links in helper.html regarding to some conditions set in main.php.
The regular solution is to get content of helper.html and process it in main.php, then echo it.
But it is server side, I want this process to be client side.
Is that possible with JavaScript?
If your files are located at the same domain, you can use the top.frames property, ro refer to the window object of named frames:
Assume the top HTML to has such a structure:
<iframe name="main" /><iframe name="helper" />
Inside main:
top.frames["helper"].document.getElementById("linkID").href = "http://newlink.com";
If you're using AJAX, you can add the previously shown code in the callback handler. If main.php reloads on change, at the code within <script> tags.
If those files are on different domains but you have a full control of them, then use the following solution:
In the main page call an iframe with GET parameters. For instance:
<iframe src="foo.html?parameter=value" width="400" height="500"></iframe>
In an iframe parse GET parameters using Javascript and show an appropriate content:
// get the current URL
var url = window.location.toString();
//get the parameters
url.match(/\?(.+)$/);
var params = RegExp.$1;
// split up the query string and store in an
// associative array
var params = params.split("&");
var queryStringList = {};
for(var i=0;i<params.length;i++)
{
var tmp = params[i].split("=");
queryStringList[tmp[0]] = unescape(tmp[1]);
}
// print all querystring in key value pairs
for(var i in queryStringList)
document.write(i+" = "+queryStringList[i]+"<br/>");
Source: http://www.go4expert.com/forums/showthread.php?t=2163
Try this...
var myIframe = document.getElementById('SomeIFrame');
myIframe.src = 'www.joobworld.com';
Yes it is possible if both frames are in same domain.
See sample function: in the help frame the id of link is assumed to be "link"
function ChangeLink()
{
var Helpframe = document.getElementById("Helpframe");
var innerDoc = Helpframe.contentDocument || Helpframe.contentWindow.document;
var link = innerDoc.getElementById("link");
link.href="http://www.google.com";
}
This solution is inspired from Javascript - Get element from within an iFrame
My blog has its posts links. What I need is code that will do this: when a user clicks on a post link, a parameter will be added to the link which I'll use with a get function on the other page.
This is my link - link which is visible and indexed by google:
my post link
When a user clicks on it, I need a way to add ?car=type to the link, http://www.mysite.com/post1/?car=type.
I'd like to do this with jQuery.
P.S.
I can't just add my car variable to the links in normal html, becouse Google will index them badly, the variables change every day and I'd get pages not found all over the serps.
Any idee?
Ty!
Well...
$(document).ready(function() {
$("a").click(function() {
this.href += "?car=type";
});
});
Live test case: http://jsfiddle.net/y6PrF/
If you mark the desingated links in a way such as a class (say addType):
<a href="http://www.mysite.com/post1/" class="addType" >my post link</a>
you can do something like this on document load, no need to wait for click to do it:
$(function() {
$("a.addType").attr("href",function() {return this + "?car=type";});
});
Here's a jsfiddle example: http://jsfiddle.net/nbKPu/