I currently have a share on facebook button with the following code:
<script>
function fbShare(url, title, descr, image, winWidth, winHeight) {
var winTop = (screen.height / 2) - (winHeight / 2)-100;
var winLeft = (screen.width / 2) - (winWidth / 2);
window.open('http://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + descr + '&p[url]=' + url + '&p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight+'' );
}
</script>
<img class="right2" src="fblogo2.png">
This works fine however the image facebook chooses to share from the site is randomly selected. I want to be able to specify one. Is there anyway of doing this?
Yes. You can add a facebook meta tag to the specific page:
<meta property="og:image" content="http://graphics.myfavnews.com/images/logo-100x100.jpg" />
This is what facebook will use when you share that page.
Related
I am doing FreeCodeCamp's Random Quote Machine exercise.
Using this answer, I tried to set up my tweet button to open up a new window rather than a tab that the user could use to Tweet this quotes with.
The only issue is is that it is opening up a new tab as well as a new window. Is there any way I could get it to just open the new window?
HTML for Tweet Link
<a class="twitter-share-button" href="https://twitter.com/intent/tweet" target="_newwin">
Tweet</a>
Related JavaScript
jQuery('a[target^="_newwin"]').click(function() {
var width = 500;
var height = 300;
window.open(this.href , 'newwindow', 'width=' + width + ', height=' + height + ', top=' + ((window.innerHeight - height) / 2) + ', left=' + ((window.innerWidth - width) / 2));
});
Pen of my Project
Thank you!
You are getting both your custom behavior (opening a new window) and the standard behavior of a link (in most browser nowadays, opening a new tab). To prevent the latter, you need to use the ´preventDefault´ method:
jQuery('a[target^="_newwin"]').click(function(e) {
e.preventDefault();
var width = 500;
var height = 300;
window.open(this.href , 'newwindow', 'width=' + width + ', height=' + height + ', top=' + ((window.innerHeight - height) / 2) + ', left=' + ((window.innerWidth - width) / 2));
});
My scenario is in CRM after clicking on a button, it opens an external webpage (ASPX) as a popup, this webpage is simply a search page. And I want to get back the selection item in this page to update CRM page.
I'm using this code for open the dialog:
function openAddressSearch(addressType) {
searchAddressType = addressType;
//Allow for borders.
var width = window.screen.width * 2/3;
var height = window.screen.height * 2/3;
var leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
//Allow for title and status bars.
var topPosition = (window.screen.height / 2) - ((height / 2) + 50);
//Open the window.
var addressSearch = window.open("http://localhost:2402/", "AddressSearch",
"status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition +
",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=yes,location=no,directories=no");
/* addressSearch.callback = function (result) {
alert(result);
}*/
if (window.focus) {
addressSearch.focus();
}
}
function addressSearchResult(result) {
alert(result);
}
In the webpage (aspx), on selection button click, I call to a js function:
<script type="text/javascript">
myClosure = function () {
window.opener.addressSearchResult("CALLBACK");
window.close();
}
</script>
<asp:Button runat="server" ID="m_btnSelect" Text="<%$ Resources: myResource, Select %>" OnClientClick="myClosure();"/>
But once clicking btnSelect, I got error at line:
window.opener.addressSearchResult("CALLBACK");
SCRIPT70: Permission denied
localhost:2402, line 11 character 13
What should I do to pass this error and send back result to the opener?
You can using eventListner, in your openAddressSearch, add following event listener to current window:
window.addEventListener("message", function (result) {
alert("CALLBACK");
});
In the your external webpage:
window.opener.postMessage(address, "yourParentPageUrl");
Hope this helps.
I am implemented a custom twitter button by using the following
var url = attrs.twitterShare;
var width = 575;
var height = 400;
var left = (getScreenWidth() - width) / 2;
var top = (getScreenHeight() - height) / 2;
var opts = 'status=1' + ',width=' + width + ',height=' + height + ',top=' + top + ',left=' + left;
window.open('http://twitter.com/share?original_referer=' + url, 'twitter_share', opts);
Summary, an element is clicked which calls the javascript open that opens up twitter.com/share with the url to be shared. But I wondering is there a callback I can use to get stats on the share linked such as the number of retweets?
You could embed an iframe in the popup window, which loads the share url, and when the page changes you can handle the
function callback(url) { alert(url); };
var window = open('url','name','height=300,width=300');
window.document.write('<iframe onLoad="window.opener.callback(this.contentWindow.location);" src="https://twitter.com/intent/tweet?url=http%3A%2F%2Fbbc.co.uk&text=This is a Twitter title">');
I'm currently coding a script in javascript in order to display images into a web page. These images are loaded with an ajax request and a css style is directly applied from jquery. The script works with firefox/Opera/IE, but Google Chrome doesn't display correctly the CSS.
When I debug the HTML page with Google Chrome, the code is correct and the images contain the right css style. If I uncheck and check an attribute in the css editor panel, chrome refreshes the style and displays correctly all the elements.
The code is visible below
function displayCroppedFace(faceData, parentElem) {
var randomid = Math.floor(Math.random() * Math.pow(2, 32));
$("#" + parentElem).append("<div id=\"faceImg_border_" + randomid + "\" />");
$("#faceImg_border_" + randomid).append("<div id=\"faceImg" + randomid + "\" />");
$("#faceImg" + randomid).attr('class','cropped_model');
$('#faceImg' + randomid).append('<img id="faceImg' + randomid + '_img" src="' + faceData.image_url + '"/>');
$('#faceImg' + randomid + '_img').load(function() {
crop($(this), faceData.x, faceData.y, faceData.w, faceData.h);
});
}
function crop(imgObj, x, y, width, height) {
var originalWidth = imgObj.width();
var originalHeight = imgObj.height();
var scale_x = imgObj.parent().width() / (width + 20);
var scale_y = imgObj.parent().height() / (height + 20);
imgObj.css({
'position' : 'absolute',
'display' : 'block',
'left' : (-x * scale_x - 5) + 'px',
'top' : (-y * scale_y - 5) + 'px',
'width' : (originalWidth * scale_x + 10) + 'px',
'height' : (originalHeight * scale_y + 10) + 'px',
'z-index' : '10'
});
}
faceData is a javascript object that contains an image url and four coordinates (x, y, w, h).
Is anybody know what is the problem with Google Chrome and how to do in order to fix this error?
Problem solved! The error was in the CSS.
sorry if this is a repeat question!
I have the following Javascript which works fine in Firefox and produces a pop up window. In IE 9 however it does nothing at all and in Chrome it works like a link and changes the current page!
Any advice appreciated!
window.open(page,name,'width='+width+', height='+height+',location=yes,menubar=no,resizable=no,toolbar=no,scrollbars=yes');
Thanks in advance.
This is a working example
JS
function openWindow()
{
var width=668;
var height=548;
var page="http://google.com";
window.open(page, "awindow", "width="+width+",height="+height+",location=yes,scrollbars=yes, resizable=yes");
}
HTML
Open
DEMO.
Did you create the variables correctly?
This code is working for me:
var page = 'page.php';
var name = 'pagename';
var width = 200;
var height = 100;
window.open(page,name,'width='+width+', height='+height+',location=yes,menubar=no,resizable=no,toolbar=no,scrollbars=yes');
EDIT
In my webapp I use the following function for opening windows. It should work in all browsers.
function wopen(url, name, w, h, scrollb) {
scrollb = typeof(scrollb) != 'undefined' ? scrollb : 'no';
w += 32;
h += 96;
wleft = (screen.width - w) / 2;
wtop = (screen.height - h) / 2;
var win = window.open(url, name,
'width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' +
'location=no, menubar=no, ' +
'status=no, toolbar=no, scrollbars=' + scrollb + ', resizable=yes');
// Just in case width and height are ignored
win.resizeTo(w, h);
// Just in case left and top are ignored
win.moveTo(wleft, wtop);
win.focus();
}
Where are you making the call to window.open? IE9 will block calls if they're made during page load as part of its popup blocker. Chrome does something similar, but redirects new windows to the main tab (thus, putting the user in control). As for Firefox... check your FF popup blocker settings.