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,

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

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

quote:

cell.append(hTxt);
cell.append(hLink);

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

T

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