onSize Event.

[JackByrne]

Hello,

I am trying to build a responsive layout using jQuery that will react to screen size and then adjust itself accordingly. I have designed a keypad for entering a password which I would like to re-size.

The problem I am facing is that the re-size works perfectly within Alpha Anywhere in the Live Preview, but when I publish the files to my A5Webroot folder to view them in browser, it suddenly doesn't work.

Here is how it is working within Alpha:
2014-11-21_11h05_53.png
2014-11-21_11h06_36.png
2014-11-21_11h07_11.png

As you can see they are re-sizing depending on the screen size normally (iPhone 5, Galaxy S5 and an iPad). However this is what happens when I publish my file and view it in browser:

2014-11-21_11h15_28.png

This is the code I am currently using:

afterPrepare client side event:

var id = {dialog.object}.panelGetId('LOGIN','body');
var ele = $(id);
var var_height = '';
if(ele) var_height =  ele.offsetHeight;

$('DLG1.V.R1.PINFRAME').style.height = var_height + 'px';var id = {dialog.object}.panelGetId('LOGIN','body');
var ele = $(id);
var var_height = '';
if(ele) var_height =  ele.offsetHeight;
$('DLG1.V.R1.PINFRAME').style.height = var_height + 'px';


var ele = $(id);
var var_height = '';
if(ele) var_height =  ele.offsetHeight;
$('DLG1.V.R1.BUTTON_22').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_23').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_24').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_25').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_26').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_27').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_28').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_29').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_30').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_31').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_32').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_34').style.height = ((var_height - 32 - 32) * 2 / 10) + 'px';

And then in the onSize event for the panel card:

$('DLG1.V.R1.PINFRAME').style.height = this.height + 'px';


$('DLG1.V.R1.BUTTON_22').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_23').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_24').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_25').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_26').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_27').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_28').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_29').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_30').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_31').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_32').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';
$('DLG1.V.R1.BUTTON_34').style.height = ((this.height - 32 - 32) * 2 / 10) + 'px';

Any suggestions into why this might be happening would be appreciated.


Thanks in advance.

[Michael1954]

Re: onSize Event.

I have had this a number of times when Alpha does not like my Javascript.

Have you taken care of the $ in jQuery? Alpha owns the $.


Michael

[JackByrne]

Re: onSize Event.

I have fixed this, just forgot to update how I had done it.

Instead of using DLG1 I should have been using {dialog.ComponentName}