Using javascript to hide ap divs

I want to write a function to hide 8 ap divs on my page, because I need to do this from various places, and using the show/hide behaviour is proving very timeconsuming, as every time I replace my images via the FW generated HTML, I have to reinstate the show/hide behaviour 8 times for each image. Much easier if I could just call a function.
I have scoured the net, and come up with various samples along the line of:
document.getElementsByName('apDivName').style.visibility = 'hidden';
which I repeat for each apDivName in my list.
The problem is, I don't know javascript, and have no idea if getElementsByName is the right getElements or if visibility is the right property,but have tried various permutations on this theme. No syntax error, but the functions called after this function don't run, so something is wrong.

It's ok, I sorted it.
document.getElementById('apDivName').style.visibility = 'hidden';
I'd tried that already, but missed a capital letter in my function name, so it didn't work. Duhhhh.

Similar Messages

Using javascript to hide/enable sections on a dashboard

Hi,
Version - OBIEE 11.1.1.6.1
I am trying to display/hide a section based on the user selecting a value from a radio button(variable prompt). These sections contain reports(which use different filter criteria) and have different prompts .
ie If value A is selected in radio button, prompt C and report D should be visible
if value B is selected in radio button, prompt X and report Y should be visible
I am able to do this by using condition(which uses a hidden analysis) on a section but that refreshes/reloads the report sections even before the corresponding prompts are applied which does not provide a good user experience.
Can this be done by Javascript?
I am able to hide a section through javascript based on radio button selection by calling - saw.dashboard.onToggleSection('<dashboard-section-id>',null);
However I am not able to find a way to enable the other section. Has anyone been able to use JS to hide/unhide a section?
Any suggestions/inputs appreciated
Edited by: layman on Oct 17, 2012 12:55 AM

I really don't see why there would be a need to script wildly when you can easily achieve this with conditional reports which are just listening for the values currently in the radio buttons, return some bogus line and then enabling or disabling sections.
E.g. section condition: ROWCOUNT("DoesTheRadioButtonSayBlaBlaBla") > 0
C.

Using Javascript to hide objects that have no "binding" tab?

Hello,
I'm attempting to create a form that uses checkboxes to hide a variety of fields. I've run into a problem though; it seems that only text fields have a binding tab (unless I'm missing something). Is there a way for me to do show hides for images and text boxes? When I hold ctrl and hover over these items there is a small circle with a red line through it, which seems to express that it is impossible to manipulate them using javascript.
For the record, I'm using javascript as seen below:
BusinessDBAname.presence = "hidden";
If someone had any definite answers on this I'd really appreciate it.

Hi,
sorry to say that, but this is a really bad form design.
There are a couple of things you can make it better.
1. Give unnamed subforms a suitable naming
2. Use subforms to organise your form
3. Don't embed fonts at all when you only use the default fonts Arial or Myriad Pro
4. Don't select the checkbox to embed images (they will get embedded always but this method requires more space)
5. Set option to prevent script changes in the form to automatically, otherwise the changes wont be saved
Ok, I suggest you to create a set of subforms to represent your Section 1 - 9.
In each subform you then add a subform for business and sole proprietor.
Into those subforms you then put the desired fields, images etc.
This allows you much shorter scriptings because you only have to change the presence of the surrounding subforms to show/hide an entire set of objects.
You form design finally should look something like this.
form1
     Maserpage
     PayeeSetupRequest
          Section1
               Business
                    Textfield1
                    Textfield5
               SoleProprietor
                    Textfield1
                    Textfield3
          Section2
               Business
                    Textfield1
                    Textfield5
               SoleProprietor
                    Textfield1
                    Textfield3
          Section3
Hope this helps.

Using JavaScript to Hide/Show Items

Hello
Trying to use Javascript to check a List Item value.
IF List Item value IS NULL THEN
HIDE some other items
ELSE
SHOW some other Items
I managed to locate some code to determine a NULL value.
This works and I even can display a an alert message
When I attempt to Hide the other Items, nothing happens
Any Help on this matter - Urgently required for a Deadline
Here is the code I am using :
function show_InvestigatorData(){
var lCheck = html_SelectValue('P1000_INVESTIGATOR_ID');
// if Investigator populated, show the Investigator fields
if(lCheck &&
lCheck != '' &&
lCheck != 'null' &&
lCheck != '' &&
lCheck != ' '){
alert('this value is ' + lCheck);
html_ShowItemRow ('P1000_INVESTIGATION_START_DATE');
else {
// otherwise hide the Investigator fields
alert('this value is null');
html_HideItemRow ('P1000_INVESTIGATION_START_DATE');
Many Thanks in advance
Ade

Ade,
Carl Backstrom has a great sample site with examples of what I believe you are trying to accomplish:
http://apex.oracle.com/pls/otn/f?p=11933:5:661046971170606::NO:RP::
From either the menu or the index, select Javascript and then "Show/Hide/Toggle Form Items".
Hope you don't mind the plug Carl.
MovingTarget

Captivate: Using Javascript to show/hide text captions

Hello,
I want to show/hide a text caption using javascript. I can't find the way of doing it with advanced actions. I dont know if it's because it belongs to a question slide in a pool. Does somebody knows if it's possible and how it can be done??

You can set the length of the variable when you insert it.
15 characters is just the default setting.
What I meant by COULD is that the kind of thing you are asking about here (using JavaScript to hide objects inside a Captivate movie at runtime) is not as simple as you'd like it to be.
JavaScript is not my particular area of expertise, but there are some people that chime in on this forum that ARE experts at JS. But I think they would also be the first to say that it's not as simple a thing to pull off as just "knowing the command to hide/show an object".
The easiest tool to use in Captivate for showing or hiding objects is Advanced Actions. The next easiest thing to use is ActionScript 3, and that's hard. JavaScript is a very useful programming language, but it spends all of its life outside the Captivate movie looking in through AS3's External Interface. So JS alone is not going to solve all your issues.

How to Hide some Rows in a List view Web Part using JavaScript ?

How to Hide some Rows in a List view Web Part using JavaScript ?

Here is the code that worked for me:
var Elements = document.querySelectorAll('div[id=WebPartWPQ3] table[class=ms-listviewtable]>tbody tr .ms-vb-lastCell.ms-cellstyle.ms-vb2')
for(var i=0, n = Elements.length; i < n; i++)
if(Elements[i].innerHTML=="India")
Elements[i].parentNode.setAttribute("style","display:none")
WebPartWPQ3 -> ID of webpart Div
ms-listviewtable -> class name of table in Div
ms-vb-lastCell.ms-cellstyle.ms-vb2 -> classname of td to get text

Want to hide command bottun using javascript

Hi,
I want to hide command bottun using javascript when form load
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add/Edit CD details</title>
<script type="text/javascript" src="Test.js"></script>
<script type="text/javascript" src="datetimepicker.js"></script>
<script type="text/javascript">
*function hideDeleteButton(){*
if(document.forms['editForm'].elements['editForm:cd_number'].value="")
document.('viewForm:deleteEntry').style.visibility = "hidden";
</script>
</head>
*<body onLoad="hideDeleteButton(),document.getElementById('editForm:cd_title').focus();">*
<f:view>
<h:form id="editForm" onsubmit="return validateDate()">
<b><p align="center">CD Management</p></b>
          <% if(session.getAttribute("supervisor")==null)
     response.sendRedirect("../index.faces");
%>
          <table width="100%">
          <tr><td valign="top" >
          <h:panelGrid columns="8">
          <h:commandLink id="com1" value="CD management" action="#{CDBean.getAllCDs}" title="CD management" immediate="true"/>
          <%if(session.getAttribute("supervisor")!=null && session.getAttribute("supervisor").toString().equals("Y")){%>
          <h:outputText value="||" id="use1r"></h:outputText>
          <h:commandLink id="Users" value="Users account" action="#{usersBean.viewAllAccounts}" title="Users account" immediate="true"/>
          <%} %>
          <h:outputText value="||" id="use13"></h:outputText>
          <h:commandLink id="pas" value="Change password" action="#{changePasswordBean.changePassword}" title="Change password" immediate="true"/>
          <h:outputText value="||" id="us2er"></h:outputText>
          <h:commandLink id="com2" value="Log out" action="#{logoutBean.logout}" title="Log out" immediate="true">
          </h:commandLink>
          </h:panelGrid>
          </td>
          <td valign="top" align="right" title="Logged in||<%=session.getAttribute("username") %>">Logged in||<font color="green"><%=session.getAttribute("username") %></font></td>
     </tr>
     </table>
<hr>
<b><h:outputText value="#{viewCDBean.form_title}"/></b><br><br>
<div id="no"><h:outputText id="nocd" value="#{viewCDBean.cd_number}"/></div>
<h:panelGrid columns="3">
<h:outputText id="output112"/><h:inputHidden id="cd_number" value="#{viewCDBean.cd_number}"></h:inputHidden><h:outputText id="output117"/>
<h:outputText id="output1" value="Title"/><h:inputTextarea id="cd_title" value="#{viewCDBean.cd_title}" rows="2" cols="40" required="true"></h:inputTextarea><h:message for="cd_title" style="color:red"/>
<h:outputText id="output2" value="Contents"/><h:inputTextarea id="cd_contents" value="#{viewCDBean.cd_contents}" rows="2" cols="40"></h:inputTextarea><h:outputText id="output18"/>
<h:outputText id="output3" value="License key"/><h:inputText id="license_key" value="#{viewCDBean.license_key}" size="50"></h:inputText><h:outputText id="output19"/>
<h:outputText id="output4" value="Vender company"/><h:inputText id="vendor_company" value="#{viewCDBean.vendor_company}" size="50"></h:inputText><h:outputText id="output20"/>
     <h:outputText id="output5" value="Vender name"/><h:inputText id="vendor_name" value="#{viewCDBean.vendor_name}" size="50"></h:inputText><h:outputText id="output21"/>
     <h:outputText id="output6" value="Vender contact no"/><h:inputText id="vender_contact_no" value="#{viewCDBean.vender_contact_no}" size="50"></h:inputText><h:outputText id="output22"/>
<h:outputText id="output7" value="Remarks"/><h:inputTextarea id="remarks" value="#{viewCDBean.remarks}" rows="2" cols="40"></h:inputTextarea><h:outputText id="output23"/>
<h:outputText id="output8" value="Added by"/><h:inputText id="entered_by" value="#{viewCDBean.entered_by}" readonly="true"></h:inputText><h:outputText id="output24"/>
<h:outputText id="output9" value="Last modified by"/><h:inputText id="last_updated_by" value="#{viewCDBean.last_updated_by}" readonly="true"></h:inputText><h:outputText id="output25"/>
<h:outputText id="output10" value="CD/DVD"/>
<h:selectManyListbox id="cd_dvd" styleClass="selectOneMenu" required="true" size="1" value="#{viewCDBean.CD_DVD}">
               <f:selectItem itemValue="" itemLabel="DVD" />
               <f:selectItem itemValue="0" itemLabel="CD" />
          </h:selectManyListbox>
<h:message for="cd_dvd" style="color:red"/>
<h:outputText id="output11" value="License/Open source"/>
<h:selectManyListbox id="license_or_open_source" styleClass="selectOneMenu" required="true" size="1" value="#{viewCDBean.license_or_Open_source}">
               <f:selectItem itemValue="1" itemLabel="License" />
               <f:selectItem itemValue="0" itemLabel="Open source" />
          </h:selectManyListbox>
<h:message for="license_or_open_source" style="color:red"/>
<h:outputText id="output12" value="Serial key"/><h:inputTextarea id="serial_key" value="#{viewCDBean.serial_key}" rows="2" cols="40"></h:inputTextarea><h:outputText id="output28"/>
<h:outputText id="output13" value="Purchase date"/>
<t:inputCalendar id="purchase_date" value="#{viewCDBean.purchase_date}"
               renderAsPopup="true" renderPopupButtonAsImage="true" popupButtonImageUrl="cal.gif" title="pick a date"
               alt="pick a date" popupDateFormat="dd-MMMM-yyyy">
          <f:convertDateTime type="date" dateStyle="default" pattern="dd-MMMM-yyyy"/>
     </t:inputCalendar>
     <h:outputText value="(dd-mmm-yyyy)" id="purchase_date2" style="color:red"/>
<h:outputText id="output14" value="Purchase price"/><h:inputText id="purchase_price" value="#{viewCDBean.purchase_price}"></h:inputText><h:message for="purchase_price" id="output30"/>
<h:outputText id="output15" value="Status"/><h:inputText id="status" value="#{viewCDBean.status}"></h:inputText><h:outputText id="output31"/>
</h:panelGrid>
<table>
<tr>
<td>               </td>
<td>                </td>
<td><%if(session.getAttribute("supervisor")!=null && session.getAttribute("supervisor").toString().equals("Y")){%>*<h:commandButton value="Delete" id="deleteEntry" action="#{CDBean.deleteFromCDMaster}" onclick="return insure()" />* <h:commandButton value="Submit" action="#{CDBean.modifyDetail}"/> <%}%></td>
<td><h:commandButton value="Cancel" action="#{CDBean.getAllCDs}" immediate="true" onclick="setDateFieldBlank()"/></td>
</tr>
</table>
</h:form>
</f:view>
</body>

function hideDeleteButton(){
if(document.forms['editForm'].elements['editForm:cd_number'].value="")
document.z('viewForm:deleteEntry').style.visibility = "hidden";
This script will not work

How to hide a table row in pdf using javascript?

How to hide a table row in pdf using javascript?

This is only possible with LiveCycle Designer forms, not PDF forms created
in Acrobat.

Using CSS and Javascript to display a div with flash in it, mozilla reloads the flash file!

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

What does {tag_image_value} from webapps return when field is empty? How to use javascript to remove div when condition is met.

Dear all,
As stated in the question, what does {tag_image_value} from webapps return when no image has been uploaded by users. I understand that there is an OnError function that can be called if there isn't any image. However it does not do so.
I am creating a program which will check to see if {tag_image_value} contains an image. If it does not, the error will call an external javascript to remove the div such that it removes any subsequent codes in the later parts of the codes. Below is part of the program:
I have tried to compare the value to NULL, 0, -1 and "" using if-else functions but they do not work. The slideshow wrapper is part of the code from the following theme: 2027 E Colfax Ave Denver
The theme will cycle through the pictures, my purpose is to remove the pictures if the images are not present.
   
<script language="JavaScript">
function noimg1() {
     $( "#shownpicture1" ).remove();
     return;
function noimg2() {
     $( "#shownpicture2" ).remove();
     return;
function noimg3() {
     $( "#shownpicture3" ).remove();
     return;
function noimg4() {
     $( "#shownpicture4" ).remove();
     return;
</script>
        
<div class="slideshow-wrapper slider">
<div class="preloader"></div>
<ul data-orbit="data-orbit" data-options="bullets:false;animation:fade;">
    <div style="display: block;" id="shownpicture1">
    <li class="active" style="z-index: 4; margin-left: 0%; opacity: 1;"><img alt="{tag_name_nolink}" onerror="noimg1()" src="{tag_image 1_value}" /></li>
    </div>
    <div style="display: block;" id="shownpicture2">
    <li style="z-index: 2; margin-left: 100%; opacity: 1;" class="active"><img alt="{tag_name_nolink}" onerror="noimg2()" src="{tag_image 2_value}" /></li>
    </div>
    <div style="display: block;" id="shownpicture3">
    <li style="z-index: 2; margin-left: 0%; opacity: 1;" class="active"><img alt="{tag_name_nolink}" onerror="noimg3()" src="{tag_image 3_value}" /></li>
    </div>
    <div style="display: block;" id="shownpicture4">
    <li style="z-index: 2; margin-left: 0%; opacity: 1;" class="active"><img alt="{tag_name_nolink}" onerror="noimg4()" src="{tag_image 4_value}" /></li>
    </div>
</ul>
</div>


When I put in the code it doesnt work. I went into the page to check and it seems that the preloader changes some elements of the code :
<div class="slideshow-wrapper slider">
    <div class="preloader"></div>
    <div class="orbit-container">
        <ul class="orbit-slides-container" data-orbit="data-orbit" data-options="bullets:false;animation:fade;" style="height: 26px;">
            <li class="active" style="z-index: 2; margin-left: 100%; opacity: 1;">
                <img alt="{tag_name_nolink}" onerror="noimg1()" src="">
                </img>
            </li>
            <li class="active" style="z-index: 2; margin-left: 100%; opacity: 1;">
                <img alt="{tag_name_nolink}" onerror="noimg2()" src=""></img>
            </li>
            <li class="active" style="z-index: 4; margin-left: 0%; opacity: 1;">
                <img alt="{tag_name_nolink}" onerror="noimg3()" src=""></img>
            </li>
            <li class="active" style="z-index: 2; margin-left: 100%; opacity: 1;"></li>
        </ul>
        <a class="orbit-prev">
            <span></span>
        </a>
        <a class="orbit-next">
            <span></span>
        </a>
        <div class="orbit-timer paused">
            <span></span>
            <div class="orbit-progress" style="width: 0%;"></div>
        </div>
        <div class="orbit-slide-number">
            <span></span>
             of
            <span></span>
        </div>
    </div>
</div>
I tried putting this into the top of my template layout before the code starts:
<script>
$('.slideshow-wrapper slider .orbit-container ul li img').each(function(){
if( $(this).attr('src') == "" ){
$(this).parent.remove();
$('.slideshow-wrapper slider ul li img').each(function(){
if( $(this).attr('src') === '' ){
$(this).parent.remove();
$('.slideshow-wrapper slider ul li img').each(function(){
if( $(this).attr('src') == '' ){
$(this).parent.remove();
</script>
All 3 variants cannot work. Is there something wrong with the way I do the scripting?

Using JavaScript to extend the height of a DIV to the height of a document or page.

Hello everyone,
How can I use JavaScript to dynamically resize a DIV on a page so that the div extends vertically to the size of the page or document.
I have been experimenting all evening with different methods, some don't even work.
Thanks everyone!
WE

Thanks for responding, I'll gladly explain further, hopefully you can help me.
I have a DIV on the right side of the page (sidebar) it has very little content and does not extend to the botom of the page.
However, I have another DIV with text that extend further down the page.
What I am trying to do is have the sidebar extend to the bottom of the page or window height.
This way as more text is place in the other DIV and the page stretches down, the sidebar stays extend at the bottom.
I know the CSS method but I would like to experiment with JavaScript.
I want to be the cook with many knives!
Thanks for helping!
WE
garywpaul wrote:
I'm not sure I understand you question. It sounds to me like you want div columns to match in size regarless of content amount? If that is the case, you want to use faux columns.
Read about it here:
http://www.paulgdesigns.com/faux-columns.php
If I am not understanding you, post back.
gary

How to hide/disable menu items using Javascript in Acrobat 9 pro or later

We just wanted to know on how to hide/disable menu items for e.g. 'Open' menu item under 'File' menu in Acrobat 9 or later on Mac using Javascript. It would be useful if you could provide if any other option is in place already.

Not sure it will work, but you can try using the app.hideMenuItem() method. See reference here.

How to Hide f:subview using javaScript

Hi
In our application i have to hide and show the subview using javascript is it possible i tried like this.. but its not working
<f:subview id="viewid" >
// view contents
</f:subview>
In java script
document.getElementById("viewid").style.visibility="hidden";
Any suggestion to me..
Regards
Hari

The f:subview doesn't render anything to the response. You should know that if you have checked the rendered HTML source.
Wrap its contents in a h:panelGroup and give it an ID. And don't forget to adapt the clientside Javascript language on the clientside HTML source, not on the serverside JSF source.

How hard is it to use javascript to show/hide fields. Is it easier to use the action builder?

I know nothing about javascript and all that ive been using so far has been stuff ive found on here (thank you everyone).
Using the action builder seems like its gonna be very tedious to do since i have so many subforms that hide, would it be esier to use javascript?

I know nothing about javascript myself but I just created a form with about 10 different subform that show or hide depending on what the user chooses from a drop down list and I used Action Builder. If we don't know javascript, how can we use it? But Action Builder did a fine job of hiding/showing wherever I needed it. And Action Builder can do more than one thing by clicking that + sign when you are building an action.
For instance, I needed to place a button in each subform that would close both the field that the person was working in and also the subform on the next page where the information was going into floating fields in a text block that was only visible thru a drop down list text select. I could have never figured out how to do that based on my knowledge of javascript. Thank Adobe for including Action Builder in this version of LiveCycle and I use it all the time. I find it extremely easy to use but it takes a little mental training to think thru the steps of how you can use the menu in Action Builder to make your form do what you need it to do.
And if all else fails, ask this forum. I struggle for just so long before I come here and ask for help. I always get the answer I need. I hope you will too.
Good luck,
Jeanette

Hide an HTML button using javascript

Hi,
I need to hide an html buttton using javascript. I have an radio button with values "YES" and "NO". If is select NO then i need hide the button without refreshing the page. Can anyone suggest me how to hide an button using javascript.
Thanks
Prashanth

Prashanth,
The exact solution will vary based on a few factors. The basic idea is to place an event handler on the radio button item that calls a function to hide/show the button. You might also want to call that function when the page loads too.
If you put an example page on apex.oracle.com and provide the workspace/username/password I'll take a look. You can create a new account for this purpose.
Regards,
Dan
Blog: http://DanielMcGhan.us/
Work: http://SkillBuilders.com/

Using javascript to hide ap divs

Similar Messages

Maybe you are looking for