i have following html code.
<div id="table1"></div> <script> var arr = [ ["s1","s2","s3"], ["sk1","sk2","sk3"], ["skl1","skl2"] ]; table_generator("table1", arr); </script> now add table div, have following javascript code.
<script> function table_generator(body_table_name, s_array) { var body_table = document.getelementbyid(body_table_name); //create table section var table = document.createelement("table"); table.setattribute("id", "table_"+body_table_name); //append body div body_table.appendchild(table); //add rows var row_length = s_array.length; for(var = 0; <row_length; i++) { row(s_array[i], "row"+i, "table_"+body_table_name); } assign_height_width_hover_effects(); } </script> to add rows inside table have javascript function
<script> function row(td_array, row_name, table_name) { //create row var tr = document.createelement("tr"); tr.setattribute("id", "tr_"+row_name); document.getelementbyid(table_name).appendchild(tr); //create tds for(var = 0; i<td_array.length; i++) { var td = document.createelement("td"); td.setattribute("id", "td_"+td_array[i]); tr.appendchild(td); //add td styling td.style.transition = "all 0.5s ease-in-out"; //add text cell var name = document.createelement("span"); name.setattribute("id", "name_"+td_array[i]); name.innerhtml = td_array[i]; td.appendchild(name); //add skill info var info = document.createelement("span"); info.setattribute("id", "info_"+td_array[i]); info.innerhtml = "some info here"; name.appendchild(info); //add styling info info.style.position = "absolute"; info.style.width = "inherit"; info.style.height = "inherit"; info.style.overflow = "hidden"; info.style.opacity = 0; info.style.transition = "all 1s ease-in-out 0.4s"; info.style.transform = "scale(0)"; //calculate cell width var width = (td.clientwidth + 1); if (width > max_width) { max_width = width; } //push in array main_array.push(td_array[i]); } } </script> and finally, give height , width table cells , add hover effects call following function
<script> function assign_height_width_hover_effects() { //assigh height , width cells in row for(var = 0; i<main_array.length; i++) { var td = document.getelementbyid("td_"+main_array[i]); var name = document.getelementbyid("name_"+main_array[i]); var info = document.getelementbyid("info_"+main_array[i]); //add styling td td.style.width = max_width+"px"; td.style.height = max_width+"px"; td.style.textalign = "center"; td.style.boxshadow = "rgb(0, 0, 0) 0px 0px 0px 0px inset"; //here need $(td).hover( function(){ $(this).stop().animate({boxshadow: '0 0 '+max_width+'px'}, 'fast'); //$(this).stop().animate({"opacity": 0}); }, function(){ $(this).stop().animate({boxshadow: '0 0 0'}, 'fast'); //$(this).stop().animate({"opacity": 1}); } ); } } </script> basically want animate following:
when mouse enters td table cell:
- the box shadow of td cell animate color
- the span element id "name" inside td cell fade away, use opacity 0 that.
- and span element id "info" inside td cell appear, use opacity 1 that.
when mouse leaves td table cell:
- the box shadow of td cell animate normal. go away
- the span element id "name" inside td cell appear back, use opacity 1 that.
- and span element id "info" inside td cell fade away, use opacity 0 that.
now able animate box shadow alone, or fade in - fade out of name element not both together.
you should able easier css
td { transition: box-shadow 1s ease 0s; box-shadow: 5px 5px 5px #000; padding: 20px; } td:hover { box-shadow: 5px 5px 5px #f00; } td .name { transition: opacity 1s ease 0s; opacity: 1; } td:hover .name { opacity: 0; } td .info { transition: opacity 1s ease 0s; opacity: 0; } td:hover .info { opacity: 1; }<table> <tbody> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </tbody> </table>i did change selectors name , info classes instead of id since ids should unique.
note: simple example. want add specific selector before td way won't apply every table on page / site.
Comments
Post a Comment