I've done some research and found numerous posts including this one but they are all old and the answer on that page links to a library that says it no longer works in Firefox or Chrome.
Is there a current, reliable way to detect zooming and text-only zooming in browsers? How can it be handled?
script for zoom
<script type="text/javascript" src="../javascript/swfobject.js"></script>
<script type="text/javascript" src="../javascript/swfZoomDetection.js"></script>
<script type="text/javascript">
swfZoomDetection.init({
'onZoomChange': function(obj){ alert(obj.scale) },
'getInitIfOne': true,
'initCallOnly': false,
'frameRate': 25
});
</script>
text to be zoomed
<body onLoad="loadFunction()">
function loadFunction(){
swfZoomDetection.init({ .... });
}
</body>
Related
I am trying to use HTML 5 Date picker tag in my website. But this tag is not supporting on Mozilla & IE. Can you please share me any hack to work this code in IE and Mozilla.
I want to use only HTML5. i don't want to go for JavaScript.
Date is only supported in Chrome, Opera, Safari and Android Browser 4.4+
http://beta.caniuse.com/#search=date
You can user jQuery date picker in case of Mozilla: Check the browser using $.browser.mozilla but it will not work in jQuery>1.9, so you have to use jQuery Migration as shown below:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>//jQuery migration
<script>
if ($.browser.mozilla)
{
if ($('.datepicker')[0].type != 'date') $('.datepicker').datepicker();
$(function () {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "1900:2015",
dateFormat: "yy-mm-dd",
defaultDate: '1900-01-01'
});
});
}
</script>
Yes DatePicker tag of HTML5 is not supported by Mozilla Firefox. But you can use DatePicker in your website by adding few .js files.
Below is my fiddle using some .js files. this code work properly on Chrome as well as Mozilla.
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Your Selected date Is : <input type="text" id="datepicker"></p>
http://jsfiddle.net/Vq65z/504/
1st, to answer the OP, what the asker is asking to do is impossible. Javascript is required. 2nd, although webshim looks great, it works horribly with bootstrap. For that you'll want to use http://eonasdan.github.io/bootstrap-datetimepicker/
Dont forget doctype like this:
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
Firefox and mozilla does not not supporting Date-HTML5 ! It will support soon.
But it will work smoothly on Google-Chrome, Opera and Safari
Simply use a datepicker polyfill. here is a demo.
<script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//webshim.setOptions('basePath', '/js-webshim/minified/shims/');
//request the features you need:
webshim.polyfill('es5 mediaelement forms');
$(function(){
// use all implemented API-features on DOM-ready
});
</script>
<input type="date" />
I know there is similar problem in the website but I can't find a proper solution for this.
I am using a jquery-ui dialog to display modal form in IE10.
But things are not working when I switched to Browswer Mode: IE8 + Document Mode: IE8 Standard and added the jquery.jqGrid.src.js to the html file (Even though i do not add a jqgrid to the html).
The problem : The dialog is behind its overlay. And that makes user unable to click anything on the dialog.
Below is my simplified code..
<!doctype html>
<html>
<head>
<script language='javascript' src='jquery-1.9.1.js'></script>
<script language='javascript' src='jquery-ui.js'></script>
<script language='javascript' src='jquery.jqGrid.src.js'></script>
<link rel='stylesheet' type='text/css' media='screen' href='themes/base/jquery.ui.all.css' />
<link rel='stylesheet' type='text/css' media='screen' href='ui.jqgrid.css' />
<script>
$(document).ready(function () {
$("#dialog-message").dialog({
modal: true
});
});
</script>
</head>
<body>
<div id='dialog-message'>
Dummy Message
</div>
Dummy Message
</body>
</html>
If I remove this line <script language='javascript' src='jquery.jqGrid.src.js'></script> the dialog shows perfectly. But in my project i need to use both jqGrid and jquery-ui dialog in the same page in IE-8.
I have tried to view the DOM elements using IE10 developer tools (F12) and find that if I include jqGrid js , the overlay div somehow has been moved to the end (the order of dialog div and overlay is swapped) maybe that gives some hints.
There is no problem with IE9, IE10, IE7 settings though.
Please help. Thank you!
Alex
i have followed some tutorials and books to work with html5 forms.I used modernizr to provide a fallback for non supporting browsers. Everything is good. Things are even working in IE6. I am facing problem with jquery datepicker ui. currently input type="date" is supported only by opera(i am using the most latest version of opera).
Though i used modernizr for detecting browser support for input type="date", somehow opera is still loading jquery datepicker. Am i doing anything wrong??... should i include scripts in specific order??...
This is the code i have written followed by screenshot of the problem.
html markup:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>date picker</title>
<link rel="stylesheet" href="jquery-ui/css/redmond/jquery-ui-1.8.20.custom.css"/>
</head>
<body>
<form>
<input type="date" name="date-picker" id="date-picker" value="2010-10-06" />
</form>
<script src="modernizr.js"></script>
<script src="webforms/webforms2.js"></script>
<script src="jquery.js"></script>
<script src="jquery.ui.core.min.js"></script>
<script src="jquery.ui.datepicker.min.js"></script>
<script src="custom.js"></script>
</body>
</html>
jquery code :
$(document).ready(function(){
if(!Modernizr.inputtypes.date){
$('input[type=date]').each(function() {
var $input = $(this);
$input.datepicker({
minDate: $input.attr('min'),
maxDate: $input.attr('max'),
dateFormat: 'yy-mm-dd'
});
});
}
});
screenshot:
http://imageshack.us/photo/my-images/16/operadatepicker.jpg/
source code:media fire download link
Modernizr.inputtypes.date works as expected in Opera 11:
http://jsfiddle.net/feeela/tMUcw/
Maybe the error is, that you haven't included 'Input Types' in you build of Modernizr. GO and download the developer version or build a custom download, but make sure to include 'Input Types'.
http://modernizr.com/download/
When I run the following code in an IETester IE6 window:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DealingTree</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="/js/modernizr.js"> </script>
<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/sssl.js"> </script>
<script type="text/javascript" src="/js/webshims/js-webshim/minified/polyfiller.js"> </script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
$.webshims.polyfill('json-storage');
localStorage.setItem('myKey','myValue');
alert(localStorage.getItem('myKey'));
//]>
</script>
</body>
</html>
I get the following error in a popup dialog:
Line: 15
Char: 7
Error: 'localStorage' is undefined
Code: 0
URL: http://localhost/problem2.html
The code works fine in IE9 running in IE7 mode.
When I change to use Douglas Crockford's JSON2.js and Remy Sharp's storage polyfill --upon which this is supposedly based-- I do not have the problem.
Please help?
I received an email from the author (Alexander Farkas) explaining that the code using the polyfill must be inside a domready event handler, such as the following:
$.webshims.polyfill('json-storage');
$(function(){
localStorage.setItem('myKey','myValue');
alert(localStorage.getItem('myKey'));
});
For more information:
http://afarkas.github.com/webshim/demos/index.html#polyfill-ready
IE6 doesn't support HTML5 features at all. This is not very surprising for an ancient browser that should already be dead and buried (IE6 was released in the year 2001, and the foundations for HTML5 were only laid in 2004). See this answer for more details.
Note that there are wrappers which are capable of emulating such functionality - e.g. this question suggests jStorage for compatibility with IE6+.
Currently I am using Canvas2Image to save the content of my HTML5 canvas. It doesn't appear to work in Google Chrome, however. Any ideas on how to work around the issue are welcome. :)
canvas.toDataURL() appears to work fine in Chrome, so it may be a library issue. The "convert canvas to image" functionality seems to work, though.
use this code
<html>
<head>
<script src="base64.js" type="text/javascript"></script>
<script src="canvas2image.js" type="text/javascript"></script>
</head>
<body>
<input type="button" id="savecanvas" value="Save Image" onclick="savecanvasfile()"/>
</body>
</html>
<script>
function savecanvasfile(){
var canvas = document.getElementById('canvas_name');
Canvas2Image.saveAsPNG(canvas);
}
</script>
download these canvas2image.js and base64.js and save it in local folder for the working of this code.
These will be available in the site
https://web.archive.org/web/20140904002425/http://www.nihilogic.dk/labs/canvas2image/
var canvas = document.getElementById("canvas");
var strDataURI = canvas.toDataURL("image/png;base64");
document.write('<img src="'+strDataURI+'"/>');