Solved

Need a dynamic row table.

Posted on 2011-09-19
36
355 Views
Last Modified: 2012-08-13
I need a dynamic row addition table. I want the name fields of html elements  in the new row would change.

Here is the detailed document I have prepared which explains the table functionality.

I would prefer a jquery solution.

 I  tried to  use jquery clone and attr attribute to change names and finally failed . want to try again with your comments.

My-proposed-table.doc
0
Comment
Question by:cofactor
  • 18
  • 16
36 Comments
 
LVL 15

Expert Comment

by:Minh Võ Công
Comment Utility
0
 

Author Comment

by:cofactor
Comment Utility
@minhvc:

This will not work. I need to update the name fields also.

Please go through the doc I have attached.  I have explained the functionality.  I'll appreciate if you could provide a sample in line with my requirement to test it out.

0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
Here's just some code for the first part of adding the row. You should be able to work out the second part of adding select boxes from this too though.

<!DOCTYPE html>
<html>
<head>
 
	<title>EE Test</title>

	<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
	
	<style type="text/css">
	
	</style>
	
	<script type="text/javascript">
	
jQuery(function ($) {
    
	var $tableBody = $('#dynTable').find('tbody');
	var idStr = 'cid';
	
	$('#addRow').click(function(event){
		
		event.preventDefault();
		var $newRow = $tableBody.find('tr').last().clone(true);
		
		// get the row number for the new row
		var newRowNumber = parseInt($newRow.find('.input1').attr('name').substr(3)) + 1;
		
		$newRow.find('.input1')
			.attr('name', function(index, attr){
				var firstPart = attr.substr(0, 3);
				return firstPart + newRowNumber;
			});
			
		$newRow.find('.select1')
			.attr('name', function(index, attr){
				var numIndex = attr.indexOf(idStr) + idStr.length
				var firstPart = attr.substr(0, numIndex);
				return firstPart + newRowNumber;
			});
			
		$newRow.find('.input2')
			.attr('name', function(index, attr){
				var numIndex = attr.indexOf(idStr) + idStr.length
				var firstPart = attr.substr(0, numIndex);
				return firstPart + newRowNumber;
			});
			
		$tableBody.append($newRow);
	});
	
});
	
	</script>
	
</head>
<body>

<table id="dynTable">
<tr>
	<td>
		<input class="input1" type="text" name="cid0"/>
	</td>
	<td>
		<select class="select1" name="item0_cid0">
			<option>Option 1</option>
			<option>Option 2</option>
		</select>
	</td>
	<td>
		<input class="input2" type="text" name="amount0_cid0"/>
	</td>
</tr>
</table>

<a href="#" id="addRow">Add Row</a>

</body>
</html>

Open in new window

You'll need a local copy of jquery to test it, or change the url of jquery to a public one.
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
Actually, my code assumes that there is a tbody within the table, which most browsers add even if it's not in the html. It would be better to add the tbody tag to the html though to guarantee that it is present, otherwise the code wont work without modification if the browser doesn't add it.
0
 

Author Comment

by:cofactor
Comment Utility
@crysallus:

can you please update your code so that it includes header , tbody  and also the second part of adding select boxes.

I think second part of adding select boxes and amount pair is a tricky and hardest  part .

I may need to go back to add select boxes sometimes . how will you manage that ?



0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
OK then. Here's basic functionality. If you want more, like better positioning of elements or styling etc. time to ask another question and assign some more points.

<!DOCTYPE html>
<html>
<head>
 
	<title>EE Test</title>

	<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
	
	<style type="text/css">
	
	</style>
	
	<script type="text/javascript">
	
jQuery(function ($) {
    
	var $tableBody = $('#dynTable').find('tbody');
	var idStr = 'cid';
	var itemStr = 'item';
	
	$('#addRow').click(function(event){
		
		event.preventDefault();
		var $newRow = $tableBody.find('tr').last().clone(true);
		
		// get the row number for the new row
		var newRowNumber = parseInt($newRow.find('.input1').attr('name').substr(3)) + 1;
		
		$newRow.find('.input1')
			.attr('name', function(index, attr){
				var firstPart = attr.substr(0, 3);
				return firstPart + newRowNumber;
			});
			
		$newRow.find('.select1')
			.attr('name', function(index, attr){
				var numIndex = attr.indexOf(idStr) + idStr.length
				var firstPart = attr.substr(0, numIndex);
				return firstPart + newRowNumber;
			});
			
		$newRow.find('.input2')
			.attr('name', function(index, attr){
				var numIndex = attr.indexOf(idStr) + idStr.length
				var firstPart = attr.substr(0, numIndex);
				return firstPart + newRowNumber;
			});
			
		$tableBody.append($newRow);
	});
	
	$('.addType').click(function(event){
		
		event.preventDefault();
		var $this = $(this);
		var $row = $this.parentsUntil('tbody').last();
		var $select = $row.find('.select1').last();
		var $amountInput = $row.find('.input2').last();
		var selectName = $select.attr('name');
		var typeNumber = parseInt(selectName.substring(4, selectName.indexOf('_'))) + 1;
		var cidStr = selectName.substr(selectName.indexOf(idStr));
		
		// select clone
		var $selectClone = $select.clone(true);
		$selectClone.attr('name', itemStr + typeNumber + '_' + cidStr);
		
		// amount clone
		var $amountClone = $amountInput.clone(true);
		$amountClone.attr('name', 'amount' + typeNumber + '_' + cidStr);
		
		// add them
		$row.find('.typeTD').append($selectClone);
		$row.find('.amountTD').append($amountClone);
	});
});
	
	</script>
	
</head>
<body>

<table id="dynTable">
<thead>
<tr>
	<th>ID</th>
	<th>Type</th>
	<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
	<td class="idTD">
		<input class="input1" type="text" name="cid0"/>
	</td>
	<td class="typeTD">
		<select class="select1" name="item0_cid0">
			<option>Option 1</option>
			<option>Option 2</option>
		</select>
		<a href="#" class="addType">Add Type</a>
	</td>
	<td class="amountTD">
		<input class="input2" type="text" name="amount0_cid0"/>
	</td>
</tr>
</tbody>
</table>

<a href="#" id="addRow">Add Row</a>

</body>
</html>

Open in new window

0
 

Author Comment

by:cofactor
Comment Utility
@crysallus:
thanks for comments.

I checked your code. Its not working .

Here is the test output when I clicked  "Add Type" ,  the new select box and amount pair are not  properly appended.  

Please see my requirement doc which I attached earlier.  I have explained what will happen when you click on "Add Type" .  I have added a screenshot  in the doc for this functionality. please look at it once.

 in your code  the new select box and amount pair are not  properly appended.  

Thanks for the comments.


save.png
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
Change

$row.find('.typeTD').append($selectClone);

Open in new window

to

$row.find('.typeTD .addType').before($selectClone);

Open in new window

So now, the type select will be placed before the Add Type link.

Aside from that, I believe that is the javascript functionality you require. The elements are being added in the correct order, after my above correction. Check the html and point out more specifically where I am mistaken if you disagree. If you are concerned about the appearance, i.e. having the select boxes appear on top of each other rather than adjacent as in your screen shot, that's a css issue worthy of a separate question (if you can't figure it out yourself). But I believe the javascript generating the html to be correct.
0
 

Author Comment

by:cofactor
Comment Utility
Thanks. You look like a jquery guru.

I have updated your code and tested here. ...still has some problem here.

>>>>If you are concerned about the appearance,

yup.  your code is growing the <tr>  ...looks very bad.

>>>i.e. having the select boxes appear on top of each other rather than adjacent as in your screen shot,

can you  please modify your code so that  select boxes and amount boxes appear on top of each other as in my screen shot, ?

I believe  you know CSS ..... right ?
0
 

Author Comment

by:cofactor
Comment Utility
Your code also has another problem .When I click  "Add Row"  it clones the modified  <tr> above it !
I need the original tr ..not the modified..... because user may modify as per their choice in the new row.
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
Try this:

<!DOCTYPE html>
<html>
<head>
 
	<title>EE Test</title>

	<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
	
	<style type="text/css">
		.select1 {
			display: block;
			margin: 5px 0;
			padding: 2px 0;
		}
		.input2 {
			display: block;
			margin: 5px 0;
			padding: 2px 0;
		}
	</style>
	
	<script type="text/javascript">
	
jQuery(function ($) {
    
	var $tableBody = $('#dynTable').find('tbody');
	var idStr = 'cid';
	var itemStr = 'item';
	
	$('#addRow').click(function(event){
		
		event.preventDefault();
		var $newDataRow = $tableBody.find('tr').eq(-2).clone(true);
		var $newLinkRow = $tableBody.find('tr').last().clone(true);
		
		// get the row number for the new row
		var newRowNumber = parseInt($newDataRow.find('.input1').attr('name').substr(3)) + 1;
		
		$newDataRow.find('.input1')
			.attr('name', function(index, attr){
				var firstPart = attr.substr(0, 3);
				return firstPart + newRowNumber;
			});
			
		var $rowSelects = $newDataRow.find('.select1');
		var $firstSelect = 
			$rowSelects
				.eq(0)
				.attr('name', function(index, attr){
					var numIndex = attr.indexOf(idStr) + idStr.length
					var firstPart = attr.substr(0, numIndex);
					return firstPart + newRowNumber;
				});
				
		$newDataRow
			.find('.typeTD')
			.empty()
			.append($firstSelect);
			
		var $rowAmountInputs = $newDataRow.find('.input2');
		var $firstAmountInput = 
			$rowAmountInputs
			.eq(0)
			.attr('name', function(index, attr){
				var numIndex = attr.indexOf(idStr) + idStr.length
				var firstPart = attr.substr(0, numIndex);
				return firstPart + newRowNumber;
			});
			
		$newDataRow
			.find('.amountTD')
			.empty()
			.append($firstAmountInput);
			
		$tableBody.append($newDataRow);
		$tableBody.append($newLinkRow);
	});
	
	$('.addType').click(function(event){
		
		event.preventDefault();
		var $this = $(this);
		var $linkRow = $this.parentsUntil('tbody').last();
		var $dataRow = $linkRow.prev();
		var $select = $dataRow.find('.select1').last();
		var $amountInput = $dataRow.find('.input2').last();
		var selectName = $select.attr('name');
		var typeNumber = parseInt(selectName.substring(4, selectName.indexOf('_'))) + 1;
		var cidStr = selectName.substr(selectName.indexOf(idStr));
		
		// select clone
		var $selectClone = $select.clone(true);
		$selectClone.attr('name', itemStr + typeNumber + '_' + cidStr);
		
		// amount clone
		var $amountClone = $amountInput.clone(true);
		$amountClone.attr('name', 'amount' + typeNumber + '_' + cidStr);
		
		// add them
		$dataRow.find('.typeTD').append($selectClone);
		$dataRow.find('.amountTD').append($amountClone);
	});
});
	
	</script>
	
</head>
<body>

<table id="dynTable">
<thead>
<tr>
	<th>ID</th>
	<th>Type</th>
	<th>Amount</th>
</tr>
</thead>
<tbody>
<tr class="dataRow">
	<td class="idTD">
		<input class="input1" type="text" name="cid0"/>
	</td>
	<td class="typeTD">
		<select class="select1" name="item0_cid0">
			<option>Option 1</option>
			<option>Option 2</option>
		</select>
	</td>
	<td class="amountTD">
		<input class="input2" type="text" name="amount0_cid0"/>
	</td>
</tr>
<tr class="linkRow">
	<td></td>
	<td><a href="#" class="addType">Add Type</a></td>
	<td></td>
</tr>
</tbody>
</table>

<a href="#" id="addRow">Add Row</a>

</body>
</html>

Open in new window

0
 

Author Comment

by:cofactor
Comment Utility
You have been very much helpful.  I'm going through your code.  

Will it be possible to add two  hidden fields in your code so that in server side I can loop and get the input values accordingly ?


Here is my  servlet code:

// get number_of_add_rows from page

for(int i=0;i<number_of_add_rows;i++)
{
String cidvalue=request.getParameter("cid"+i);

//get  number_of_select_box_in_this_row from Page

for(int j=0;j<number_of_select_box_in_this_row;j++)
{
String itemval=request.getParameter( "item" + j+ "cid"+i);
String amountval=request.getParameter( "amount" + j+ "cid"+i );
}
}


As you see I need two hidden field values to loop and extract the input values .
Can you please modify your code so that I can avail  them in server side and loop over.
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
Really, that should be another separate question. You can ask a related question, and link back to this question for others to get the background. I have never worked with JSP, so I doubt I can answer this for you.
0
 

Author Comment

by:cofactor
Comment Utility
>>>I have never worked with JSP, so I doubt I can answer this for you.

It has nothing to do with JSP.

All I'm asking is to set a hidden field in the page which will tell us how many  rows are there and for each row how many select box and amount pair is.

This is a javascript code.  how this can be done in the page ?
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
Is it possible to call a javascript function from your servlet code? That would be more reliable than having to maintain a hidden field with the values in it.
0
 

Author Comment

by:cofactor
Comment Utility
>>>>Is it possible to call a javascript function from your servlet code?
No..  

>>>maintain a hidden field with the values in it.

why ?  I see your code has Add Row button  and click ....we keep hidden field like this...

<input type="hidden" name="number_of_add_rows" value="1">


If the user clicks Add Row once , then I want to set
<input type="hidden" name="number_of_add_rows" value="2">

If the user clicks Add Row twice, then I want to set
<input type="hidden" name="number_of_add_rows" value="3">




0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
The reason is in case an error occurs in the code, and one gets changed and not the other. Of course, that shouldn't happen, but it's a fundamental programming principal of only storing the same piece of information in one place. Having a hidden field means it's being stored in 2 places, the hidden field, and the table itself (by how many rows there are). I know it's not hard to do as you've described, but calling a javascript function would mean the number of rows could be counted within the function, and no need to store the information a second time in another field. That's why it's more reliable.

I'll try to get on to it shortly.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:cofactor
Comment Utility
page should send these values to server....only choice here is to use a hidden variable.

(1) how many rows user has added
(2) how many select boxes are there in each row.


I find it diificult to fit these in your code.
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
<!DOCTYPE html>
<html>
<head>
 
	<title>EE Test</title>

	<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
	
	<style type="text/css">
		.select1 {
			display: block;
			margin: 5px 0;
			padding: 2px 0;
		}
		.input2 {
			display: block;
			margin: 5px 0;
			padding: 2px 0;
		}
	</style>
	
	<script type="text/javascript">
	
jQuery(function ($) {
    
	var $tableBody = $('#dynTable').find('tbody');
	var idStr = 'cid';
	var itemStr = 'item';
	var $numRowsField = $('#numRowsField');
	
	$('#addRow').click(function(event){
		
		event.preventDefault();
		var $newDataRow = $tableBody.find('tr').eq(-2).clone(true);
		var $newLinkRow = $tableBody.find('tr').last().clone(true);
		
		// get the row number for the new row
		var newRowNumber = parseInt($newDataRow.find('.input1').attr('name').substr(3)) + 1;
		
		$newDataRow.find('.input1')
			.attr('name', function(index, attr){
				var firstPart = attr.substr(0, 3);
				return firstPart + newRowNumber;
			});
			
		var $rowSelects = $newDataRow.find('.select1');
		var $firstSelect = 
			$rowSelects
				.eq(0)
				.attr('name', function(index, attr){
					var numIndex = attr.indexOf(idStr) + idStr.length
					var firstPart = attr.substr(0, numIndex);
					return firstPart + newRowNumber;
				});
				
		$newDataRow
			.find('.typeTD')
			.empty()
			.append($firstSelect);
			
		var $rowAmountInputs = $newDataRow.find('.input2');
		var $firstAmountInput = 
			$rowAmountInputs
			.eq(0)
			.attr('name', function(index, attr){
				var numIndex = attr.indexOf(idStr) + idStr.length
				var firstPart = attr.substr(0, numIndex);
				return firstPart + newRowNumber;
			});
			
		$newDataRow
			.find('.amountTD')
			.empty()
			.append($firstAmountInput);
			
		// reset new hidden input to 1, and add the correct cid value for the row
		$newLinkRow.find('input:hidden').attr('value', 1).attr('name', 'number_of_type_rows_' + idStr + newRowNumber);
			
		$tableBody.append($newDataRow);
		$tableBody.append($newLinkRow);
		
		// update num rows hidden field
		$numRowsField.attr('value', newRowNumber+1);
	});
	
	$('.addType').click(function(event){
		
		event.preventDefault();
		var $this = $(this);
		var $linkRow = $this.parentsUntil('tbody').last();
		var $dataRow = $linkRow.prev();
		var $select = $dataRow.find('.select1').last();
		var $amountInput = $dataRow.find('.input2').last();
		var selectName = $select.attr('name');
		var typeNumber = parseInt(selectName.substring(4, selectName.indexOf('_'))) + 1;
		var cidStr = selectName.substr(selectName.indexOf(idStr));
		
		// select clone
		var $selectClone = $select.clone(true);
		$selectClone.attr('name', itemStr + typeNumber + '_' + cidStr);
		
		// amount clone
		var $amountClone = $amountInput.clone(true);
		$amountClone.attr('name', 'amount' + typeNumber + '_' + cidStr);
		
		// add them
		$dataRow.find('.typeTD').append($selectClone);
		$dataRow.find('.amountTD').append($amountClone);
		
		// update the hidden field
		$linkRow.find(':hidden')
			.attr('value', function(index, attr){
				return parseInt(attr)+1;
			});
	});
});
	
	</script>
	
</head>
<body>

<table id="dynTable">
<thead>
<tr>
	<th>ID</th>
	<th>Type</th>
	<th>Amount</th>
</tr>
</thead>
<tbody>
<tr class="dataRow">
	<td class="idTD">
		<input class="input1" type="text" name="cid0"/>
	</td>
	<td class="typeTD">
		<select class="select1" name="item0_cid0">
			<option>Option 1</option>
			<option>Option 2</option>
		</select>
	</td>
	<td class="amountTD">
		<input class="input2" type="text" name="amount0_cid0"/>
	</td>
</tr>
<tr class="linkRow">
	<td></td>
	<td><a href="#" class="addType">Add Type</a></td>
	<td><input type="hidden" name="number_of_type_rows_cid0" value="1"></td>
</tr>
</tbody>
</table>
<input id="numRowsField" type="hidden" name="number_of_add_rows" value="1">
<a href="#" id="addRow">Add Row</a>

</body>
</html>

Open in new window

0
 

Author Comment

by:cofactor
Comment Utility
>>>><input type="hidden" name="number_of_type_rows_cid0" value="1">

I dont see code to change this name for each row .  This should be changing in each row .

like..

In First Row:
<input type="hidden" name="number_of_type_rows_cid0" value="1">

In Second Row:
<input type="hidden" name="number_of_type_rows_cid1" value="1">

In  Third Row:
<input type="hidden" name="number_of_type_rows_cid2" value="1">


Is it working that way ?
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
line 77 of my post.

It is working that way.
0
 

Author Comment

by:cofactor
Comment Utility
Ok. Thanks.  I'll test it out in my setup as soon as I get hands to system. If I find any issue I'll revert back here.
0
 

Author Comment

by:cofactor
Comment Utility
I checked your code.  you are resetting to 1 but you are not updating type rows.

>>>// reset new hidden input to 1, and add the correct cid value for the row
$newLinkRow.find('input:hidden').attr('value', 1).attr('name', 'number_of_type_rows_' + idStr + newRowNumber);

This resets only.

where you are updating how many type rows  are there for each row ?
0
 

Author Comment

by:cofactor
Comment Utility
For example, if a user  add 3 type rows in First Row,  this should be updated to

//In First Row:
<input type="hidden" name="number_of_type_rows_cid0" value="3">
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
I'm pretty sure I am. Line 111.

How are you testing this? Any developer tools for your browser, like firebug for firefox, will show you the values being updated, without having to look at the code to find it.
0
 

Author Comment

by:cofactor
Comment Utility
@crysallus

I have checked your code.  Your code works in Firefox .  But its  NOT  working in IE. I'm using IE 7

Try put an alert here . you can test it out yourself

// get the row number for the new row
var newRowNumber = parseInt($newDataRow.find('.input1').attr('name').substr(3)) + 1;
alert("newRowNumber"+newRowNumber); // This always prints 1

How do you fix for IE ?

0
 
LVL 8

Accepted Solution

by:
crysallus earned 500 total points
Comment Utility
Turns out that this is an IE7 bug. The reason is that the name attribute doesn't get updated correctly. If you look at the html in IE's developer tools, you'll notice that the correct name has actually been added to the submitName attribute, rather than the name attribute. According to:

http://stackoverflow.com/questions/2105815/weird-behaviour-of-iframe-name-attribute-set-by-jquery-in-ie

there is no workaround for this. It's an unfixable IE7 bug. All you can do is either not use IE7, or completely change the code to use a different attribute other than name. I'm not sure what else can be done.
0
 

Author Comment

by:cofactor
Comment Utility
I found a link here  to  fix such kind of bug in IE
http://www.codingforums.com/showthread.php?t=205858

Can we apply similar kind of stuff here ?  Can you please take a look at that  and update the code accordingly ?

0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
Well, I'm not sure that counts as a fix, given the original questioner didn't reply to confirm that it worked.

Anyway, if you simply replace all the instances of 'name' in the code (html and jquery) to something else (I just did 'myname', instead), then it works in IE7 as expected. That might mean the html doesn't pass validation because it uses a non-standard attribute, but I think that's perhaps the price you are going to have to pay. Everything I've read suggests that this is simply a bug with the way IE7 handles the name attribute, and can't be fixed as far as I'm aware.

At this point, it might help you to close this question (and hopefully give me some points for all my effort...), and open a new but related question on this issue, as a follow up, which may attract some new interest from others who may have other ideas. This question isn't going to get noticed much anymore by anyone else.
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
This says it's been fixed, but it doesn't look that way. Not with version 1.6.4, which is the latest.

http://bugs.jquery.com/ticket/8418
0
 

Author Comment

by:cofactor
Comment Utility
>>>Anyway, if you simply replace all the instances of 'name' in the code (html and jquery) to something else (I just did 'myname', instead), then it works in IE7 as expected.

if you change "name" to "myname"  ,   the form value will not be submitted.


0
 

Author Comment

by:cofactor
Comment Utility
There is no fix in IE7 -  no solution.

please clean up  this post.
0
 

Author Comment

by:cofactor
Comment Utility
I've requested that this question be deleted for the following reason:

There is no fix in IE7 - &nbsp;no solution.<br /><br />please clean up &nbsp;this post.
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
Edit: oops, entered this in wrong.
0
 
LVL 8

Expert Comment

by:crysallus
Comment Utility
This seems a little harsh to not give any points for the amount of effort I put into this. The OP's question, as it turned out, wasn't solvable due to an unavoidable bug in IE7.

In my understanding of how EE works, you can't simply not award points because someone has pointed out that you've asked an unsolvable question. That, also, is an answer.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now