Oracle Apex sticky hide and show regions
Recently had a need for sticky hide/show regions in Oracle Apex 4.1.
Here’s how I done it.
Add the jQuery cookie library to your page template
Added the following line to the hide and show region template
1 | $.cookie('#REGION_STATIC_ID#',$('##REGION_STATIC_ID# .hide:first:visible').length);return false; |
So my hide and show region template looks like this:
1 2 3 4 5 6 7 8 9 10 11 | <div class="hide-show-region" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="hide-show-top">
<div class="hide-show-title">
<a href="#" onclick="hideShow('region#REGION_SEQUENCE_ID#','shIMG#REGION_SEQUENCE_ID#','#IMAGE_PREFIX#themes/theme_21/images/right_arrow.png','#IMAGE_PREFIX#themes/theme_21/images/down_arrow.png');$.cookie('#REGION_STATIC_ID#',$('##REGION_STATIC_ID# .hide:first:visible').length);return false;" class="t1HideandShowRegionLink">
<img src="#IMAGE_PREFIX#themes/theme_21/images/right_arrow.png"
id="shIMG#REGION_SEQUENCE_ID#" alt="" />
#TITLE#</a></div>
<div class="hide-show-buttons">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
</div>
<div class="hide" id="region#REGION_SEQUENCE_ID#" style="float:left;">#BODY#</div>
</div> |
Added this on page ready function to the footer of page 0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //Hide and show regions based on cookie $(".hide-show-region").each(function(){ $this=$(this); //get the ID of the hide show region $id=$this.attr("id") //Get any cookie previously set $cookie = $.cookie($id) //If the region was open last time it was clicked then show it if($cookie==1){ //alert("opening "+$id); $child = $(".hide:first",$this); $child.show(); } }); |
Works a treat
Blucel is a software consultancy specialising in Oracle and the Internet. We are currently accepting commisions
Gleb
3 Dec, 2011
Hi! How do you add this to on page ready function to the footer of page 0? Page Zero does not seem to offer a footer to begin with… Thank you!
Mark Caulfield
4 Dec, 2011
Hi.
Sorry, should have been more clear. In my template, I have a region that resides in the footer. But you can add the code anywhere you like. I put all my javascript in the footer region, so the page loads slightly faster, it’s a good habit to get into. Good luck.