Solved

Need a dynamic row table.

Posted on 2011-09-19
36
379 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
ID: 36564531
0
 

Author Comment

by:cofactor
ID: 36564552
@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
ID: 36564656
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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 8

Expert Comment

by:crysallus
ID: 36564693
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
ID: 36564974
@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
ID: 36565034
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
ID: 36565174
@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
ID: 36565228
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
ID: 36565269
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
ID: 36565288
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
ID: 36565778
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
ID: 36567011
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
ID: 36569891
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
ID: 36570949
>>>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
ID: 36571009
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
ID: 36571063
>>>>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
ID: 36571092
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
 

Author Comment

by:cofactor
ID: 36571119
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
ID: 36571147
<!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
ID: 36571163
>>>><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
ID: 36571174
line 77 of my post.

It is working that way.
0
 

Author Comment

by:cofactor
ID: 36571197
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
ID: 36573675
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
ID: 36573697
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
ID: 36576586
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
ID: 36599306
@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
ID: 36602547
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
ID: 36707522
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
ID: 36707553
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
ID: 36707582
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
ID: 36707624
>>>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
ID: 37767028
There is no fix in IE7 -  no solution.

please clean up  this post.
0
 

Author Comment

by:cofactor
ID: 37774531
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
ID: 37774526
Edit: oops, entered this in wrong.
0
 
LVL 8

Expert Comment

by:crysallus
ID: 37774532
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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

770 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