make HTML table as a slideshow/carousel - javascript

I have a html table,which i am populating using java script. the table has 10 cells.i want to make the table as a carousel so that first 5 cells are shown and then user can move to next 5 cells. I have tried looking on the internet,but all my search leads to plugins. i dont wana use plugin,as i am learning javascript.
My table code is shown below:
<div>
<table id="daily_forecast">
<tr id="time">
<td id="time0">
<td id="time1">
<td id="time2">
<td id="time3">
<td id="time4">
<td id="time5">
<td id="time6">
<td id="time7">
<td id="time8">
<td id="time9">
</tr>
<tr id="temp">
<td id="temp0">
<td id="temp1">
<td id="temp2">
<td id="temp3">
<td id="temp4">
<td id="temp5">
<td id="temp6">
<td id="temp7">
<td id="temp8">
<td id="temp9">
</tr>
</table>
and javascript wjich populates is
function populateTable(disp_forecast){
var tbl=document.getElementById("daily_forecast");
tbl.style.width = '900px';
tbl.style.height='200px';
tbl.style.position="relative";
tbl.style.left='60px';
tbl.style.top='40px';
tbl.style.border = '1px solid grey';
elemrow1Id="time";
elemrow2id="temp";
elemrow1Id_day="day"
var key4,key5,key6="";
for(var i=0;i<10;i++){
key4=elemrow1Id.concat(i);
key5=elemrow2id.concat(i);
key6=elemrow1Id_day.concat(i);
var day_time=disp_forecast[key4];
var day_temp=disp_forecast[key5];
if(day_time==0){
var day=disp_forecast[key6];
day=day.toString();
day=day.concat('\n');
day=day.concat("12am");
document.getElementById(key4).innerHTML=day;
//document.getElementById(key5).innerHTML=day_temp;
}
else if(day_time>12){
day_time=day_time-12;
day_time=day_time.toString();
day_time=day_time.concat("pm");
document.getElementById(key4).innerHTML=day_time;
//document.getElementById(key5).innerHTML=day_temp;
}
else if(day_time==12){
day_time=day_time.toString();
day_time=day_time.concat("pm");
document.getElementById(key4).innerHTML=day_time;
//document.getElementById(key5).innerHTML=day_temp;
}
else{
day_time=day_time.toString();
day_time=day_time.concat("am");
document.getElementById(key4).innerHTML=day_time;
//document.getElementById(key5).innerHTML=day_temp;
}
document.getElementById(key5).innerHTML=day_temp;
}
}
Please provide me some resource for making this table as a carousel or some solution.

This might at least get you started (I'm assuming horizontal movement). Typically a carousel is a div inside a div, with the outer div acting as a viewport/window, revealing only the desired parts of the inner div. You then scoot the inner div in response to some buttons or key presses.
CSS
.outerWrap, .innerWrap {
position: relative;
}
.outerWrap {
overflow: hidden;
}
HTML
<div class="outerWrap">
<div class="innerWrap">
<table> <!-- your stuff goes here --> </table>
</div>
</div>
Javascript
var elem = document.getElementsByTagNames('innerWrap')[0];
elem.style.left = "15px";
elem.style.left = "15px" is just an example of shifting the inner div to the right a little. You'll want to create a loop or something that moves it incrementally, probably in response to buttons, event listeners, etc...

Related

Is there a way to drag and copy, but prevent the drop with "draggable"? (JavaScript)

Right now I have a functional drag and copy. I was wondering if there was any way to drag copy, but not drop. For example, if a user held the shift key, he/she could rapidly click and drop clones without dropping the dragged element. If search high and low through the documentation and haven't found anything.
Here is my code https://jsfiddle.net/jado66/f8b4ms36/2/ :
<!DOCTYPE html>
<html>
<head>
<title>Drag Copy</title>
</head>
<style>
* {user-select: none; }
.cell {width:50px;height:50px;
}
img {width:50px;height:50px;cursor: move;}
table td #dropTable td:hover{background: #dedede;}
#dropTable {
border-spacing: 5px;
border: 1px solid #dedede;
}
.droppable:hover{
transform: scale(1.05);
transition-duration: 0.3s;
}
#dropTable tbody { height:300px; overflow-y:auto; }
</style>
<body>
<!-- Drag Table -->
<table style="border-spacing: 5px;">
<tr>
<td id="image1">
<div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<img class = "droppable newGate" src="droppable" src="https://picsum.photos/500/500?random=1"
ondragstart="dragStart(event)" id="1" draggable="true"/> </div>
</td>
<td id="image2">
<div class = "cell " ondrop="drop(event)" ondragover="allowDrop(event)">
<img class = "droppable" src="https://picsum.photos/500/500?random=2"
ondragstart="dragStart(event)" id="2" draggable="true" /> </div>
</td>
</tr>
</table>
<hr>
<!-- Drop Table -->
<table>
<tr>
<td>
<table id="dropTable" >
<tr >
<td> <div class = "cell"></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
</tr>
<tr>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
</tr>
</tr>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
</tr>
</table>
</td>
</tr>
</table>
<script>
const cells = document.querySelectorAll(".cell:empty"); //We only want to add event listeners to empty cells
for (const cell of cells){
cell.addEventListener('dragover',allowDrop);
cell.addEventListener('drop',drop);
}
function dragStart(evt)
{
evt.dataTransfer.setData("Text",evt.target.id);
}
function drop(evt)
{
var data = evt.dataTransfer.getData("Text");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = Date.now(); /* We cannot use the same ID */
evt.target.appendChild(nodeCopy);
if (evt.shiftKey){
console.log("Shift key pressed. Copy but keep drag");
//Invoke drag command, or prevent drop, etc.
}
}
function allowDrop(ob)
{
ob.preventDefault();
}
</script>
</body>
</html>
In short, no
To answer your question if it's possible to prevent the drop event when the user releases the mouse button: no.
From the spec:
Otherwise, if the user ended the drag-and-drop operation (e.g. by releasing the mouse button in a mouse-driven drag-and-drop interface), or if the drag event was canceled, then this will be the last iteration.
It might however be possible to instantly fire a new DragStart event as the user drops the node, but I couldn't get this to work. Couldn't find anything in the spec that said anything about that not being possible but I could be wrong.
A workaround for your particular use case
This is just a proof of concept fiddle, code doesn't look great and I'm sure it has bugs, but it does what you ask: https://jsfiddle.net/y9Lpxdea/3/. Hold your shift key and drag over the slots to clone the current object being held.
By storing the id of the element you want to clone from onDragStart in a variable (not in the DataTransfer object as DataTransfer.getData() is only accessible on the drop event) you can access the ID of the currently held object in the onDragEnter event and then duplicate the child from there. I left the current drag & drop functionality without holding the shift key intact.
let dragId = null;
function dragStart(evt)
{
evt.dataTransfer.setData("Text",evt.target.id);
dragId = evt.target.id;
}
function dragEnter(evt)
{
if (evt.shiftKey && dragId){
var nodeCopy = document.getElementById(dragId).cloneNode(true);
nodeCopy.id = Date.now(); /* We cannot use the same ID */
evt.target.innerHTML = "";
evt.target.appendChild(nodeCopy);
}
}
function drop(evt)
{
var data = evt.dataTransfer.getData("Text");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = Date.now(); /* We cannot use the same ID */
evt.target.appendChild(nodeCopy);
dragId = null;
}

How to show pretty colored and collapsable json in MVC.Core

First of all, this is for an experiment, so I am not looking for a nice super compatible solution :)
I have a table with two columns, the first one have an image and the second one JSon.
I would like the JSon to be colored and expandable, since it can be really big
I would like something like this:
This is my current code, which produces a proper indented json, but not colored or expandable:
<div>
<table style="width:100%; border-spacing: 50px;border-collapse: separate;">
#{
ProcessedImageViewModel[] processedImages = ViewBag.ProcessedImages;
foreach (ProcessedImageViewModel image in processedImages)
{
<tr>
<td style="width:50%; vertical-align:top">
<img style="width:100%" src="#image.FilePath" />
</td>
<td>
<pre><code>
<p>#image.OcrText</p> // THIS-IS-A-BIG-JSON
</code></pre>
</td>
</tr>
}
}
</table>
</div>
What is the easiest library and how can i use it from MVC to add such panels?
What is the easiest library and how can i use it from MVC to add such panels?
To achieve your requirement, you can try following code snippet with Renderjson js library.
<table style="width:100%; border-spacing: 50px;border-collapse: separate;">
#{
ProcessedImageViewModel[] processedImages = ViewBag.ProcessedImages;
foreach (ProcessedImageViewModel image in processedImages)
{
<tr>
<td style="width:50%; vertical-align:top">
<img style="width:100%" src="#image.FilePath" />
</td>
<td>
<div class="jsoncontainer">
#image.OcrText
</div>
</td>
</tr>
}
}
</table>
JS code
<script>
$(function () {
$(".jsoncontainer").each(function () {
var data = $(this).html();
$(this).empty();
$(this).append(
renderjson(JSON.parse(data))
);
})
})
</script>
Test Result

how to assign a js function to a class and get id when clicked

I'm working on a calculator and have a mousedown and mouseup function on every id. Is there some way to clean that up and have a function called anytime a class element is clicked and be able to get the id that's been clicked inside the function?
here's a link to a myfiddle calculator
also, I noticed that when I placed my javascript directly in the JS box it didn't work, however as a script embedded in the html it works fine. Could someone explain why?
<tr>
<td class='noborder' colspan='1' rowspan='2'> </td>
<td id='1' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>1</td>
<td id='2' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>2</td>
<td id='3' class='buttons' colspan='4' rowspan='2' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>3</td>
<td id='plus' class='buttons' colspan='4' onmousedown="mouseDown(this.id)" onmouseup="mouseUp(this.id)" ;>+</td>
<td class='noborder' colspan='1' rowspan='2'> </td>
</tr>
<script>
function mouseDown(id) {
document.getElementById(id).style.backgroundColor = "gray";
}
function mouseUp(id) {
document.getElementById(id).style.backgroundColor = "white";
}
</script>
I realized a way how to add mousedown and mouseup events on all the elements with a class:
var elements = document.getElementsByClassName("buttons");
for (var i = 0; i < elements.length; i++) {
elements[i].onmousedown = function() {
mouseDown(this.id);
mouseUp(this.id);
}
}
I tested it on w3schools.com.
(Also, I don't know what you mean by JS Box. Sorry.)
It might be because you have an id conflict on the page. Using IDs like "1" is not recommended for this reason; better to be more specific.
In fact, there is no need to query the element by its ID anyway. You can operate directly on the element by just passing it into the handler. E.g.
<td class='buttons' onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" >1</td>
<script>
function mouseDown(element) {
element.style.backgroundColor = "gray";
}
function mouseUp(element) {
element.style.backgroundColor = "white";
}
</script>
EDIT: As #bgaury mentioned, a CSS active pseudo class is a far better option for this use case however.
Remove the script tag, and add this to your css style:
.buttons:active {
background-color: gray;
}
For calculations use something like this:
<script>
var table = document.getElementsByTagName("table")[0]
table.addEventListener("click",clicked);
function clicked(el){
if (el.hasClass("buttons")){
//magic
}
}
</script>

Change class by evaluating innerHTML

I'm trying to change the style of a <span> by changing its class. I'm evaluating its text value and want it to change the className to 'red' if it's less than 97.7, or to 'green' if it's anything else. I'm evaluating all <span> of class "qadata".
function changeColor() {
var cells = document.getElementsByTagName('span').getElementsByClassName('qadata');
for (var i=0, len=cells.length; i<len; i++) {
if (parseFloat(cells[i].innerHTML) < 97.7){
cells[i].className = 'red';
}
else {
cells[i].className = 'green';
}
}
}
I'm trying to do this in the following HTML table:
<table datasrc='#QA' class="qa">
<thead>
<tr>
<th>Period</th>
<th>Safety</th>
<th>Quality</th>
<th>Shipping</th>
</tr>
</thead>
<tbody>
<tr>
<td class="leftcolumn"><span datafld='Period' width=100%></span></td>
<td><span datafld='Safety' width=100% class="safety"></span></td>
<td><span datafld='Quality' width=100% class="qadata"></span></td>
<td><span datafld='Shipping' width=100% class="qadata"></span></td>
</tr>
</tbody>
</table>
The data is populated using another function prior to calling changeColor(). This is a corporate intranet site, so I'm currently stuck using ie8 or ie10. JavaScript is preferable to jQuery in this instance.
I've been doing HTML and CSS for years, but never got into JavaScript until recently. I tried searching but haven't found a method posted here that works.
I created a jsfiddle that seems to work. I just used the:
document.querySelectorAll('span.qadata')
It changes the class names for the spans with class qadata. http://jsfiddle.net/mYUjL/

Adding row in a table with javascript = strange result in Chrome and safari

I've got to add a new row with it's content populated from an ajax query when I click on any row present. Everything is working well in ie8, ff3.6, opera11, but in chrome10 and safari5 the row are always shown as the first row even if the HTML code is well ordered.
the javascript use is here:
jQuery('.tx_tacticinfocours_pi1_cour_line').click(function (){
if(running==false){
running=true;
jQuery('.cour_detail_temp_inner').slideUp(500, function () {
jQuery(this).parents('.cour_detail_temp').remove();
});
var td=jQuery(this).after('<tr class="cour_detail_temp"><td colspan="8" style="padding: 0pt;"><div class="cour_detail_temp_inner" style="display: none;"></div></td></tr>');
td=td.next().find('.cour_detail_temp_inner');
var url=jQuery(this).find('.tx_tacticinfocours_pi1_detail_link a').attr('href');
td.load(url,function(){
jQuery(this).slideDown(500,function(){running=false;});
});
}
});
and here is the HTML (it's typo3 template):
<table class="tx_tacticinfocours_pi1_liste" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>###TITRE_WEB###</th>
<th>###TITRE_PDF###</th>
<th>###TITRE_DETAILS###</th>
<th>###TITRE_SIGLE###</th>
<th>###TITRE_TITRE###</th>
<th>###TITRE_ENLIGNE###</th>
<th>###TITRE_ENSEIGNANT###</th>
<th>###TITRE_RESPONSABLE###</th>
</tr>
<!-- ###COURS### begin -->
<tr class="tx_tacticinfocours_pi1_cour_line">
<td class="tx_tacticinfocours_pi1_link"><!-- ###COURS_LINK### begin -->###COURS_WEB_IMAGE###<!-- ###COURS_LINK### end --></td>
<td class="tx_tacticinfocours_pi1_link"><!-- ###PDF_LINK### begin -->###PDF_IMAGE###<!-- ###PDF_LINK### end --></td>
<td class="tx_tacticinfocours_pi1_link tx_tacticinfocours_pi1_detail_link"><!-- ###DETAILS_LINK### begin -->###DETAILS_IMAGE###<!-- ###DETAILS_LINK### end --></td>
<td class="tx_tacticinfocours_pi1_sigle" nowrap>###COURS_SIGLE###</td>
<td class="tx_tacticinfocours_pi1_titre">###COURS_TITRE###</td>
<td class="tx_tacticinfocours_pi1_enligne">###COURS_ENLIGNE###</td>
<td class="tx_tacticinfocours_pi1_enseignant" nowrap>###COURS_ENSEIGNANT###</td>
<td class="tx_tacticinfocours_pi1_responsable" nowrap>###COURS_RESPONSABLE###</td>
</tr>
<!-- ###COURS### end -->
have you got any idea why it's doing so or any work around?
I'm not sure, but try turning:
var td=jQuery(this).after(...)
to: var td=jQuery('<tr class="cour_detail_temp"><td colspan="8" style="padding: 0pt;"><div class="cour_detail_temp_inner" style="display: none;"></div></td></tr>').appendTo(this);
I think what you've got there is more of a css problem than a javascript problem.
I stumbled upon this today. Turns out the "main rows" in my table had display:block, which makes the new ones that have display:table-row end up on top even if they're mingled in the HTML. Having display:table-row on the "main rows" leaves the inserted ones in place. Go figure! (Safari only)
Not sure this is the problem, but instead of:
var td=jQuery(this).after(...)
try this:
var td=jQuery(this).parent().after(...)

Categories

Resources