Making a table dynamic - javascript

Made a table for a product listings page that has a row of 3 images, then a row of text below each image, then repeat. Rather than have the page scroll down indefinitely, I figure it would be better to use some JS/jQuery to change the values in each < td > (img & matching text) than to create a new page for every 6 products. However, my kindergarten-level JS is failing me miserably.
While I think the question I'm asking above is pretty obvious, I'm also wondering if this never should have been set up as a table in the first place. It seemed like the easiest way to keep it organized, but the few examples I've seen seem to do this with < div >'s rather than tables.
Here's a JSFiddle I was messing around with: http://jsfiddle.net/jshweky/FgVY2/
HTML:
<table id="saladGrid">
<tr class="saladPics">
<td class="s1"></td>
<td class="s2"></td>
<td class="s3"></td>
</tr>
<tr class="saladTxt">
<td class="txt">
<p>acorn squash, golden beets, pistachios</p>
</td>
<td class="txt">
<p>roasted eggplant, herbed ricotta, sumac</p>
</td>
<td class="txt">
<p>arugula, fennel, blackberries, quinoa, pickled shallots</p>
</td>
</tr>
<tr class="saladPics">
<td class="s4"></td>
<td class="s5"></td>
<td class="s6"></td>
</tr>
<tr class="saladText">
<td class="text">
<p>arugula, orange, golden beets, golden tomatoes, pistachios</p>
</td>
<td class="text">
<p>caesar</p>
</td>
<td class="text">
<p>butternut squash, lime, feta, chili</p>
</td>
</tr>
</table>
<button id="prev">Prev</button>
<button id="next">Next</button>
CSS (paraphrased):
table {
width: 100%;
height: 100%;
margin-top: 0;
padding: 0;
border: 0;
border-spacing: 0;
}
td {
margin: 0;
padding: 0;
border: 0;
text-align: center;
vertical-align: middle;
}
#saladGrid table {
margin: 0 auto;
border-spacing: 30px;
}
.saladPics td {
height: 350px;
width: 350px;
background-position: center;
background-size: 415px 400px;
background-repeat: no-repeat;
border-radius: 250px;
border: 1px black solid;
}
.saladText {
position: relative;
margin-bottom: -20px;
}
.saladPics td.s1 {
background-image: url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");
}
I figure it's a matter of creating new var's and writing a function to add 6 to the existing img class (e.g. s1 becomes s7, etc.) but that's just a guess and as I said, even if that's right I'm still in the embryonic stages of JS coding.

Your JavaScript to Swap the image works fine, the issue is the first part of your script. I commented it out in the fiddle and it worked fine. There are definitely better ways to do this (sliding DIVs inside a container, build elements in javascript and append them to the frames on the page - this would give you almost a pinterest style effect of loading new elements at the bottom) - it all depends on how you want to handle it but my suggestion would be to look into using jQuery to add or remove elements to the DOM.
//var s7= new image();
//img.src=url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHC9Vk1U5yC5RWMhUK9Ai2RGIDCSh-wxPt-aleQm9onxi9xbN9dA');
$(document).ready(function () {
$('#prev').click(function () {
$('.s1').css('background-image', 'url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg")');
});
});
Also, here is an alternate syntax for the .css() that will let you change more than one property of an elements at a time (you will need to use the .html() function to change the text in the following element too):
$('.s1').css({backgroundImage : 'url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg")', backgroundSize : "cover"}); });

Related

Is it possible to extend the borders of table data <td> to align with content that has been moved via negative margins?

I have a collapsible table, which opens and closes when clicking on Accounting. It requires a unique layout. I have added a checkbox to my collapsible rows, which must align with the Date column. I have shifted all my titles over with a negative margin, in order to group with the checkbox. Now, I need to extend the borders, so they appear underneath the titles again(see picture below). I have created a codesandbox for your review. Can anyone advise on the best method to extend the borders, so they align with the titles? Please note: My date column uses rowspans, so I don't believe adding padding-left will resolve the issue.
Code Snippet:
<tbody>
<tr>
<td rowSpan="3" id="date">
Date
</td>
<td colSpan="4">
<label className="accounting-label" htmlFor="accounting">
Accounting
</label>
<input
type="checkbox"
name="accounting"
id="accounting"
data-toggle="toggle"
onClick={showNestedData}
></input>
</td>
</tr>
<tr className="accounting-data hide">
<td className="australia-data">
<div className="flex-au-wrapper">
<div className="au-checkbox-wrapper">
<input
type="checkbox"
id="au-checkbox"
name="subscribe"
value="newsletter"
></input>
</div>
<div>Australia</div>
</div>
</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
To extend table border you can give some padding,you can also you can select the one you want with :nth child
in codesandbox the bottom border already covered the checkbox and title 'Accounting'. So, if you also want to cover the Date then please add the following CSS code to yours
.accounting-data,
tr {
position : relative;
/* border-bottom: 1px solid #ccc; */
}
th, td{
border: 0;
}
tr::before {
content : "";
display: block;
position: absolute;
width: calc(100vh + 150px);
top: 0;
background: #555;
border-bottom: 1px solid #ccc;
left: 0;
}
May it helps :)

I want to save the on-click using JavaScript and JQuery whenever I click DivTag, and save it on screen and post it

I implemented jquery javascript onclick to switch the opacity of div tag (0 and 100) whenever I clicked on the div tag. I used jquery and
javascript by array, onclick, get element by Id and so on.
But even if I refresh the page, I want to save it in the database so that I can get a screen that I clicked.
So, is there a way to get the information to the database every time I click it? I want to use jquery as much as possible. Because I don't understand the link_to function of ruby on rails.
I tried to save data by using jquery but I failed. Since I use jquery onclick event again, changing multiple divs' opacity (by onclick) is gone.
<table>
<tr id="line1">
<td class="timeTableCellTime">9:00</td>
<td class="time_td">
<div class="timeTableCell" id="c1-1"></div>
</td>
<td class="time_td">
<div class="timeTableCell" id="c1-2"></div>
</td>
<td class="time_td">
<div class="timeTableCell" id="c1-3"></div>
</td>
<td class="time_td">
<div class="timeTableCell" id="c1-4"></div>
</td>
<td class="time_td">
<div class="timeTableCell" id="c1-5"></div>
</td>
<td class="time_td">
<div class="timeTableCell" id="c1-6"></div>
</td>
<td class="time_td">
<div class="timeTableCell" id="c1-7"></div>
</td>
</tr>
</table>
var array = ['c1-1', 'c1-2', 'c1-3', 'c1-4', 'c1-5', 'c1-6', 'c1-7']
$('#line1 td').click(function() {
var i = $(this).index();
var element = document.getElementById(array[i - 1]);
if (element.style.opacity === "100") {
element.style.opacity = "0";
element.style.transition = "0.2s";
} else {
element.style.opacity = "100";
element.style.transition = "0.2s"
}
});
.timeTableCell {
width: 100px;
text-align: center;
height: 55px;
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
opacity: 0;
transition: 0.1s;
cursor: pointer;
}
.timeTableCell:hover {
opacity: 100;
transition: 0.2s;
}
#c1-1,
#c2-1,
#c3-1,
#c4-1,
#c5-1,
#c6-1,
#c7-1,
#c8-1,
#c9-1,
#c10-1,
#c11-1,
#c12-1,
#c13-1 {
background-image: url('cell_01.png');
}
you can use cookie i think
here two function for cookie manipulation
Set cookie and get cookie with JavaScript
first get the cookie with getCookie('key') if its null you start as new when the user click save it with setCookie('key','DIV_ID') if its not null you can do your selected div manipulation

Is there a way to center my tables/images in this codepen?

So I've recently started learning how to code. I decided to make a website with all of the smash character damage values. My main setback so far is I have been unable to find a way to center all my differently sized tables and my images.
SO far I have tried to put all my tables into divs and centering them with auto margins on left and right. Additionally I have tried to flexbox my tables and center them that way but nothing seems to work. It seems to me that the only option I have left is to manually center them all but that seems like it would take forever and I am confident there is a different solution.
Here are how my tables are currently configured
#damagetablemario {
display:none;
position:absolute;
top:700px;
left:80px;
border-collapse:collapse;
}
#damagetablemario2 {
display:none;
position:relative;
top:400px;
left:110px;
border-collapse:collapse;
}
#damagetablemario3 {
display:none;
position:relative;
top:450px;
left:540px;
border-collapse:collapse;
margin-bottom:200px;
}
Here are how my tables are written in html
<table id = "damagetablemario">
<tr>
<th>Neutral</th>
<th>Forward Tilt</th>
<th>Up Tilt</th>
<th>Down-Tilt</th>
<th>Forward-Smash</th>
<th>Up-Smash</th>
<th>Down-Smash</th>
<th>Neutral-Air</th>
<th>Forward-Air</th>
<th>Back-Air</th>
<th>Up-Air</th>
<th>Down-Air</th>
</tr>
<tr>
<td class = "Neutral">2.2% (punch)<br>1.7% (punch)<br> 4% (kick)</td>
<td class = "Forward-Tilt">7%</td>
<td class = "Up-Tilt">5.5%</td>
<td class = "Down-Tilt">5% (foot) <br> 7% (body)</td>
<td class = "Forward-Smash">17.8% (fire)<br> 14.7% (arm)</td>
<td class = "Up-Smash">14%</td>
<td class = "Down-Smash">10% (front)<br> 12% (back)</td>
<td class = "Neutral-Air">8% (clean)<br> 5% (late)</td>
<td class = "Forward-Air">12% (early)<br> 14% (clean)<br> 10%(late)</td>
<td class = "Back-Air">10.5% (clean)<br> 7% (late)</td>
<td class = "Up-Air">7%</td>
<td class = "Down-Air">1.4% (1-5 hits) <br>
5.5% (hit 6) <br>
2% (landing)
</td>
</tr>
</table>
<table id = "damagetablemario2">
<tr>
<th>Grab</th>
<th>Pummel</th>
<th>Forward Throw</th>
<th>Back Throw</th>
<th>Up Throw</th>
<th>Down Throw</th>
<th>Neutral Special</th>
<th>Side Special</th>
<th>Up Special</th>
<th>Down Special</th>
<th>Final Smash</th>
</tr>
<tr>
<td>0%</td>
<td>1.3%</td>
<td>8%</td>
<td>11% (throw)<br>8% (collateral)</td>
<td>7%</td>
<td>5%</td>
<td>5% (early)<br>4% (late)</td>
<td>7% 1.5x <br> projectile reflect</td>
<td>5% (hit 1)<br> 0.6% (hits 2-6)<br>3% (hit 7)</td>
<td>0%</td>
<td>2% (early)<br>2.5% (clean)<br>3% (late)</td>
</tr>
</table>
<table id = "damagetablemario3">
<tr>
<th>Floor Attack Front</th>
<th>Floor Attack Back</th>
<th>Floor Attack Trip</th>
<th>Edge Attack</th>
</tr>
<tr>
<td >7%</td>
<td >7%</td>
<td >5%</td>
<td >9%</td>
</tr>
</table>
My end goal is to have my tables centered in the middle of my screen regardless of how much text is in them.
https://codepen.io/JariCarlson/pen/pBYOjb
I see most of the styling in your css are done using an ID (#). Due to this the same set of styles are repeated multiple times which makes your CSS file larger. Better approach is to create one CLASS with all common styling and use the class name multiple times in your HTML. This way amending your styles/maintaining will be very simple. This is the exactly what you are facing now :)
So one way to do this is by using grid. By doing this there's is no need to have left margins for your tables. So
Remove all left: styling on all tables
Remove display: none; on all tables
If position: absolute; use width: 100%;
CSS:
table {
display: grid;
justify-items: center;
}
#damagetablemario {
/* display:none; */ /* remove */
position:absolute;
width: 100%; /*Add */
top:700px;
/* left:80px; */ /* remove */
border-collapse:collapse;
}
#damagetablemario2 {
/* display:none; */ /* remove */
position:relative;
top:400px;
/* left:110px; */ /* remove */
border-collapse:collapse;
}
#damagetablemario3 {
/* display:none; */ /* remove */
position:relative;
top:450px;
/* left:540px; */ /* remove */
border-collapse:collapse;
margin-bottom:200px;
}
Replace your left property to 0 and add this CSS property to your table
table {
display: flex;
justify-content: center;
}
you can also try transform: translateX(-50%);
Don't use display: block; for your tables. Use display: table; remove left and set margin: auto;

Change Div Class On Each Click

I am building Bootstrap HTML and PHP website. Basically I need a solution so that when a div is clicked on it changes color and adds some text.
I can do this however I need a solution so that it can be done 3 times, bronze, silver and gold in this instance.
Below is my JSFiddle which shows it working, it changes to bronze and inserts the text as it should however the second click will not work and the third click won't work.
https://jsfiddle.net/vvecu9qa/1/
Hope that makes sense,
Thanks in advance guys!
HTML
<table class="table table-bordered">
<tbody>
<tr>
<td>Name</td>
<td>Spin on a variety of body parts</td>
<td>Spin with control and body tension</td>
<td>Spin in a variety of shapes</td>
<td>Identify appropriate places to perform a spin</td>
</tr>
<tr>
<td>Jon Smith</td>
<td class="progress1"> </td>
<td class="progress2"> </td>
<td class="progress3"> </td>
<td class="progress4"> </td>
</tr>
</tbody>
CSS
.emerging {
background-color: #cd7f32;
color: #fff;
text-align: center;
}
.expected {
background-color: #c0c0c0;
color: #fff;
text-align: center;
}
.exceeding {
background-color: #ffd700;
color: #fff;
text-align: center;
}
JavaScript
$('.progress1').click(function(){
$(".progress1").removeClass("progress1");
$(this).addClass('emerging');
$(this).text('Emerging');
});
$('.emerging').click(function(){
$(".emerging").removeClass("emerging");
$(this).addClass('expected');
$(this).text('Expected');
});
$('.expected').click(function(){
$(".expected").removeClass("expected");
$(this).addClass('exceeding');
$(this).text('Exceeding');
});
change your script like this, it will work
$(document).on("click",'.progress1',function(){
$(".progress1").removeClass("progress1");
$(this).addClass('emerging');
$(this).text('Emerging');
});
$(document).on("click",'.emerging',function(){
$(".emerging").removeClass("emerging");
$(this).addClass('expected');
$(this).text('Expected');
});
$(document).on("click",'.expected',function(){
$(".expected").removeClass("expected");
$(this).addClass('exceeding');
$(this).text('Exceeding');
});
here is the updated fiddle link
Since you only have 3 scenarios, your approach is fine. However, a more intuitive approach would be to create an array and an index, then cycle through them. This way you would only need one click event instead of 1 per step.
Updated Fiddle Here
var classes = ['emerging', 'expected', 'exceeding'];
var index = 0;
$('.progress1').click(function(){
$(this).removeClass(); //Removes all classes
$(this).addClass(classes[index]);
$(this).text(classes[index]);
if(index == (classes.length - 1)) {
index = 0; //Reset index at end of array
} else {
index++; //Increment index if not at the end of array
}
});
Try this approach. I have used the data attribute to make it a bit cleaner.
https://jsfiddle.net/mvinayakam/m4q3rgrq/
<td class="progress" data-progress="base" ><span> <span></td>
The Javascript part
$('.progress').click(function(){
progressAttr=this.getAttribute('data-progress');
switch (progressAttr)
{
case "base":
this.setAttribute('data-progress',"emerging");
break;
case "emerging":
this.setAttribute('data-progress',"exceeding");
break;
}
});
The CSS
[data-progress="emerging"] {
/* Styles */
background-color: #cd7f32;
color: #fff;
text-align: center;
}
[data-progress="emerging"]:after {
content:"Emerging";
}

High Numbered Colspan HTML Tables alterable via Javascript

I'm having some trouble getting my Table and Colspans to work. I'm trying to create a grid that can be used as a calendar. Each 'table' can represent a working day period (8:30pm til 6pm).
In my design I seperated this into 38 columns, one for each 15 minute time span.
I've done this so that I can display non-overlapping events next to each other, and ones that conflict with an already 'used' cell, can be created on a new row within this table.
However, with 38 columns in my design, my colspans are not working.
My first row is set to be 19 and 19, so 50%.
My second row is set to be 38, so that's 100%.
Yet when IE is rendering this, it's displaying the first row as around a 30% / 70% split.
My HTML/CSS/Javascript is below:
<html>
<head>
<script type="text/javascript">
function setColSpan1(){
var x=document.getElementById('myTable').rows[0].cells
x[0].colSpan="1"
x[1].colSpan="37"
}
function setColSpan2(){
var x=document.getElementById('myTable').rows[0].cells
x[0].colSpan="19"
x[1].colSpan="19"
}
</script>
</head>
<body>
<style>
.column {
font-size: 1pt;
width: 100%;
background-color: red;
padding: 0px;
margin: 0px;
margin-bottom: 1px;
border: 1px solid black;
height: 10px;
}
.emptycolumn {
font-size: 1pt;
width: 100%;
background-color: blue;
padding: 0px;
margin: 0px;
margin-bottom: 1px;
border: 1px solid white;
height: 10px;
}
</style>
<table id="myTable" border="0" cellpadding="0" cellspacing="0" width="100px">
<tr>
<td colspan="19"><div id="1" class="column" onclick="alert('test');" title="lala test"></div></td>
<td colspan="19"><div id="2" class="emptycolumn"></div></td>
</tr>
<tr>
<td colspan="38"><div id="3" class="column"></div></td>
</tr>
<tr>
<td colspan="1"><div id="4" class="column"></div></td>
<td colspan="24"><div id="5" class="emptycolumn"></div></td>
<td colspan="13"><div id="6" class="column"></div></td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan1()" value="Change colspan 1">
<input type="button" onclick="setColSpan2()" value="Change colspan 2">
</form>
</body>
</html>
I started with tests originally of only 6 columns, and that seemed to work perfectly, but increasing my design to 38 has broken this.
Is my design wrong? How can I get this to work accurately? Thanks
it doesn't work because the browser can't calculate correctly width of your columns
you need to create first row with 38 columns (without colspan), then hide it and in your functions work with next row (1st in your case)
e.g.:
document.getElementById('myTable').rows[1].cells
P.S.: id attribute: Specifies a unique id for an element.
Naming rules:
Must begin with a letter A-Z or a-z
Can be followed by: letters (A-Za-z), digits (0-9), hyphens (-), and underscores (_)
In HTML, all values are case-insensitive
and specify a DOCTYPE for your document

Categories