How do I set the proportions of my home page's grids in percentage?

[marieall]

Hi Katya,

But then when I run this code on Load, I'm back with the previous problem, where my menu doesn't fit the whole height of the page...

[Kateryna Grynko]

Hi Marie,

Then let's leave it on Page show, but check if this code is executed only once. For example:preif (localStorage.getItem("resized") !== "true"){
var screenH = $("[data-role=page]").eq(0).height();
var ch = screenH / 480;
$("img", $.mobile.activePage).each(function(e){
var $this = $(this), h = $this.height();
$this.height(h*ch);
});
localStorage.setItem("resized", "true");
}/pre

[marieall]

Katya,

That's what I thought, but since I don't know JS I was not sure how to proceed...
One question though: no need to put an "else" after the "if" ?

[marieall]

I tried your code with the if, on page show, and it is not working...

[Kateryna Grynko]

Hi Marie,

No, you don't need 'else'. What exactly doesn't work? What is the result?

[marieall]

The content is not resizing even on first page show (both on device Nexus 7 and on browser) to the height of the screen, like on the printscreen from 7 days ago. It is in fact the same result than when I tried earlier to put the JS code on page load.

So for the moment the closest I have been to a good result was with the following code, but the result is correct only on first page showing, when I come back to the page a 2nd, then a 3rd time (etc) it is stretched, more and more each time.

var screenH = $("[data-role=page]").eq(0).height();
var ch = screenH / 480;
$("img", $.mobile.activePage).each(function(e){
var $this = $(this), h = $this.height();
$this.height(h*ch);
});

[marieall]

Any idea why the code with the if, on page show, is not working?
If I take the "if" off, my page is correctly working (but just on the first time it is showing).

[Maryna Brodina]

Hello! Could you try this code on page Show event:
prevar images = [{"name": "mobileimage_184", "height": "180"},
{"name": "mobileimage_185", "height": "180"},
{"name": "mobileimage_186", "height": "180"},
{"name": "mobileimage_166", "height": "20"},
{"name": "mobileimage_173", "height": "130"},
{"name": "mobileimage_167", "height": "20"},
{"name": "mobileimage_172", "height": "130"}
]
var screenH = $(window).height();
var ch = screenH / 480;
images.forEach(function(img){
Appery(img["name"]).height(img["height"]*ch)
});/pre

[marieall]

It works this time. Thank you!