I am working on responsive website. I have code that loads the right image size for the screen size.
The problem I am facing is that I am using Retina images for some of the mobile devices. Meaning that the images downloaded by the client have a bigger size. Now Google pagespeed is now complaining saying that I should optimize my images. But the problem is if I reduce the size of the images I will loose the quality for the retina display.
Doesn't Google Pagespeed support Retina images? Is there a way to tell Google Pagespeed that those are retina images?
Or is there a best practice from Google for Retina images?
PageSpeed now supports retina images if you use the srcset attribute:
<img style="height: 100px"
src="rex_1x.png"
srcset="rex_1x.png 1x, rex_2x.png 2x"
alt="My dog Rex"/>
In the above example, rex_1x.png would be a 100 x 100px image and rex_2x.png a 200 x 200px image.
Using this code, PageSpeed won't complain about the image.
I to have found Google PageSpeed to be a little flaky at the best of times. I'll test something that comes out 88/100 and then 5 minutes later it's 95/100 and nothing changed.
I think the best practice when it comes to Google PageSpeed is make sure you:
1) Have a perfectly engineered header which touches on all the little things Google likes to see.
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicons -->
<link rel="shortcut icon" href="/img/icons/favicon.ico" type="image/x-icon">
<link rel="icon" href="/img/icons/favicon.ico" type="image/x-icon">
<!-- App Screen / Icons -->
<!-- Specifying a Webpage Icon for Web Clip
Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
<link rel="apple-touch-icon" href="/img/icons/sptouch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/icons/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/icons/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/icons/touch-icon-ipad-retina.png">
<!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Startup image for web apps -->
<link rel="apple-touch-startup-image" href="/img/icons/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<link rel="apple-touch-startup-image" href="/img/icons/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="/img/icons/iphone.png" media="screen and (max-device-width: 320px)">
<!--
HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries.
WARNING: Respond.js doesn't work if you view the page via file://
-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
2) Base64 encode any static images you can directly into their img tags so you can still use scaling CSS code on them and never have to deal with issues like missing or incorrectly set expires headers. (Which is an issues when your also running Google mod_pagespeed on your Apache server.)
3) Compress the heck out of all your other images regardless of their type before uploading.
4) Use an onload JavaScript function at the bottom of your page to load all CSS and JS files like this.
window.onload = function(){
function loadjscssfile(filename, filetype) {
if(filetype == "js") {
var cssNode = document.createElement('script');
cssNode.setAttribute("type", "text/javascript");
cssNode.setAttribute("src", filename);
} else if(filetype == "css") {
var cssNode = document.createElement("link");
cssNode.setAttribute("rel", "stylesheet");
cssNode.setAttribute("type", "text/css");
cssNode.setAttribute("href", filename);
}
if(typeof cssNode != "undefined") {
var h = document.getElementsByTagName("head")[0];
h.parentNode.insertBefore(cssNode, h);
}
}
loadjscssfile("//fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese", "css");
loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", "css");
loadjscssfile("/css/style.css", "css");
loadjscssfile("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");
loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "js");
};
Beyond that test using Yslow from Yahoo and don't sweat it. You will pull your hair out for days trying to get 100/100 and these tools are not perfect. Just do your best and take what you learn with you onto the next project.
Related
Background
Following this tutorial from Jan 2016, ( https://dhtmlx.com/blog/using-dhtmlxgantt-with-laravel/ ) I began experimenting with DHTMLXGantt (v4.1) and Laravel (v5.4) and ran into some troubles getting the sample data from a mysql/mariadb database to display in the gantt chart. The initial troubles had to do with the DHTMLX connector not staying current with some Laravel changes. For the sake of others who may read this and are struggling with the same issues, the two basic problems I already solved were:
(1) I was referred to this [updated] connector which was compatible with Laravel's recent versions ( https://github.com/mperednya/connector-php/tree/modern ). And,
(2) I specified a date range that matched the dates of the sample data (from 2013), such as...
gantt.config.start_date = new Date(2013, 04, 01);
gantt.config.end_date = new Date(2013, 04, 30);
At this point I was able to successfully use Laravel as a backend server for the DHTMLXGantt chart (including read-write with the sample data).
Problem
The problem I am having now is trying to move from the simplistic sample, to something slightly more complex. Specifically, when I employ Laravel's extended templating I get the gantt chart painted on screen, but no project/task data displays in the chart.
To explain this a little more specifically, a simple Laravel view with the whole page contained within it works as expected. For example, this blade file (gantt.blade.php) works.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="codebase/dhtmlxgantt.js"></script>
<link rel="stylesheet" href="codebase/dhtmlxgantt.css">
<link rel="stylesheet" href="codebase/skins/dhtmlxgantt_skyblue.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="container">
<h1>Placeholder Header</h1>
<div id="gantt_here" style='width:100%; height:500px;'></div>
<script type="text/javascript">
gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
gantt.config.step = 1;
gantt.config.scale_unit= "week";
gantt.config.autosize = "xy";
gantt.config.fit_tasks = true;
gantt.config.columns = [
{name:"text", label:"Task name", width:"*", tree:true },
{name:"start_date", label:"Start time", align: "center" },
{name:"duration", label:"Duration", align: "center" },
{name:"add", label:"", width:44 }
];
gantt.init("gantt_here");
gantt.load("./gantt_data", "xml");
var dp = new gantt.dataProcessor("./gantt_data");
dp.init(gantt);
</script>
<h1>Placeholder Footer</h1>
</div>
</body>
But if I try using an extended app layout with the intention of building out a standard look & feel across all pages, the Gantt chart appears and is formated as I expect, but no data appears within the gantt chart. Here is top-level layout file (app.blade.php)
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="codebase/dhtmlxgantt.css">
<link rel="stylesheet" href="codebase/skins/dhtmlxgantt_skyblue.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
<script src="codebase/dhtmlxgantt.js"></script>
</head>
<body>
<div id="app">
<!-- menus and other bootstrap styling removed for brevity -->
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
And here's the "content" view (index.blade.php)...
#extends('layouts.app')
#section('content')
<div id="gantt_here" style='width:100%; height:500px;'></div>
<script type="text/javascript">
gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
gantt.config.step = 1;
gantt.config.scale_unit= "week";
gantt.config.autosize = "xy";
gantt.config.fit_tasks = true;
gantt.config.columns = [
{name:"text", label:"Task name", width:"*", tree:true },
{name:"start_date", label:"Start time", align: "center" },
{name:"duration", label:"Duration", align: "center" },
{name:"add", label:"", width:44 }
];
gantt.init("gantt_here");
gantt.load("./gantt_data", "xml");
var dp = new gantt.dataProcessor("./gantt_data");
dp.init(gantt);
</script>
</div>
#endsection
Other things I've tried:
Using Chrome developer tools, I can see that the xml data was properly delivered to the browser in both examples. This made me think maybe it is a timing problem of some sort. So I put a couple links on the page just to test clearing the chart and reloading it. But still no change.
<a onclick="gantt.clearAll()" href="javascript:void(0);">Clear</a>
<a onclick="gantt.load('./gantt_data', 'xml')" href="javascript:void(0);">Refresh</a>
I also tried moving the div block "gantt_here" to various other places above and below Laravel's template directives. It fails in all cases, except when this div block is outside (either above or below) the "app" div tag in "app.blade.php" which, of course, defeats the purpose I am trying to achieve.
My goal is to use this chart within Laravel's extended templating capabilities. But I can't figure out what's wrong. Any ideas?
After further troubleshooting, I discovered the problem. It turns out that in app.blade.php, I was loading the app.js at the bottom of the body tag. When I moved this up to the HTML header area, the data began to display properly.
I have the unfortunate task of making Bourbon Neat work with ie8. Thoughtbot's docs say you use Selectivizr for this. I followed Selectivizr's instructions and I see nothing different when testing in ie8. I also don't understand what if any fallback css is required. Any ideas or solutions? Most appreciated!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="">
<!-- FONTS -->
<!--Typekit - Adrianna Extended Demibold-->
<script type="text/javascript" src="//use.typekit.net/sjw4zgk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- AUTO RELOAD FOR HAMMER -->
<!-- Hammer reload -->
<script>
setInterval(function(){
try {
if(typeof ws != 'undefined' && ws.readyState == 1){return true;}
ws = new WebSocket('ws://'+(location.host || 'localhost').split(':')[0]+':35353')
ws.onopen = function(){ws.onclose = function(){document.location.reload()}}
ws.onmessage = function(){
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length;i++) {
var link = links[i];
if (link.rel === 'stylesheet' && !link.href.match(/typekit/)) {
href = link.href.replace(/((&|\?)hammer=)[^&]+/,'');
link.href = href + (href.indexOf('?')>=0?'&':'?') + 'hammer='+(new Date().valueOf());
}
}
}
}catch(e){}
}, 1000)
</script>
<!-- /Hammer reload -->
<!-- CSS/SCSS -->
<link rel='stylesheet' href='css/ostrich-sans.css'>
<link rel='stylesheet' href='css/font-awesome.css'>
<link rel='stylesheet' href='css/normalize.css'>
<link rel='stylesheet' href='css/responsive-nav.css'>
<link rel='stylesheet' href='css/style.css'>
<!-- IOS LINK STYLES -->
<style type="text/css">
/*.applelinks a {color:#c4d52d; display:inline-block; padding: 10px 0;}*/
/*Disable touch-highlight
-webkit-tap-highlight-color: rgba(0,0,0,0); */
</style>
<!-- JS MODERNIZR -->
<script src='js/modernizr.custom.87213.js'></script>
<link href="favicon.ico" rel="shortcut icon">
<link href="apple-touch-icon.png" rel="apple-touch-icon">
<title>Title</title>
<!-- ZEPTO FALLBACK TO JQUERY -->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/zepto.min' : 'js/jquery.min') +
'.js><\/script>')
</script>
<!--[if lte IE 8]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav class="nav-collapse">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="sec-one">
<aside>Aside</aside>
<article>Article</article>
</section>
<section class="sec-two">
<aside>Aside</aside>
<article>Article</article>
</section>
<section class="sec-three">
<aside>Aside</aside>
<article>Article</article>
<p>Content copy</p>
</section>
<script src='js/responsive-nav.js'></script>
<script src='js/app.js'></script>
<!-- INITIATE RESONSIVE-NAV -->
<script>
var navigation = responsiveNav(".nav-collapse", {
label: '<i class=\"icon-reorder icon-2x\"></i>'
});
</script>
</body>
</html>
selectivizr.js is dependent on jquery (or similar libraries). Make sure that you're loading jquery BEFORE selectivizr...
<!--[if lte IE 8]>
**<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>**
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
Have you tried including HTML5 shiv?
Without that (or similar), IE8 won't be able to style elements that are new to HTML5 (eg. <section>, <nav>, etc). For me, selectivizr.js does indeed allow Neat to work with IE8, but if you're using HTML5 elements then even with selectivizr Neat won't be able to style them in IE8 without the HTML5 shiv. (nb. that's not actually a problem with Neat per se - it's a more general problem that stems from IE8 being a pre-HTML5 browser).
Effectively, selectivizr.js fixes the problems with selectors that IE8 doesn't recognise, while HTML5 shiv fixes the problems with unrecognised elements: if you're using HTML5 elements then in order to get everything working smoothly, you'll probably need both.
I am trying to get the size of my image in IE9. I did it with success (tried on jpg). When I try loading an image whose width is lower than the height, there is no problem at all. But when I try to upload an image with a width higher than the height, I see that the lines that output "vh:", "vw:" return zero.
Why is there a problem when trying to load an image (by my code) with width > height?
Thanks.
Here is my code (Works for IE9 - That's what I want to check out).
<!doctype html>
<html>
<head>
<!-- <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
var v=new Image();
if (navigator.appName === "Microsoft Internet Explorer") {
return function () {
alert("file." + document.getElementById("id_filepic").value);
$("#id_image").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)");
//$("#id_image").attr("src", document.getElementById("id_filepic").value);
//v.src = document.getElementById("id_filepic").value;
v.src = $("#id_filepic").val();
alert("vw:" + v.width);
alert("vh:" + v.height);
$("#id_image").width(v.width);
$("#id_image").height(v.height);
document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("id_filepic").value;
alert("w final:" + $("#id_image").width());
alert("h final:" + $("#id_image").height());
}
}
})();
</script>
<style type="text/css"></style>
</head>
<body>
<form name="uploadForm">
<p><input id="id_filepic" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
</form>
<image id="id_image" src="" onmousedown="return false"></image>
</body>
Consider this issue as closed, since I found solution on: The event after loading image on IE9
Thanks, anyway :)
IE is a mystery to me. My web app is working on Safari, Firefox, Chrome, even iPhones and iPads, but when it comes to IE, I simply can't comprehend how hard it is to comply to the given standards. Anyway enough ranting.
My Twitter bootstrap buttons are completely ignored in IE8. Absolutely nothing happens when I click on any button. I couldnt find anything on google, has anyone come across this?
Many Thanks,
#Kave You uploaded only plain html to jsfiddle - which includes links to js which doesn't exists (so its kind of hard to debug when js is not attached)..
Try using a href instead of so many buttons.. twitter bootsrap supports styling of links to look like buttons, example is at first page of twitter bootstrap like this: (source copied & bit of modified):
<a class="btn btn-success btn-large" href="http://twitter.github.com/bootstrap/base-css.html">Example link with button styles</a>
Edit: Alternatively, full example with twitter bootstrap (modified from demo templates - link with button styles inside a hero unit) - copy & paste to file, save as testing.html and open with browser - enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="http://getbootstrap.com/2.3.2/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-success btn-large" onclick="alert('its working :)')">Learn more »</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
IF still not working, make sure when you restart IE that you click "Allow blocked content" if pop-up for asking it is shown.
Allow blocked content referes to javascript content,the buttons are purelly CSS code,the problem is that IE 6....8 don't have a very good support for CSS3.
If you look on the getbootstrao.com website you dont see them using their own buttons :))
the best solution is create buttons using simple CSS,if someone using IE is browsing your website they might not see the border-radius effect but they will find actual square but working buttons.
I had the same problem and solved it using this jQuery/js:
<a href="http://www.example.com">
<button class="btn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Button text</button>
</a>
<!--[if lt IE 9]>
<script>
$(".btn").click(function() {
var t = $(this).parent();
window.location.href = t.attr("href");
});
</script>
<!--[if lt IE 9]>
I created a basic project using phonegap. and added this bit of html code to my index.hmtl
Clicking on the youtube link launches Youtube mobile site in Phonegap (once it's launched, there is no way to go back to my phonegap view)
How do I enable HREF links to open native youtube app on iPhone/iPad?
The href links are compliant with Apple specs for Youtube Links as in
https://developer.apple.com/library/safari/#featuredarticles/iPhoneURLScheme_Reference/Articles/YouTubeLinks.html
My Index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-
scalable=no" />
<meta http-equiv="Content-type" content="text/html;
charset=utf-8">
<title>MyTube</title>
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width:
1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width:
480px)" href="iphone.css" type="text/css" />
-->
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put
json2.js from http://www.JSON.org/json2.js into your www directory and
include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.
0.9.4.min.js"></script>
<script type="text/javascript" charset="utf-8">
// If you want to prevent dragging, uncomment this section
/*
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
*/
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is
ready to roll */
function onDeviceReady()
{
// do your thing!
}
</script>
</head>
<body onload="onBodyLoad()">
<h1> My You tube Links </h1>
<a href="http://www.youtube.com/v/NkTrG-gpIzE"> SOURCE-CODE
Trailer </a>
</body>
</html>
I tried and got the same result. Which is weird, because I also assumed links to YT would trigger the native YouTube app. The one thing I found is that an embed will do what you're after, but haven't come across any other way.
<object width="300" height="199">
<param name="movie" value="http://www.youtube.com/v/NkTrG-gpIzE?fs=1&hl=en_US&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/NkTrG-gpIzE?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="199"></embed>
</object>
My only other suggestion was to have you post on the PhoneGap Google Group, but I see that you've just done that a few minutes ago. If I find anything else I'll try to share it, but the embed approach has been the only one that's worked so far.