Detect the window size for show thing and not show thing, Firefox ok but chrome does not,why?
i use jQuery to detect the size of the browser window, if it's smaller than a certain size, the canvas' content won't be shown, also an alert for extending your browser window will appear.
the html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="dirtyhand9.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/processing" data-processing-target="mycanvas">
void setup(){.........
In the canvas, i use processing.js combined with jQuery. Only when the size larger than that will the draw function work
void setup(){
size( $(window).width()-20,$(window).height()-20 );}
void draw(){
background(255);
if(width>= 1024 && height>=768 ){......
and then i write dirtyhand9.js for the alert :
$(document).ready(function(){
$("#alert").hide();
if( $(window).width()-20<1024 || $(window).height()-20<768){
$("#alert").show();};
And now is the problem:
it works just the way i want in Firefox; However in Chrome, it doesn't.
Every first time i open it with Chrome, it always shows the alert and nothing in canvas no matter what size the windows is. But it works fine after i refresh the page in Chrome.
I guess the cause of this problem lies in Chrome's jQuery detecting??
it detects the size after document is ready??
But before it is ready, the processing.js fails to get the width and height, so it shows nothing. and why the alert shown?? Have no idea.
So does anyone know the cause? Or the possible solution????
Many thanks.
