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.
Related
I have two tables in my webpage, each being populated with a php while loop.
My first table gets all its data outputted but my second while loop only outputs as many fields as the first one.
My second while loop is not nested within the other one, they are both independent from each other.
When i check the console I see that my second while loops seems to have outputted my data but when I click on my button to display the entire column, only 3 values appear instead of all of them
This is what is shown when I click on TEAM TASK
https://imgur.com/4FCu1dX
This is what is shown when I click on MY TASK
https://imgur.com/q1F6sgx
I also noticed that whether I click on MYTASK or TEAM TASK their are two rows from MYTASK that are always shown.
I Initially had both while loops within the same table but then moved them to each fill there own table but this issue still occurs.
<table border='0' style="float:left; width:20%; height: 500px; border-radius: 5px; display: block;" bgcolor="#2B4353">
<thead>
<tr>
<td bgcolor="#2B4353" border="0" valign="top" align="right">
<div class="messages-header-my" onclick="myTasks()"><p id="myTasks">MY TASKS</p></div></td>
</tr>
</thead>
<tbody>
<?php
while($row8 = mysqli_fetch_array($TableMY)){ $task1234=$row8[1];
?>
<tr id="my" style="display: block;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
<?php if ($row8[0]=='HIGH')
{$statuscss= 'taskHigh';}
elseif ($row8[0]== 'MEDIUM')
{$statuscss= 'taskMedium ';}
else{ $statuscss= 'taskLow';}
echo 'class="',$statuscss,'"';?> style="margin-left: 30px;">OD_<?php echo $task1234?></p></td></tr>
<?php }?>
</tbody>
</table>
<table border='0' style="float:left; width:20%; height: 500px; border-radius: 5px; display: block;" bgcolor="#2B4353">
<thead>
<tr>
<td bgcolor="#2B4353" border="0" valign="top" align="right">
<div class="messages-header-team" onclick="teamTasks()"><p id="teamTasks">TEAM TASKS</p></div></td>
</tr>
</thead>
<tbody>
<?php
while($row8 = mysqli_fetch_array($TableTeam)){ $task1234=$row8[1];
?>
<tr id="team" style="display:none;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
<?php if ($row8[0]=='HIGH')
{$statuscss= 'taskHigh';}
elseif ($row8[0]== 'MEDIUM')
{$statuscss= 'taskMedium ';}
else{ $statuscss= 'taskLow';}
echo 'class="',$statuscss,'"';?> style="margin-left: 30px;">OD_<?php echo $task1234?></p></td></tr>
<?php }?>
</tbody>
</table>
My php
require('server.php');
session_start();
$email=$_SESSION['email'];
$sqli="Select URLDomain from Admin.Users where Email = ?";
$stmt =mysqli_prepare($link,$sqli);
mysqli_stmt_bind_param($stmt,"s",$email );
mysqli_stmt_execute($stmt);
$useremail=mysqli_stmt_get_result($stmt);
$row = mysqli_fetch_array($useremail);
$DBdomain=$row[0];
mysqli_select_db($link,"Universe");
$stmt = mysqli_prepare($link,"Select Priority,TaskNumber from Task where urlDomain=?");
mysqli_stmt_bind_param($stmt,"s",$DBdomain );
mysqli_stmt_execute($stmt);
$TableTeam=mysqli_stmt_get_result($stmt);
mysqli_stmt_close($stmt);
mysqli_select_db($link,"Universe");
$stmt = mysqli_prepare($link,"Select Priority,TaskNumber from Task where TaskOwner=?");
mysqli_stmt_bind_param($stmt,"s",$email );
mysqli_stmt_execute($stmt);
$TableMY=mysqli_stmt_get_result($stmt);
mysqli_stmt_close($stmt);
Here is my Javascript
<script>
function messagesTab() {
document.getElementById("task-message").style.display = "block";
}
</script>
<script>
function myTasks() {
document.getElementById("myTasks").style.color = "#1FAC96";
document.getElementById("teamTasks").style.color = "#FFFFFF";
document.getElementById("team").style.display = "none";
document.getElementById("my").style.display = "block";
document.getElementById("messageDisplay").style.display = "block";
document.getElementById("myTaskView").style.display = "none";
}
</script>
<script>
function teamTasks() {
document.getElementById("teamTasks").style.color = "#1FAC96";
document.getElementById("teamTasks").style.underline = "#1FAC96";
document.getElementById("myTasks").style.color = "#FFFFFF";
document.getElementById("team").style.display = "block";
document.getElementById("my").style.display = "none";
document.getElementById("myTaskView").style.display = "none";
document.getElementById("messageDisplay").style.display = "block";
}
</script>
<script>
function myTaskView(Task_Number) {
$.ajax({
url:'messages_select.php',
type:'POST',
data:{Task_Number:Task_Number},
success:function(data){
$('#myTaskView').html(data);
document.getElementById("myTaskView").style.display = 'block';
document.getElementById("messageDisplay").style.display = 'none';
}
});
}
</script>
<script>
var main = function() {
$('form').submit(function(event) {
var $input = $(event.target).find('input');
var comment = $input.val();
if (comment != "") {
var user = '<i class="fas fa-user-circle"></i>';
var userInfo = $(user).text(' '+'nataliekoly#mail.usf.edu'+' | '+'01/31/19'+' | '+'3:45 PM')
var comment = $('<li>').text(comment);
comment.prependTo('#comments');
userInfo.prependTo('#comments');
$input.val("");
}
return false;
});
}
$(document).ready(main);
</script>
IDs need to be unique, you can't have id="my" and id="team" on each row of the table. Use classes instead:
<tr class="my" style="display: block;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
and
<tr class="team" style="display:none;" onclick="myTaskView('<?php echo $task1234?>')"><td bgcolor="#2B4353" border="0" valign="top" colspan="3"><p
Then you need to loop over them:
document.querySelectorAll(".my").forEach(el => el.style.display = "block");
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);
});
here i have one html table i want to do download the datas in xls format,i don't know to download,i want to use any plugin or not,
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="jquery.min.js"></script>
<table border="1" id="ReportTable" class="myClass">
<tr bgcolor="#CCC">
<td width="100">id</td>
<td width="700">Name</td>
<td width="170">Email</td>
<td width="30">Mobile</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>1</td>
<td>Kani</td>
<td>Kani#gmail.com</td>
<td>9986128665</td>
</tr>
</table>
<input type="submit" value="Export to Excel">
Reference from Export to CSV using jQuery and html
$(document).ready(function() {
function exportTableToCSV($table, filename) {
var $rows = $table.find('tr:has(td)'),
// Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(11), // vertical tab character
tmpRowDelim = String.fromCharCode(0), // null character
// actual delimiter characters for CSV format
colDelim = '","',
rowDelim = '"\r\n"',
// Grab text from table into CSV formatted string
csv = '"' + $rows.map(function(i, row) {
var $row = $(row),
$cols = $row.find('td');
return $cols.map(function(j, col) {
var $col = $(col),
text = $col.text();
return text.replace(/"/g, '""'); // escape double quotes
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"';
// Deliberate 'false', see comment below
if (false && window.navigator.msSaveBlob) {
var blob = new Blob([decodeURIComponent(csv)], {
type: 'text/csv;charset=utf8'
});
// Crashes in IE 10, IE 11 and Microsoft Edge
// See MS Edge Issue #10396033
// Hence, the deliberate 'false'
// This is here just for completeness
// Remove the 'false' at your own risk
window.navigator.msSaveBlob(blob, filename);
} else if (window.Blob && window.URL) {
// HTML5 Blob
var blob = new Blob([csv], {
type: 'text/csv;charset=utf-8'
});
var csvUrl = URL.createObjectURL(blob);
$(this)
.attr({
'download': filename,
'href': csvUrl
});
} else {
// Data URI
var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
$(this)
.attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}
}
// This must be a hyperlink
$(".export").on('click', function(event) {
// CSV
var args = [$('#dvData>table'), 'export.csv'];
exportTableToCSV.apply(this, args);
// If CSV, don't do event.preventDefault() or return false
// We actually need this to be a typical hyperlink
});
});
a.export,
a.export:visited {
display: inline-block;
text-decoration: none;
color: #000;
background-color: #ddd;
border: 1px solid #ccc;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Export Table data into Excel
<div id="dvData">
<table border="1" id="ReportTable" class="myClass">
<tr bgcolor="#CCC">
<td width="100">id</td>
<td width="700">Name</td>
<td width="170">Email</td>
<td width="30">Mobile</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>1</td>
<td>Kani</td>
<td>Kani#gmail.com</td>
<td>9986128665</td>
</tr>
</table>
</div>
I have created a page, it has a select box which is used for filtering the results in a table below it. The select box is using ajax to filter results.The table which is loaded after ajax call has a button in one column, on its click a div should be added in the page. The onclick for this button was working fine when the table was static with static button to add div, now the table is being loaded through ajax the button doesn't work, it doesn't add the div that it was adding before. Can someone point out the problem please, I am a beginner in jquery and ajax
here is my code:
(function ( $ ) {
$(document).ready(function(){
var itemsArr = [];
$(".btn-add").on("click",function() {
var $row = $(this).closest("tr"); // Find the row
var $text = $row.find(".this-name").text(); // Find the text
// Let's test it out
$('#col2').append('<div class="item"><p>'+$text+'</p>X</div>');
itemsArr.push($text);
//alert(itemsArr);
console.log("added");
$("#items").val(JSON.stringify(itemsArr));
});
function getAll(){
$.ajax
({
url: 'http://asp4.walnut-labs.com/getproducts.php',
data: 'action=showAll',
contentType :'application/json',
cache: false,
success: function(r)
{
$("#col1").html(r);
}
});
}
getAll();
// function to get all records from table
// code to get all records from table via select box
$("#brands").change(function()
{
var id = $(this).find(":selected").val();
var dataString = 'action='+ id;
$.ajax
({
url: 'http://asp4.walnut-labs.com/getproducts.php',
data: dataString,
contentType :'application/json',
cache: false,
success: function(r)
{
$("#col1").html(r);
}
});
});
});
$(document).on('click','.delete-button', function(e){
e.preventDefault();
//alert('yes');
$(this).closest('.item').remove();
});
}( jQuery ));
HTML is :
<tbody>
<tr bgcolor="#238efb" color="white">
<td style="text-align: center; color: #fff;"><strong>ID</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Item Code</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Item Name</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Brand</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Button</strong></td>
</tr>
<?php
while($row = mysql_fetch_array($comments, MYSQL_ASSOC))
{
$id = $row['id'];
$name = $row['code'];
$level = $row['name'];
$number = $row['brand'];
?><tr>
<td class="this-id" style="text-align: center;"><?php echo $id;?></td>
<td class="this-name" style="text-align: left; padding-left: 15px;"><?php echo $name;?></td>
<td style="text-align: left; padding-left: 15px;"><?php echo $level;?></td>
<td style="text-align: left; padding-left: 15px;"><?php echo $number;?></td>
<td style="text-align: left; padding-left: 15px;"><button class="btn-add">Add Item</button></td>
</tr><?php
}
mysql_close($con);
?>
</tbody>
</table>
For selectbox that triggers AJAX:
<div class="searchbar">
<select name="brands" id="brands">
<option value="showAll" selected="selected">Show All Products</option>
<?php $querybrand = "SELECT DISTINCT brand FROM q1h27_data ";
$commentsbrand = mysql_query($querybrand);
while($row = mysql_fetch_array($commentsbrand, MYSQL_ASSOC))
{
//print_r($row['brand']);?>
<option value="<?php echo $row['brand']; ?>"><?php echo $row['brand']; ?></option>
<?php } ?>
</select>
</div>
Use the following:
$(document).ready(function(){
var itemsArr = [];
$(document).on('click','.btn-add',function() {
// code goes here.....
});
}
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/