I am using google dfp on a responsive site.
I have called
googletag.pubads().display();
googletag.pubads().refresh();
on window resize
But it doesnt seem to work.
I have already defined different slots for mobiles and tablets, but it works on page load and not window resize.
Can someone please suggest how this can be achieved? Any links to live responsive sites using google dfp will also be helpful
Try this -
// <![CDATA[
var resizeTimer; function resizer() {
googletag.pubads().refresh([window.Leaderslot]); }
window.addEventListener("resize", function(){ clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizer, 250); });
// ]]>;
Take a look here for the orginal code and explanations - http://exisweb.net/how-to-use-google-adsense-on-a-responsive-website
Related
As the title says. Here is the URL if you have an iPad - How can I remove the responsive width of the Comments Plugin for iPads? (bottom of page) http://dev.assessmentday.co.uk/aptitudetests_numerical.htm
I ran into this too. I've worked around it by manually adding the data-mobile attribute set to false if I detect this is on an iPad:
<script>
if (navigator.userAgent.match(/\biPad\b/)) {
document.querySelector('div.fb-comments')
.setAttribute('data-mobile', 'false');
}
</script>
This could be improved to handle other tablets as well, but the best way to do that depends on how Facebook auto-detects "mobile", which I'm not sure of. Perhaps based on display width, perhaps based on the presence of touch event handlers, or perhaps indeed by user-agent on the server-side.
I have a mobile website running jQuery Mobile 1.0a2 and I'm currently testing in Mobile Safari for Firmware 4.1 via the iPhone Simulator.
I cannot seem to bind to the load event for an image.
I have a simple gallery of thumbnails and a large image. When you click on a thumbnail it changes the src attribute of the main img
The js for that uses the live('click' method to bind and it works just fine.
$('.gallery-navigation img').live('click',function() {
// change source of main image to new
$.mobile.pageLoading(); // show jquerymobile loading message
});
My problem is that I need feedback on this click, so I wanted to show a loading message (provided by jquerymobile) and then hide it once the image loads.
Where #gallery_image_large is the actual <img> where the src is changing, I tried the following:
$("#gallery_image_large").bind("load", function () {
$.mobile.pageLoading(true); // hide jquerymobile loading message
});
This works in Safari on my desktop but does not in the iPhone Simulator mentioned above.
For reference:
jQuery Mobile Loading Message Methods
UPDATE: I am experimenting with JQuery Image load fails on MobiOne iPhone simulator, which explains how to implement the .load manually by "checking .complete".
I changed the structure of my jquery and it's seemed to have fixed it!
$('#gallery_image_large').one('load',function() {
try { // a grade
$.mobile.pageLoading(true);
} catch(err) { // low grade
}
}).attr('src',full_src);
(as you can see, I opt'd for a try { .. } catch { .. } to verify jquerymobile is available.
Although I didn't use the solution (directly) from JQuery Image load fails on MobiOne iPhone simulator, the manual firing of load via .complete is probably a good solution for anyone else out there!
I tried teh jScroll plugin by Kelvin Luck. First of all its a wonderful script. Its working fine with text, ie text as contents, in all browesers. But when we insert images in that the scroll is not working in Safari and Chrome... please help me. Am a beginner in javascrpt...:)
Retheesh
Another way of doing it is to initialise the plugin once the entire page is loaded
$(window).load(function(){
$('.scroll-pane').jScrollPane();
})
Ok, this way late, but I just spent most of the day figuring this out.
It's actually quite simple and also sort of explained in the jScrollpane Demo pages...
Since I am using the Wordpress plugin, using the the workaround Dann provided seemed a bit to complicated. The solution here is setting the image height in your CSS file for this specific page instead of (or on top of) declaring them inline.
So basically if you have
<div id="mydiv">
<img src="...." height=200px"/>
>/div>
jScrollpane won't recognize the height of the pictures and count them for your div height. So you need to add a class to your div and define the img height in your CSS:
#mydiv .newclass img {
height: 200px;
}
and it will work fine!
I had a similar problem.
Reinitialising the panel seemed to work.
I used this script:
$('.image_class').load(function () {
$('.scroll-pane').jScrollPane();
});
Dann
It's a known issue, but Dann's workaround is effective. I ended up testing for the presence of troublesome images, since they weren't always present on the page and affecting the scroll area size:
$(function() {
if($('.image_class').size()) {
$('.image_class').load(function() {
$('.scroll-pane').jScrollPane();
});
} else {
$('.scroll-pane').jScrollPane();
}
});
Sample Link
I am using jQuery cycle to slide through these images I am having issues in iOS webkit getting the #imagegallery img to scale 100% width.
Any Ideas?
I found this but still can't get it working properly.
If you just google for this error, you will find plenty of people having troubles with the jQuery plugin applied to images. Troubles happens usually in terms of position and showing.
My feeling is that sometime the script is run just before the images are loaded and the used width/length values for cycling the images are wrong. I would suggest you to add something like this to your page (adapt classes and names to your needs):
<script type="text/javascript">
$(document).ready(
function() {
$('.image-list li').each(function({$(this).css({
[SET HERE POSITION, WIDTH, ETC]});});
$('.image-list').cycle([OPTIONS]);
}
);
</script>
I recently did a small jQuery snippet that allows me to show a loading img until the real image is loaded.
The snippet seems to work in Safari, Chrome but not FireFox.
FireFox only displays a loading alt and never switches to the loaded image.
Here is the snippet
var loading = $('<img src="/media/ajax-loader.gif" alt="loading" />');
$('.thumbnail').each(function(){
var loadIMG = loading.clone();
$(this).after(loadIMG).load(function(){
$(this).fadeIn('fast');
loadIMG.hide();
}).hide();
});
Any ideas why?
You haven't said what exactly is happing on FF but below can be one of the problem. From jquery documentation
It is possible that the load event
will not be triggered if the image is
loaded from the browser cache. To
account for this possibility, we can
use a special load event that fires
immediately if the image is ready.
event.special.load is currently
available as a plugin.
Here's the link for plugin.
Edit:
Based on comments from load event, try below:
$('.thumbnail').each(function(){
var loadIMG = loading.clone();
$(this).after(loadIMG).load(function(){
$(this).fadeIn('fast');
loadIMG.hide();
}).hide();
if (this.complete) $(this).trigger("load");
});
Of course, the plug-in seems to be doing same thing along with handling some other scenarios as well as.