Javascript files are not being pulled into my Phonegap app. This is a recent problem that is quite frankly driving me insane. This is the top of my index.html file:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD90W6MypWGP6s4luD2kQHhZ9IFQrfr04g&sensor=true"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/facebook.js"></script>
<script type="text/javascript">
app.initialize();
</script>
This is my facebook.js file that I'm trying to pull in:
$(document).on('ready' , function(){
console.log('ready')
function onDeviceReady(){
console.log('test')
var plugin = new CC.CordovaFacebook();
plugin.init('***************', 'myapp',
['email'],
function(response){console.log(response)},
function(failure){console.log(failure)});
var loginButton = $('#login-with-facebook');
loginButton.on('click' , function(e){
e.preventDefault();
plugin.login(function(token) {
console.log("Access token is: " + token);
}), function(failure){console.log(failure)});
})
}
if (window.cordova.logger) {window.cordova.logger.__onDeviceReady();};
onDeviceReady();
document.addEventListener("deviceready", onDeviceReady, false);
})
I can't console.long anything in the facebook.js file. What's driving me even more crazy is that it's worked on occasion. Are my files out of order? Also, I only seem to be running into this issue after installing one of the cordova facebook plugins. Does anybody know what's going on here?
Because you define your onDeviceReady function inside an anonymous event handler function, it won't be available until the DOM is loaded (and shouldn't only be accessible from within the event handler. This would only work properly if the device is ready before the DOM loads and only because onDeviceReady is manually invoked in the onDocumentReady event handler. Replace your facebook.js with the following.
function onDeviceReady(){
console.log('test')
var plugin = new CC.CordovaFacebook();
plugin.init('443530475777959', 'spencerspiegelapp',
['email'],
function(response){console.log(response)},
function(failure){console.log(failure)});
var loginButton = $('#login-with-facebook');
loginButton.on('click' , function(e){
e.preventDefault();
plugin.login(function(token) {
console.log("Access token is: " + token);
}), function(failure){console.log(failure)});
})
}
$(document).on('ready' , function() {
console.log('ready')
document.addEventListener("deviceready", onDeviceReady, false);
if (window.cordova.logger) {
window.cordova.logger.__onDeviceReady();
}
});
i recently got a job offer and the site i'm working on uses fancybox but when i click on the photo gallery nothing shows up. The url shown the redirection but nothing is happening. The site is caprice.gr.
#RenderBody()
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> !window.jQuery && document.write(unescape('%3Cscript src="/scripts/libs/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script> !window.jQuery.ui && document.write(unescape('%3Cscript src="/scripts/libs/jquery-ui.min.js"%3E%3C/script%3E'))</script>
<script src="/scripts/libs/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="/scripts/jquery.mousewheel.js" type="text/javascript"></script>
<script src="/scripts/jquery.easing.js" type="text/javascript"></script>
<script src="/scripts/jquery-extend.js" type="text/javascript"></script>
<script src="/scripts/jquery.ba-hashchange.min.js" type="text/javascript"></script>
<script src="/scripts/libs/mediaplayer-5.10/jwplayer.js" type="text/javascript"></script>
<script type="text/javascript">
/*$(window).load(function () {
if (typeof (FB) != 'undefined' && FB != null) {
FB.XFBML.parse($('#facebook-comments').get(0));
}
});*/
$(function(){
$(document).on('contextmenu','img, .fancybox-nav', function(e){
e.preventDefault();
alert('Copyright © 2012 Caprice of Mykonos.');
}).on('dragstart','img', function(e){
e.preventDefault();
});
});
</script>
#RenderSection("pageJS",False)
<script>
var _gaq = _gaq||[];
_gaq.push(['_setAccount', 'UA-35657817-1']);
if (location.hash == '') {
_gaq.push(['_trackPageview']);
}
(function (d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
} (document, 'script'));
</script>
How can I fade out the following?
It does also need to be removed completely, not just only alpha 0 but also display:none and visibility:hidden after the fade out.
FIDDLE: http://jsfiddle.net/fourroses666/ywMUx/2/
js:
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$('.go-away').click(function() {
$('.message').removeClass('show');
});
</script>
css:
<style>
.message{display:none; visibility:hidden;}
.message.show{display:block; visibility:visible;}
.go-away{float:right; cursor:pointer; cursor:hand;}
</style>
html:
<div class="message show">Pizza is nice! <div class="go-away">x</div></div>
Try this
$('.go-away').click(function() {
$(this).parent().fadeOut();
});
fadeOut makes it invisible, the 400 is how many milliseconds to fade out over, and then function() { $(this).remove() } is the callback function (called after the fadeOut animation has completed) that will remove the element from the DOM. Here's a working fiddle. Let me know if this helps or if you have any questions :)
$('.go-away').click(function() {
$('.message').fadeOut(400, function() {
$(this).remove();
});
});
I have created a facebook app that will be displayed on my companies fan page as a tab. The app renders at 951px so it doesn't fit in the default height of the fan page tab. I've read facebook's horrible documentation for their js sdk and have tried so many different variations - all of them not working at all. Here's my current attempt to resize the fan page tab to fit my app...
<head>
<!-- css / js / meta info here -->
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<body>
<!-- content goes here -->
<div id="fb-root">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId:'xxxxxxxxxx',
status:true,
cookie:true,
xfbml:true,
});
</script>
</div>
</body>
I've also tried async init and using setAutoResize() with no luck.
Thanks for any and all suggestions...
B
<head>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.Canvas.setSize();
}
</script>
</head>
.
.
.
.
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: 'xxxxxxxx',
status: true,
cookie: true,
xfbml: true
});
/* Init fb Resize window */
/* Completly removed now in JS SDK*/
/* FB.Canvas.setAutoResize(7); */
/* As of Jan 2012 you need to use */
FB.Canvas.setAutoGrow(7);
</script>
</body>
</html>
I just spent over an hour trying to fix this in my app and I wanted to mention a couple of basics that you have to follow for this to work.
You have to include a div with an id of fb-root before you include the all.js file and before any JS code using the FB object.
The all.js file should be included below the fb-root div and above any actual JS code using the FB object
Finally, any JS code using the FB object should be below the fb-root div and the all.js include
There were no errors in my code, but it was refusing to work because I was including all.js and my JS code in the <head> element and my fb-root div was in the <body>. Here's what I had to change it to:
...
<head>
<!-- include jQuery so we can use window.load below -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
...
</head>
<body>
<!-- the div has to come first which forces the JS include and code to be put below it -->
<div id="fb-root"></div>
<!-- then we have to include the all.js file -->
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<!-- and finally we can use the FB JS SDK and it will actually work :) -->
<script type="text/javascript" charset="utf-8">
FB.init({
appId: '...',
status: true,
cookie: true,
xfbml: true
});
jQuery(window).load(function(){
//resize our tab app canvas after our content has finished loading
FB.Canvas.setSize();
});
</script>
...
Obviously the 3 elements I mentioned don't have to be right after each other, but they do have to show up in this order in your source code. This really threw me for a loop so hopefully this will save someone some time and frustration :)
It usually works if Facebook can calculate the height of your page. However if you have a responsive design this is not possible.
I am using a hack that does the job using jQuery to calculate the height of the wrapper div and then explicitly set it:
FB.Canvas.setDoneLoading( function(result) {
FB.Canvas.setSize({height: $('#wrapper').height() });
});
This should go in your FB.init() method.
if for some reason window.name is set the FB.setAutoSize wont work, http://bugs.developers.facebook.net/show_bug.cgi?id=19720
in my case its connected somehow to jquery $.data
window.fbAsyncInit=function(){
FB.Canvas.setSize = function(b) {
if (typeof b!="object")
b={};
b=b||{};
if (b.width==null||b.height==null)
b=FB.copy(b,FB.Canvas._computeContentSize());
b=FB.copy(b,{frame:'iframe_canvas'});
if (FB.Canvas._lastSize[b.frame]) {
var a=FB.Canvas._lastSize[b.frame].height;
if(FB.Canvas._lastSize[b.frame].width==b.width&&(b.height<=a&&(Math.abs(a-b.height)<=16)))
return false;
}
FB.Canvas._lastSize[b.frame]=b;FB.Arbiter.inform('setSize',b);
return true;
}
FB.init({
appId:APP_ID, //your app id (Numeric)
status:true,
cookie:true,
xfbml:true
});
FB.Canvas.setAutoResize()
};
I'm found the solution for fix issues when using jQuery and FB.setSize() - if you set vars definition before $(function(){}) (jQuery DOM ready) - setSize doesn't work. If all vars definition located inside $(function(){ all vars HERE }) - setSize starts working!
You might need to wait for images to be loaded. Otherwise the FB.Canvas.setSize(); might fire too soon and not include image sizes.
With jQuery use:
$(window).load(function(){
FB.Canvas.setSize();
});
Found a solution to reduce the height again if the content sites of your App have different heights. Usually the height increases easily but doesn't decrease to a smaller site again.
<head>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.Canvas.setSize({ width: 810, height: 920 });
/*{ set here the needed site height }*/
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: 'App ID', /*{ set here your App ID }*/
status: true,
cookie: true,
xfbml: true
});
/* Init fb Resize window */
/* Completly removed now in JS SDK*/
FB.Canvas.setAutoResize(7);
/* As of Jan 2012 you need to use */
FB.Canvas.setAutoGrow(7);
</script>
</body>
This is how I initialise my facebook applications:
<div id="fb-root"></div>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() {
FB.init({
appId : appId,
status : true,
cookie : true,
xfbml : true
});
// Additional initialization code such as adding Event Listeners goes here
FB.Canvas.setSize({ width: 810, height: 620 }); // ******* THIS WORKS.
};
(function(d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
here is what I use:
<head>
...
<script type="text/javascript">
function facebookInit(appId) {
FB.init({
appId : appId,
status : true,
cookie : true,
xfbml : true
});
}
function increaseIframeSize(w,h) {
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
</head>
<body>
<script>
increaseIframeSize(720,800);
facebookInit(appId);
</script>
...
</body>
I also noticed the setSize call fails if the user's "Secure Browsing" setting is disabled. This may not be an issue for most, since the setting is enabled by default, but if you're running into this issue and now have an almost-bald head (like I do), check this setting on the account you're testing with.
How can I do Tinymce toolbar draggable with jQuery?
Try this in your tinyMCE init method
tinyMCE.init({
// ...
handle_event_callback : function(e) {
if(e.type == 'click') {
$('.mceExternalToolbar').draggable();
}
return true;
}
});
Include the following jQuery UI files :
<script type="text/javascript" src="tiny_mce.js"></script>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui.draggable.js"></script>
Note that i've tried this only with one tinyMCE instance.
I don't know if there are some side effects of this workaround, but it's working for now.