I'm using jquery.dfp.js to implement DoubleClick ad on a website. Pretty straightforward.
I used this to initialize the script:
$('selector').dfp({
dfpID:'xxxxxxxxx',
sizeMapping: {
'my-default': [
{browser: [1024, 768], ad_sizes: [980, 185]},
{browser: [ 980, 600], ad_sizes: [[728, 90], [640, 480]]}
{browser: [ 0, 0], ad_sizes: [88, 31]}
],
}
});
And I'm using this to refresh the ads upon browser resize:
var resizeTimer;
function resizer(){
$('selector').dfp({
dfpID:'xxxxxxxxx'
});
}
window.addEventListener("resize",function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizer,250);
});
Everything seems to be working (Check out the leaderboard ad unit in the header area on blog.insurancenewsnet.com). One issue is that it refreshes every time a resize the browser window, so the ad flickers.
I have two questions.
Is the way I'm refreshing the ads the best way to handle this?
Is there a way to refresh the ads based on breakpoints instead of on every window resize?
Any advice would be greatly appreciated.
Related
THIS IS A FEATURE REQUEST FOR THE SOUNDCLOUD CREW (since they do not respond via api#soundcloud.com)
Like SoundCloud itself, could the API show profile thumbnails when there are no track thumbnails available?
This way, when embedding SoundCloud tracks via Embedly or the like -- ie. http://jsbin.com/kezonutoroma/1/edit -- people won't have to be faced with those empty placeholder images.
https://soundcloud.com/oembed?url=https://soundcloud.com/liv-lykke/andres-haender&format=xml
<thumbnail-url>http://a1.sndcdn.com/images/fb_placeholder.png</thumbnail-url>
Should be:
<thumbnail-url>http://i1.sndcdn.com/avatars-000036988237-o1ck0r-t500x500.jpg</thumbnail-url>
Here is a static, more hacky solution:
var defaultimg = 'http://i1.sndcdn.com/avatars-000036988237-o1ck0r-t500x500.jpg';
$('div a').embedly({
key: '7c6cf67ad409446cacd53309d96b66a0',
query: {
maxwidth: 500,
autoplay: true
},
display: function(data, elem){
$(elem).html('<img src="'+defaultimg+'"/>');
$(elem).addClass('play')
.append('<span />')
.width(data.thumbnail_width)
.height(data.thumbnail_height)
.find('span')
.css('height', data.thumbnail_height)
.css('width', data.thumbnail_width);
}
}).on('click', function(){
var data = $(this).data('embedly');
$(this).replaceWith(data.html);
return false;
});
http://jsbin.com/qovirepoyoto/1/edit
I would recommend to get the default image via an API call to the user endpoint.
Hope this helps you.
After detail search and googling I finally decide to put my question.
In my JQM web app there are total 4 pages. 2 of them are dynamically populated via Ajax. I have used
$.extend($.mobile, {
defaultPageTransition: 'none'
});
My dynamically populated function is
$.get_detail= function(){
$.ajax({
url: "mypage.cfm",
data: data,
timeout:5000,
cache:false,
type:'GET',
dataType:"html",
success: function(data3) {
//$('#filldiv').empty();
$("#filldiv").html(data3);
$.mobile.changePage('#detailpage');
},
error: function(statusCode, errorThrown)
{
if (statusCode.status == 0)
alert("you are offline");
else
alert("Please try again.");
}
});
}
When I change page flash white screen just like flicer happened but when there is no data fill in div then there is no flicker. I have noticed that, if there is no screen size change then every thing is okay and if screen size change by filling the dynamic content flicker happen
Please help me out to solve this issue. Thank you
Here's what I'm using to disable default transitions:
$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = 'none';
});
The newest version 1.4, is also supposed to help with better transitions.
I am a new developer and am trying to create a jQTouch application to display some scrollable content throughout multiple pages. I've decided to use iscroll and it only works fine on the home page. I've read that I need to refresh iscroll after each page but I am completely lost on how to do this. Here is my script:
<script type="text/javascript">
var myScroll, myScroll2;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('wrapper1');
}, 100);
setTimeout(function () {
myScroll2 = new iScroll('wrapper2');
}, 100);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
In my html I have a div id="wrapper1" which works fine until I navigate to the second page where the div id="wrapper2" has the rubber band effect.
In case you haven't figured this out yet (although I'm sure you have), you want:
myScroll.refresh()
or
myScroll2.refresh()
Ok finally got this working. To get jQTOuch and iScroll to play nice with each other, the scrolling areas on the page need to be reset each time JQTouch makes them disappear. In other words, once you hide the div, iScroll doesn't know what to scroll the next time it's made visible. So as a result, you get the infamous rubberband effect. To solve this, just add an event listener that resets the scrolling area right after the div is called. Make sure you give it 100 to 300ms delay. This code below assumes your variable is called myScroll:
$(".about").tap(function(){
setTimeout(function(){myScroll.refresh()},300);
});
And on a side note, here's how to establish multiple scrollers using iScroll:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
Is there an "onComplete" state or similar for the Facebook Comments plugin? I'm trying to add a jScrollPane scrollbar to a content box that has FB Comments inside it. What happens is I get the FB Comments iframe placed on top of the box's content (as if it had an absolute position / was floating. Guessing this has to do with FB Comments initializing after jScrollPane.
Edit:
Now what I'm really after is combining ColorBox, Facebook Comments and jScrollPane and the headache starts pretty soon:
$('.mybox').colorbox({ innerWidth: 640, innerHeight: 480, scrolling: false, onComplete: function() {
$('#cboxLoadedContent').jScrollPane({
// Init FB Comments here instead? Then call jScrollPane?
showArrows: true,
scrollbarWidth: 15,
scrollbarMargin: 0
});
},
onClosed: function() {
// What would happen here if I need to listen for FB Comments also?
$('#cboxContent').jScrollPaneRemove();
}
});
Sorry if my question is a bit unclear, it's late and I've been in front of a screen for 10+ hours.
Using the xfbml.render event:
FB.Event.subscribe('xfbml.render', function() {
console.log('Loaded!');
});
I've created an app that is a set size (around 2,000 px tall) and have a menu that calls FB.Canvas.scrollTo in order to help the user navigate the long page.
Is there any way to add a smooth scrolling effect? Facebook does not offer any solution on its developer blog.
Using #Jonny's method, you can do this a little more simply with
function scrollTo(y){
FB.Canvas.getPageInfo(function(pageInfo){
$({y: pageInfo.scrollTop}).animate(
{y: y},
{duration: 1000, step: function(offset){
FB.Canvas.scrollTo(0, offset);
}
});
});
}
Just had the same problem today - I came up with a little bit of javascript which makes use of jQuery's animate method which provides some easing - the scroll is still a touch jerky (I'm guessing that's because of the FB.Canvas.scrollTo proxy). Anyway, here's the snippet:
function scrollToTop() {
// We must call getPageInfo() async otherwise we will get stale data.
FB.Canvas.getPageInfo(function (pageInfo) {
// The scroll position of your app's iFrame.
var iFrameScrollY = pageInfo.scrollTop;
// The y position of the div you want to scroll up to.
var targetDivY = $('#targetDiv').position().top;
// Only scroll if the user has scrolled the window beneath the target y position.
if (iFrameScrollY > targetDivY) {
var animOptions = {
// This function will be invoked each 'tick' of the animation.
step: function () {
// As we don't have control over the Facebook iFrame we have to ask the Facebook JS API to
// perform the scroll for us.
FB.Canvas.scrollTo(0, this.y);
},
// How long you want the animation to last in ms.
duration: 200
};
// Here we are going to animate the 'y' property of the object from the 'iFrameScrollY' (the current
// scroll position) to the y position of your target div.
$({ y: iFrameScrollY }).animate({ y: targetDivY }, animOptions);
}
});
}
I just used Francis' technique and implemented a jQuery version
$('html,body').animate(
{scrollTop: $(".scroll_to_me").offset().top},
{duration: 1000, step: function(top_offset){
FB.Canvas.scrollTo(0, top_offset + 30);
}
});
You need to replace the .scroll_to_me with the selector you want to scroll to. Also I added in the + 30 to the offset as the iframe doesn't start at the top of the page, you may want to tweak this.
One way of doing it is by getting the current Y position, then getting the to Y position. Run a for loop with a setTimeout that will bring the user to the final Y position.