Javascript conditional with useragent variables - javascript

I need help writing a conditional with javascript for 2 videos. I have searched around but I guess I am confused about how to set my variables. I have 1 video (flash iframe) that I'd like to show on a desktop browser's site but I would like a different video (non-flash) to show when viewing the site on a mobile device.
These are the two videos:
<html>
<div id="desktop_video">
<iframe src="url-here" height="650" width="600" frameborder="no" scrolling="no" marginwidth="0px" marginheight="0px"></iframe>
</div>
<div id="mobile_video">
<script type="text/javascript" src="http://url-here"></script>
</div>
</html>

Say, you're trying to show the desktop at a minimum browser width of 480px, this would be your CSS:
#mobile_video {
display: none;
}
#desktop_video {
display: block;
}
#media only screen and (max-width: 480px) {
#desktop_video { display: none; }
#mobile_video { display: block; }
}
Though the desktop should already be block, I added to code to be clear it's necessary. This is just a simple way to do this.

You could use the Navigator.useragent to detect client's browser. (There are a lot of resources out there if you search for it.)
I took the following line from javascriptkit which will check if the user is using a mobile device...
//returns true if user is using one of the following mobile browsers
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)
You can display the mobile video (non-flash) if ismobile returns true. Or else you can just display the iframe video.
Hope this helps you to get a start. As I mentioned, there are lots of resources out there to help you with this solution, even on SO...
How to detect a mobile device with javascript

Related

Making an iframe readonly

In my html I have an Iframe that is a link to a google doc. Currently the user will be able to edit the document. However, I do not want the user to be able to change the document. How would I make the iframe readonly?
Edit
If you are using 'file > publish to web...' in Google Docs, people won't be able to edit your document anyway. Docs Help (see 'How published files look when you share them').
Here's one I just published: try me.
Original Answer
I imagine the only way to fully ensure it's not editable is through some settings on Google Docs itself, any sort of block with JavaScript or CSS has the possibility of being disabled. Also, JavaScript will not be able to control anything inside the iframe, due to it being from a different origin.
With that said, the simplest way is probably with CSS, pointer-events: none; will disable mouse events on the iframe, disabling the user to select it. MDN Docs
iframe { pointer-events: none; }
or as an inline style...
<iframe style='pointer-events: none;'></iframe>
You could use css to cover the iframe with another element/pseudo-element to prevent interaction.
Fiddle
<div class="iframe-wrap">
<iframe src="http://www.yahoo.com" width="300" height="200">
</iframe
</div>
.iframe-wrap {
position: relative;
}
.iframe-wrap::after {
content: "";
display:block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
There isn't really any way to do this. The browser doesn't recognize the concept of "editing" content in a frame -- all it knows is that it's displaying a page.
If you want to prevent the user from modifying a Google Docs document, use the permissions features provided by Google Docs to prevent editing. The fact that it's in a frame doesn't change anything!

How to not request one specific google adsense if user on mobile device

I have 2 adsense block on page now I use css media query check screen size hide one for width < n one for width > n , now it works fine but the ad still load means been request, is it possible someway can detect if user on mobile device then not load specific block.
. AdMobile {
display:none;
}
#media screen and (max-width: 510px) {
. AdDesktop {
display: none;
}
. AdMobile {
display: block;
}
}
<div class="AdDesktop">
<!-- adsense -->
</div>
<div class="AdMobile">
<!-- adsense -->
</div>
http://detectmobilebrowsers.com/
Check this website out, there you can find ready to use scripts to detect if the user is on mobile or desktop, that way you can tell if he is on mobile and hide the Adsense block.
Or you also can detect when the user is on mobile, and that way show a "responsive ad id" from the Google Adsense, which is also recommended for mobile.

PDF Hides Jquery Model Window in Safari 5.1.7

Actually I want to show the modal window over pdf and its working well in IE, Chrome & Mozilla Firefox but its not working on Safari 5.1.7
So Will any 1 please help me to find some solution on this ? I am getting this issue on Windows Operating System i.e XP, Windows 8 & Windows 7.
Here is my JS Fiddle link : http://jsfiddle.net/xdrc1nou/
Below is my code as well
HTML
<div id="divHover">try me</div>
<div id="divHoverChild">hello</div>
<iframe id="ifBG" src="about:blank"></iframe>
<iframe id="ifPDF" src="http://bitcoin.org/bitcoin.pdf"></iframe>
Javascript
$().ready(function () {
var $child = $("#divHoverChild");
var $ifBG = $("#ifBG");
$("#divHover").mouseover(function () {
$child.slideDown();
$ifBG.slideDown();
})
$child.mouseout(function () {
$child.slideUp();
$ifBG.slideUp();
});
});
It will be quite difficult to find someone with OSX Lion running Safari 5.1 to have an answer for your question (that's almost 3 versions back, with Yosemite just around the corner), and a world-wide usage of less than 0.5% of the browser.
With that in mind this answer gives you some pointers, it has not been tested by me.
In general when embedded iframes don't play nicely with the overlays on a page a common solution is applying these styles to the problematic iframes:
<iframe id="ifPDF" src="http://bitcoin.org/bitcoin.pdf" style="position: relative; z-index: -1;></iframe>
See if this does it.
A less elegant solution would be to hide the problematic iframes when overlays are triggered to be shown, and therefore avoid the overlap (since the overlapping element is gone).
Just for the record in Safari 7 it works perfectly, just like in the other modern browsers you mentioned to be functioning OK.
What about using object and ember:
<object src="http://yoursite.com/the.pdf" width="700px" height="700px" style="position: relative; z-index: -1;">
<embed src="http://yoursite.com/the.pdf" style="position: relative; z-index: -1;">
</embed>
</object>
I can't test too. I am running Linux.

Make Firefox's native full screen look like Chrome's

For those of you who don't know, native full screen is where your browser takes up your entire computer screen, like in this example. I have made a full screen JavaScript application that runs, but by default Chrome and Firefox open into native full screen differently.
Firefox stretches the object so that it takes up the entire screen(height 100%, width 100%) while Chrome puts the object in front of a black background with its natural proportions.
I would like Firefox to act like the full screen on Chrome. I feel that this is solved with a simple CSS change but I don't know CSS all that well.
This is what I've tried so far:
<!DOCTYPE html>
<html>
<head>
<style>
.fsElement:-webkit-full-screen {
//this is the CSS for Chrome's fullscreen page
}
.fsElement:-moz-full-screen {
//this is the CSS for Firefox's fullscreen page
}
</style>
</head>
<body>
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="fsElement" height="375" width="500" src="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" id="kittenPic"></img>
<br />
<button onclick="goFullscreen('kittenPic'); return false">Click Me To Go Fullscreen!</button>
</body>
</html>
Thanks in advance!
This is from the MDN: Using full screen mode
Presentation differences
It's worth noting a key difference here between the Gecko and WebKit
implementations at this time: Gecko automatically adds CSS rules to
the element to stretch it to fill the screen: "width: 100%; height:
100%". WebKit doesn't do this; instead, it centers the fullscreen
element at the same size in a screen that's otherwise black. To get
the same fullscreen behavior in WebKit, you need to add your own
"width: 100%; height: 100%;" CSS rules to the element yourself:
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}
On the other hand, if you're trying to emulate WebKit's behavior on
Gecko, you need to place the element you want to present inside
another element, which you'll make fullscreen instead, and use CSS
rules to adjust the inner element to match the appearance you want.
A working example on jsfiddle (edit). Most of the CSS is for centering the element, adapted from this SO answer, you can shed out most of the CSS and two layers of div if you don't need centering.

Facebook Like button causing horizontal scrolling on mobile device

I have a Facebook Like button implementation which is rendering fine in all browsers desktop and mobile. But the issues lies on low-res devices with resolution of 240x320. the Like button is causing the device to zoom into the page thus rendering horizontal scrolling.
The buttons is rendering fine on devices with width >= 320px like the iPhone etc., but older android devices with width less than that are facing issues.
The way I see it. The page loads fine, then makes a server call to Facebook and then returns with some parameter that breaks it all up. It is generating an <iframe>. I am trying to put width and overflow CSS parameters but none seem to work. I am initializing the Like button like this:
<div id="fb-root">
<!--Facebook begins-->
<div class="fb-like" data-href="<%=RedirectURL%>" data-send="false" data-layout="button_count" width="80" data-show-faces="false"></div>
<!-- ends -->
</div>
<script>
window.fbAsyncInit = function () {
FB.init({ appId: '328982000461228', status: true, cookie: true,
xfbml: true
});
FB.Event.subscribe('edge.create', function (response) {
ntptEventTag('ev=Social&Action=Method Shared');
});
};
</script>
<script type="text/javascript">
Put your like button into a div and apply the overflow hidden style on that div.
UDATE: Try also to set overflow hidden on the html and body tag (makes a big difference on fb page tabs).
A code snippet you also might find useful is this:
<meta name="viewport" content="width=320,user-scalable=false" />
<style type="text/css">
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-user-modify: none;
-webkit-highlight: none;
-webkit-user-select: none;
}
</style>
None of the above solutions helped. Finally got the answer. Although it is not the best solution, but it gets the job done.
I applied this to the parent container of the fb like button:
.socialIcons { display: inline-block; width: 200%; /* for low res androids */ overflow: hidden; margin: 5px 0 5px 10px; }
Facebook Like Button automatically generates an iframe on your page. Try set the width if the iframe with css or dynamically with javascript. The iframe has class="fb_ltr".
Detect a low resolution device, and use other like button layout which suits it better.
That one is :
data-layout="box_count" ,
it would take slightly more vertical space though, which is fine.
button_count
box_count
Did u check other regular sites on the same low-res browser? check twitter.com, if the scrollbar still appears its a problem in the browser (i ran into something like that), the definition of the browser full screen is always larger than the available width, i eventually had to define a "div" within the body with a specific width (320px) and dump the content inside of it, in addition to making the body overflow: hidden
On the outer container do this:
.fb-like-wrapper {
width:300px!important;
overflow-x:hidden!important;
margin: 5px 0 5px 10px;
display:block!important;
}
This was the easiest thing for me, works on iOS Safari if you use both:
html, body {overflow-x: hidden;}

Categories

Resources