I have the like and send button on the right side of my website.
When I click on either buttons, it displays a box but it extends towards the right thus giving me horizontal scroll bars.
Is there a way to have the box extend towards the left?
Many thanks guys.
I have looked at this before and it is a pain in the £%^^&! Unfortunately because the elements are in an iframe you can't use your own stylesheets to overwite the styles and move the popup left. Instead what I have done in the past is mimic the send button to the left of the like button and use the FB.UI method to show a popup centred window like so:
<script>
$(function () {
$('#sendbutton').click(function (e) {
e.preventDefault();
FB.ui({
method: 'send',
name: 'Blah blah blah',
description: 'Description',
link: 'http://www.example.com',
image: 'http://www.example.com/content/images/image.png'
});
return false;
});
});
</script>
<a id="sendbutton" href=""><img src="#(Url.Content("~/Content/Images/send.png"))" /></a>
don't forget you will need to initialise the Facebook javascript API first:
http://developers.facebook.com/docs/reference/javascript/
Is there a way to just simply 'like' without opening the box?
No. You can try to hide the box by enclosing the iframe with a div and setting the div's height to something suitable and its overflow property to hidden, but that's about it. You might want to file a feature request with Facebook.
Related
I have created the button in the gmail inbox using inboxsdk.
Now i want to get a pop up by clicking on that button
2.Pop up should contain a link which navigates to my website page(xyz.com/login.php)
How can i do these using inboxsdk
Screenshot:
If you are still struggling with this, I would suggest a simple solution which is to fire a JavaScript confirm dialog see here. On confirmation you could redirect the user, using window.location.href = '<your-url>';.
Another solution would be to use InboxSDK's widgets.
Example:
InboxSDK.load(2, '<InboxSDK-app-id>').then((sdk) => {
...
const el = document.createElement('div');
el.innerHTML = 'Link description';
sdk.Widget.showModalView({
title: 'Modal Title',
el
});
});
For more ModalOptions look here.
Notice: I set the attribute target attribute of <a> tag to "_blank". This makes sure the url opens in another browser tab.
A third, more direct (optional) solution would be to add an onClick event listener to which you attach a function that redirects the user to your url, see a code example here.
A fourth and better possible solution would be to add a DropdownView to your button's onClick function, see example code here.
This question already has an answer here:
SAPUI5 Open link on Button press
(1 answer)
Closed 1 year ago.
I am relatively new to UI5. My search for "[sapui5] icon link" brought no useful results. So here is my question.
I have the following sap.m.Link
<Link id="myLink" href="http://stackoverflow.com/" text="Stackoverflow" />
which displays the text "Stackoverflow" on the UI, and when I click on it, I will navigate to stackoverflow.com. That's the effect I want.
But how can I replace the text with an icon, for example "sap-icon://download"? According to the Link-API, it doesn't have an attribute icon. So is there a way to get the same effect using sap.m.Button that does have this attribute:
<Button icon="sap-icon://download" press=".onDataExport" />
What would the handler onDataExport look like? My idea is to use a (somehow) hidden sap.m.Link and a sap.m.Button containing the icon. The press-handler of the Button would then somehow trigger a 'link clicked' (not sure if that is possible).
My answer comes a bit late, but I hope that it will help others, as I searched for a ready-to-use Link including an Icon (although this does not seem to be the real need of StoneCrusher).
Button which triggers link navigation:
If you want a sap.m.Button to act like a classical link, then you can attach a press event and use window.open in that event, like:
myButton.attachPress(function () {
window.open(url,target);
});
Link with UI5 icon:
If you want to display a sap-icon in a sap.m.Link, then you have to extend the link, include an aggregation which contains the icon and then render the icon before you render the text of the link.
renderer : function(oRm, oControl) {
[...]
oRm.write("<a");
oRm.writeControlData(oControl);
oRm.addClass("sapMLnk sapMLnkMaxWidth touconLink");
oRm.writeClasses();
oRm.write("href=\"javascript:void(0);\" ");
oRm.write(">");
//Render icon
if (icon!="") {
oControl.getAggregation("_icon").setIcon(icon);
oRm.renderControl(oControl.getAggregation("_icon"));
}
oRm.writeEscaped(text);
oRm.write("</a>");
}
I was in need of both and published these and other custom UI5 convenience controls here: www.toucon.fr
Use the below code in your onDataExport function in controller:
sap.m.URLHelper.redirect("https://stackoverflow.com/", true);
Refer to the below link for info: ui5.sap.com/#/sample/sap.m.sample.Link/preview
sorry only got reply in JSON style, but you see what is missing in your code:
jQuery.sap.require("sap.ui.core.IconPool");
var sBack = sap.ui.core.IconPool.getIconURI("nav-back");
var button = new sap.ui.commons.Button({
icon : sBack,
});
The script I'm looking for is a "full screen" overlayment (div) which directly onpageload slides to left:-100% and the lower div / page will be visible.
I've been searching and testing for a while now but I can't seem to find a good and easy script.
I think the script would look a bit like this:
<script type="text/javascript">
$(function() {
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'left':'0'},500);
});
});
$('#boxclose').click(function(){
$('#box').animate({'left':'100%'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
Is there anyone who knows some panel or slide script I can use for this?
If I've understood what you were asking correctly, here is my solution -
http://jsfiddle.net/davemcmillan/zJryc/
Basically, in the javascript you first setup variables for the width and height of your container. You then set the overlay to have the width and height of your container.
Then you create the toggle function which just looks to see if the #overlay div has a class of 'closed' or not. If it has the class of 'closed', the onclick of the button will open the overlay, and if it doesn't, it will close it.
If you want the panel to open onload, you can just un-comment where I said in the Fiddle link.
I'm trying to customize the appearance of a facebook 'Send' button.
I generate the button using the code provided in the docs, however I don't have a clue of how I could modify the button's image or text ?
Could anyone give me an example? I guess javascript is my only option here?
My code looks like this right now:
<fb:send href="http://www.mywebsite.com/something"></fb:send>
This generates a button that looks like this:
Thanks!
You cannot customise the <fb:send /> button. However, you can achieve the same functionality using FB.ui (http://developers.facebook.com/docs/reference/javascript/FB.ui/). Use the send method, eg.
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html',
});
You can always create your own link and style it however you wish, then add the link from this list of all social sharing button links list - this works for sharing to all sorts of social sites.
For Facebook's share link, replace [URL] and [TITLE] with your data using urlencode()in the following code in your link's href:
http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
You're pretty much SOL when it comes to customizing these Facebook buttons. They have intentionally designed their buttons so that you can't change or customize them beyond the limited scope provided by Facebook.
Facebook's send button is in an iframe. If you wait for the iframe to load, you can select its contents with $('iframe').contents(). So replacing the text would look like
$(function(){
$('.fb_iframe_widget iframe').on('load', function(){
$(this).contents().find('.pluginButtonLabel').text('Custom Text');
});
});
How would I change the html of a tag like so:
$('#someId').html('<p>foo bar</p>');
while using the live() or delegate() function? Just for clarification I don't want this to happen on hover or focus or click... I just want jquery to immediately change the html inside of a certain tag.
Basically, I'm trying to change the logo in the Mojomotor's little dropdown panel and I don't want to change the logo every time I upgrade to a new version.
Any suggestions?
.live() and .delegate() don't work like this, what you're after is still done through the .livequery() plugin or simply in the document.ready if it's present on page load, like this:
$(function() {
$('#someId').html('<p>foo bar</p>');
});
Or with .livequery() if it's replaced dynamically in the page:
$('#someId').livequery(function() {
$(this).html('<p>foo bar</p>');
});
.live() and .delegate() work off of event bubbling...an element just appearing doesn't do this whereas a click or change, etc would.
Just do it when the DOM loads.
<script type="text/javascript">
$(document).ready(function() {
$('#someId').html('<p>foo bar</p>');
});
</script>