How to fix: the default size is shown before jQuery detects the width and height, and it won't resize until i refresh it manually

Question

i use processing.js and jQuery and the code below to detect the window size of the browser

  void setup() {
    size( $(window).width(),$(window).height() );

However, the default size is shown before the jQuery successfully detects the width and height, and it won't resize until i refresh the browser manually。

i am thinking about automatic page refresh .

So how can i tell the computer to refresh page after document loaded?

btw, window.innerWidth, window.innerHeight works the same as what i see with jQuery

Many thanks.

Can you try to call your function after document load? May be your function calling before load your javascript. And when you refresh your page, your javascript already loaded in your local machine, that's why it's working may be. — Tarun, Sep 25 '12 at 07:39
@Tarun , i tried to put all the processing script(the code i wrote) into $(document).ready(function(){}, but it does not show anything at all — kikkpunk, Sep 25 '12 at 08:20

score 0 · Answer 1 · answered Sep 25 '12 at 07:36

0

In jQuery it should display resolution as below:

alert($(window).width() + ' X ' + $(window).height());

without refreshing page. And for resize you can use

$(window).resize(function() {
 $('body').text($(window).width() + ' X ' + $(window).height());
});

answered Sep 25 '12 at 07:36

Tarun

1,888
3
18
30

it's just for reference. You can test it in black HTML or send me your code what you exactly want to do so that i can implement it in that. – Tarun Sep 25 '12 at 09:30

score 0 · Accepted Answer · answered Sep 25 '12 at 17:17

0

This, in P5 setup(), have worked for me:

size(window.innerWidth, window.innerHeight);

answered Sep 25 '12 at 17:17

v.k.

2,826
2
20
29

this also need to refresh the browser. buz the size detect work after the size is shown. and once it's shown, it wont refresj itself until i do it manually. – kikkpunk Sep 26 '12 at 02:29

score 0 · Answer 3 · edited May 23 '17 at 12:04

I answered a similar question here:

https://stackoverflow.com/a/12717983/1560583

I hope this helps, I have reposted the answer below:

Here is how I approached this issue using Zerb Foundation 3 responsive web framework, Javascript, jQuery and Processing.js. You can take a look at Living Map Project if you want to dig through the source.

in javascript / jquery:

// handle page resizing
$(window).resize(function() {
var pjs = Processing.getInstanceById('livingmap');
pjs.resizeSketch(document.getElementById('div_p5canvas').offsetWidth,  document.getElementById('div_p5canvas').offsetHeight);
} );

in your .pde processing js code (note: the calculation was what I felt worked well using zurb's foundation 3, the grid I defined and how that translated as pixels:

void resizeSketch(int w, int h) {
  if (w < 680) {
    size(w, floor(float(w)/680*610) - 30);
    } else size(680, 610 - 30);
}

in your html:

<div class="flex-video widescreen" id="div_p5canvas"
<canvas id="livingmap" data-processing-sources="livingmap_2.pde" style="height:auto; width:auto; focus { outline: 0; }" tabindex="1"></canvas>
</div>

How to fix: the default size is shown before jQuery detects the width and height, and it won't resize until i refresh it manually

3 Answers3