Keep row highlighted using jQuery

Hello!
I'm using the following code to highlight a row in my report, calling it via an onclick event -
function highLight( pThis ){
 $('td').removeClass('current');
 $(pThis).parent().parent().children().addClass('current') ;
I have an icon in the same row that opens a popup page where a user can edit that particular record. Once the changes have been made and the 'Apply changes' button is clicked, the popup window closes and the page is refreshed to show the changes, but my row highlight disappears. How can I go about keeping that row highlighted after the page has reloaded?
Thank you!
Tammy

I give...I've spent the past few days trying to figure out how the value in my hidden variable will help identify the row that I need to highlight. I have 2 buttons in each row...one button, when clicked, calls the highLight function and the row is highlighted and the pThis value returns "http://.....f?p=111:34:123456789012232::::P34_TEST:1". The other button opens the popup...I make my changes, click Apply Changes to submit and close the popup, I set my P34_TEST hidden value to the ID, which equals 1, but how am I supposed to modify the highLight function and call the function and use the ID value to find the row I want to highlight? I added a class to the column like you recommended, but when I click the first button to highlight the row, it highlights all of the columns in the table, which I understand why it does that, I just don't know how to identify the class with the ID. I know that probably doesn't make much sense to you, but I don't know enough about jQuery to put all the pieces together. I'm not looking for someone to hand me the answer, I just don't understand how it's supposed to work. Can you give me a little more detailed information on how to go about doing this?
Thank you,
Tammy

Similar Messages

  • Row highlighting with Jquery

    Hi,
    I heard a lot of good things about Jquery. I was trying to see for myself how to get Jquery to work with APEX. I've this sample code snippet that does row highlighting when hovering over a table row. The code works as a html file but I can't seem to get it to work with APEX. Here's the procedure I follow in APEX:
    1. Uploaded the jquery library into APEX workspace.
    2. Modify the page template to include the jquery library. I had rename the jquery library to "jqmin_126.hs"
    <script src="#APP_IMAGES#jqmin_126.js" type="text/javascript"></script>
    3. Added the code snippet to the html header of APEX report page.
    <style type="text/css">
    .highlight {
    background-color: #FC6 !important;
    </style>
    <script type="text/javascript">
    $(document).ready(function( ) {
    $('table.default1 tbody tr').mouseover(function() {
    $(this).addClass('highlight');
    $(this).css('cursor','pointer');
    }).mouseout(function() {
    $(this).removeClass('highlight');
    </script>
    To keep things simple, I used the following APEX settings:
    Template: Reports region
    Report template: Default: Look 1
    Version of APEX : 3.1.2
    My interest here is mostly trying to see how jquery works with APEX and not so much the row highlighting. What am I missing?
    Thanks in advance.

    I ran into this problem as well. What happened to me is that the style associated for the TD tag was overwriting the style for the TR tag. So even though I was adding and removing classes to the TR the page would not reflect the changes.
    I would first make sure the Jquery is working by adding the following to my header section.
    $(document).ready(function( ) {
      alert('Jquery is working');
    });If it is working I would try adding .find("td") to edit the CSS of each table data thus changing the background of the row.
    <script type="text/javascript">
      $(document).ready(function( ) {
        $('table.default1 tbody tr').mouseover(function() {
          $(this).find("td").addClass('highlight');
          $(this).find("td").css('cursor','pointer');
        }).mouseout(function() {
          $(this).find("td").removeClass('highlight');
    </script>Hope this can point you in the right direction.
    Tyson
    Edited by: Tyson Jouglet on Nov 24, 2008 9:31 AM

  • Keeping Row Highlighted In Master-Detail Table

    JDev 11.1.2.0
    I have a small .jsf page with a master-detail setup, using 2 tables.
    When I select a row in the master table, the detail table is populated as expected.
    When I select a row in the detail table, the row is no longer highlighted on the master table.
    Is there any way to have the row selection in the master table remain highlighted while the user is clicking around the detail table?
    I am not sure if it matters but I have manually added filtering to both tables.
    Thank you.
    Ray

    Any help would be appreciated.

  • Row Highlighting

    I am trying to find a thrad / example showing how to do row highlighting using javascript. I want to highlight a row in a report by clicking on it. It is supposed to remain highlighted until I either reload / submit the form or click on an other row. Mouseover and mouseout events are not desired :). Anyone with an idea?
    Denes Kubicek
    http://deneskubicek.blogspot.com/
    http://www.opal-consulting.de/training
    http://apex.oracle.com/pls/otn/f?p=31517:1
    -------------------------------------------------------------------

    Denes,
    Here is the CSS and Javascript I use to achieve row highlighting on click..
    <style type="text/css">
    tr.odd td.t15data{background:#F4FFFD;}
    tr td.t15data{background:#FFFFFF;}
    tr.selected td.t15data{background:#D7D7D7;}
    </style>
    <script type="text/javascript">
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          oldonload();
          func();
    function addClass(element,value) {
      if (!element.className) {
        element.className = value;
      } else {
        newClassName = element.className;
        newClassName+= " ";
        newClassName+= value;
        element.className = newClassName;
    function stripeTables() {
         var tables = document.getElementsByTagName("table");
         for (var m=0; m<tables.length; m++) {
              if (tables[m].className == "t15standard") {
                   var tbodies = tables[m].getElementsByTagName("tbody");
                   for (var i=0; i<tbodies.length; i++) {
                        var odd = true;
                        var rows = tbodies.getElementsByTagName("tr");
                        for (var j=0; j<rows.length; j++) {
                             if (odd == false) {
                                  odd = true;
                             } else {
                                  addClass(rows[j],"odd");
                                  odd = false;
    function lockRow() {
         var tables = document.getElementsByTagName("table");
         for (var m=0; m<tables.length; m++) {
              if (tables[m].className == "t15standard") {
                        var tbodies = tables[m].getElementsByTagName("tbody");
                        for (var j=0; j<tbodies.length; j++) {
                             var rows = tbodies[j].getElementsByTagName("tr");
                             for (var i=0; i<rows.length; i++) {
                                  rows[i].oldClassName = rows[i].className
                                  rows[i].onclick = function() {
                                       if (this.className.indexOf("selected") != -1) {
                                            this.className = this.oldClassName;
                                       } else {
                                            addClass(this,"selected");
    addLoadEvent(stripeTables);
    addLoadEvent(lockRow);
    </script>
    This will also stripe or do alternate row colors for you. If you do not want or need that functionality, just remove the stripeTables function and addLoadEvent(stripeTables)
    Hope this helps.
    -Chris

  • Setting row level field in table using jQuery

    Hi,
    I'm utilising the following to read and then set values in the same row within a report.
    Re: Referencing a row level field value in an Interactive Report using jquery
    Consider the following snippet
    // read information eg
    var row = $x_UpTill(this.triggeringElement, 'TR');
    var dateCompleted = $('input[name="f03"]', row)[0];
    console.log(dateCompleted.value);
    // write information eg
    var dateBooked = $('input[name="f02"]', row)[0];
    //dateBooked.value = 'xyz'; // sets to xyz, as expected
    dateBooked.value = return_date; // sets the actual code, not returning stringAll works as I'd expect except the last line. I have a js function returning a formatted string (Set Date With Javascript but in this case my field now contains the actual code definition, not the date string the function actually returns.
    I'm thinking I'm just misunderstanding a simple concept for JavaScript here?
    A simple workaround could be to create field P0_SYSDATE, calculated to TO_CHAR(SYSDATE,:F_DATE_FORMAT), then apply
    dateBooked.value = $v('P0_SYSDATE');but I'm trying to improve my understanding of javascript/jQuery...
    Cheers,
    Scott

    So are you saying that return_date is an actual javascript function that returns the formated string/date you want?
    If so, then I think you simply need parenthesis to run the function:
    dateBooked.value = return_date();Or... am I missing something here?
    Thanks
    -Jorge

  • Keeping selected row highlighted

    I have a datatable that has 2 panel grids in it. The first panel grid is used only to show the first image/link all the time because it is not stored in our database. The second panelGrid fetches a list of programs from our database, and lists them with an image next to the link if the user is subscribed to that program. When the page first loads up, I need the first row highlighted by default. When a user selects a program, I need to change the highlight to that the program they selected. When the user selects a program, it loads the same page, but changes an ifram that has the details of what they clicked on. How can I get the row for this program only to be selected and stay selected until they click another program. Below is my page code and my backing bean.
    <h:dataTable id="programTable" headerClass="programTableHeader" width="100%"
                                                                     value="#{Program_profile.programDataModel}" var="varprogramDataModel">
                                                                     <h:column>
                                                                          <f:facet name="header">
                                                                               <h:panelGrid id="pnlgridAboutMyPrograms" width="100%" border="0" cellpadding="0" cellspacing="0" columns="1">                                                                                
                                                                                    <h:commandLink id="lnkAboutMyPrg" action="#{Program_profile.aboutMyProgramAction}" >
                                                                                         <hx:graphicImageEx id="imgAbtMyPrg1" value="#{msg.Program_profile_About_My_Program_Image}" border="0" hspace="5"></hx:graphicImageEx>
                                                                                         <h:outputText id="txtAbtMyPrg" value="#{msg.Program_profile_About_My_Program_Name}"></h:outputText>
                                                                                    </h:commandLink>
                                                                               </h:panelGrid>
                                                                          </f:facet>     
                                                                          <h:panelGrid id="pnlgridPrograms" width="100%" border="0" cellpadding="0" cellspacing="0" columns="1"  columnClasses="">
                                                                               <h:commandLink id="programLink" action="#{Program_profile.selectedProgram}">
                                                                                    <hx:graphicImageEx id="checkMarkProgram" value="#{msg.Program_profile_Check_Mark_Image}" border="0" rendered="#{varprogramDataModel.subscribed}" hspace="5"></hx:graphicImageEx>
                                                                                    <h:outputText id="programName" value="#{varprogramDataModel.name}"></h:outputText>
                                                                               </h:commandLink>
                                                                          </h:panelGrid>
                                                                     </h:column>Backing bean:
    public String selectedProgram(){
              // A program details which is selected by the user
              ApplicationParameter.getLogger().debug(ENTRY);
              ProgramInformation selectedProgram= null;
              ProfileController profileController = new ProfileController();
              Customer customer =null;
              // Returning the value for from-outcome element of faces-config.xml file 
              String from_outcome=null;
              try{
                   //Check for customer object
                   if(!utility.isUserInSession()){
                        FacesMessage message = MessageFactory.getMessage(facesContext,"Program_profile_customer_help");
                        facesContext.addMessage("",message);
                        return ApplicationParameter.NAVIGATION_CUSTOMER_HELP;
                   selectedProgram = (ProgramInformation)programDataModel.getRowData();
                   selectedProgram=createProgramInformation(selectedProgram.getCode());
                    * Highlight the program selected
                    UICommand programCommand = getProgramLink();
                    UIComponent parent = programCommand.getParent();
                    parent.getAttributes().put("rowClasses","tnSelected");
                    ApplicationParameter.getLogger().debug("\n ***************  programCommand = "+programCommand.getClientId(facesContext));
                 ApplicationParameter.getLogger().debug("\n*************     programParent = "+parent.getClientId(facesContext));
                     * Highlight the About my programs link
    //                 UICommand aboutProgramCommand = getLnkAboutMyPrg();
    //                 UIComponent aboutParent = aboutProgramCommand.getParent();
    //                 if (!parent.getAttributes().containsKey("rowClasses")) {
    //                      aboutParent.getAttributes().put("rowClasses","tnSelected");
                   //setSelectedHighlight("tnSelected");
                   //Set in the session
                   ApplicationParameter.getLogger().debug("Iframe page ->"+selectedProgram.getInfoPage());
                   utility.getExternalContext().getSessionMap().
                             put(ApplicationParameter.SESSION_KEY_PROGRAM_INFORMATION,selectedProgram);     
                   utility.getExternalContext().getSessionMap().
                             put(ApplicationParameter.SESSION_KEY_IFRAMEPAGE,selectedProgram.getInfoPage());                                   
                   from_outcome=ApplicationParameter.NAVIGATION_PROGRAM_PROFILE;
              }catch (Exception ex){
                   ApplicationParameter.getLogger().error("\n\nException ->\n"+ex.getMessage());
                   FacesMessage message = MessageFactory.getMessage(facesContext,"Program_profile_Customer_Help_Exception");
                   facesContext.addMessage("",message);
                   return ApplicationParameter.NAVIGATION_CUSTOMER_HELP;
              ApplicationParameter.getLogger().debug(EXIT);
              return from_outcome;
         }When I click on a program link using the code above, it highligts all the rows, not just the selected one.

    can anyone please help me? I can post more code if that helps.

  • Row highlight does not work when class has a background-clolor

    This is more a CSS / javascript question but since the problem occurs in Apex I'll try my luck here.
    I try to implement a row highlight feature that worked in 3.2 but not in 4.0. The difference is that the style that is used for the table cells contains a background-color in the 4.0 template and it did not in 3.2.
    This is how it works.
    I created a report template with "before each row" : <tr onMouseOver="cOn(this);" onMouseOut="cOut(this);">
    The javascript does this:
    function cOn(td) {
       if(document.getElementById||(document.all && !(document.getElementById))) {
          if (td.previousSibling != null) {
              td.style.backgroundColor="#FFFF99";
              td.style.color="#000000";         
    }My thought was that td.style.backgroundColor="#FFFF99" would overrule the background color given by the class but when this happens from within javascript this does not work. Is this proper behaviour? Are there other methods that will work?

    Hi Rene
    If you are just looking for a row highlight on a mouse hover, it might be easier to place the following in the html header of the page:
    <style = text/css>
    .apexir_WORKSHEET_DATA tr:hover td {
    background-color: #FFFF99 !important;
    color: #000000 !important;
    </style>
    ~Andrew Schultz

  • How do I keep from highlighting terms in the search bar when I modify a string in the search bar--other than by clicking three to five times?

    I'm not talking about terms in the search results; I'm talking about terms in the search string in the search bar in the upper right corner. (Mine is set to use only Google.) When I've searched on a string and decide to modify the string for a second search (say, changing "Spanish architecture" to "Spanish architectural style"), clicking at the end of the search string first highlights the entire string and then, as I keep clicking, highlights various parts of the string. Sometimes it takes five clicks to get the highlighting to go away so I can start back-deleting normally instead of by entire word or phrase. The Google homepage doesn't do this, whereas all search engines in Firefox do it, so it's clearly a Firefox annoyance.

    Left click ONCE to get it's attention. After a moment, then do your work.

  • JTable cell focus outline with row highlight

    With a JTable, when I click on a row, the row is highlighted and the cell clicked has a subtle outline showing which cell was clicked.
    I would like to do that programatically. I can highlight the row, but I have not been able to get the subtle outline on the cell. My purpose is to point the user to the row and cell where a search found a match. I do not have cell selection enabled, because I want the whole row highlighted.
    My basic code is:
    table.changeSelection(irow, icol, false, false);
    table.scrollRectToVisible(table.getCellRect(irow, icol, true));I keep thinking I just need to find a way to "set focus" to the cell so the subtle outline is displayed, but I cannot find something like that.
    Does anyone have some ideas on how to activate that automatic outline on the cell? I prefer not to write custom cell renderers for this if possible.

    That seems unnecessarily complicated, the outline is the focused cell highlight border so requesting focus on the table should be enough.
    import java.awt.BorderLayout;
    import java.awt.EventQueue;
    import java.awt.Rectangle;
    import java.awt.event.ActionEvent;
    import javax.swing.*;
    public class TestTableFocus {
        public static void main(String[] args) {
            EventQueue.invokeLater(new Runnable() {
                public void run() {
                    final JTable table = new JTable(10, 10);
                    JFrame frame = new JFrame("Test");
                    frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
                    frame.getContentPane().add(new JScrollPane(table));
                    frame.getContentPane().add(new JButton(
                      new AbstractAction("Focus cell") {
                        @Override
                        public void actionPerformed(ActionEvent e) {
                            table.changeSelection(5, 5, false, false);
                            centerCell(table, 5, 5);
                            table.requestFocusInWindow();
                        private void centerCell(JTable table, int x, int y) {
                            Rectangle visible = table.getVisibleRect();
                            Rectangle cell = table.getCellRect(x, y, true);
                            cell.grow((visible.width - cell.width) / 2,
                                    (visible.height - cell.height) / 2);
                            table.scrollRectToVisible(cell);
                    }), BorderLayout.PAGE_END);
                    frame.pack();
                    frame.setLocationRelativeTo(null);
                    frame.setVisible(true);
    }

  • Using jQuery UI in a timeline trigger

    I am successfully using jQuery in timeline triggers, but something is going wrong when I try to use jQuery UI.
    I am loading jquery-ui-1.9.2.custom.js and jquery-ui-1.9.2.custom.css using yepnope in the creationComplete event for the stage object ("Symbol").  The same code that works in the "complete" function of the yepnope does not work in a timeline trigger.  The code is:
    sym.$("main_st_classic").hide("blind", { direction: "horizontal" }, 2000);
    So this is what it looks like bound to the default timeline:
          Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 0, function(sym, e) {
             // insert code here
             sym.$("main_st_classic").hide("blind", { direction: "horizontal" }, 2000);
    BTW, in the picture below the display property is set to Always On, but I have tried it with On and experienced the same problem.
    Any thoughts will be much appreciated.

    Umpf, my fault. DDL statements execute implicit commit.
    You need to execute your DDL statements in a separate transaction and not within the trigger transaction
    Try this:
    create or replace procedure create_user(p_username in varchar2, p_password in varchar2)
    is
      pragma AUTONOMOUS_TRANSACTION;
    begin
      execute immediate('CREATE USER '|| p_username ||
                        ' IDENTIFIED BY '|| password ||
                        ' DEFAULT TABLESPACE MAGICOP QUOTA UNLIMITED ON MAGICOP');
      execute immediate('GRANT APP_USERS TO '||p_username); 
      execute immediate('ALTER USER '||p_username ||' DEFAULT ROLE ALL');
    end;
    CREATE OR REPLACE TRIGGER NORDISKADMIN.BIU_LOGIN_JV
    BEFORE UPDATE OR INSERT ON LOGIN_JV
    FOR EACH ROW
    DECLARE
    BEGIN
      GETSTDTRIGGERINFO( inserting,'LOGIN_JV', :new.US_INSERT,:new.DT_INSERT,:new.US_MODIFY,:new.DT_MODIFY,:new.AI_LOGIN_JV);
      create_user(:new.CD_LOGIN_JV, :new.PW_LOGIN_JV );
    END;

  • Using jquery to fade in validation messages in and out

    Hello,
    I am using spry validation on my form and I have it where it pops up a graphic when the validation happens. Now to dress it up better I would like those graphics to fade in and out depending if they meet the validaton or not instead of just dissapearing. Does anyone know how to do this using Jquery or some other sort of method? I am new to it. Below is code for my form and css for validation
    <div class="contactform">
             <form action="POST" method="get" name="contact" id="form1">
             <p>Name: (Required)</p>
             <span id="spryName">
             <input name="req" value="" class= "tb" type="text" id="req" >
             <img class="textfieldRequiredMsg" src="_images/valbox.png"  ><span class="textfieldRequiredMsg"></span></span>
             <p>Company: (Required)</p>
             <span id="spryComapny">
             <input name="company" type="text" class="tb" >
             <img class="textfieldRequiredMsg" src="_images/valbox2.png"  ><span class="textfieldRequiredMsg">.</span></span>
             <p>Email: (Required)</p>
             <span id="spryEmail">
             <input value="" name="email" type="text" class="validate[required] tb" id="email" >
       <img class="textfieldRequiredMsg"  src="_images/valbox3.png" ><img class="textfieldInvalidFormatMsg"  src="_images/valemailformat.png" ><span  class="textfieldRequiredMsg">.</span><span  class="textfieldInvalidFormatMsg">.</span></span>
             <p>Phone:</p><input name="name" type="text" class="tb" >
             <p>What do you want done? (Required)</p>
             <div class="comments"><span id="spryComments">
               <textarea class="commentstext" name="comments" cols="50" rows="10"></textarea><br /><br />
             <img class="textareaRequiredMsg" src="_images/valcomments.png" >
               <span class="textareaRequiredMsg"></span></span></div></br /><br /><br />
             <div class="formbtns">
             <input name="Submit" type="submit" value=""  class="submitbtn"> <input name="Clear" type="reset"  value="" onClick="setFocus();" class="clearbtn">
             </div>
             </form> </div>
    @charset "UTF-8";
    /* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* These are the classes applied on the error messages
    * which prevent them from being displayed by default.
    .textfieldRequiredMsg,
    .textfieldInvalidFormatMsg,
    .textfieldMinValueMsg,
    .textfieldMaxValueMsg,
    .textfieldMinCharsMsg,
    .textfieldMaxCharsMsg,
    .textfieldValidMsg {
        display: none;
    /* These selectors change the way messages look when the widget is in one of the error states.
    * These classes set a default red border and color for the error text.
    * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
    * and this way only the specific error message can be shown by setting the display property to "inline".
    .textfieldRequiredState .textfieldRequiredMsg,
    .textfieldInvalidFormatState .textfieldInvalidFormatMsg,
    .textfieldMinValueState .textfieldMinValueMsg,
    .textfieldMaxValueState .textfieldMaxValueMsg,
    .textfieldMinCharsState .textfieldMinCharsMsg,
    .textfieldMaxCharsState .textfieldMaxCharsMsg
        display: inline;
        color: #FFF;
        background-image: none;
        background-repeat: no-repeat;
        vertical-align:top;

    I have my images in my Dreamweaver assets folder.  I'm not sure what as2 or as3 are...I don't know if that helps, my skill level in Flash and DW are pretty basic.  Any suggestions?  Thank you!

  • Using jquery to animate this (link included)

    Hi there,
    I'm in the completion stages of a website for a client. Still
    some things to
    fix (like activating the form) but essentially, this is the
    heart of the
    site and how it will work.
    http://www.vilverset.com/main.php
    As you can see by clicking the main navigation, the only
    things changing are
    2 divs :
    DIV ID="bg" (height:490px, width:100%)
    This is the div in the background containing the large
    background image.
    DIV ID="textbox" (height:490px, width:depends on the page)
    This is the div with text content and a semi-transparent
    white background
    (used a png for this so I could retain the opaque white
    outline).
    Everything else is always the same no matter what page we're
    at. I am
    currently using PHP includes to include those parts.
    I could technically deliver the site as-is once it's
    completed, but I keep
    imagining nice sliding-door effects that this particular
    layout seems to be
    crying out for.
    What I had in mind :
    Each time you click a link...
    ...the "textbox" div would slide out from view (left to
    right)
    ...a new "bg" div would slide into view over the current one
    (right to left)
    ...a new "textbox" div would slide into view (right to left)
    Would this not reek of awesomeness? How difficult would this
    be using jquery
    libraries/tutorials?
    If the caveat would be that I'd have to pre-load all the
    content, I don't
    mind. As long as it's loading it in the background after
    displaying what
    needs be displayed on the front landing page (that we see
    that landing page
    before it finishes loading all the other non-visible divs).
    But ideally, it would load the content only once the option
    is clicked.

    This is a bit different - and a quick example - but it is
    100% accessible to
    search engines and, more importantly, to assistive readers.
    http://www.projectseven.com/testing/customers/mike-noob
    Al Sparber - PVII
    http://www.projectseven.com
    Dreamweaver Menus | Galleries | Widgets
    http://www.projectseven.com/go/apm
    An Accessible & Elegant Accordion
    "Mike" <[email protected]> wrote in message
    news:[email protected]...
    > Al,
    >
    > I'm almost dead certain that the .animate function of
    jQuery's library
    > will do the trick, here. I just can't wrap my brain
    around the proper
    > syntax.
    >
    > There would also be overlapping issues... for instance,
    if I make panel 2
    > slide over panel 1 when clicking the 2nd link, I need to
    have panel 1
    > slide back over panel 2 when clicking the 1st one again.
    >
    > This means that once a panel slides into view, whatever
    was underneath
    > needs to be hidden, then z-indexed over the pane that
    just appeared, then
    > placed outside the viewport as it awaits the call to
    slide back into view.
    >
    > But how do you do any of that without, at the very
    LEAST, triggering a
    > horizontal scrollbar? You can't place a div outside the
    viewport without
    > creating one, can you?
    >
    > Here's the original link again :
    >
    http://www.vilverset.com/main.php
    >
    > Mike
    >
    > "Al Sparber - PVII" <[email protected]>
    wrote in message
    > news:[email protected]...
    >>
    >> "Mike" <[email protected]> wrote in message
    >> news:[email protected]...
    >>>
    >>> Would this not reek of awesomeness? How
    difficult would this be using
    >>> jquery libraries/tutorials?
    >>>
    >>> If the caveat would be that I'd have to pre-load
    all the content, I
    >>> don't mind. As long as it's loading it in the
    background after
    >>> displaying what needs be displayed on the front
    landing page (that we
    >>> see that landing page before it finishes loading
    all the other
    >>> non-visible divs).
    >>>
    >>> But ideally, it would load the content only once
    the option is clicked.
    >>
    >> This is an interesting question and there are no
    simple answers. I'm
    >> going to play with some ideas later today and I'll
    post back with some
    >> solutions you could consider.
    >
    >

  • Row highlighting is gone on enabling inline style for columns

    We have a multi-select enabled table on which cusomter wanted to change the color based on row stauts (a column in the table).
    We did it on the column component of the table as background-color:#{row.Status == 'Inactive'? '#A5A5A5': row.Status == 'Draft'?'#D8D8D8':''};
    this works great though as soon as this is done the row highlight color is gone from the table and hence makes it impossible to know which rows are actually selected.
    we are using RUP3 (Rel 4) version of jdev 11.1.1.6.2 version from edelivery.

    To apply that css rules to only one table set property styleClass="MyCustomTable" of the <af:table> and change the above rules for these (note that each rule starts with af|table.MyCustomTable):
    af|table.MyCustomTable::status-message {background-color: #0090c1; color: white; border: 2px #a0b4ba inset;}
    af|table.MyCustomTable::column-resize-indicator {border: 1px solid #51bfff;}
    af|table.MyCustomTable::data-row:selected af|column::data-cell {border-top: 1px solid #00afea; border-bottom: 1px solid #00afea;}
    af|table.MyCustomTable::data-row:selected af|column::banded-data-cell {border-top: 1px solid orange; border-bottom: 1px solid orange;}
    af|table.MyCustomTable::data-row:selected:focused af|column::data-cell {border-top: 1px dashed #00afea; border-bottom: 1px dashed #00afea;}
    af|table.MyCustomTable::data-row:selected:focused af|column::banded-data-cell {border-top: 1px dashed orange; border-bottom: 1px dashed orange;}
    af|table.MyCustomTable::data-row:selected:inactive af|column::data-cell {border-top: 1px solid #84e0ff; border-bottom: 1px solid #84e0ff;}
    af|table.MyCustomTable::data-row:selected:inactive af|column::banded-data-cell {border-top: 1px solid green; border-bottom: 1px solid green;}
    af|table.MyCustomTable::data-row:hover af|column::data-cell,af|table.MyCustomTable::data-row:hover af|column::banded-data-cell {background-color: #bfd6b0 !important;}
    af|table.MyCustomTable af|column::data-cell:selected {background-color: #9CACC9 !important;}AP

  • How to keep the highlight when the JTextComponent lose focus?

    I wanted to do some basic copy/cut/paste on the JTextPane from the Menu. But when I selected the menu, the highlight disappeared. How do keep the highlight?
    The only topic I found about this was here:
    http://forum.java.sun.com/thread.jsp?forum=57&thread=214931
    but it appeared intimidating and not exactly what I needed.

    Most javax objects will accept things in <html> tags why don't you try setting them onto the JTextPane (never tried this btw but should be worth a try) using html and the transferring the same syntax to the output email

  • APEX-BUG? Row Highlighting and Mouseover

    Hello Experts,
    I build a classic report on APEX 4.0.2 with different column templates depending on the dep_id-row. (If dep=30 I want a green row)
    You can see this at [http://apex.oracle.com/pls/apex/f?p=12579:5:164720075315678:::::|http://apex.oracle.com/pls/apex/f?p=12579:5:164720075315678:::::]
    After F5 all columns for dep 30 are in green. If you move the mouse over the report the rows become grey. After next F5 you will again see the green background color.
    The template is defined as follows:
    Column Template 1
    <td headers="#COLUMN_HEADER_NAME#" #ALIGNMENT# class="t20data" style="background-color:#EEEEEE;">#COLUMN_VALUE#</td>
    Column Template 1 Condition
    Used Based on PL/SQL Expression
    Column Template 1 Expression
    #DEPARTMENT_ID# <> 30
    Column Template 2
    <td headers="#COLUMN_HEADER_NAME#" #ALIGNMENT# class="t20data" style="background-color:#8FE98F;">#COLUMN_VALUE#</td>
    Column Template 2 Condition
    Used Based on PL/SQL Expression
    Column Template 2 Expression
    #DEPARTMENT_ID# <> 30#DEPARTMENT_ID# = 30
    I'm shure that this already worked fine.
    Is there a way to use Row Highlighting together with Column Templates ?
    Thanks for any idea!
    Frank
    Edited by: frank_schmidt on 23.02.2011 02:01
    Edited by: frank_schmidt on 23.02.2011 07:41

    I can see that when the mouse moves over a row, the row cell(td) are applied a background-color, this is not via a class but it is set directly at the column level.
    So I guess it is some JS code that does it.
    If that be the case, irrespective of the css classes or inline styles you specify for the column,they would be overridden(element.style > class ) and overwritten(td.backgroundcolor is set directly). So JS code that does this has to be disabled first.
    If you remove the 'highlight-row" class from the table row( tr) element either in the template or if its for just one report, do it directly in the Page using JS by
    $('tr.highlight-row').removeClass('highlight-row');Now inorder to get the row highlighting(without removing the original styling on mouseout), change the template to use a class and move the background color under the class( background-color:#8FE98F).
    If you highlighting to work with FF alone, you can define the :hover pseudo class
    {code}
    tr.highlight-row td:hover{
    background-color:#CDCDCD;--use the mouse over color
    {code}
    But if it has to work with all browsers, you would have to rewrite the row highlighting JS

Maybe you are looking for

  • Questions on data migration....

    Hi all, I'm currently facing the problem that my colleagues from the data migration team are about to migrate legacy data to the new system using BDC/LSMW. 1.) Is it true that the system bypasses any checks concerning number ranges (even if the range

  • USB ports do not work

    I cant get my usb ports to work, they worked fine when i installed os but after going to standby they all stopped working. I tried to relode drivers but it didnt help. In device manager there is 4 usb's but they do not work, and shouldnt there be 6 .

  • Windows Azure Platform Support: "Prompted for "Windows Activation" when logging onto a Windows Azure Role Instance using RDP"

    Symptom When a user interactively logs (using RDP client) on to a Windows Azure Role Instance running Windows Azure Guest OS 1.11, they see a "Windows Activation" dialog box. Action The user can ignore this dialog box by simply clicking either "Cance

  • HD 6750M VS. HD 6770M?

    We want to get new iMacs for students to learn Final Cut Pro, Premiere, After Effects and possibly Maya. Does anyone know if the lower end version with the lower end graphics card will work OK with this vs. getting the next model up? 21.5-inch: 2.5GH

  • Multiple Choices in either Dropdown list or List box

    I'm working on a form which will need to be reviewed and accepted by multiple people. I'd like to have a dropdown list or list box with all the known names of those reviewing, where all names can be selected, one by each reviewer so eventually all na