jsf - Getting the co-ordinates of a component -
how co-ordinates of jsf component after onclick event ? need place overlay below icon clicked.
is there such in-built facility provided jsf rather manually writing javascript function ?
in addition balusc's answer, here example, click on component id=placeholder (maybe link or button) open component (id=menu) directly below triggering component. if mouse moved away triggering component, menu disappear:
<script type="text/javascript"> jquery(document).ready(function() { jquery("#placeholder").click(function(event) { //get position of placeholder element var pos = jquery(this).offset(); var height = jquery(this).height(); //show menu directly below placeholder jquery("#menu").css( { "left": pos.left + "px", "top": (pos.top + height) + "px" } ); jquery("#menu").show(); }); // hide menu on mouseout jquery("#placeholder").mouseout(function(event) { jquery("#menu").hide(); }); }); </script> the component id=menu can div or jsf h:panelgroup or other component. style attribute display: none hide component:
<h:panelgroup style="position: absolute; display: none;" id="menu"> <!-- content here --> </h:panelgroup> make sure jquery id selector gets correct id of component. e.g. if elements inside form id=form1, jquery call has this:
jquery("#form1\\:placeholder").click(function(event) notice double backslash.
Comments
Post a Comment