I'm currently trying out Google Adsense Responsive Ads which work great, but is there a way to show two ads when the screen size passes a specific size?
For example, when the screen size is bigger than 620 pixel, show two "250 x 250" ads next to each other (instead of just one)?
You may not put two ads (without some server side coding which may cause various problems) but you can increase or decrease the size of the ad to achieve a similar behavior using media queries. For example: You can show -
300x250 ad on mobiles
336x280 ad on tablets (with min width of 500)
728x90 ad on desktop (with min width of 800)
970x250 ad on large resolution desktops (with min width of 1200)
For this, you need to use advanced code (code modifications required) in the 'responsive ad' as follows -
<style>
.responsive2 { width: 300px; height: 250px; }
#media(min-width: 500px) { .responsive2 { width: 336px; height: 280px; } }
#media(min-width: 800px) { .responsive2 { width: 728px; height: 90px; } }
#media(min-width: 1200px) { .responsive2 { width: 970px; height: 250px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive2 -->
<ins class="adsbygoogle responsive2"
style="display:inline-block"
data-ad-client="ca-pub-XXXXX"
data-ad-slot="YYYYY"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
For more details on advanced responsive adsense ad, refer to https://support.google.com/adsense/answer/3543893#adv
Related
I tried the following code for making my page responsive, but still the elements are moving out. Can anyone lease have a look at it and help me out?
#media only screen and (max-width: 500px) {
.top-bar-section ul {
margin-top: 15px;
}
}
#media only screen and (min-width: 300px) and (max-width: 500px) {
.widget-area {
display: none;
}
.stat {
margin-bottom: 30px;
}
.clients-style-2 .slides li .client-logo {
margin-bottom: 5px;
}
#clients .slides li .client-logo {
margin-bottom: 5px;
}
#icategories li {
margin-bottom: 10px;
}
}
Ref url: http://7drives.in/dsq/index.html
You have a YouTube video in an iframe, and that iframe has a hard coded width of 500px, so this will be a problem on narrower viewports.
CSS Tricks has one solution to this, jQuery below. There are other solutions for responsive iframes, I like that this is a simple drop fix which doesn't require any changes to your HTML, and also that it resizes both the width and the height of your video.
Hope this helps!
// By Chris Coyier & tweaked by Mathias Bynens
$(function() {
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
// (You'll probably want to debounce this)
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});
In my Ionic/Angular mobile app, I have an Uber-like map, where basically the user can drag the map to select a location and there is a marker always pinned in the center.
To achieve that, I followed the instructions from here and here.
So, my HTML looks something like the following:
<ion-view cache-view="false" view-title="Choose location">
<ion-content has-header="true" class="new-meeting" has-bouncing="false">
<div id="chooseLocationMap" class="full-map"></div>
</ion-content>
</ion-view>
The SASS related to that:
.full-map {
width: 100%;
height: 100%;
.center-marker {
position: absolute;
background: url(../img/default-marker.svg) -10px -5px;
top: 50%;
left: 50%;
z-index: 1;
width: 40px;
height: 50px;
margin-top: -50px;
margin-left: -22px;
cursor: pointer;
}
}
And finally, the part of my controller that deals with the map is this:
function initialize() {
var initialPosition = loadStoredPosition();
var mapOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById('chooseLocationMap'), mapOptions);
google.maps.event.addListener(map, 'center_changed', function () {
updateStoredPosition(map.getCenter());
});
var markerDiv = document.createElement('div');
markerDiv.className = 'center-marker';
angular.element(map.getDiv()).append(markerDiv);
}
ionic.Platform.ready(initialize);
As you can see, I have the two methods, loadStoredPosition and updateStoredPosition, which are just retrieving and saving the latitude and longitude to a service.
This is working fine, I can move the map and every time the stored position will be updated correctly.
The problem is that when I leave the view (after selecting a location) and then return (position still remains the same as the last one), it looks like the marker is not pointing to the correct location but a bit further up (it's always the same offset).
Does anyone know why this might be happening?
EDIT:
The marker appears in the correct location the first time that I'm accessing the view. But all the consecutive times that I'm accessing the view, the marker is not pointing in the correct location anymore but a few pixels up. I should also mention that the view is not cached so the map is re-created every time.
Finally, one curious thing I noticed is that the very first time I access this view, the map after it's visible, it does a small bouncing and expands slightly!
ngmap recently added 'custom-marker' for this kind of purpose.
With custom-marker, you can have fully working marker with html. It also responds to all events click, mouseover using google maps API.
This is the example.
https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/custom-marker-2.html
And this is the code required, https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/custom-marker-2.html.
As you see in the code, there is no Javascript required.
To center a marker, all the time, all you need to do is to add on-center-changed="centerCustomMarker()" to your map directive, and the following to your controller.
$scope.centerCustomMarker = function() {
$scope.map.customMarkers.foo.setPosition(this.getCenter());
}
I try different approach than you asked, but it may worth a try.
GitHub: https://github.com/allenhwkim/angularjs-google-maps
FYI, I am the creator of ngmap.
How to create Responsive Email Template?
I can build responsive layout using media-query but these styles we can write only in external/internal CSS. Email template we cannot use DIV and external/internal CSS.
How can i build responsive email template.
Thanks,
Shanid
Using media queries in an HTML email is not a very good solution to developing a responsive HTML email because the vast majority of your audience is not going to see it the way you intend.
Gmail will not preserve any CSS in the head of an html email. This is where media queries are, so .. won't work.
Android supports media queries but it's buggy at best.
The best way to develop a pseudo-responsive HTML email is to build a fluid layout HTML email. Design your email with (for simplicity) a single column layout. You can develop a fluid layout with a multi-column layout but it can get pretty complicated quick.
Design your layout as normal, inline all your styling and using depreciated HTML attributes rather than css styling.. doesn't matter if it's inline, CSS still won't play well in HTML emails. Use it sparingly, don't use it at all if you can avoid it.
Do not assign height to your elements and assign width only in percentage values. Therefore allowing the device displaying the email to determine the best width to display based on the percentage values rather than specific pixel sizes.
<table width="90%" cellpadding="0" cellspacing="0" border="0">...</table>
Here's a good example of a fluid layout: http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6AE9D028347
You need to understand that responsive emails, while possible, can't work on every mail client. As an example, Gmail strips all your head tag from the email, so no media queries are allowed, therefore no responsiveness. From what I've tested, responsive emails can be displayed in Outlook, Apple Mail, and a few others with standard media queries. For those, you'd have to use the typical breakpoints and apply them to trs or tds. Now, that can be tricky. You have to make sure it won't break your table layout so you really need to plan in advance what will change in your layout.
If you want it to work mostly on everything, I'd suggest you use fluid layouts using % widths. But if you really want some web responsiveness, it's the same as any responsive website. Just be aware that it will not work everywhere. Like this:
#media (max-width:680px) {
.hide { display:none; }
.main { width:440px }
.header { width:440px; }
.header-img { width:440px }
.footer { width:440px; }
.footer-size { width:440px; }
}
#media (max-width:440px) {
.hide { display:none; }
.main { width:100% }
.header { width:100%; }
.header-img { width:100%; height:auto; }
.logo-img { width:75px; height:30px; }
.icon-img { width:19px; height:18px; }
.icon-wrap { width:19px; }
.footer { display:none !important; }
.footer-size { width:100% }
}
#media (max-width:240px) {
.hide { display:none; }
.main { width:100% }
.header { width:100%; }
.header-img { width:100%; height:auto; }
.logo-img { width:75px; height:30px; }
.icon-img { width:19px; height:18px; }
.icon-wrap { width:19px; }
.button { width:100%; height:auto; }
.footer { display:none !important; }
.footer-size { width:100% }
}
(That's just some code from an email campaign I worked on, btw)
You can use media queries for common mailclients. Webclients rely heavily on inline css. Work with as much percentages as possible on your tables (100%) and max widths for tables that may not scale bigger than a certain amount of pixels.
Nested tables within a 100% wrapper table always stack inherited.
U should learn #media queries first. Is't something for write here because of many info.
I have a few map markers that are located all over the place and I want to auto zoom to show them all.
The code I have should work fine but sometimes (seems to depend whereabouts the map markers are) it doesn't always zoom correctly to show the markers.
Here's a fiddle (with example markers to show the problem): http://jsfiddle.net/amnesia7/9YUVe/embedded/result/ using the following marker locations:
// Add markers to the map for each location
addMarker(1, "Hello 1", [-18,178.333]);
addMarker(2, "Hello 2", [-18.5,180]);
addMarker(3, "Hello 3", [-18.5,-178.333]);
The auto-zoom has gone completely wrong and seems to be zoomed in on the sea somewhere.
Looks to be a bug to me because it seems to depend on whereabouts the map markers are as to whether it zoom correctly or not.
UPDATE
I've created, what I hope will be, a simpler version using the HERE developer demo for "Zoom to a set of markers"
http://jsfiddle.net/amnesia7/uhZVz/
You need to zoom the map out to see the markers that should be in view by default.
Thanks
It looks like a bug to me too, and only occurs when markers cluster around the 180th line of longitude.
Seems that the zoomTo() calculation is incorrect in this case, only taking in to account the last marker since it is on the "wrong" side of the international date line.
Anyway, getWidth() on the viewport does seem to work, so you could hack in your own zoomTo() function as shown in the kludge below.
Also note the use of kml=auto&map=js-p2d-dom when loading the library - this uses the DOM implementation rather than the canvas implementation this properly shows markers on both sides of the 180th line of longitude.
<!DOCTYPE HTML SYSTEM>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
}
#mapContainer {
width:100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
</style>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?kml=auto&map=js-p2d-dom"></script>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
/* Set authentication token and appid
* WARNING: this is a demo-only key
* please register on http://api.developer.nokia.com/
* and obtain your own developer's API key
*/
nokia.Settings.set("appId", "APP_ID");
nokia.Settings.set("authenticationToken", "TOKEN");
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 13,
components: [
// We add the behavior component to allow panning / zooming of the map
new nokia.maps.map.component.Behavior()
]
});
// We create an instance of Container to store markers per city
var myContainer = new nokia.maps.map.Container();
/* We add all of the city containers to map's object collection so that
* when we add markers to them they will be rendered onto the map
*/
map.objects.add(myContainer);
// We create several of marker for a variety of famous landmarks
var firstMarker = new nokia.maps.map.StandardMarker(
[-18, 178.333],
{ text: 1 }
),
secondMarker = new nokia.maps.map.StandardMarker(
[-18.5, 180],
{ text: 2 }
),
thirdMarker = new nokia.maps.map.StandardMarker(
[-18.5, -178.333],
{ text: 3 }
);
// Add the newly created landmakers per city to its container
myContainer.objects.addAll([firstMarker, secondMarker, thirdMarker]);
/* Now we calculate the bounding boxes for every container.
* A bounding box represents a rectangular area in the geographic coordinate system.
*/
var myBoundingBox = myContainer.getBoundingBox();
zoom = 1;
map.setCenter(myBoundingBox.getCenter());
map.setZoomLevel(zoom);
while (map.getViewBounds().getWidth() > myBoundingBox.getWidth()) {
zoom++;
map.setZoomLevel(zoom);
}
zoom--
map.setZoomLevel(zoom--);
</script>
</body>
</html>
I need a video player for responsive layout website which is developed by using bootstrap. That means when i do re-size the screen or viewing the page in different size screens the player should be automatically fit to the screen.
I had tried with jwplayer and flowplayer but it didn't work.
http://www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/24635/responsive-video-internet-explorer-100-widthheight
note: The player should be able to play the youtube videos....
Is there anyway to make jwplayer/flowplayer responsive?
Better version of Luka's answer:
$(window).resize(function() {
var $width = $("#holder").width();
var $height = $width/1.5;
jwplayer().resize($width,$height);
});
User the resize function from the JW Player API:
http://www.longtailvideo.com/support/jw-player/29411/resizing-the-player
Another solution:
Check their Responsive Design Support documentation: http://www.longtailvideo.com/support/jw-player/32427/responsive-design-support
<div id="myElement"></div>
<script>
jwplayer("myElement").setup({
file: "/uploads/myVideo.mp4",
image: "/uploads/myPoster.jpg",
width: "100%",
aspectratio: "12:5" // Set your image ratio here
});
</script>
you can change by simple css style
/* Video small screen */
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I am using jQuery for resizing. #holder is your div where movie is positioned (#videocontainer).
Structure:
<div id="holder">
<div id="videocontainer"></div>
</div>
It takes #holder size and give it to #videocontainer. It works in ie9, ie8, ...
$(window).resize(function() {
var $width = $("#holder").width();
var $height = $width/1.5;
jwplayer("videocontainer").setup({
flashplayer: "jwplayer/player.swf",
file: "###.mp4",
width: $width,
height: $height,
image: "###.jpg"
});
});
Hope it helps!
Try FitVids: http://fitvidsjs.com/
If you want to make jwPlayer responsive, try adding this to your CSS file:
#video-jwplayer_wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 format */
padding-top: 30px;
height: 0;
overflow: hidden;
}
#video-jwplayer_wrapper iframe, #video-jwplayer_wrapper object, #video-jwplayer_wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
source: http://webdesignerwall.com/tutorials/css-elastic-videos
When calling jwplayer, you might also need to set width to 100%:
jwplayer("myElement").setup({
width: 100%
});
The easiest way is to use javascript
function sizing() {
$('#player').css('width', $('#container').outerWidth());
$('#player').css('height',$('#player').outerWidth() / 1.33);
}
$(document).ready(sizing);
$(window).resize(sizing);
Don't forget to include jquery library and to change the aspect ration (1.33 is for 4:3, 1,77 is for 16:9).
This work well for me
JW Player goes here
<script type="text/javascript">
if($( window ).width() <= 400){
pl_width = 300;
pl_heith = 150;
}else if($( window ).width() <= 600){
pl_width = 500;
pl_heith = 250;
}else{
pl_width = 700;
pl_heith = 350;
}
//alert(pl_width);
jwplayer("video_top").setup({
flashplayer: "<?php echo $player_path; ?>",
file: "<?php echo $your_file; ?>",
controlbar: "bottom",
height:pl_heith,
width:pl_width
});
You can just use YouTube videos in your site and use the FitVid.Js plugin to make it responsive.