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>
Related
I need to have a word that when clicked (like a link) it will go to a specific row on a table, all on the same page. I have a table with this format:
<div id="table1">
<table width='100%' id = 'table1'>
<tr>
<th><b>Coluna1:</b></th>
<th><b>Coluna2:</b></th>
</tr>
<tr>
<td>Word1</td>
<td>Text1</td>
</tr>
<tr>
<td>Word2</td>
<td>Text2</td>
</tr>
<tr>
<td>Word3</td>
<td>Word3</td>
</tr>
</table>
How can I do this?
Yes, you can do that by setting ids for each row/cell you want to go to and linking to #<id>.
#keyframes highlight {
from { background-color: yellow; }
to { background-color: #0000; }
}
:target {
animation: highlight 1s linear;
}
<p>Go to</p>
<ul>
<li>Word1</li>
<li>Text1</li>
<li>Row1</li>
<li>Text2</li>
</ul>
<table width='100%' id ="table1">
<tr>
<th><b>Coluna1:</b></th>
<th><b>Coluna2:</b></th>
</tr>
<tr id="row1">
<td id="word1">Word1</td>
<td id="text1">Text1</td>
</tr>
<tr id="row2">
<td id="word2">Word2</td>
<td id="text2">Text2</td>
</tr>
<tr>
<td>Word3</td>
<td>Word3</td>
</tr>
</table>
You can use anchor links. For example:
<div id="table1">
<table width='100%' id = 'table1'>
<tr>
<th><b>Coluna1:</b></th>
<th><b>Coluna2:</b></th>
</tr>
<tr>
<td><a href='#word1'>Word1</a></td>
<td>Text1</td>
</tr>
<tr>
<td><a href='#word2'>Word2</a></td>
<td>Text2</td>
</tr>
<tr>
<td><a href='#word3'>Word3</a></td>
<td>Word3</td>
</tr>
</table>
And then link to your page like: https://www.example.com/index.html#word1
Replace what comes after the "#" character with whatever anchor tag you want to link to.
this question may be duplicate but I did not got solution for my requirement.
I need a help to have fixed/freeze header and few first columns for table inside
the scrollable div element. The data is dynamic as i columns and rows may increase or decrease depends of Data source. Currently it having ~86 rows and ~55 columns. The columns width is dynamic based on data.
My HTML code looks as below.
<html>
<body ng-app="myapp" ng-controller="mycontroller">
<table style="width:100%; height:90%">
<tr>
<td width=3%> </td>
<td>
<table style="width:100%;">
<tr>
<td>Page header</td>
</tr>
<tr><td></td></tr>
</table>
<table style="width:100%; height:90%">
<tr>
<td>
<div ng-style="{'width': twidth + 'px', 'heigth':theight + 'px','overflow-x': 'auto','overflow-y': 'auto'}">
<table>
<thead ng-repeat="h in dummy| limitTo:1">
<tr>
<th ng-repeat="(key, val) in h">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="h in dummy">
<td ng-repeat="(key, val) in h">{{val}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I've been trying to get the actual rows to be hyperlinked (clickable) but it seems they don't want to be active links, I've searched around on Google and websites say to use the "a href" which I've done but for some reason it isn't working for me, this is a bootstrap layout, if anyone could help me please that would be fantastic, thank you very much
Edit: I've tried adding the "class='clickable-row' data-href='url://link-for-first-row/'" to the tr element but it still doesn't appear to be working, I did try to update the jsfiddle link but when I try to save it to post the link here the jsfiddle data wipes from my screen.
https://jsfiddle.net/r6wctrwk/
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<a href="#">
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</a>
<a href="#">
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
</a>
<a href="#">
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</a>
</tbody>
</table>
</div>
As per my comment, here is how the link provided by akash will work.
Sample Code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
</head>
<body>
<table>
<tbody>
<tr class='clickable-row' data-href='http://google.com'>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
<script>
jQuery(document).ready(function($) {
$(".clickable-row").click(function() {
alert("click");
window.document.location = $(this).data("href");
});
});
</script>
</body>
</html>
You can include style something like this
<style>
.clickable-row:hover{
text-decoration: underline;
cursor: pointer;
}
</style>
I creating an application in phonegap where I am displaying the date of birth details of a person from database w. And details are stored in localstorage.. But when I a trying to display the details inside a table it is not working.. If any body can help .. please help.. I am giving my code below..
</head>
<body onload="onLoad();">
<div class="app">
<label id="naming">Saved Data</label>
<br>
<br>
<table id="myTable" border="1" style="width:100%">
<thead>
<tr>
<th>Full details</th>
</tr>
</thead>
<tr id="first">
<td>First Name</td>
<td id="tbfn">First Name</td>
</tr>
<tr id="middle">
<td>Middle Name</td>
<td ></td>
</tr>
<tr id="last">
<td>Last Name</td>
<td ></td>
</tr>
<tr id="day">
<td>Day of birth</td>
<td></td>
</tr>
<tr id="month">
<td>Month of Birth</td>
<td></td>
</tr>
<tr id="year">
<td>Year of Birth</td>
<td></td>
</tr>
</table>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function onLoad() {
var table = document.getElementById("myTable");
document.getElementById("tbfn").innerHTML = localStorage.getItem('fnm');
}
</script>
</body>
</html>
When you replace localStorage.getItem('fnm') with a simple string, this works perfectly
document.getElementById("tbfn").innerHTML = 'John';
JSFiddle
So, the problem is with the localStorage not being filled in the other page. This means, you must check the value of fnm, e.g.
var fnm = localStorage.getItem('fnm');
console.log('fnm=' + fnm);
and look for errors in the other page, where the value should be set.
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);
});