This code works well apart from when the floating header appears it is one pixel to the right of the original.
Any way to line them up fully? So when you scroll the header floats smoothly and doesn't appear to move out to the right ?
<title>Table with Persistent Headers</title>
<link rel="stylesheet" href="css/Styles.css">
<style>
.floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
}
</style>
<style>
th {background-color:#FF0000;}
</style>
<script src="js/wiz/jquery-1.8.0.js"></script>
<script>
function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".floatingHeader", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
floatingHeader.css({
"visibility": "visible"
});
} else {
floatingHeader.css({
"visibility": "hidden"
});
};
});
}
// DOM Ready
$(function() {
var clonedHeaderRow;
$(".persist-area").each(function() {
clonedHeaderRow = $(".persist-header", this);
clonedHeaderRow
.before(clonedHeaderRow.clone())
.css("width", clonedHeaderRow.width())
.addClass("floatingHeader");
});
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Persistent Headers</h1>
<p>Scroll down and watch the table headers stay with the table when they normally would be scrolled off the screen.</p>
<table class="persist-area">
<thead>
<tr class="persist-header">
<th>Column One Header</th>
<th>Column Two Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>table1 data1</td>
<td>table1 data1</td>
</tr>
<tr>
<td>table1 data2</td>
<td>table1 data2</td>
</tr>
<tr>
<td>table1 data3</td>
<td>table1 data3</td>
</tr>
<tr>
<td>table1 data4</td>
<td>table1 data4</td>
</tr>
<tr>
<td>table1 data5</td>
<td>table1 data5</td>
</tr>
<tr>
<td>table1 data6</td>
<td>table1 data6</td>
</tr>
<tr>
<td>table1 data7</td>
<td>table1 data7</td>
</tr>
</tbody>
</table>
</body>
</html>
Thanks
The reason it is moving to the right is because you are applying position: fixed to an element inside a table, and giving "position" to elements such as tr, td, or th isn't really a good practice as they weren't made for tables.
However in your case, it seems to work if you add a margin-left:-1px; to the.floatingHeader class.
.floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
margin-left: -1px; // *** This one here ***
}
Setting the left position fixes the problem:
function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".floatingHeader", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
floatingHeader.css({
"visibility": "visible",
left: offset.left // <-- set left position
});
} else {
floatingHeader.css({
"visibility": "hidden"
});
};
});
}
Here's a working example: http://jsfiddle.net/UpAeu/
Related
happy new year!!!
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
margin: 0;
}
table {
border-collapse: collapse;
}
td span {
display: flex;
align-items: center;
justify-content: center;
background-color: #09C;
font-weight: bold;
}
img {
padding: 10px;
}
#dragtable {
border-collapse: collapse;
}
#dragtable th,
#dragtable td {
border: 1px solid black;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="targetTable" class="b" border="10" bordercolor="blue" id="myT">
<tbody>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td> 5</td>
<td> 6</td>
<td> 7</td>
<td> 8</td>
<td> 9</td>
<td> 10</td>
<td> 11</td>
<td> 12</td>
</tr>
<tr>
<td> 24</td>
<td> 23</td>
<td> 22</td>
<td> 21</td>
<td> 20</td>
<td> 19</td>
<td> 18</td>
<td> 17</td>
<td> 16</td>
<td> 15</td>
<td> 14</td>
<td> 13</td>
</tr>
</tbody>
</table>
<table id="dragtable">
<thead>
<tr>
<td>ID</td>
<td>TO</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
const items = [{
id: 0,
dataid: "a",
type: "red",
src: "https://i.imgur.com/ZEZLSOo.png",
draggable: 2,
position: 12,
alt: "Norway",
},
{
id: 1,
dataid: "b",
type: "red",
src: "https://i.imgur.com/ZEZLSOo.png",
draggable: 2,
position: 12,
alt: "Norway",
},
{
id: 2,
dataid: "a",
type: "black",
src: "https://i.imgur.com/dL3J8XS.jpeg",
draggable: 2,
position: 13,
alt: "Norway",
},
{
id: 3,
dataid: "b",
type: "black",
src: "https://i.imgur.com/dL3J8XS.jpeg",
draggable: 2,
position: 13,
alt: "Norway",
}
]
const itemHTML = (item) => {
return `
<span
class="event"
data-id="${ item.dataid }"
draggable="${ !!item.draggable }"
>
${ item.dataid } <img
data-imgid="${ item.id }"
src="${ item.src }"
class="b"
alt="${ item.alt }"
style="width: 30%;"
/>
</span>
`
}
// redrawing the table based on item attributes
const updateTable = (table, items) => {
$(table).find('td').each(function(i, e) {
let html = ''
const filtered = items.filter(({
position
}) => position - 1 === i)
if (filtered.length) {
filtered.forEach(item => {
html += itemHTML(item)
})
} else {
html = !$(e).parent().index() ? i + 1 : 24 - $(e).index()
}
e.innerHTML = html
})
}
updateTable('#targetTable tbody', items)
const dragrowHTML = ({
id,
to
}) => {
return `<tr><td>${ id }</td><td>${ to }</td></tr>`
}
$(function() {
initDragAndDrop();
});
function clearDragAndDrop() {
$('.event').off();
$('#targetTable td').off('dragenter dragover drop');
}
function initDragAndDrop() {
$('.event').on('dragstart', function(event) {
const itemid = event.target.getAttribute('data-imgid')
var dt = event.originalEvent.dataTransfer;
//add dat-attr and class from where to remove
dt.setData('id', itemid);
});
$('.event').on('dragend', function(event) {
clearDragAndDrop();
initDragAndDrop();
});
// updated event handling
$('#targetTable td').on('dragenter dragover drop', function(event) {
event.preventDefault();
if (event.type === 'drop') {
const itemid = event.originalEvent.dataTransfer.getData('id');
const item = items.find(({
id
}) => id == itemid)
// if item is draggable
if (item && item.draggable) {
// calculate position
item.position = ($(event.target).parent().index() * $(event.target).parent().children().length) + ($(event.target).index() + 1)
// update table
updateTable('#targetTable tbody', items)
// update item's draggable property
$('#dragtable tbody').append(dragrowHTML({
id: item.id,
position: item.position
}))
item.draggable--
}
}
});
}
</script>
</body>
</html>
If you run this code then you will have a table that you actually move images through the table and creating a new table with name "dragtable". I want to save the dragtable ,into my database, the values it takes(Id and position).As a result the problem is with my php code..as you can understand it is id the image and position where it goes in the table.My php code is this
// I fill with my connection - I got this code from stackoverflow from another question and I fill my infos
$pdo = 'mysql:host=localhost;dbname=backen';
$username = 'root';
$pwd='';
try {
$db = new PDO($pdo, $username, $pwd);
echo"connected to database";
}
catch (PDOException $e) {
$error_message = $e->getMessage();
echo "this is displayed because an error was found";
exit();
}
//require('path/to/pdo/connection/stateme.nts'); I didn't quite understand how that works ,nor find similar thats why I create it that up .I had similar connection require "c/dbconnect.php";
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, TRUE);
//a nice guy help me with that but here I got an error on that $pdo-> , the error of lines it shows me is those
//connected successfuly
//Fatal error: Uncaught Error: Call to a member function setAttribute() on string in //C:\Xampppp\htdocs\Myproject Stack trace: #0 {main} thrown in C:\Xampppp\htdocs\ in this line with $pdo->setAttribute
$query = "
SELECT *
FROM my_table
ORDER
BY position
";
$stmt = $pdo->prepare($query);
$stmt->execute();
$data = $stmt->fetchAll();
print_r($data);
$query = "
UPDATE my_table x
JOIN
( SELECT image
, position old_order
, ROUND(CASE WHEN position NOT BETWEEN LEAST(:old_position,:new_position) AND GREATEST(:old_position,:new_position)
THEN position
WHEN position = :old_position THEN :new_position
ELSE position+(((:old_position>:new_position)-.5)*2)
END
,0) new_order
FROM my_table
) y
ON y.image = x.image
SET position = new_order
";
$old_position = $_GET['old_position'];
$new_position = $_GET['new_position'];
$stmt = $pdo->prepare($query);
$stmt->execute(array('old_position' => $old_position,'new_position' => $new_position));
?>
Let's do a conclusion,
First,I am connected - It shows me message connected to database,I
added that to my code.I think I am ok with that part.
Second on that line I have error with I search it but I didn't
managed to do that $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES,
TRUE);
3.For more information,not to solve it if it is difficult,is there another way to pass the dragtable table ( the dragging moves) into a database except for that way? if you can find another way I to do it ,because I can't figure out a way to do that..or send me similar ways how to do it ,because I am searching so long how to put my table into a database.As a result the next time someone will get in will remember "saved" the moves I did.
Thanks in advance.
I am trying to get the result from "headline" and "content" to show up one at a time and then fade in and out to the next result in a loop. Currently, it shows all the results at once and the fades in and out and then show all the results again. Any idea on how to get them to show one at a time TIA
<html>
<head>
<style>
#table1{/*table aspects and design */
border:1px solid #FFFFFF;
background:#FFFFFF;
display:none;
width: 60%;
margin-left: auto;
margin-right: auto;
}
th{/*align table headers*/
text-align:center;
}
td,th{
border:1px solid #FFFFFF;
text-align:center;
}
</style>
</head>
<table id="table1" cellpadding="5" cellspacing="1" width="50%">
<? if ($query=$pdo->prepare("SELECT * FROM `Announcements_Current`"))
{
/* select all information from the table and take it into the page */
$query->execute();
while ($result = $query->fetch(PDO::FETCH_ASSOC)){
$head = $result['headline'];/*puts result of headline from table into variable*/
$content = $result['content'];
/*puts result of content from table into variable*/
echo /* echo the table to display announcements*/'
<tr>
<th>
<h1>
'.$head.'
</h1>
</th>
</tr>
<tr>
<td>
<font size="4">
'.$content.'
</font>
</td>
</tr>';
}
}
?>
</table> <!--end of table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/* define script for jquery*/
for (var i = 0; i < 500; i++) {/* for loop to fade in and out the announcements*/
$(document).ready(function() {/*function to fade table in and out*/
$('#table1').fadeIn(2000);
$('#table1').delay(5000);
$('#table1').fadeOut(2000);
}
)};
</script>
You need to use a timer in your Javascript to show each row separately.
$(document).ready(function() {
var cur_row = 0;
setInterval(function() {
$("#table1 tr").fadeOut(2000).eq(cur_row).fadeIn(2000);
cur_row = (cur_row + 1) % $("table1 tr").length;
}, 5000);
});
i have this code:
<?php
$i=5;
while($i > 0){
echo '
<table width="500px" border="1">
<tr>
<td>
<button id="button">Show comments</button>
</td>
</tr>
<tr>
<td id="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<script type="text/javascript">
$("#button").toggle(
function (){
$("#button").text("Hide Comments");
document.getElementById("comments").style.display="inline";
},function (){
$("#button").text("Show Comments");
document.getElementById("comments").style.display="none";
}
);
</script>
<script type="text/javascript" src="jquery.js"></script>
';
$i--;
}
?>
When the show comments button is clicked the comment box should show up. It works for the first one. But it doesn't work for the others.What's wrong?
I'd just escape the php interpreter and print the HTML markup directly into the page. I'd also change the ids to classes, so we can more easily reuse them without quirky additional numbers.
<?php
$i=5;
while($i > 0):
?>
<table width="500px" border="1">
<tr>
<td><button class="button" data-clicked="0">Show comments</button></td>
</tr>
<tr>
<td class="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<?php
$i--;
endwhile;
?>
I don't know what the element with an ID of show is, but we'll just assume it was the button.
$(".button").click(function (){
var $this = $(this);
if(!$this.data('clicked')){
$this.text("Hide Comments");
$this.closest('table').find('.comments').css('display', 'inline');
$this.data('clicked', 1);
}else{
$this.text("Show Comments");
$this.closest('table').find('.comments').css('display', 'none');
$this.data('clicked', 0);
}
});
Don't print that javascript in a while loop in php, just include it in the head of the page, or in a separate file.
Edit
As indicated in a comment below,in jQuery 1.9 the toggle no longer works as you're intending to use it, as a work around, you can add a data attribute to the button, and check it each time we click.
<button class="button" data-clicked="0">
As you can see we've added the new data-clicked attribute.
In our JavaScript above, you can see that we've completely changed how it works. We perform our own if/else to check the data-clicked state.
It is generally good practice to separate code, markup and style declarations. As a matter of style, I prefer numbered IDs. I find they help with debugging. ymmv
I also like to animate changes so people can more easily follow a change.
<!doctype html>
<html>
<head>
<title>Button Testing 1 2 3</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.comment {
display: none;
height: 0px;
width: 500px;
}
td {
width: 500px;
border: 1px solid #555;
border-collapse: collapse;
}
</style>
</head>
<body>
<?
$j = 0;
while ($j < 5 ) {
?>
<table>
<tr>
<td>
<button id="button_<?= $j ?>" class="button">Show comments</button>
</td>
</tr>
<tr>
<td class="comment"><span id="comment_<?= $j ?>">J = <?= $j ?></span></td>
</tr>
</table>
<?
$j++;
} ?>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
var id = $(this).attr('id');
var j = id.substr(id.indexOf('_') +1);
if ($(this).hasClass('revealed')) {
$(this).removeClass('revealed').text('Show Comments');
$('#comment_'+j).removeClass('revealed').parent().animate({'height' : 0}, function(){$(this).css({'display': 'none'})});
} else {
$(this).addClass('revealed').text('Hide Comments');
$('#comment_'+j).addClass('revealed').parent().css({'display': 'inline'}).animate({'height' : '300px'});
}
});
});
</script>
</body>
</html>
I want to create a banner scrolling function for my homepage. I am not too sure of which programming language to use here. I want to code something similar to: http://www.squidfaceandthemeddler.com/. But I want the footer to remain at the same position while the user scroll the table. Is it possible to get that result? I have create a simple tables and 2 images for the user to click on
here is my code for the tables:
<div id="banner" style="height:750px; width:600px; overflow:scroll;" >
<table width="750px" height="600px">
<tr>
<td><img src="banner1.png"/></td>
</tr>
</table>
<table width="750px" height="600px">
<tr>
<td><img src="banner2.png"/></td>
</tr>
</table>
<table width="750px" height="600px">
<tr>
<td><img src="banner3.png"/></td>
</tr>
</table>
</div>
and this is the upwards and downwards button for the scrolling:
<table width="750px" height="30px">
<tr>
<td align="right"><img src="images/up_arrow.png"/><img src="images/down_arrow.png"/></td>
</tr>
</table>
If you put the contents inside two div tags you can use CSS to clip the
outer div and "scroll" the inner div by scripting its CSS "top" value, thus:
<html><head><style>
#contents{
position: relative; top: 0; left: 0; width: 100px; height: auto;}
#scrollable{ overflow: hidden; width: 100px; height: 100px; border: 1px
solid black;
}
</style>
<script>
var t = 0;
function up()
{
t += 10;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
function down()
{
t -= 10;
with(document.getElementById("contents"))
{
if(t < -clientHeight)
t = -clientHeight;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
</script></head>
<body><table><tr><td>up</td>
<td rowspan="2"><div id="scrollable">
<div id="contents">scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
</div></div>
</td></tr><tr><td>
down</td></tr></table>
</body></html>
take the help of this edit your code
Have a look at jquery scrolltop: http://api.jquery.com/scrollTop/. I would fix the tables width to a certain height, like you already did and then:
$('#buttonUpID').click(function () {
var currentScrollTop = $('body').scrollTop();
$('body').scrollTop(currentScrollTop - 600);
});
$('#buttonDownID').click(function () {
var currentScrollTop = $('body').scrollTop();
$('body').scrollTop(currentScrollTop + 600);
});
I need a help with the following code. There are 2 styles: activatedRow and disactivatedRow. When a user clicks on a button (located inside the TD of a table), then either activatedRow or disactivatedRow is applied to a row. Selection of a style is based on current style. For instance, if a row is activated, then the button will disactivate it, and vice versa.
So, I have a problem with AJAX success. How to write IF statement to check current style of a row?
P.S. Also it would be interesting to know how to change TD IMG (button) for disactivated and activated rows.
CSS
.activatedRow td {
background-color:#FFFFFF !important;
color: #000000 !important;
}
.disactivatedRow td {
background-color:#DFE1ED !important;
color: #9896A8 !important;
}
Function "disactivateRow()"
<script type="text/javascript">
function disactivateRow(flightNum,obj){
$.ajax({
type: "POST",
url: "callpage.php?page=tables/disactivate.php",
data: "flightNum=" + flightNum,
success: function(){
if ($(obj).hasClass("activatedRow")) {
$(obj).removeClass("activatedRow").addClass("disactivatedRow");
} else
$(obj).removeClass("disactivatedRow").addClass("activatedRow");
}
});
}
</script>
Button inside the table
<table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%">
<thead>
<tr>
<th scope="col">Flt Num</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach ($result1 as $row):
$flightNum=$row['flightNum'];
?>
<tr id="<?php echo $flightNum; ?>" class="edit_tr">
<td><?php echo $flightNum;?></td>
<td id="<?php echo $flightNum; ?>">
<div onclick='disactivateRow("<?php echo $flightNum; ?>", this)'>
<img src='images/disactivate.png' alt='Disactivate' />
</div>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
jQuery DataTable activation
$(document).ready(function(){
$('#newspaper-b').dataTable({
"sPaginationType":"full_numbers",
"bJQueryUI":true,
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData[0] == "0") {
nRow.className = "disactivatedRow";
} else
nRow.className = "activatedRow";
return nRow;
}
});
ANSWER:
It works now:
$(".disact_but" ).click(function() {
var ID=$(this).attr('id');
$.ajax({
type: "POST",
url: "callpage.php?page=tables/disactivate.php",
data: "flightNum=" + ID,
success: function(){
$("#"+ID).toggleClass("disactivatedRow", 100);
}
});
return false;
});
If obj is the TD to apply the style as your code indicates you could use toggleClass
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
$(obj).closest('tr').toggleClass('disactivatedRow');
$(obj).closest('tr').toggleClass('activatedRow');
EDIT
According new information you added, obj is a row's child. closest method should give you the appropiate tr and then we can apply toggleClass