I have a problem adding toggle effect.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.contactpic').hide();
$('.menu-item-54').click(function() {
$('.contactpic').toggle( "slide", {direction: "left"}, 1000);
return false;
});
});
</script>
With this code the element (contacpic) dissapear.
If i remove the effect:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.contactpic').hide();
$('.menu-item-54').click(function() {
$('.contactpic').toggle(1000);
return false;
});
});
</script>
Then, works correct.
I really appreciate any help.
Thank you.
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();
}
});
So i have this code, (i'm learning Backbone, but the console tells me: "Uncaught ReferenceError: $ is not defined", and i don't have any idea why, i have the exact code of the video tutorial, the error is in this line: el : $('#container')
Here is my code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Backbone Project</title>
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script type="text/template" id="task_template">
<label>Task: </label>
<input type="text" id="task_desc"/>
<input type="button" value="Add Task" id="btn"/>
</script>
<div id="container"></div>
<script type="text/javascript">
Task = Backbone.View.extend({
el : $('#container'),
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#task_template').html(), {});
this.$el.html(template);
}
});
var task = new Task();
</script>
</body>
</html>
The example is using jQuery to select DOM elements, add the library to your head...
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<!-- load other libraries that depend on jquery *after* jquery -->
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<!-- ... time passes ... -->
<script type="text/javascript">
// use jQuery onReady wrapper to ensure DOM has loaded before
// executing JS that might depend on DOM elements, and scripts to exist
$(function(){
Task = Backbone.View.extend({
el : $('#container'),
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#task_template').html(), {});
this.$el.html(template);
}
});
var task = new Task();
});
</script>
I have an ad and a link in a page like so:
<!DOCTYPE html>
<head profile="http://www.w3.org/1999/xhtml/vocab">
<title>DPT - Asynchronous + Single Rest Architecture</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.pubads().enableAsyncRendering();
googletag.defineSlot('/1001256/Home_Top_Leaderboard_728x90', [728, 90], 'div-gpt-ad-1342320102476-72').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<div id="div-gpt-ad-1342320102476-72" style="width:728px; height:90px;">
<script type="text/javascript">
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1342320102476-72'); });
</script>
</div>
<a id="refresh" href="#">Refresh ad</a>
<script type='text/javascript'>
(function ($) {
$('#refresh').click(function() {
googletag.cmd.push(googletag.pubads().refresh());
return false;
});
})(jQuery);
</script>
</body>
</html>
The first time I click the link, the ad refreshes. All other times nothing happens. Even just calling the refresh() method in Firebug etc does nothing after the first time.
What's wrong with the above?
According to https://support.google.com/dfp_premium/answer/4578089 the refresh function takes a parameter of an array of adSlots:
googletag.pubads().refresh([gptAdSlots[0], gptAdSlots[1]]);
Does that change the behaviour for you?
Failing that, I would recommend enabling the Google Publisher Console by adding the google_console or googfc parameter to your querystring (see https://support.google.com/dfp_sb/answer/181070?hl=en for details), and checking for errors
This is the source of the problem
googletag.pubads().enableSingleRequest();
Stop using singlerequest mode and you can call googletag.pubads().refresh() with no problem. Not managed to find any documentation explaining this.
Try it:
googletag.pubads().refresh(null, {changeCorrelator: false});
From https://developers.google.com/doubleclick-gpt/reference:
Fetches and displays new ads for specific or all slots on the page. Works only in asynchronous rendering mode.
For proper behavior across all browsers, calling refresh must be preceded by a call to display the ad slot. If the call to display is omitted, refresh may behave unexpectedly. If desired, the disableInitialLoad method can be used to stop display from fetching an ad.
and:
Configuration options associated with this refresh call. changeCorrelator specifies whether or not a new correlator is to be generated for fetching ads. Our ad servers maintain this correlator value briefly (currently for 30 seconds, but subject to change), such that requests with the same correlator received close together will be considered a single page view. By default a new correlator is generated for every refresh.
I hope it helped a little at least.
I can't see any answer to the issue right now. I encountered the same problem in the site I am currently working and lucky enough to accidentally solve the issue by adding $(window).load(function(){ }); in the javascript code.
You need to define slot in both the parts:
<script src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
googletag.cmd.push(function() {
slot1 = googletag.defineSlot('/xxxx/suihgdwiuhdwiu', [728, 90], 'div-gpt- ad-xxxxxxx-0').
setTargeting("test", "refresh").
addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
And:
<div id='div-gpt-ad-xxxxxxxxx-0' class="adsbygoogle">
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-xxxxxxxx-0'); });
setInterval(function(){googletag.pubads().refresh([slot1]);}, 60000);
</script>
</div>
</div>
I don't think you have got your ad unit definition quite right.
Try:
<html>
<head>
<title>DFP test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type="text/javascript">
googletag.cmd.push(function() {
googletag.pubads().enableAsyncRendering();
googletag.defineSlot('/1234567/Home_Top_Leaderboard_728x90', [728, 90], 'div-gpt-ad-1342320102476-72').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<div id='div-gpt-ad-1342320102476-72' style='width:728px; height:90px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1342320102476-72'); });
</script>
</div>
<a id="refresh" href="#">Refresh ad</a>
<script type='text/javascript'>
(function ($) {
$('#refresh').click(function() {
googletag.cmd.push(googletag.pubads().refresh());
return false;
});
})(jQuery);
</script>
</body>
</html>
Obviously to get this working you will need to change /1234567/Home_Top_Leaderboard_728x90 to the correct values.
For me the solution was:
googletag.pubads().updateCorrelator();
googletag.pubads().refresh();
If you want to make the ad slot are refresh perhaps may using this method,
<!-- header script -->
<script async='true' src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
var REFRESH_KEY='refresh';
var REFRESH_VALUE='true';
</script>
<script>
googletag.cmd.push(function() {
var slot_bottomframe = googletag.defineSlot('/1001256/Home_Top_Leaderboard_728x90', [728,90], 'div-gpt-ad-1342320102476-72');
slot_leaderboard.setTargeting('pos',['leaderboard']);
slot_leaderboard.setTargeting(REFRESH_KEY,REFRESH_VALUE);
slot_leaderboard.addService(googletag.pubads());
var SECOND = 60;
googletag.pubads().addEventListener('impressionViewable',function(event) {
var slot=event.slot;
if(slot.getTargeting(REFRESH_KEY).indexOf(REFRESH_VALUE)>-1) {
setTimeout(function() {
googletag.pubads().refresh([slot]);
}, SECOND*1000);
}
});
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
</script>
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.