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
I am a software consultant specialising in Oracle, HTML5 and all latest Internet tech.
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.
Tony J
29 Feb, 2012
How do I “Add jquery cookie library to page template?”
Mark Caulfield
1 Mar, 2012
Download the jquery cookie plug in and upload it to your files/images section in your applications shared components screen.
To edit the page template, go to the design view of one of your applications pages, under the templates section to the right of the page click the page template, in the header definition under the #HEAD# text, paste the following.
Of course, if you already have a reference to jquery in your template, ignore the first line.
That’s it. You can now use cookies in your application.