asked on

short javascript or jquery script function for div

I need the shortest way - minimum lines script function that will input 2 numbers
for example function(2,3)
2 is the red and 3 is the black
will draw a div or table structure as attached.

Francisco Igor

You need to clarify what to expect with this 2 parameters (change the width, border, fill ) ??

COBOLdinosaur

function addtable()
{ 
   document.body.innerHTML+='<table><tr><td>2</td><td>3</td></tr></table>';
 }

Open in new window

Now if you want to do something useful with it post some detail and we will refine it.

judgeking

Is Black the box width and red the fill width? If so, how about this:

<HTML>
<HEAD>
<script type="text/javascript">
  function setProgressBar(redWidth, blackWidth) {
    document.getElementById("progress_bar").style.width = redWidth;
    document.getElementById("progress_bar_box").style.width = blackWidth;
  }
</script>
</HEAD>

<BODY>
<form>
<div style="margin-left: 25%; margin-right: 25%">
  <div id="progress_bar_box" style="border: 3px solid black; width: 300px;">
    <div id="progress_bar" style="border: 0px; width: 200px; background-color: red;"></div>
  </div>
  <br />
  <input id="txtRed" type="text" size="5" value="200">&nbsp;&nbsp;&nbsp;<input id="txtBlack" type="text" size="5" value="300">
  <input id="btnChange" type="button" value="Change" onClick="javacript:setProgressBar(document.getElementById('txtRed').value, document.getElementById('txtBlack').value);">
</div>
</form>
</BODY>
</HTML>

Open in new window

SA85

ASKER

judgeking, its not working on firefox, i added height so it would be seen but all the form is black:(
COBOLdinosaur, i added your script inside html code and that is not working:(

SA85

ASKER

judgeking, I fixed the code with adding height inside the style, but i need this code created by the script because i will run an sql loop so there might be 100 rows and i need this script to build those 100 rows.

<div style="margin-left: 25%; margin-right: 25%">
<div id="progress_bar_box" style="border: 3px solid black; height:50px; width: 300px;">
<div id="progress_bar" style="border: 0px; width: 200px;height:50px; background-color: red;"></div>
</div>

judgeking

Sorry, just add a space in the red div.

<HTML>
<HEAD>
<script type="text/javascript">
  function setProgressBar(redWidth, blackWidth) {
    document.getElementById("progress_bar").style.width = redWidth;
    document.getElementById("progress_bar_box").style.width = blackWidth;
  }
</script>
</HEAD>

<BODY>
<form>
<div style="margin-left: 25%; margin-right: 25%">
  <div id="progress_bar_box" style="border: 3px solid black; width: 300px;">
    <div id="progress_bar" style="border: 0px; width: 200px; background-color: red;">&nbsp;</div>
  </div>
  <br />
  <input id="txtRed" type="text" size="5" value="200">&nbsp;&nbsp;&nbsp;<input id="txtBlack" type="text" size="5" value="300">
  <input id="btnChange" type="button" value="Change" onClick="javacript:setProgressBar(document.getElementById('txtRed').value, document.getElementById('txtBlack').value);">
</div>
</form>
</BODY>
</HTML>

Open in new window

judgeking

Sorry, we both posted at the same time. Adding the height is a good idea.

Are you saying there may be 100 progress bars (I'm assuming that's what this is), and you want to build them dynamically? How are you calling your DB? Why not build this in your server code?

COBOLdinosaur

COBOLdinosaur, i added your script inside html code and that is not working:(

Then either coded it incorrectly, or you didn't trigger an event to fire the function it works fin in all my browser.

COBOLdinosaur

Oh and for what ever styling you need just put a class in as you generate.

function addtable()
{ 
   document.body.innerHTML+='<table><tr><td class="redcls">2</td><td class="blackcls">3</td></tr></table>';
 }

Open in new window

SA85

ASKER

judgeking, i use sql server
my table name is "folder_table" and it has 2 columns: "space_in_folder" and "files_in folder"
i need to print in this way all the rows inside the table.
i use c# with asp.net.
i thought abut printhing a query and running a script recursively.

will be more than happy if you will post a code with your way of doing it.

ASKER CERTIFIED SOLUTION

judgeking

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

judgeking

Here's a c# example:

int iSpaceInFolder, iFilesInFolder;
System.Web.UI.WebControls.TableRow oRow;
System.Web.UI.WebControls.TableCell oCell;
System.Web.UI.HtmlControls.HtmlGenericControl oDiv;

while (true)
//loop through records
//do while not eof
{
    oRow = new System.Web.UI.WebControls.TableRow();
    oCell = new System.Web.UI.WebControls.TableCell();
    oDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
    iSpaceInFolder = 200; //get value from DB, convert to meaningful width
    iFilesInFolder = 100; //get value from DB, convert to meaningful width

    oDiv.InnerHtml = "<div style='border: 3px solid black; width: " + iSpaceInFolder + "px;'>";
    oDiv.InnerHtml += Environment.NewLine + "  <div style='border: 0px; background-color: red; width: " + iFilesInFolder + "px;'>&nbsp;</div>";
    oDiv.InnerHtml += Environment.NewLine + "</div>";
    oCell.Controls.Add(oDiv);
    oRow.Cells.Add(oCell);
    tblData.Rows.Add(oRow);
}

Open in new window

judgeking

SA85, any update?

SA85

ASKER

https://www.experts-exchange.com/questions/27431540/LINQ-Entity-Framework-COUNT-AND-QUERY.html