i'm doing phonegap project with html5-css-js.
on this project, i use iscroll swipe for swipe gesture issue between pages.
on my first page, my iscroll works and scrolling down all page.
But when i swipe my second page, my second page looks static. It doesnt go bottom and doesnt show the data, doesnt move.
Here is the code i use;
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
</head>
<body>
<div class="frame">
<div id="pageWrapper">
<div id="pageScroller">
<div class="page" >
<div id="wrapper">
<div class="scroller">
<h1>Canlı Skorlar</h1>
<hr/>
<table border="1">
<tr>
<td rowspan="2" width="15%" align="center"> data1 </td>
<td width="85%"> data2</td>
<td> data3 </td>
</tr>
<tr>
<td> data4 </td>
<td> data5</td>
</tr>
</table>
</div>
</div>
</div>
<div class="page" >
<div id="wrapper">
<div class="scroller">
<h1>Canlı Skorlar</h1>
<hr/>
<table border="1">
<tr>
<td rowspan="2" width="15%" align="center"> data1 </td>
<td width="85%"> data2</td>
<td> data3 </td>
</tr>
<tr>
<td> data4 </td>
<td> data5</td>
</tr>
</table>
</div>
</div>
</div>
<div class="page" >
<div id="wrapper">
<div class="scroller">
<h1>Canlı Skorlar</h1>
<hr/>
<table border="1">
<tr>
<td rowspan="2" width="15%" align="center"> data1 </td>
<td width="85%"> data2</td>
<td> data3 </td>
</tr>
<tr>
<td> data4 </td>
<td> data5</td>
</tr>
</table>
</div>
</div>
</div>
<div class="page" >
<div id="wrapper">
<div class="scroller">
<h1>Canlı Skorlar</h1>
<hr/>
<table border="1">
<tr>
<td rowspan="2" width="15%" align="center"> data1 </td>
<td width="85%"> data2</td>
<td> data3 </td>
</tr>
<tr>
<td> data4 </td>
<td> data5</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>
Anyone can tell me how can i get rid of this problem ?
Thanks.
UPDATE : scroll.js
document.addEventListener("orientationchange", updateLayout);
// The wrapperWidth before orientationChange. Used to identify the current page number in updateLayout();
wrapperWidth = 0;
var myScroll = new iScroll('pageWrapper', {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false,
lockDirection: true});
updateLayout();
function updateLayout() {
var currentPage = 0;
if (wrapperWidth > 0) {
currentPage = - Math.ceil( $('#pageScroller').position().left / wrapperWidth);
}
wrapperWidth = $('#pageWrapper').width();
$('#pageScroller').css('width', wrapperWidth * 4);
$('.page').css('width', wrapperWidth - 40);
myScroll.refresh();
myScroll.scrollToPage(currentPage, 0, 0);
}
page3Scroll = new iScroll('wrapper', {hScrollbar: false, vScrollbar: false, lockDirection: true });
and i couldnt put iscroll js because of limitations.
So, i didnt eat js folders.
So. Help please my friend.
I found this solution on iscroll4 documentation.
"iScroll needs to be initialized for each scrolling area you need. There’s no limit to the number of iScrolls you can have on any single page, if not that imposed by the device memory/cpu. The type and length of the contents influence the number of iScrolls you can use simultaneously."
I hope it helps for someone.
Try to initialize/refresh the function after 'pageshow' event since iScroll has issues with display:none property.
Check my detail explanation here: https://stackoverflow.com/a/18726304/1959362
For example:
$('#<id-of-your-jqm-page>').on('pageshow', function() {
setTimeout(function () {
myScrollFunction .refresh();
}, 100);
});
Related
FACING ISSUE IN CREATING MULTIPLE TABLE FILTERS IN HTML TABLE.
Following is the HTML code wherein I'm trying to filter out data on the basis of 3 columns(here, table has a total of 4 columns). The last column is just a URL hence doesn't need filtering.
But the filters aren't working.
<!doctype html>
<html lang="en">
<head>
<title>Problems Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var $filterableRows = $('#tableF').find('tr').not(':first'),
$inputs = $('.search-key');
$inputs.on('input', function() {
$filterableRows.hide().filter(function() {
var $filterableColumns = $(this).find('td').not(':last');
return $filterableColumns.filter(function() {
var tdText = $(this).text().toLowerCase(),
inputValue = $('#' + $(this).data('input')).val().toLowerCase();
return tdText.indexOf(inputValue) != -1;
}).length == $filterableColumns.length-1;
}).show();
});
</script>
</head>
<body>
<h1 style="text-align:right;"><strong>CODER'S GYM</strong></h1>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section"><i><u>Problems Arena</u></i></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="text-center mb-4">Click on <strong>Try</strong> to Solve</h4>
<input type="text" id="Code" class="search-key" placeholder="Code">
<input type="text" id="Title" class="search-key" placeholder="Title">
<input type="text" id="Difficulty" class="search-key" placeholder="Difficulty">
<div class="table-wrap">
<table id="tableF">
<thead class="thead-primary">
<tr>
<th>Code</th>
<th>Title</th>
<th>Difficulty</th>
<th>Try</th>
</tr>
</thead>
<tbody>
<tr>
<td data-input="Code">ABC</th>
<td data-input="Title">Two Sum</td>
<td data-input="Difficulty" >Easy</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">BCD</th>
<td data-input="Title">Add Two Numbers</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">CDE</th>
<td data-input="Title">Longest Substring Without Repeating Characters</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">DEF</th>
<td data-input="Title">Median of Two Sorted Arrays</td>
<td data-input="Difficulty" >Hard</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">EFG</th>
<td data-input="Title">Longest Palindromic Substring </td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td border-bottom-0" data-input="Code">FGH</th>
<td class="border-bottom-0" data-input="Title">Zingzag Conversion</td>
<td class="border-bottom-0" data-input="Difficulty" >Medium</td>
<td class="border-bottom-0">Try</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I have tried all the things here, but still the code isn't working. I'd be glad if someone could help to resolve this issue as soon as possible.
This might work:
<!doctype html>
<html lang="en">
<head>
<title>Problems Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $filterableRows = $('#tableF').find('tr').not(':first'),
$inputs = $('.search-key');
$inputs.on('input', function() {
$filterableRows.hide().filter(function() {
var $filterableColumns = $(this).find('td').not(':last');
return $filterableColumns.filter(function() {
var tdText = $(this).text().toLowerCase(),
inputValue = $('#' + $(this).data('input')).val().toLowerCase();
return tdText.indexOf(inputValue) != -1;
}).length == $filterableColumns.length-1;
}).show();
});
});
</script>
</head>
<body>
<h1 style="text-align:right;"><strong>CODER'S GYM</strong></h1>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section"><i><u>Problems Arena</u></i></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="text-center mb-4">Click on <strong>Try</strong> to Solve</h4>
<input type="text" id="Code" class="search-key" placeholder="Code">
<input type="text" id="Title" class="search-key" placeholder="Title">
<input type="text" id="Difficulty" class="search-key" placeholder="Difficulty">
<div class="table-wrap">
<table id="tableF">
<thead class="thead-primary">
<tr>
<th>Code</th>
<th>Title</th>
<th>Difficulty</th>
<th>Try</th>
</tr>
</thead>
<tbody>
<tr>
<td data-input="Code">ABC</th>
<td data-input="Title">Two Sum</td>
<td data-input="Difficulty" >Easy</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">BCD</th>
<td data-input="Title">Add Two Numbers</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">CDE</th>
<td data-input="Title">Longest Substring Without Repeating Characters</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">DEF</th>
<td data-input="Title">Median of Two Sorted Arrays</td>
<td data-input="Difficulty" >Hard</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">EFG</th>
<td data-input="Title">Longest Palindromic Substring </td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td border-bottom-0" data-input="Code">FGH</th>
<td class="border-bottom-0" data-input="Title">Zingzag Conversion</td>
<td class="border-bottom-0" data-input="Difficulty" >Medium</td>
<td class="border-bottom-0">Try</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
We put all you javascript inside $(document).ready(function() {}); In this way, html table object is rendered, and ready to be filtered.
And also I suggest you to use the last jQuery code, that is at our day, jquery 3.6.0.
I am trying to expand/collapse the following row if row with class='sector' is clicked
This same code seems to work for many people as per other stackoverflow answers but it is not working for me and I wonder why? I do not know much jquery but this seems to me to be workable but still does not work.
Kindly give a simple solution
$(document).ready(function() {
$("td[colspan=2]").hide();
$("tr.sector").click(function() {
$(this).next().toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table">
<tr>
<td scope="col">Sector</th>
<td scope="col">Total Qty</th>
</tr>
<tr class="sector">
<td>Sector no. 2</td>
<td>
M : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 5 | NPSC Apartment</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
<tr class="sector">
<td>Sector no. 3</td>
<td>
M : 2, MJ : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 1 | Heritage Tower (Sawan CGHS)</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
<div class="row">
<div class="col-4">Plot no. 8 | Himachali Apartment</div>
<div class="col-4">2 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
</table>
</div>
</div>
You are hiding the td[colspan=2] inside tr and trying to toggle that same tr without actuality showing the td you have hidden in first place.
So you need to use next to get next tr sibling and find inside td[colspan=2] you have hidden and toggle that.
Please read documentation on Jquery Tree Traversal and next time watch for your HTML tree. Its all well documented and explained on link provided.
$(document).ready(function() {
$("tr > td[colspan=2]").hide();
$("tr.sector").click(function() {
$(this).next().find("td[colspan=2]").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table">
<tr>
<td scope="col">Sector</th>
<td scope="col">Total Qty</th>
</tr>
<tr class="sector">
<td>Sector no. 2</td>
<td>
M : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 5 | NPSC Apartment</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
<tr class="sector">
<td>Sector no. 3</td>
<td>
M : 2, MJ : 1, </td>
</tr>
<tr>
<td colspan="2">
<p>
<div>
<div class="row">
<div class="col-4">Plot no. 1 | Heritage Tower (Sawan CGHS)</div>
<div class="col-4">1 Packets</div>
<div class="col-4">Details</div>
</div>
<div class="row">
<div class="col-4">Plot no. 8 | Himachali Apartment</div>
<div class="col-4">2 Packets</div>
<div class="col-4">Details</div>
</div>
</div>
</p>
</td>
</tr>
</table>
</div>
</div>
Lets say I am reading the table contents from database and printing the table rows. Sometimes I may have more than 5 rows data in the database sometimes I may have less than 5 rows data in the database.
What I want is when the table rows exceeds 5 rows it should take scrollbar, if it is less than 5 rows it should not take scrollbar.
I have gone through many websites where they fix the table body height and if the content exceeds that height it takes the scrollbar.
So I don't want table body height to be fixed because when there is less content in the table body it will take the fixed table body size it look odd. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
My table look like below image.
Scrollable tables aren't the most fun to play around with, so I've added a snippet that should get you moving along.
$(document).ready(function(){
if( $('#results tr').length >= 5 ) {
$('#myTable').addClass('add-scroll');
}
});
.add-scroll {
overflow-y: scroll;
height: 100px;
}
#results tr td {
width: 33%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<td>
<table width="100%" height="40">
<tr>
<th width="33%">Firstname</th>
<th width="33%">Lastname</th>
<th width="33%">Email</th>
</tr>
</table>
</td>
</tr>
</thead>
<tbody scrollbars="yes" class="dyn-height">
<tr>
<td>
<div id="myTable">
<table width="100%" id="results">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
</body>
You have to count the number of rows then add class when the rows are greater than 5.
$(document).ready(function(){
var rowCount = $('tbody tr').length;
if(rowCount > 5){
console.log(rowCount);
$('table').addClass('do-scroll');
}
});
.do-scroll{
width: 100%;
height: 220px;
display: -moz-grid;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
I'm using Bootstrap 3 for a fairly simple table, I need to display 4 columns side by side even on phones, something like this:
<div class="container">
<div class="row" >
<div class="col-xs-5" >
<p style="margin-top: 25%;">A Day in the life of Dror</p>
</div>
<div class="col-xs-1">6:30 am<br />7:30 am<br />8:00 am<br />13:00 am<br />16:00 am<br />17:00 am<br />18:00 am<br />20:00 am<br />22:00 am<br />23:00 am</div>
<div class="col-xs-1">sample img</div>
<div class="col-xs-5 ">WAKE UP <br />MEETING / BREAKFAST <br />FIRST LESSON / TFILA <br />LUNCH BREAK <br />END OF SCHOOL <br />HOMEWORK TIME<br />DINNER <br />EXTRA CURRICULUM ACTIVITIES<br />ALL RETURN TO BUILDING <br />LIGHT'S OUT</div>
</div>
</div>
but on phones it still displays stacked.
Well the code works fine, you must be facing an issue due the padding on smaller phones, maybe you can set the padding to 0px or to any other value less than the default which is 15px for both the left and right side, we need to do this for all the columns under the row.
.remove-padding > div{
padding:0px;
}
So I add the class remove-padding to the remove the padding for all the children of the first level of row (i.e the columns under the row). Please let me know if this fixes your issue.
JSFiddle Demo
.table {
border-bottom:0px !important;
}
.table th, .table td {
border: 1px !important;
}
.fixed-table-container {
border:0px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:50px";>
<div class="container">
<table class="table">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>6:30 am</td>
<td>sample img</td>
<td>WAKE UP</td>
</tr>
<tr>
<td> </td>
<td>7:30 am</td>
<td> </td>
<td>MEETING / BREAKFAST</td>
</tr>
<tr>
<td> </td>
<td>8:00 am</td>
<td> </td>
<td>FIRST LESSON / TFILA </td>
</tr>
<tr>
<td> </td>
<td>13:00 am</td>
<td> </td>
<td>LUNCH BREAK</td>
</tr>
<tr>
<td> A Day in the life of Dror </td>
<td>16:00 am</td>
<td> </td>
<td>END OF SCHOOL</td>
</tr>
<tr>
<td> </td>
<td>17:00 am</td>
<td> </td>
<td>HOMEWORK TIME</td>
</tr>
<tr>
<td> </td>
<td>18:00 am</td>
<td> </td>
<td>DINNER</td>
</tr>
<tr>
<td> </td>
<td>20:00 am</td>
<td> </td>
<td>EXTRA CURRICULUM ACTIVITIES</td>
</tr>
<tr>
<td> </td>
<td>23:00 am</td>
<td> </td>
<td>ALL RETURN TO BUILDING</td>
</tr>
<tr>
<td> </td>
<td>24:00 am</td>
<td> </td>
<td>LIGHT'S OUT</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I've found a few similar topics here searching but I've not been able to adapt them to my exact situation. I have a simple single page website (well, I want it to be a single page) with five hyperlinks near the top. I have five different tables to display for each link and rather than create a new page for each table and use regular links to them I thought it'd be nice to fade one table out and fade the others in on the same page, depending on which link is clicked obviously.
So the default page would have the nav at the top:
Table 1
Table 2
Table 3
Table 4
Table 5
Then by default table1 would show on the page:
<table id="table1">
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<table>
And the other four tables would be hidden. Then if the link to table 2 is clicked table 1 fades out and table 2 fades in, same for the other four tables/links
So the question is, what jQuery do I need for this? I know I need to use fadein/out and replaceWith but I've not been successful trying to modify some other examples I've found on here. Some specific examples with multiple tables would be appreciated.
Don't reinvent the wheel, use something like jQuery UI. Check out the example for Effect here: http://jqueryui.com/effect/. Notice that there are several different effects that it can do for you. After finding the effect that you like you can click on the 'view source' link to grab the code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var current, tbl = $(".tbl").hide(), speed = 1000, sliding = false;
$(".hnd").click(function(e){
e.preventDefault();
if(sliding == true) return;
sliding = true;
var tblId = $(this).attr("href");
if(!current){
$(tblId).slideDown(speed, function(){
current = tblId;
sliding = false;
});
} else {
$(current).slideUp(speed, function(){
$(tblId).slideDown(speed, function(){
current = tblId;
sliding = false;
});
});
}
});
});
</script>
<style type="text/css">
.tbl{
border: 1px solid;
}
</style>
</head>
<body>
<a class="hnd" href="#table1">Table 1</a>
<a class="hnd" href="#table2">Table 2</a>
<a class="hnd" href="#table3">Table 3</a>
<a class="hnd" href="#table4">Table 4</a>
<a class="hnd" href="#table5">Table 5</a>
<div id="table1" class="tbl">
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
</table>
</div>
<div id="table2" class="tbl">
<table>
<tr>
<td>foo 2</td>
</tr>
<tr>
<td>bar 2</td>
</tr>
</table>
</div>
<div id="table3" class="tbl">
<table>
<tr>
<td>foo 3</td>
</tr>
<tr>
<td>bar 3 </td>
</tr>
</table>
</div>
<div id="table4" class="tbl">
<table>
<tr>
<td>foo 4</td>
</tr>
<tr>
<td>bar 4</td>
</tr>
</table>
</div>
<div id="table5" class="tbl">
<table>
<tr>
<td>foo 5</td>
</tr>
<tr>
<td>bar 5</td>
</tr>
</table>
</div>
</body>
</html>
First of all, it is not good practise to user the same identifier on different HTML elements:
Table 1`
<table id="table1">`
you have to set up a click event on navigation or specify handlers explicitly as attributes:
Table 1
and then define the handler:
function ShowTable(number)
{
//fade out table that is shown
$('table:visible').fadeOut('slow',function (){
$('#table'+number).fadeIn('slow');
});
}
EDITED: make browser to wait until visible table is faded out before starting fading in the other table
Just change slideDown to fadeIn and slideUp to fadeOut.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var current, tbl = $(".tbl").hide(), speed = 1000, sliding = false;
$(".hnd").click(function(e){
e.preventDefault();
if(sliding == true) return;
sliding = true;
var tblId = $(this).attr("href");
if(!current){
$(tblId).fadeIn(speed, function(){
current = tblId;
sliding = false;
});
} else {
$(current).fadeOut(speed, function(){
$(tblId).fadeIn(speed, function(){
current = tblId;
sliding = false;
});
});
}
});
});
</script>
<style type="text/css">
.tbl{
border: 1px solid;
}
</style>
</head>
<body>
<a class="hnd" href="#table1">Table 1</a>
<a class="hnd" href="#table2">Table 2</a>
<a class="hnd" href="#table3">Table 3</a>
<a class="hnd" href="#table4">Table 4</a>
<a class="hnd" href="#table5">Table 5</a>
<div id="table1" class="tbl">
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
</table>
</div>
<div id="table2" class="tbl">
<table>
<tr>
<td>foo 2</td>
</tr>
<tr>
<td>bar 2</td>
</tr>
</table>
</div>
<div id="table3" class="tbl">
<table>
<tr>
<td>foo 3</td>
</tr>
<tr>
<td>bar 3 </td>
</tr>
</table>
</div>
<div id="table4" class="tbl">
<table>
<tr>
<td>foo 4</td>
</tr>
<tr>
<td>bar 4</td>
</tr>
</table>
</div>
<div id="table5" class="tbl">
<table>
<tr>
<td>foo 5</td>
</tr>
<tr>
<td>bar 5</td>
</tr>
</table>
</div>
</body>
</html>