Question

I need to get the window height and width of the browser using ATK4, the lightweight php framework with jquery

The javascript to get this would be

 $(window).height();
 $(window).width();

As agiletoolkit integrates with jquery, i think it should be possible to get it with something like

         $height=$p->js()->univ()->_selectorWindow()->height();

but this doesnt work, instead when i pass the $height variable to be used, in the HTML source i get the following .

 'height':$(window).univ().height(),'width':$(window).univ().width()

and it doesnt display the element at all

I want to be able to call jqplot to set the width of a graph to the full width of the users browser on a particular page. To do this, i need to pass a parameter which is width:NNN where NNN is the number of pixels wide. As far as i know, jqplot doesnt support a parameter as a percentage so i cant say width:100%. Also, if i set a div on the page and add the graph, it also ignores the size of the div and creates a small graph 400 x 300 pixels only.

I created a plugin to use jqplot from atk4 but this is one of the issues I still need to resolve. I can pass a height and width as parameters without issue but i want it to default to the full screen size if no parameters are specified.

Can anyone suggest the right syntax for getting these values ? TIA.

Answer 1

what you should understand is that “$p->js()->_selectorWindow()->height();” will actually be translated to “$(window).height();” — but you can get width of window ONLY at client side.

so, if you want to get height of the window in your code, you can do that only by using ajax request, where actual heigh is sent back from the frontend.

please, rephrase your question so that it’s clear what you need height for so I can suggest best way of doing that.

---

example of how to get backend and frontend interlinked:

paste this in page/test.php and open up http://example/test to see in action

class page_test extends Page {
    function init(){
        parent::init();

        $b=$this->add("Button");
        $b->set("Get Width");
        $b->js("click")->univ()->ajaxec($this->api->getDestinationURL(), array("width" => $this->js(true)->_selectorWindow()->width()));
        $v=$this->add("View_HtmlElement")->setElement("div")->set("Click button to get width of the window");
        if ($w = $_POST["width"]){
            $v->js(null, $v->js()->html("Width: " . $w))->univ()->alert("Width: " . $w)->execute();
        }
    }
}