Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] CSS to style Javascript

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] CSS to style Javascript
 Login/Join
 
Gold member
posted
Hi all,

I may have to reach out to a javascript forum, but I figured I'd reach out to y'all first.

I'm needing to style a table that's dynamically created by javascript. I know how to style it if it were just a static HTML table but this is different and I'm not too familiar with javascript. Here is the javascript code:

var aryPortalList = [];


function getPortalList() {
    var wP = window.location.protocol;
    var wH = window.location.host;
    var wPath = "ibi_apps/rs/ibfs/BIP/Portals?IBIRS_action=get";
    //http://webfocusclidev:8080/ibi_apps/rs/ibfs/BIP/Portals?IBIRS_action=get;
    var webfocusAPI = wP + "//" + wH + "/" + wPath;
    $.ajax({
        type: "GET",
        async: false,
        url: webfocusAPI,
        dataType: 'xml',
        success: function(xml) {
            $(xml).find('children').children().each(function() {
                var portal = {   Name: $(this).attr('bipName'),
                                 Link: "/ibi_apps/bip/portal" + $(this).attr('bipPath'),
                                 IconLink: "/ibi_apps/WFServlet.ibfs?IBFS1_action=RUNFEX&IBFS_path=" + $(this).attr('bipIconPath')
                              };  //var portal
                console.log("portal.name=" + portal.Name);
                if (portal.Name != "GlobalBI") aryPortalList.push(portal);
           }); //each
           console.log("Portals in List = " + aryPortalList.length);
        } //success function
    }); //ajax
}




function displayPortalList_Icon() {
    if (aryPortalList.length == 0) {
        var hTxt = "<p>You do not have access to any portals</p>";
        $("#portallist").append(hTxt);
    } else {
        var bRowAdded = false;
        var hTbl=$("<table id='tbl_portallist'></table>");
        var row = $('<tr></tr>').addClass('ingrPL_row');
        console.log("Portals in List = " + aryPortalList.length);
        for(var j=0; j < aryPortalList.length; j++) {
            var cell = $("<td align = 'center'></td>");


            var hTxt = $("<p>" + aryPortalList[j].Name + "</p>");
            var hLink = $("<a>").attr({"href": aryPortalList[j].Link,
                                   "target": "_blank"});
            var img = $("<img>").attr("src", aryPortalList[j].IconLink);
            img.width("100px");
            img.height("100px");
            console.log("hTxt=" + hTxt);
            hLink.append(img);
            cell.append(hTxt);
            cell.append(hLink);


            row.append(cell);
            bRowAdded = false;


            if ((j+1) % 4 == 0) {
                hTbl.append(row);
                bRowAdded = true;
                var row = $('<tr></tr>').addClass('ingrPL_row');
            }
        }
        if (!bRowAdded) {
            hTbl.append(row);
        }
        $("#portallist").html(hTbl);
    }
}


function displayPortalList_List() {
    if (aryPortalList.length == 0) {
        var hTxt = "<p>You do not have access to any portals</p>";
        $("#portallist").append(hTxt);
    } else {
        var bRowAdded = false;
        var hTbl=$("<table id='tbl_portallist'></table>");
        console.log("Portals in List = " + aryPortalList.length);
        for(var j=0; j < aryPortalList.length; j++) {
            var row = $('<tr></tr>').addClass('ingrPL_row');
            var cell = $("<td align = 'center'></td>");




            var hTxt = $("<p>" + aryPortalList[j].Name + "</p>");
            var hLink = $("<a>").attr({"href": aryPortalList[j].Link,
                                   "target": "_blank"});


            console.log("hTxt=" + hTxt);
            hLink.append(hTxt);
            cell.append(hLink);


            row.append(cell);
            hTbl.append(row);
        }


        $("#portallist").html(hTbl);
                console.log("portal.name=" + portal.Name);
    }
} 


  




And I've attached a photo of how the 'portal' looks.



What I need to do is space out the icons more and have the title's on the bottom of the icons, to look more like an 'app'

Any help is greatly appreciated.

This message has been edited. Last edited by: Tamra,


WebFOCUS 8
Windows, All Outputs
 
Posts: 88 | Registered: December 06, 2016Report This Post
Guru
posted Hide Post
You can use:

  
table {
border-spacing: 10px;
border-collapse: separate;
}


or use could use:

  
td { 
    padding: 10px;
}


or if you do not want to use css you could create your like this:

 
<table cellspacing="1" cellpadding="1">


All these examples are pure html and not javascript but I suspect that you can modify them to fit what you need.

Fernando


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03
 
Posts: 278 | Registered: October 10, 2006Report This Post
Expert
posted Hide Post
quote:
var cell = $("<td align = 'center'></td>");

This is the section of your code that is creating the "cell" where the Icon and text will be inserted. You could add your styling directly into the <td> section using style="". Alternatively you could use cell.css("attribute","value"); - check out the jQuery page at W3Schools website.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Expert
posted Hide Post
quote:
cell.append(hTxt);
cell.append(hLink);

To change the text to below the image, reverse these two lines.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Expert
posted Hide Post
Looking at this further (and getting it running), your issue is really to do with the fact that the structure being used is a table.

I do not know what your CSS contains so the following is assuming certain things.

If the container has a fixed width then that is going to override many styling pieces that you can achieve. So I would suggest that the containing table (id=tbl_portallist) is not given a fixed width. BUT give it a margin-right (I used 15px).

Moving on to the table row (class=ingrPL_row), I would need to know more about what the CSS class contains to be able to suggest changes.

Finally the table cell(s). These are only given an alignment setting and the size should be controlled by the content. At present each cell holds an image (100px square) and some text contained within a %lt;p> element. This is going to force the width of the cell IF the parent table does not have a fixed width.

Lots of possibilities but I would really suggest that you use developers tools within the browser and manipulate the CSS to see what you have and what you need to change. Then apply those changes to the components of your HTML.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] CSS to style Javascript

Copyright © 1996-2020 Information Builders