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;
}
Related
I have tables like below.
I would like to change colors by clicking and mounsedown and mouseovering on it. I realize such coloring,but I would like to show color transition.
For example,my desired result is when first clicked,td's color will be changed to green and
then,when we clicked greened cells,the color will be changed to Yellow.
How can I realize this color transition?
If you have already experienced,please let me know.
$(function () {
var first;
var second;
$("#table td")
.mousedown(function () {
first = this.id;
console.log("first",first);
return false; // prevent text selection
});
$("#table td")
.mouseup(function () {
second = this.id;
console.log("second",second);
if(first==second){
changecolor(first,"0f0");
}
else if(first<second){
for (var i=first;i<=second; i++)
changecolor(i,"aqua");
}
else{
for (var i=second;i<=first; i++)
changecolor(i,"aqua");}
return false;
});
});
function changecolor(id,color){
$("#"+id).css("background-color",color);}
Not sure if this is what you're looking for, but here are two possible versions you can try.
Long version:
$(function () {
$("td").mousedown(function () {
const green = "rgb(0, 128, 0)"
const yellow = "rgb(255, 255, 0)"
if ($(this).css('background-color') == green )
changecolor(this, yellow)
else
changecolor(this, green)
return false
});
});
function changecolor(el, color) {
$(el).css("background-color", color);
}
Short version:
$(function(){
$("td").mousedown(function(){
$(this).css('background-color',
$(this).css('background-color') == "rgb(0, 128, 0)" ?
"rgb(255, 255, 0)" : "rgb(0, 128, 0)")
return false
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.green{
background-color:green;
}
.yellow{
background-color:yellow;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<table id="table">
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td class="">john</td>
<td class="">23</td>
</tr>
<tr>
<td class="">tony</td>
<td class="">26</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#tbody td").click(function(){
let className = $(this).attr('class')
if(className == ''){
$(this).addClass('green')
}
else if(className == "green"){
$(this).removeClass('green')
$(this).addClass('yellow')
}
else{
console.log("do something")
}
})
})
</script>
</body>
</html>
try it
I would like to create a table in html that adds a column (starting number of columns: 1) every time a user clicks on it.
So Ideally if a user clicks on the table 6 times the table should look like this:
here's my HTML and js:
<!DOCTYPE html>
<html>
<body>
<head>
<title></title>
<script link src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel = "stylesheet" type" type="text/css" href = "style.css">
<script src="jquery-ui.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</head>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#table").click(function()
{
var column = document.createElement("TH")
column.className = "column";
document.getElementById("table").appendChild(column);
});
});
</script>
Instead what happens when the user clicks 6 times is this:
It seems like a new row is being created when the user clicks. Is there a way I can fix this?
Here you go with a solution
$(document).ready(function() {
$("#table").click(function(){
$(this).find('tr').append("<th class='column'></th>");
});
});
.column {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</table>
Hope this will help you.
<!DOCTYPE html>
<html>
<head>
<title>Add Coulmn</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
<script>
$(document).ready(function() {
$("#btnAdd").click(function(){
var CoulmnCount=$("table > tbody > tr:first > td").length+1;
$("#table").find('thead').find('tr').append("<th class='head'>header"+CoulmnCount+"</th>");
$("#table").find('tbody').find('tr').append("<td class='column'>Coulmn1"+CoulmnCount+"</td>");
});
});
</script>
</head>
<body>
<input type="submit" value="Add Coulmn" id="btnAdd">
<table id = "table" style="width: 100%; height: 30px; border-style: solid">
<thead>
<tr>
<th class = "head">Header1</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "column">Coulmn1</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a menu on my webpage that I want to fade out the background of it but not the text. Here is the table for the menu, the jQuery and the CSS.
The Body/Table:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#menu {
width:900px;
margin-left:auto;
margin-right:auto;
font-family:"britannic bold";
font-size:200%;
}
#allbodies {
width:900px;
margin-left:auto;
margin-right:auto;
}
#menu table tr td:hover {
color:#fff;
}
</style>
<title></title>
</head>
<body>
<div id="menu">
<table>
<tr>
<td id="logo" style="width:150px;height:200px;">
<img alt="Logo" height="200" src="logo.jpg" width="150">
</td>
<td id="home" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">HOME</p>
</td>
<td id="games" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">GAMES</p>
</td>
<td id="about" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">ABOUT</p>
</td>
<td id="contact" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">CONTACT</p>
</td>
<td id="author" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">AUTHOR</p>
</td>
</tr>
</table>
</div>
<div id="allbodies">
<div id="homebody">
<h1>Home</h1>
</div>
<div id="gamesbody">
<h1>Games</h1>
</div>
<div id="aboutbody">
<h1>About</h1>
</div>
<div id="contactbody">
<h1>Contact</h1>
</div>
<div id="authorbody">
<h1>Author</h1>
</div>
</div>jQuery:
<script>
$(function(){
$("#logo").mouseenter(function(){
$("#logo").fadeTo("fast",1.0);
});
$("#logo").mouseleave(function(){
$("#logo").fadeTo("fast",0.5);
});
$("#home").mouseenter(function(){
$("#home").fadeTo("fast",1.0);
});
$("#home").mouseleave(function(){
$("#home").fadeTo("fast",0.5);
});
$("#games").mouseenter(function(){
$("#games").fadeTo("fast",1.0);
});
$("#games").mouseleave(function(){
$("#games").fadeTo("fast",0.5);
});
$("#about").mouseenter(function(){
$("#about").fadeTo("fast",1.0);
});
$("#about").mouseleave(function(){
$("#about").fadeTo("fast",0.5);
});
$("#contact").mouseenter(function(){
$("#contact").fadeTo("fast",1.0);
});
$("#contact").mouseleave(function(){
$("#contact").fadeTo("fast",0.5);
});
$("#author").mouseenter(function(){
$("#author").fadeTo("fast",1.0);
});
$("#author").mouseleave(function(){
$("#author").fadeTo("fast",0.5);
});
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
$("#home").hide();
$("#games").hide();
$("#about").hide();
$("#author").hide();
$("#contact").hide();
$("#homebody").hide();
$("#homebody").fadeTo("slow",1.0);
$("#home").fadeTo("slow",0.5);
$("#games").fadeTo("slow",0.5);
$("#about").fadeTo("slow",0.5);
$("#author").fadeTo("slow",0.5);
$("#contact").fadeTo("slow",0.5);
$("#logo").hide();
$("#logo").fadeTo("slow",0.5);
$("#menutext").fadeTo("slow",1.0);
$("#home").click(function(){
$("#home").fadeIn("slow");
$("#homebody").fadeIn("slow");
$("#homebody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
$("#about").click(function(){
$("#about").fadeIn("slow");
$("#aboutbody").fadeIn("slow");
$("#aboutbody").show();
$("#gamesbody").hide();
$("#homebody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
$("#contact").click(function(){
$("#contact").fadeIn("slow");
$("#contactbody").fadeIn("slow");
$("#contactbody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#homebody").hide();
});
$("#author").click(function(){
$("#author").fadeIn("slow");
$("#authorbody").fadeIn("slow");
$("#authorbody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#homebody").hide();
$("#contactbody").hide();
});
$("#games").click(function(){
$("#games").fadeIn("slow");
$("#gamesbody").fadeIn("slow");
$("#homebody").hide();
$("#gamesbody").show();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
});
</script>
</body>
You can use this code (Provided by jQuery ui web site) to find your way:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Animate demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
var state = true;
$( "#button" ).click(function() {
if ( state ) {
$( "#effect" ).animate({backgroundColor: "#aa0000"}, 1000 );
} else {
$( "#effect" ).animate({backgroundColor: "#fff"}, 1000 );
}
state = !state;
});
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
<p>Just a line of text</p>
</div>
</div>
Toggle Effect
</body>
</html>
As you can see in this example, you can use $("#elementid").animate({backgroundColor: "#fff"}, 1000 ); to animate (fade in or out) the background color of your element.
You can find the full example here: http://jqueryui.com/animate/
You cannot use fadeTo() for this because it changes the opacity, and the opacity of a child cannot be different than the opacity of its parent.
You can, however, animate the background color, but you need to include the jquery UI library to do so.
Also, you do not have to choose two different background colors. Instead, you can set an opacity value for the background color.
The code to animate would look like this:
$("#parent").mouseenter(function () {
$(this).animate({ backgroundColor: 'rgba(64, 64, 64, 1)' }, 'fast');
});
$("#parent").mouseleave(function () {
$(this).animate({ backgroundColor: 'rgba(64, 64, 64, 0.5)' }, 'fast');
});
With the CSS like this:
#parent {
background-color: rgba(64, 64, 64, 0.5);
}
jsfiddle demo
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>).
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>