This is my table:
<table class="table tableOnScroll">
<thead class="mobile-head-table">
<tr>
<td class="mobile-header-product-item-0">
<div class="product-item-image hideImage">
<div class="is-size-7 cross-sell-flag px-2 py-1 new-product-flag">
<p>popular</p>
</div>
<figure class="image is-4by5">
<img src="">
</figure>
</div>
<div class="promotion hidePromo">
<p>15% OFF with Mattress Purchase!</p>
</div>
<p class="product-name">Adjustable Memory Foam Pillow</p>
<div class="product-pricing">
<p>From</p>
<p class="price">79</p>
<div class="content is-flex mt-3">
<a href="" class="button is-fullwidth">
SHOP NOW </a>
</div>
</div>
</td>
<td class="mobile-header-product-item-1">
<div class="product-item-image hideImage">
<div class="is-size-7 cross-sell-flag px-2 py-1 on-sale-flag">
<p>BEST SELLER</p>
</div>
<figure class="image is-4by5">
<img src="">
</figure>
</div>
<div class="promotion hidePromo">
<p>15% OFF with Mattress Purchase!</p>
</div>
<p class="product-name">Cooling Gel Memory Foam Pillow</p>
<div class="product-pricing">
<p>From</p>
<p class="price">89</p>
<div class="content is-flex mt-3">
<a href="" class="button is-fullwidth">
SHOP NOW </a>
</div>
</div>
</td>
</tr>
</thead>
<tbody class="mobile-body-table">
<tr class="summary is-flex-touch is-hidden-desktop">
<td class="side-header is-flex">
<div class="header-text">
<h1>Summary</h1></div>
</td>
<td>
<div class="markdown-wrapper">
An ultra-breathable memory foam pillow with a soft, responsive, cooling design. Over 50,000 sold! </div>
</td><td>
<div class="markdown-wrapper">
Enjoy the support and cushioning of memory foam with next-level cooling. </div>
</td></tr>
<tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Warranty</div><div class="header-summary"><p>Guaranteed worry free sleep with Douglas Pillow</p></div></td><td>
<div class="markdown-wrapper">
<h3>3</h3>
<p>Years</p>
</div>
</td><td>
<div class="markdown-wrapper">
<h3>4</h3>
<p>Years</p>
</div>
</td></tr><tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Free Shipping & Returns</div><div class="header-summary"><p>Your Douglas Pillow will be delivered free of charge</p></div></td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
<p>Included</p>
</div>
</td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
<p>Included</p>
</div>
</td></tr><tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Coolness</div></td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
</div>
</td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
<p>Single action graphic</p>
</div>
</td></tr>
</tbody>
<tfoot class="mobile-footer-table">
<tr>
<td class="side-header">
Other Features </td>
<td>
<p>Adjustable Firmness</p>
<p>Supportive</p>
<p>Fit all pillows</p>
<p>Back Sleepers</p>
<p>Side Sleepers</p>
<p>Cooling Technology</p>
<p>Improved Memory Foam</p>
<p>Improved Memory Foam</p>
</td>
</tr>
</tfoot>
</table>
I tried this css
thead {
position: sticky;
bottom: 0;
z-index: 99;
}
and this did not work at all so I tried this instead
thead {
position: fixed;
bottom: 0;
z-index: 99;
}
and it worked but the only problem is that once the content of the table is completed and when the other sections start coming, the position of the thead remain the same which makes sense.
I either want the table header to be sticky on bottom on scroll and disappear as soon as the other content comes up or with the second css code provided, if it's possible to reset the position again as other sections start coming up.
Any help would be appreciated. Thank you!
add js to element:
const header = document.getElementById("headerid");
onScroll() {
header.style.position = "static"
console.log("Changed Position")
}
Add a id of headerid to the header, than set the onScroll attribute of the element to run the function onScroll(), which changes the position to normal. To do the opposite copy the function and change "static" to "fixed" and add the line header.style.bottom = 0;. Hope this fixes your problem!
Related
Currently, I have a table and page built using Bootstrap. Here is the code:
<div class="row my-2">
<div class="col-12 col-md-8">
<div class="d-md-flex justify-content-between">
<div>
<h1 class="text-uppercase">Clients</h1>
</div>
<div>
<input class="form-control-sm bg-dark text-light border-dark me-4" type="text" id="criteria" placeholder="Rechercher" onkeyup="showCustomers();">
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-8">
<table class="table table-dark table-borderless table-lines">
<thead>
<tr>
<th scope="col">Login</th>
<th scope="col">Num. Client</th>
<th scope="col">Date inscription</th>
<th scope="col">Dernier accès</th>
<th scope="col">Forfait</th>
<th scope="col">Crédit</th>
</tr>
</thead>
<tbody id="result">
<script>
showCustomers("xxx");
</script>
</tbody>
</table>
</div>
<div class="col-12 col-md-4">
<div id="customerInfos" class="collapse">
<p>Sélectionnez un client afin d'obtenir les détails et les paramètres associés.</p>
</div>
</div>
</div>
Here is my table loaded :
<tr class="clickable-row <?=$classeStatut?>" data-utiId="<?=$uti_id?>" onclick="showUtilisateur(this);">
<td data-label="Login">
<div class="d-flex justify-content-end justify-content-md-start">
<div>
<img class="me-2" src="<?=getPP($uti_login)?>" width="20"></img>
</div>
<div class="circle <?=$connectionStatus?> d-none d-md-block mt-2 me-1">
</div>
<div>
<?=mhe($uti_login)?>
</div>
<?php if ($uti_profil==1) { ?>
<div>
<i class="bi bi-shield-check mx-2 text-success"></i>
</div>
<?php } ?>
</div>
</td>
<td data-label="# Client"><?=mhe(POSTE_PREFIX . $uti_numposte)?></td>
<td data-label="Inscrit"><?=mhe(makeFRDate($uti_date_inscription))?></td>
<td data-label="Dernière co."><?=makeFRDate(mhe($uti_lastaccess))?></td>
<td data-label="Forfait"><?=mhe($for_nom)?></td>
<td data-label="Crédit"><span class="<?=$classCredit?>"><?=mhe($uti_credit)?> €</span></td>
</tr>
So when I click on a row of the table, the showUtilisateur() function will be executed and put some infos on the customerInfos div.
That works perfectly, but I want to improve the layout of the customerInfos div.
On small screens, currently I have to go to the bottom of the page to see the div
When I click on a row, I would like to open the div as a new view, and allow to return to the table view with a "back" button.
I'm not sure how to define this kind of layout.
Thanks for your suggestions
In your CSS, you'll want to separate out whatever you define as a "small screen" from larger screens, based on whatever width creates the problems for you. You'll be creating a manual breakpoint where you create a new CSS for it.
Let's say that you decide that a small screen is anything under 600px in width. At the top of your CSS page, write this:
#media screen and (min-width: 600px) {
Make sure to put the closing bracket at the bottom of your CSS
Next, below your closing bracket, type this:
#media screen and (max-width: 599px){
Copy and paste everything in your CSS above inside of those brackets. Then you can start changing the pieces that you need to change. (Make sure to put the closing bracket at the bottom of the CSS.)
With the manual breakpoints, you can define new formulas to adjust the view for your smaller screens. Hope that helps!
I'm currently working on a web application that has to function as some sort of webshop later on. I'm now working on an addToCart function, that has to pick certain data from the clicked element (the name and the price of the product, and add 1 to pcs and save everything to a session), and paste these 2 values into a template I've made and place this in the shopCart. I'm now trying to print out the 2 values I've just mentioned, but I'm stuck now.
This is the current javascript code I've made for loading in all the products, and my attempt on showing some of the values of the clicked items:
$(function(){
$.getJSON("assets/products/sample_products.json", function(response) {
$.each(response.data, function (i, el) {
let card = $($('#productCard-template').html());
card.find('#cardName').html( el.name);
card.find('#cardPrice').html( '€' + el.price );
card.find('.productItem').attr('data-price', el.price)
.attr('data-article-number', el.article_number)
.attr('data-id', el.id)
.attr('data-name', el.name)
.attr('data-stock', el.stock)
.attr('data-categories', el.categories);
$('#touchViewProducts').append(card);
});
});
});
//onclick function adds data of product to the designated template
function addToCart(){
var value = document.getElementById("productCard").value;
var getDataVal = document.getElementById('productCard-template').getAttribute('data-name', 'data-price');
var total = 0;
console.log(this.data-name)
}
This is the html code of the templates:
<div class="row touchViewSection">
<!-- shopping sector -->
<!-- touchView -->
<!-- categories menu -->
<div class="col-3 categoriesSection">
<div class="categories">
<p style="background-color: white; margin-bottom: 0px" > Categories </p>
<a class="nav-link" id="all" href="#">All</a>
<a class="nav-link" id="knalvuurwerk" href="#">Knalvuurwerk</a>
<a class="nav-link" id="rotjes" href="#">Rotjes</a>
<a class="nav-link" id="siervuurwerk" href="#">Siervuurwerk</a>
</div>
</div>
<!-- categories menu -->
<!-- <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
<div class="col-9 productItems" >
<br>
<div class="row" id="touchViewProducts">
</div>
</div>
</div>
<!--/touchView -->
<!--Keyboard View -->
<div class="row keyboardViewSection">
<div class="col-12 keyboardViewRow">
<table id="data-table" class="table table-bordered" style="width: 100%;">
<thead id="tableHead">
<tr>
<th> # </th>
<th> Product name </th>
<th> Free Stock </th>
<th> Price </th>
<th> Action </th>
</tr>
</thead>
</table>
</div>
</div>
<!--/Keyboard View -->
<div class="footer">
<div class="container">
<p class="text-muted"> Developed by Vesta Group</p>
</div>
</div>
</div>
<!--/shopping sector-->
<div class="col-4 cartSection">
<!--cart-->
<div class="row">
<div class="col-5">Product</div>
<div class="col-1">Pcs.</div>
<div class="col-2">Price</div>
<div class="col-3">Total</div>
</div>
<hr style="background-color: white;">
<div id="output" class="row"></div>
<div class="row shopcardProducts" id="shopcartProducts">
</div>
<div class="row cartCheck">
<div class="col-5">Number of products</div>
<div class="col-1">1</div>
<div class="col-2">Subtotal</div>
<div class="col-3 total">€ 0,00</div>
<div class="col-5"></div>
<div class="col-1"></div>
<div class="col-2">Total </div>
<div class="col-3">€ 0,00</div>
</div>
<div class="row cartCheck">
<div class="col-12 checkoutBtn"> Checkout </div>
<div class="col-6 addDiscountBtn"> Add discount </div>
<div class="col-6 cancelBtn"> Cancel </div>
</div>
<!--buttons-->
<!--/cart-->
</div>
</div>
</div>
<script type="text/template" id="productCard-template">
<div class="col-3 productCard" id="productCard" onclick="addToCart()">
<a href="#" class="productItem">
<div class="card">
<img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;">
<div class="container">
<div class="row" style="height: 6vh; max-width: 20ch;">
<p id="cardName"> </p>
</div>
<div class="row" style="height: 50%">
<b><p id="cardPrice"></p></b>
</div>
</div>
</div>
</a>
</div>
</script>
<script type="text/template" id="shopcartRow-template">
<div class="row">
<div class="col-5" id="valueName"> </div>
<div class="col-1" id="valueQty"> </div>
<div class="col-2" id="valuePrice"> </div>
<div class="col-3" id="valueTotal"> </div>
</div>
</script>
Here's an image of what the web app looks like, I hope that could make it more clear.
Because addToCart() is a callback, you can use this to access its context (the caller element):
function addToCart(){
var value = $(this).val(); // what val you want to refer? there are no input in the template
var getDataVal = $(this).find('.productItem').getAttribute('data-name', 'data-price');
var total = 0;
console.log(this.data-name)
}
I am trying to implement a table in my page. One of the values is rendering too big which looks odd in table cell. Is there any way I can utilize additional width of another <td> for a particular div (I don't want to use colspan for td). SO to achieve this I need to extend the width of that particular DIV. giving a div a width and display absolute property is a bad idea! What else should I do?
MY html-
<table>
<tr>
<th style="width:105px;">
<strong>Sr NO.</strong>
</th>
<th style="width:65px;">
<strong>Type</strong>
</th>
<th style="width:165px;">
<strong>Classification</strong>
</th>
<th style="width:80px;">
<strong>Book No</strong>
</th>
<th>
<strong>Agency</strong>
</th>
<th>
<strong>Date</strong>
</th>
</tr>
<tr ng-repeat="request in msc.minutesData">
<td>
<div class="minutes-subject-container">
<div class="p-t-xs">
{{request.id}}
</div>
<div class="flex-container">
<div class="minutes-info--subrow-subject" style="width:105px">
<label>subject</label>
<div class="minutes-info--subject">
<span>
{{request.subject}}
</span>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="p-t-xs">
{{request.type}}
</div>
</td>
<td>
<div class="minutes-desc-container">
<div class="p-t-xs">
{{request.classification}}
</div>
<div class="flex-container">
<div class="minutes-info--subrow-desc" style="width:165px">
<label>Description</label>
<div class="minutes-info--descriptiopn">
<span>
{{request.description}}
</span>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="p-t-xs">
{{request.bookNo}}
</div>
</td>
<td>
<div class="p-t-xs">
{{request.agency}}
</div>
</td>
<td style="width:110px;">
<div class="minutes-info">
<div class="minutes-info--firstrow">
<div>
<span class="minutes-spanrow">
{{request.date | date: "EEE, d MMM yyyy"}}</span>
</div>
</div>
<div class="flex-container">
<div class="minutes-info--secondrow">
<span class="link-to" ng-click="msc.geturlData(request)">
<img src="img/Doc-Viewer-icon.svg" title="التقرير">
</span>
</div>
</div>
</div>
</td>
</tr>
</table>
Attaching screenshot of my table view to get more insight of my issue. Could someone help me to get solution approach?
Giving width to a container in pixels is a bad idea. It makes it totally absolute and the width won't adjust in different resolutions. You can use percentage. And for your specific problem, you can use try to calculate the percentage that should be applied based on the content. Then using binding allot the percentage width to the containers.
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
i am working on news feed module . I have two div's ,in first div (left-side) list of all news title is displayed and on right side div the description and image about that title is shown.But i am not able to add vertical scroll bar on left-side div(title-div),if i apply div then it goes to every particular title only.and second one is when page is load the first title, description will automatically load, so how to do this two things?
Add a wrapper.
The overflow scroll goes to all tittle because the title class is inside ng-repeat and thus is repeated for every individual title.
Add another wrapper div outside ng-repeat and apply overflow scroll to that.
<div class="wrapper">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
</div><!-- .wrapper -->
And add overflow:scroll to wrapper.
.wrapper {
overflow:scroll;
}
Note that this will create scroll for both title and text combined. Since they are in single wrapper. If you want different then, you will have to create two different wrappers with two different ng-repeat.
i want my site to have sliding box like [this site]
I can do this by having a text widget and setting the position attribute to fixed.But it will not slide down.Do I have to use Javascript here?
Thanks
here is my code
<div id="primary" class="widget-area" role="complementary">
<ul class="xoxo">
<li id="text-4" class="widget-container widget_text"> <div class="textwidget"><table border="0">
<tbody>
<tr>
<td>
<p style="text-align: center">
<a href="http://nwfighting.com/files/2013/01/jiujitsuofferclean.png">
<img class="alignright size-full wp-image-4449" title="jiujitsuoffer" src="http://nwfighting.com/files/2013/01/jiujitsuofferclean.png" alt="" width="200" height="165" />
</a>
</p>
<p style="text-align: center"></p>
<p style="text-align: center">
<span style="font-size: 18px;color: #002aff">
<strong>
And Get a 2nd Video "Jiu Jitsu Fitness <BR>Secrets!"
</strong>
</span>
</p>
<p style="text-align: center">
<strong>
<span style="font-size: 16px">
And Ask About Our 30 Days Free Offer!
</span>
</strong>
</p>
<p>
<p>
<p style="text-align: center">
<strong>
<span style="font-size: 18px">
-Enter Your Info Here to Get Your Free Video-
</span>
</strong>
</p>
</p>
</p>
</td>
</tr>
<td>
<script type="text/javascript" src="https://cn112.infusionsoft.com/app/form/iframe/323c5df08af18d52623818df2e915c02"></script>
</td>
</tr>
</tbody>
</table>
</div>
</li> </ul>
</div><!-- #primary .widget-area -->
The site actually uses a plugin that make use of Javascript.You can simply use this Script and get it done
http://wordpress.org/extend/plugins/strx-magic-floating-sidebar-maker/
Hope this would help