I have the following problem with the like&share facebook button. When I click on 'share' everything works as expected, but when I click on like, the pop-up box is cut and the whole div object is moved to the left. How can I overcome this?
Here are pictures:
http://collabl.bingo.icnhost.net/resources/pr2.png
http://collabl.bingo.icnhost.net/resources/pr3.png
The code I use is:
<div class="fb-like" data-send="true" data-width="250" style="height:20px;" layout="button_count"></div>
and
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/all/debug.js', function(){
FB.init({
appId: '.......',
channelUrl: '//.......',
status : false, // Check Facebook Login status
xfbml : true
});
$('#loginbutton,#feedbutton').removeAttr('disabled');
});
});
Your code looks nothing like what I'm using for the javascript.
Try using the code generated directly from the facebook developers page:
https://developers.facebook.com/docs/reference/plugins/like/
Related
I can't find any documented way to reload the new "Sign in With Google" button in JavaScript.
I have to remove the script tag and the "button" div then re-add them both.
Does anyone know of a better way to do this?
Have you looked at the JS renderButton method ?
Assuming you have something like this to initialize the library and display the button in JS, you might be able to update locale in the second parameter to renderButton and call the method again to switch languages.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large", locale: "the new locale" }
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</div>
</body>
</html>
Obviously, you'd call renderButton a second time from outside of the window.onload example above, I didn't go as far as showing that in the code sample though.
I can see the Full Screen button with
$(".table").bootstrapTable({
showFullscreen: true,
});
But nothing happens when clicking on it...
Thank you.
add your code inside document ready
<script>
$(document).ready(function(){
$(".table").bootstrapTable({
showFullscreen: true,
});
});
</script>
I am using offline.js (0.7.18) and its working fine, when I go on/offline the indicator changes state, all good so far.
I can also see on Offline JS Simulate UI, that a login panel is having its style toggled between display:block and display:none when on/offline is triggered. But I can't discover how this works.
I want to hide a 'Submit' button when offline is triggered.
You can use the sample from the Offline JS Simulate UI page that uses jQuery:
<script>
$(function(){
var
$online = $('.online'),
$offline = $('.offline');
Offline.on('confirmed-down', function () {
$online.fadeOut(function () {
$offline.fadeIn();
});
});
Offline.on('confirmed-up', function () {
$offline.fadeOut(function () {
$online.fadeIn();
});
});
});
</script>
Give the class "online" to any element you want shown when the system is online and give the class "offline" to any element you want shown when the system is offline.
<button class="online">ABC</button>
I have a login screen which has an ExtJs form panel with two button Login and Reset.
Now, I'm trying to add another button below the lofin panel for a new user sign up.
But the button goes out to the bottom of the screen and a scroll bar appears making the page look ugly!
I have these in my login.jsp file:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/app.js"></script>
And this is my app.js file:
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.FormPanel({
labelWidth:100,
frame:true,
title:'Member Login',
defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Username',
name:'loginUsername',
allowBlank:false
},{
fieldLabel:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
}],
buttons: [{
text: 'New User Register',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: false,
url: 'registration.jsp'
})
}
},{
text: 'Login',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: true,
url: 'index.jsp'
})
}
},{
text: 'Reset',
scale: 'medium',
handler: function(){
login.getForm().reset();
}
}]
});
// This just creates a window to wrap the login form.
// The login object is passed to the items collection.
var win = new Ext.Window({
layout:'fit',
width:325,
height:175,
closable: false,
resizable: false,
plain: true,
border: false,
items: [login]
});
win.show();
});
I tried adding a new button using the Ext.Createat the end of the above one but it wouldn't work.
I tried having the code in a separate js file and adding the script tag with src to the button file along with the panel file in a separate script tag and even that failed.
Can anybody help me out to create a separate button and my desired position?
Any kind of help is appreciated. Thanks.
I've looked everywhere and I've tried everything I could, but I'm not able to come up with the answer.
NOTE: The code makes the question seem very long and big, but my main query and issue is at the top and bottom of the question.
Im assuming you dont want to add the new button INSIDE the login panel because otherwise you could just add another button to your buttons list anyway. To add a button under your login panel and YET inside the window, do the following steps;
Put your form panel as an item inside a container
Add your button as a second item in the container after your form pannel
Add the container to your window as you did the panel to the window
Voilah! You could also try giving your window and 'id' such as 'id=loginWindow' and then calling the code
Ext.getCmp('loginWindow').add(
{
xtype:button,
text:'Yay!'
}
);
If you need more code specific help, feel free to message me. I know your feel bro <3
I need someone to put me through how I can use jquery dialog to ask "Confirm" or "Cancel" validations before submit. I get Microsoft JScript runtime error: Object doesn't support property or method 'dialog' for this on IE9:
<script type="text/javascript">
$(document).ready(function () {
$("#savechanges").click(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
buttons: {
"Confirm": function () {
$("#myformid").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
return false;
});
});
</script>
<div id="dialog"></div>
<p>
<input type="submit" id="savechanges" value="Save changes" />
</p>
If you set autoOpen as false, dialogbox doesn't open when you define it. So you should set it true.
From jQuery-UI docs,
autoOpen
When autoOpen is true the dialog will open automatically when dialog is called.
If false it will stay hidden until .dialog("open") is called on it.
DEMO
There can be multiple reason behind this issue, make use of any debug tool like firebug to check
Use a tool like Firebug for Firefox to verify each JS file is being included.
Make sure there is no other JS on the page that could cause an error.
Verify you have the correct versions of the files downloaded.