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);
});
Related
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 am creating a shopping cart using session which is working, Now I am making the quantity part I mean User can increase the product quantity and decrease the quantity and according to that the total amount will display on screen without refresh the page.
I just need when the user clicked on Plus sign then the amount will change as per quantity.
<?php echo $product['qty'];?> I am getting this value from my session
Any idea how can I do this?
I also added same code in https://jsfiddle.net/Narendra2015/uLx0912t/
/*increase the product qty*/
$(".ddd").on("click", function () {
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quntity-input");
var oldValue = $input.val(),
newVal;
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$input.val(newVal);
});
Second code after suggested Mr.A. Iglesias
$('a.ddd').click(function() {
var $productContainer = $(this).closest('div.sp-quantity');
var $pro_list = $(this).closest('tr.pro-list');
var productPrice = parseInt($pro_list.find('span.price_cal').text());
var $quantityInput = $productContainer.find('input.quntity-input');
var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));
if (newQuantity>= 0) {
// Refresh quantity input.
$quantityInput.val(newQuantity);
// Refresh total div.
var currentChange = productPrice*parseInt($(this).data('multi'));
var total = parseInt($('div#total').text());
$('div#total').text(total + currentChange);
}
});
Css
.sp-quantity {
width:124px;
height:42px;
float: left;
}
.sp-minus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid black;
float:left;
}
.sp-plus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input input {
width:30px;
height:34px;
text-align:center;
border: none;
}
.sp-input input:focus {
border:1px solid #e1e1e1;
border: none;
}
.sp-minus a, .sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
HTMl
<?php if(!empty($_SESSION['products'])):
foreach($_SESSION['products'] as $key=>$product):?>
<tbody>
<tr class="pro-list">
<td>
<div class="ordered-product cf">
<div class="pro-img">
<img src="admin/images/products/<?php echo $product['p_images'];?>" alt=" prodcut image">
</div>
<div class="pro-detail-name">
<h3><?php echo $product['p_name'];?></h3>
</div>
<?php
$p_delete=$product['p_id'];
//$decrypted_delete_id = decryptIt($p_delete);
$encrypted_user_id = encryptIt($p_delete);
$delete_product_id=urlencode($encrypted_user_id);
?>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</td>
<td>£<span id="price_cal"><?php echo $product['p_currentprice'];?></span></td>
<td>
<div class="sp-quantity">
<div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="<?php echo $product['qty'];?>" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
</td>
<?php $single_total = $product['qty']*$product['p_currentprice'];?>
<td class='total_amount' data-price='£<?php echo $single_total;?>'>£<?php echo $single_total;?></td>
</tr>
<?php $total = $total+$single_total;
$_SESSION['total_cost']=$total;
endforeach;?>
<tr class="pro-list">
<td></td>
<td></td>
<td><span>Subtotal</span></td>
<td>£<?php $_SESSION['total_cost']=$total;echo $total;?></td>
<!-- <td><span>Shiping Cost</span></td>
<td><i class="fa fa-fighter-jet" aria-hidden="true"></i>£<?php echo $total;?></td> -->
</tr>
<tr class="pro-list">
<td></td>
<td></td>
<td><span>Total Cost</span></td>
<td>£<?php echo $total;?></td>
</tr>
</tbody>
<?php endif;?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
for total amount, I added this in the script.
// Refresh total div.
var subtotal_amount = subtotal_amount+lineTotal;
$pro_list.find('td.subtotal_amount').data('price','£'+subtotal_amount).html('£'+subtotal_amount);
HTML inside <tr class="pro-list">
<td class='subtotal_amount' data-price='£<?php echo $total;?>'>£<?php echo $total;?></td>
First you can put your product price and the total amount inside of div with a class or id, to make them easy to select, something like...
<?php $product=10;?>
<div class="sp-quantity">
<div class="product-price"><?=$product?></div>
<div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="<?php echo $product['qty'];?>" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
<?php
$single_total = $product['qty']*$product;
echo $total = $total + $single_total;
?>
<div id="total"><?=$total?></div>
Then, refresh its values anytime you change the quantity of a product...
$('a.ddd').click(function() {
var $productContainer = $(this).closest('div.sp-quantity');
var productPrice = parseInt($productContainer.find('div.product-price').text());
var $quantityInput = $productContainer.find('input.quntity-input');
var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));
if (newQuantity>= 0) {
// Refresh quantity input.
$quantityInput.val(newQuantity);
// Refresh total div.
var currentChange = productPrice*parseInt($(this).data('multi'));
var total = parseInt($('div#total').text());
$('div#total').text(total + currentChange);
}
});
I hope it helps
I'm not sure to really understand, but the total amount corresponds to total price (depended on product's quantity), isn't it ?
If I'm right, I think the better way is to display the total amount in a 'div' tag (for example) containing an attribute 'data-total' with the product's price.
Then, in JS, you can access to attribute's data and update the total with the price and the quantity.
Something like that:
<div class='total_amount' data-price='<?php echo $product['price']?>' >
0
</div>
And then update your JS file as:
$(".ddd").on("click", function () {
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quntity-input");
var oldValue = $input.val(),
newVal;
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$input.val(newVal);
var price = $('.total_amount').data('price');
$('.total_amount').html(price * newVal);
});
Hope it will help you :)
PS: Sorry for my English, I'm French :P
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/
thanks you for paying attention on my issue here. I am a total beginner for PHP and jQuery programming. Now I am trying to create a very simple function to show and hide multi-layer divs. For example, when you click "show div 1", the corresponding content under div 1 will be shown (this is div 1 contents). After that you still can click the content under div 1 to show lower level contents (graph1). I got all these worked properly. However, when I click "show div 2", the div 2 contents (this is div 2 contents) will be shown but the lower level contents of div 1 is still there (graph1). What I want is the lower content of div 1 is shown, and then I click show div 2, the lower content of div 1 will be hidden and only show div 2 contents. The following is my codes, thank you guys in advance~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>show and hide try</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function showStock(n)
{
document.getElementById("div"+n).style.display = 'block'
return false;
}
function hideStock(n)
{
for (x=1; x<=10; x++)
{
document.getElementById("div"+x).style.display = 'none'
}
document.getElementById(n).style.display = 'block'
return false;
}
function toggleStock(id)
{
for (x=1; x<=3; x++)
{
document.getElementById("div"+x).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
}
</script>
<script>
function showGraph(m)
{
document.getElementById("graph"+m).style.display = 'block'
return false;
}
function hideGraph(m)
{
for (y=1; y<=10; y++)
{
document.getElementById("graph"+y).style.display = 'none'
}
document.getElementById(m).style.display = 'block'
return false;
}
function toggleGraph(id)
{
for (y=1; y<=3; y++)
{
document.getElementById("graph"+y).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
}
</script>
</head>
<body>
<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
show div 1
show div 2
show div 3
</td>
</tr>
</table>
<div id="div1" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td>this is div 1 contents</td></tr>
</table>
</div>
<div id="div2" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td>this is div 2 contents</td></tr>
</table>
</div>
<div id="div3" style="display: none; border:1px solid black;">
<table border=1 width=25% cellspacing="0" cellpadding="0">
<tr><td>this is div 3 contents</td></tr>
</table>
</div>
<div id="graph1" style="display: none; border:1px solid black;">graph1</div>
<div id="graph2" style="display: none; border:1px solid black;">graph2</div>
<div id="graph3" style="display: none; border:1px solid black;">graph3</div>
</body>
</html>
Replace your code with this, Hope it will help you
function toggleStock(id)
{
for (x=1; x<=3; x++)
{
document.getElementById("div"+x).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
toggleGraph(id);
}
I have a leaderboard on my website, and I want to be able to have rank numbers (1, 2, 3, 4, 5, etc) as using...
<ol>
<li>this</li>
<li>that</li>
</ol>
...doesn't work in a table
How can I do this?
One way of achieving this, given the following structure:
<table>
<thead>
<tr>
<th>Rank:</th>
<th>Name:</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rank"><span></span></td>
<td>Him</td>
</tr>
<tr>
<td class="rank"><span></span></td>
<td>Her</td>
</tr>
</tbody>
</table>
Is to use CSS-counters:
table {
border: 1px solid #ccc;
empty-cells: show;
width: 40%;
counter-reset: ranking;
}
th {
border-bottom: 2px solid #ccc;
min-width: 4em;
width: 50%;
max-width: 6em;
}
tbody tr {
counter-increment: ranking;
}
td {
border-bottom: 1px solid #ccc;
}
td.rank > span:before {
content: counter(ranking);
}
And a JS Fiddle demo.
As noted elsewhere, though, these are not widely supported. And would be better-implemented either using JS/jQuery or by simply using an ol.
You could do this using CSS counters
...unfortunately they're not that widely supported yet. It's best to generate the numbers on the server side, it could be argued that they are significant content and should be in HTML anyways.
Simply add this to your CSS:
ol {
list-style-type: decimal;
margin-left:12px;
}
JSFiddle:
http://jsfiddle.net/Mutant_Tractor/zhCzQ/2/
Or you could also use list-style-type: decimal-leading-zero;
I'm afraid numbering rows in a table is a standard html feature. You'll need to resort to Javascript or server-side generation of the numbers.
Edit:
You really should do this via (in order of preference):
CSS numbering (see other answers)
Server-side (I don't do php - sorry)
client-side javascript should be a last resort:
<table id="numbered">
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
</tr>
</table>
<script type="text/javascript">
var table=document.getElementById('numbered');
var tr=table.getElementsByTagName('tr');
for(var i=0; i<tr.length; i++)
{
var td=tr[i].getElementsByTagName('td');
td[0].insertBefore(document.createTextNode(i+1+'. '), td[0].firstChild);
}
</script>
As for me I am using while loop in a while loop (for php) If you wanted to get data from database.
Ex.
$query = mysql_query("SELECT * FROM table);
$getnumbers = mysql_num_rows($query);
$x=1; //initialize your number
while($x<=$getnumbers)
{
while($rows = mysql_fetch_assoc($query))
{
echo $x;echo $row["row1"];echo "<br>";
$x++ }
}