I want to share a data-uri image on pinterest.
I've come up with the following markup:
<a target="_blank" href="https://www.pinterest.com/pin/create/button/">
<img class="pin-image" src="data:image/png;base64,…">
</a>
At the end of my body I am including this JS:
<script
type="text/javascript"
async defer
src="//assets.pinterest.com/js/pinit.js"
></script>
Usually, the pinit.js should pick up the src of the img tag inside the link, but when I open up the link I don't see the image I want to share.
I've also tried to share without the pinit.js by adding GET parameters to the URL, but my data-uri is too long.
My researches haven't given me helpful advices on sharing generated images on pinterest, so hopefully on of you guys has an answer for me :-)
You can easily update the anchor tag with the proper URL and avoid loading of that pinit.js script..
The basic GET method does the trick...
I quickly wrote a function that will do that for you.
You just need to pass the img selector to it and it will find all occurrences and apply the logic.
DEMO:
https://jsfiddle.net/zmgyc0bd/
function pinterestShareFormatter(imgSelector) {
var imgs = document.querySelectorAll(imgSelector),
baseUrl = '//www.pinterest.com/pin/create/button/?';
[].forEach.call(imgs, function(img) {
var imgSrc = img.getAttribute('src'),
articleUrl = img.getAttribute('article-url') ? img.getAttribute('article-url') : window.location.href, // check if there is article url attribute and if not assign the current page url.
parentAnchorEl = img.parentNode;
// check if parent element is <a>
if(parentAnchorEl.tagName === 'A') {
// format the url params
var params = {
url: articleUrl,
media: imgSrc
},
paramsString = Object.keys(params).map(function(key){return key + '=' + encodeURIComponent(params[key]);}).join('&');
// update the anchor with formatted url
parentAnchorEl.setAttribute('href', baseUrl + paramsString);
}
});
}
pinterestShareFormatter('.pin-image');
make sure you are calling this function on a right place for you.
Related
Assuming I have some HTML with predefined assets using relative paths, how would I load that HTML in the current page and change the window location to the correct URL at the same time so that the page and all its assets load correctly.
Currently if I use:
const w = window.open()
w.document.write("<html><body><p>help</p></body></html>")
w.location.replace("http://baseUrl.com")
The page then renders the html and then reloads when the location is replaced, rendering the document.write useless.
Is there a way to do both at the same time so that the url loads as well as the html?
If I do
const w = window.open()
w.location.replace("http://baseUrl.com")
w.document.write("<html><body><p>help</p></body></html>")
The third line doesnt run because I lose access to the w variable when the location is replaced.
Any help would be appreciated. Thanks in advance.
What you could do is use a query string in the window.replace like so:
const w = window.open();
window.location.replace("http://baseUrl.com?data=" + encodeUriComponent("<html><body><p>help</p></body></html>"));
Then in the file at baseUrl.com:
var data = decodeUriComponent(window.location.href).split("?")[1];
document.write(data);
What this does is it passes an encoded URI query string into the URL (?data=<html><body><p>help</p></body></html>), then receives and decodes it, takes the bit at the end (the HTML) and writes it to the document. Hope this helps!
I'm not sure if there are better ways instead of relative url's for your target, but you may use <base href='...'> tag:
<script type="text/javascript">
document.head.innerHTML = document.head.innerHTML + "<base href='http://baseUrl.com/' />";
</script>
The base tag usually needs a trailing '/' at its end.
example:
<base href="http://localhost/mywebsite/" />
Then all of the URLs in your HTML can just be this:
<img src="images/example.png" />
Link To Image
You can do like this (using setInterval to detect opened window loaded, then write your help information , url must be same domain):
var w = window.open("http://baseUrl.com")
var writeAsserts = function ()
{
if (w.document.body.childNodes.length > 0) {
clearInterval(interval);
var div = w.document.createElement("div")
div.innerHTML = "<span>help</span>";
w.document.body.appendChild(div)
}
}
var interval = setInterval(writeAsserts,10)
So I have an interesting dilemma that I am trying to resolve. I am using FancyBox and when using it, it requires that loading an iframe has an href tag and a url set.
In the present form, a user selects a square, and then enters in an amount, and then clicks a button - which fires (opens) fancybox.
What I would like it to do is to modify the href url each step of the way.
For example, starting url is say:
http://www.domain.com/do.php
On the click of the square, it then becomes
http://www.domain.com/do.php?s=3
Then on entering an amount the url appends to be:
http://www.domain.com/do.php?s=3&amount=20
I've found some references to changing a url, but they all seem to be changing the url for browser history. So I am wondering if anyone could lead me in the right direction so that I can accomplish this?
Any insight is greatly appreciated. Thanks!
You can append to the URL by using the below method:
HTML
<input type="button" id="btnGo" onclick="getUrl()"/>
JavaScript
function getUrl() {
var currentUrl = window.location.href;
setUrl(currentUrl);
}
function setUrl(url) {
var result = url + "?anotherargument";
window.location.href = result;
}
If I understand your question correctly, you have to reload the url of an Iframe.
There is simple javascript-only solution for that. See example here: http://jsfiddle.net/ddan/2tf3vyLb/2/
Uploading src attribute of Iframe:
function appendToUrl(str){
document.getElementById('f1').src += str;
}
in your case the parameter first is ?s=3, second time &amount=20
You want to change the href of the iframe?
Have you tried simply setting it like so
$('#square').click(function(){
$('iframe').attr('href', $('iframe').attr('href') + '?s=3')
})
$('#amount_button').click(function(){
$('iframe').attr('href', $('iframe').attr('href') + '&amount=' + $('#amount').val())
})
I’m confused about the .load() and $.ajax. I have the following jQuery code in my index.html:
$('.load_ext').click(function(e) {
var url = $(this).attr("href");
parentContainer.append($(document.createElement("div")).load(url + ' #content_to_load').html('<p class="loading">Loading…</p>').hide().fadeIn('slow'));
})
and HTML:
test
In the example above, I’m loading partial content from the test.html (the content of id #content_to_load). I also want to grab the title of that test.html page and replace the index.html title page with that one.
I tried doing something like:
var url = $(this).attr("href");
parentContainer.append($(document.createElement("div")).load(url + ' #content_to_load', function() {
console.log($(document).attr('title'));
}).html('<p class="loading">Loading…</p>').hide().fadeIn('slow'));
without any luck. It gives me the current page title. How can I replace the title by doing something like:
$('title').text(newPageTitle);
Thanks!
EDIT:
Thanks to #Jeff Schafer, #dystroy, and #zeroflagL I managed to solve this problem. Here’s the changed code:
var url = $(this).attr("href");
parentContainer.append($(document.createElement("div")).load(url + ' #content_to_load', function(responseText) {
var title = responseText.match(/<title>([^<]*)/)[1];
document.title = title;
}).html('<p class="loading">Loading…</p>').hide().fadeIn('slow'));
The main problem with load is that jQuery, when building the DOM fragment, strippes what isn't the body. You can use this to get the title of a distant page :
$.get(url, function(html){
var matches = html.match(/<title>([^<]*)/);
if (matches.length>0) {
var title = matches[1];
document.title = title;
}
});
Note that this won't work if the distant page is from a different origin and doesn't specifically allow cross-domain requests.
You can get the title of the new page through the responseText:
.load(url + ' #content_to_load', function(responseText) {
repsonseText is literally text, though, the source code of the page. You can use regular expressions, for instance, to extract the title of test.html. Then you can change the title with document.title = newTitle.
try this code to change page title
document.title = newPageTitle;
hope it helps
How do I create a link that takes the static part of a 'sharing' link (of a social media site like LinkedIn) and appends the url of the current page? So that a user can share the page's URL on their social media account.
I do not want to use Share This or any other such widgets.
Thanks
EDIT
So of the solutions suggested I opted for the jQuery one. After a lot of help, this was the solution:
HTML
<a class="linkedin" href="#">LinkedIn</a>
jQuery
$(document).ready(function() {
$('a.linkedin').click(function() {
var link = document.location;
var url = "https://www.linkedin.com/shareArticle?mini=true&url=" + link;
document.location.href = url;
});
});
Obviously, it can work for any social media site that allows such URLs.
LinkedIn has docs on this and what parameters their url expects. I left out the summary param.
JS 101 : You're looking for the window.open method. See docs for this.. All you have to do is (1) write a function that opens a window with the url. (2) Call this function in the onclick event of the a element.
With just pure javascript, It should look something like this:
<script>
function shareOnLinked(url, title, summary)
{
window.open('http://www.linkedin.com/shareArticle?mini=true&url='+
url +'&title='+title+'&summary='+summary);
}
</script>
<a href='#'
onclick='shareOnLinked("http://stackoverflow.com",
"Great QandA","SomeSummary");'>
Share On Linked in</a>
See live example : http://jsfiddle.net/PpC5S/2/
If you do not mind using jQuery
$(document).ready(function() {
$('a#link').click(function() {
var link = $(this).attr("href");
var url = "https://www.linkedin.com/shareArticle?mini=true&url=" + link;
document.location.href=url;
});
});
You can use (Pure Javascript without any lib's)
<a href="https://www.linkedin.com/shareArticle?mini=true&url=" onclick='function(j){ window.location = j.href + window.location }(this)'>
I have an HTML page where I want to refresh a lot of images every 30 seconds after the HTML page has been downloaded. I understand how to do this with Jquery and a single image, but I want to use about 200 custom urls to determine the current image to display for over 200 images. I need to find an efficient way to have jquery call the custom url associated with each image to download the url for the needed image as it changes, and then update the image in the page when it changes.
Current hyperlink example to demonstrate the custom urls.
link to url for image
Each custom url will return an image tag like this (or any other text that makes this simpler for jquery)
<img src="/static/someImage.jpg">
What is the simplest way to have jquery call the custom url for each image to download the image url, image html, or some other text that jquery can use to download the right image every 30 seconds? Please keep in mind that I will have about 200 of these on a page.
Create a helper on the server side that returns all URLs at once. You can then lookup each image in the returned object (I'd recommend using JSON for this).
You can loop the images
$(document).ready(function(){
setTimeout(function(){
$('img .reloadable').each(function(){
orginal = $(this).attr('src');
if(original.indexOf('?') == -1)
{
original = original + '?' + Math.random();
}else if(original.indexOf('&') == -1)
{
original = original + '&t=' + Math.random();
}
$(this).attr('src',original);
})
},30000) // 30 seconds
})
Using the random with create a new uri as its different to the previous one, so the dom will reload it as its not currently cached !
One way is to create a DIV for each link and make the url to call the DIV id. Then if you make each DIV part of the same class, you can then iterate through the DIVs of that class and call each url.
<div id='true.txt' class='isSolvedImage'>
<img src="_images/solved.png">
</div>
<div id='false.txt' class='isSolvedImage'>
<img src="_images/solved.png">
</div>
<script src="jquery-1.4.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$('img').hide();
function updateImages() {
var getDivs = 0;
//iterate div with class isSolvedImage
$("div.isSolvedImage").each(function() {
var img = $(this).find('img');
// send ajax requrest
$.get(this.id, function(data) {
if(data == 1){
img.show();
}
else{
img.hide();
}
});
});
}
setInterval("updateImages()", 30000);
</script>
The simplest thing to do would just be to use a full page refresh:
<meta http-equiv="refresh" content="60" />
You can use the same code to refresh individual elements, just by specifying the id.
This is probably the easiest solution to have it update on the front end of the page.