Has anyone ever given table columns the "fisheye" effect? Im talking about an expanding effect of the table columns when hovering the mouse over them. I'd love to see some code if anyone has tried this.
EDIT: ...or an accordian effect
It's not for a table, but here is the effect:
http://safalra.com/web-design/javascript/mac-style-dock/
While not a table-based solution, this is a quick proof-of-concept I whipped up using JQuery just to see if I could do a column based accordion effect. Maybe it can give you some inspiration...
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table > div:even").addClass("row");
$("#table > div:odd").addClass("altrow");
$("#table > div > div").addClass("normal");
$("div[class*='col']").hover(
function () {
var myclass = $(this).attr("class");
$("div[class*='col']").css("width","20px");
$("div[class*='"+myclass+"']").css("width","80px").css("overflow","auto");
},
function () {
$("div[class*='col']").css("width","40px").css("overflow","hidden");
}
)
});
</script>
<style type="text/css">
.row{
background-color: #eee;
float:left;
}
.altrow{
background-color: #fff;
float:left;
}
.normal{
width: 40px;
overflow: hidden;
float:left;
padding :3px;
text-align:center;
}
</style>
</head>
<body>
<div id="table">
<div>
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
<br style="clear:both" />
<div>
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
<br style="clear:both" />
<div>
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
</div>
</body>
</html>
no javascript is necessary this took me only a few minutes to work out
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<style type="text/css">
td {
border: thin black solid;
width: 3em;
height: 3em;
}
td:hover {
background-color: red;
width: 5em;
/*height: 5em;*/
/*uncomment the above if you also want to zoom the rows*/
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Maybe Magic Table is what you're looking for: http://www.grvisualisation.50webs.com/examples.html
Columns are a whole lot trickier than rows, however I'd do like this:
Apply a unique CSS class to each TD per column
Attach a MouseIn and MouseOut event
Select all elements with the columns class name, and apply a second "fisheye" class
On mouseout, remove the class.
EDIT: I misunderstood fisheye to be more like zebra striping with highlights...To do a fisheye on the columns would be tricky, do same process as I listed above, but apply an animation to each cell instead of a new css class.
I think Jonathan is on the right track. You'd need methods to find all cells in a column, as well as adjoining columns and rows. I think you could get a decent effect with just three levels of "zoom."
This is kind of ugly effect but works only with CSS's :hover you can use some JS to make it look smoother:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
table{
width: 150px;
height: 150px;
}
tr{
height: 20px;
}
tr:hover{
height: 30px;
}
td{
width: 20px;
border: 1px solid black;
text-align:center;
}
td:hover{
width: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
the code below uses css to make cell wider on :hover, and jquery to toggle (display) additional content in the given cell... and toggle it again (hide) when you are no longer hovering the cell.
http://jsfiddle.net/berteh/QDhcR/12/
CSS:
td {
border: thin black solid;
width: 3em;
}
td:hover {
background-color: YellowGreen;
max-width: 5em;
font-size: 130%;
}
Javascript:
$(document).ready(function() {
$('td').hover(function () {
$(this).find('.desc').toggle(300);
});
});
works on a simple table HTML:
<table>
<tr>
<th>row1</th>
<td>1<div class="desc">descZ</div></td>
<td>2<div class="desc">descU</div></td>
<td>3<div class="desc">descI</div></td>
<td>4<div class="desc">descO</div></td>
</tr>
<tr>
<th>row2</th>
<td>1<div class="desc">descZ</div></td>
<td>2<div class="desc">descU</div></td>
<td>3<div class="desc">descI</div></td>
<td>4<div class="desc">descO</div></td>
</tr>
</table>
Related
JavaScript Element.length returns invalid length while executing in Visualforce page.
I'm expecting body NodeList length to be 14. But after printing console.log('allDocElements length:: ',allDocElements.childNodes.length);
It return 10. how this is possible?
I'm executing it in Google Chrome.
View console output
<apex:page showHeader="false" sidebar="false">
<html>
<head>
<title>JS Addignment 1</title>
<style>
body {
text-align:center;
font-size:30px;
}
.center {
width:70%;
margin:15% auto;
border-collapse:collapse;
border:2px solid #000000;
}
table td {
border:2px solid #000000;
}
</style>
<script>
let dateContainer, dayContainer, timeContainer;
let allDocElements = document.getElementsByTagName('body')[0];
console.log('allDocElements::',allDocElements.childNodes);
</script>
</head>
<body>
<table border="1" style="" class="center" cellpadding="20">
<tbody>
<tr>
<td><label>Date: </label><span id="dateContainer"/></td>
<td><label>Day: </label><span id="dayContainer"/></td>
</tr>
<tr>
<td colspan="2"><span id="timeContainer"/></td>
</tr>
</tbody>
</table>
</body>
</html>
I am a beginner with using dojo toolkit and I am trying to create an alarm where the screen blinks red continuously when a button is pressed and only stop when the button is pressed again. I have been able to change the background color once but I dont know how to make it continuously trigger between being red or no background color.
here is my html file with the table:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="alarm.css" />
<!-- load Dojo -->
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script> require(['myModule.js']); </script>
<title>Alarm test</title>
</head>
<body class="claro">
<h1 id="greeting">Alarm test</h1>
<table data-dojo-type="dojox.grid.DataGrid" id="tableContainer">
<thead>
<tr>
<th field="col1">Company</th>
<th field="col2">Contact</th>
<th field="col3">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</thead>
</table>
<button id="progButtonNode" type="button"></button>
</body>
</html>
here is my button on() event handler for changing the background once:
require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(style, dom, on){
on(dom.byId("progButtonNode"), "click", function(){
style.set("tableContainer", {
backgroundColor: "red"
});
});
});
And here is my table's css. I have another question regarding this; how can I override a css using code? Because when I change the background color it only applies on the rows which does not already have a background color set like this: http://imgur.com/rsCN8Vx
table, th, td {
border: 1px solid black;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
This code here:
function(style, dom, on){
on(dom.byId("progButtonNode"), "click", function(){
style.set("tableContainer", {
backgroundColor: "red"
});
});
});
Could try this instead:
function(style, dom, on){
on(dom.byId("progButtonNode"), "click", function(){
class.set("tableContainer", {
"blink" // or however you add a class in dojo, not sure
});
});
});
And your css would look like this
.blink {
animation:blink 700ms infinite alternate;
}
#keyframes blink {
from { background-color: white; }
to { background-color: red; }
};
In dojo, there should be an easy to toggle a class similar to jQuery. If not, just add a conditional to check if the class is there. If it is, remove the class blink and the effect will go away.
A more simple way of doing this would be
/*js*/
require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/dom-class", "dojo/domReady!"],
function(style, dom, on, domClass) {
var blink;
on(dom.byId("progButtonNode"), "click", function() {
if(blink) {
clearInterval(blink);
blink = null;
} else {
blink = setInterval(function() {
domClass.toggle("tableContainer", "background");
}, 1000); // 1 second
}
});
});
And add this class to your css file
/*css*/
.background {
background-color: red;
}
I am trying to make a button that cleans specific fields of my page. This is what I have, but it does not work. Not sure what else to do. Some folks tried to help me on the commends of another topic but since I could not make it work I opened this new question.
Thanks
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Landing Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('.clear').on('click', function () {
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputEmail').val('');
});
</script>
<style>
#formTable {
/*border: 1px solid black;*/
margin: 0 auto;
}
#outer {
width: 100%;
height: 700px;
display: flex;
align-items: center;
/*background-color: gray;*/
}
#inner {
width: 300px;
height: 350px;
margin: 0 auto;
/*background-color: yellow;*/
}
</style>
</h:head>
<h:body>
<div id="outer">
<div id="inner">
<h:form class="signupform">
<p>Sign-up for more:</p>
<table id="formTable">
<tr>
<td>First Name:</td>
<td><h:inputText id="inputFirstName" value="#{visitor.firstName}"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><h:inputText id="inputLastName" value="#{visitor.lastName}"/></td>
</tr>
<tr>
<td>Email:</td>
<td><h:inputText id="inputEmail" value="#{visitor.email}"/></td>
</tr>
</table>
<p><h:commandButton id="submit" value="Submit" action="#{visitor.registerVisitor()}"/>
<h:outputText id="outputText" value="#{visitor.result}"/></p>
</h:form>
<button class="clear">Clear</button>
</div>
</div>
</h:body>
</html>
You're calling $('.clear') before the elements exist.
Therefore, you're adding the event handler to an empty set.
You need to run your <script> block after the elements.
Maybe you can try, instead of:
<script>
$('.clear').on('click', function () {
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputEmail').val('');
});
</script>
Instead have:
<script>
$(document).ready(function () {
$('.clear').on('click', function () {
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputEmail').val('');
});
});
</script>
This question already has answers here:
Set cellpadding and cellspacing in CSS?
(19 answers)
Closed 8 years ago.
I'm new to html and I got this piece of code:
#{
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table>
#foreach (var item in Model.Data)
{
<tr>
<td><a href=#Model.DataUrl[item.Key]>#item.Key</a></td>
<td>#item.Value</td>
</tr>
}
</table>
</body>
</html>
I want to add a tab or spaces between: <td><a href=#Model.DataUrl[item.Key]>#item.Key</a></td> and <td>#item.Value</td> how do I do that?
I guess adding css is the best way but I don't understand how to use it.
You can add padding to your td with CSS:
td {
padding-right: 30px;
}
<table>
<tr>
<td>Hello</td>
<td>Goodbye</td>
</tr>
<tr>
<td>Hola</td>
<td>Adios</td>
</tr>
</table>
or give them a fixed width:
td {
min-width: 200px;
}
<table>
<tr>
<td>Hello</td>
<td>Goodbye</td>
</tr>
<tr>
<td>Hola</td>
<td>Adios</td>
</tr>
</table>
` ` is a space
` ` is a tab
Just insert them where you want
For the CSS, you should use the padding property, there are plenty of tutorials on the web, and samples
<table style="border-spacing: 10px;">
Or in a CSS block somewhere:
table {
border-spacing: 10px;
}
Source : Add space between cells (td) using css
You mean visual whitespace?
In that case, check this link for:
How to add styles for a table
The paragraph Table Padding specifically.
Basic CSS isn't that hard.
I am trying to hide/reveal table rows based on checking a checkbox.
Here it is http://dbdev2.pharmacy.arizona.edu/wideproblem.html
How do I get the hidden row to properly display at the width of the table? I've even tried setting it as a css attribute for that row, and it doesn't work.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Case of the Squished Row</title>
<style>
table {
border: 1px solid black;
width: 600px;
}
tr {border:1px solid black;}
tr.anote {width:600px;}
th {
border:1px solid black;
width:50%;
}
td {
border: 1px solid black;
width: 25%;
}
</style>
<script type="text/javascript">
function ShowRow(msg){
var thecheck = document.getElementById("showcheck");
var thebox= document.getElementById("showbox");
var thenote= document.getElementById("shownote");
if (thecheck.checked){
thebox.innerHTML=msg;
thebox.style.color='red';
thenote.style.display='block';
}
else {
thebox.innerHTML='This is a checkbox';
thebox.style.color='black';
thenote.style.display='none';
}
}
</script>
</head>
<body>
<h1>The Case of the Squished Row</h1>
<br><br>
<h2> using display:none CSS property</h2>
<table>
<tbody id="topline">
<tr><th id="showbox">This is a checkbox</th>
<td><input type="checkbox" id="showcheck" onclick="ShowRow('Note is DISPLAY:BLOCK')"></td>
<td>this is filler</td></tr>
</tbody>
<tbody id="shownote" style="display:none">
<tr class="anote"><th>This is a note</th><td>Hey! The box is checked!</td><td>this is filler</td></tr>
</tbody>
<tbody id="botline">
<tr><th>Big Filler</th><td>Little filler</td><td>this is filler</td></tr>
</tbody>
</table>
</body>
</html>
You have to use "table-row-group", not "block" as the value of the "display" property when showing the table row group (the <tbody>).