How to apply behaviour of some classes into another, without changing html?
I want:
<table class="name">
to have behaviour like this:
<table class="table table-striped table-bordered table-condensed">...
It is possible to achieve this with css?
UPDATE:
How to do this with preprocessors ( LESS / SASS )?
There is 2 ways to do this :
Manually adding classes to every table using jQuery
Using this method will mean you will see your site "flicker" the new classes once the javascript gets loaded (because CSS is less render blocking)
$('#name').addClass('table');
// or
$('table').addClass('table'); // Every table gets the class
Using a CSS Preprocessor like LESS or SASS (this exemple uses LESS)
#name { // Or table {
.table(); //This is the bootstrap mixin for tables
}
Related
I have a bootstrap html table. filtering is used in the field. how do I make sure that the table contents are hidden before filtering starts?
filter script and html table:
$(document).ready(function(){
$("#surname").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#table tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<table class="table" id="table">
<thead class="thead-light">
<tr>
<th></th>
<th class="text-center" scope="col">Guest</th>
<th class="text-center" scope="col">Org</th>
Bootstrap v4 uses d-none for setting anything to "display: none".
Set each on each <tr class="d-none"> and they will be hidden on default. In your code, just after you filtered everything, let's show them again using jquery (not tested):
/* ... */
$("#table tr").filter(function () {
const show = $(this).text().toLowerCase().indexOf(value) > -1;
if (show) {
$(this).removeClass('d-none');
}
});
This post is more of a comment on BS-4 than anything....
Your requirement is very simple - first hide all the tr's and then on the filter - show the ones that meet the requirement.
Soap box moment -
I am not in favour of the new BS-4 utility classes and use of "!important" on everything.... to the casual observer - it may well be nice to simply apply the class to the elemnet and get the outcome - but when you look at the code or the less files from BS - EVERY SINGLE UTILITY CLASS IS STYLED WITH "!IMPORTANT"....
this can be seen in the following picture which shows a span with 4 utility classes - and ALL four classes are styled with the use of !important..... that alone is enough to make me re-consider BS as a viable option for creating sites - imagine all the important tags that you will have.
I also do not love the new approach of using a utility for every single style choice... imagine a div with 4 different margins styles, four different paddings, and four different border styles..... a utility class for each.... eek
Just my opinion - but for something as simple as display: none... do it with css and leave off the !important.
This question already has answers here:
Include another HTML file in a HTML file
(41 answers)
Closed 3 years ago.
I want to insert a navigation div inside all of my HTML documents. Is there a way to do so without putting the entire div inside of every document? I figured the solution would be similar to a CSS stylesheet.
I don't know of anyway of doing this without Javascript or jQuery, which I want to avoid using if possible.
<html>
<body>
<div>
//CONTENT//
<div>
</body>
</html>
I want to put the div inside of a separate document and put in a link of some sort to substitute that in every document that contains the div.
Edit: I Haven't notice that you also don't want to use JS.
I'll leave this answer as a partial solution for you problem.
The Solution:
If you don't want to use ANY Library like JQuery or frameworks like Angular/React/Vue then you have the option to use Web components (I've added the description from the link below).
Notice: Don't forget to check for Browser support.
With that you can choose HTML templates or Custom elements.
Let's take an example of HTML template:
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis:
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
var template = document.querySelector('#productrow');
// Clone the new row and insert it into the table
var tbody = document.querySelector("tbody");
var clone = document.importNode(template.content, true);
var td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild(clone);
// Clone the new row and insert it into the table
var clone2 = document.importNode(template.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild(clone2);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
What is web components (From the developer.mozilla.org docs)?
As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you've sometimes had to write to render custom UI controls, and how using them multiple times can turn your page into a mess if you are not careful.
Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface.
Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality.
In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
I am using bootstrap to style tables, e.g.,
<table class="table table-striped main">
but the table that I want to style is actually generated programmatically by another tool that I don't control, and it already comes with its own table class tag:
<table class="foo">
I can include css style sheets though. Is there a way to alias "foo" and "table-striped" to be the same class in my own css?
Method 1: You can modify your css so that the same effects apply to both classes:
.foo, .table-striped{ some css }
Method 2:
Instead of aliasing them, you can simply perform a search for all elements with class name "foo" and add the class name "table-striped" to them.
var tmp = document.getElementsByClassName("foo");
for(var i=0, j=tmp.length; i<j; i++){
tmp[i].className += " table-striped";
}
Keep in mind that this is using javascript.
I know bootstrap, semanticUI, foundation, etc.
My new project is a part of an old website. and we want to start implementing the new features with a normal css framework.
So, how do to implement a partial view?
lets say a with a framework css without rebuilding all the website from scratch ?
<body> <!-- regular old website css -->
<div class="old"></div>
<div class="everything-in-here-using-css-framework"></div>
</body>
is that possible? which framework support this ?
i don't fully understand but i think you can follow these steps:
make sure there are no matching conflicting class names with your framework (in foundation for example: columns, small-12, etc...)
include the framework's CSS file (you can link to a cdn just for testing)
start writing some new html elements and see how it goes.
if crashes occure (probably they will) start to change the old elements name - for instace add "old-" to every class you have.
another approach could be to move the existing project to SASS, then wrap the old CSS in a container like this
.old {
header { ... }
div { ... }
}
and put all the framework styles in something like this:
.new {
...
}
I think we'd be more helpful if you'll give more details.
is there a way to add jquery ui classes into my own css file per element, IE:
input {
ui-corner-all /* <- JQuery UI class */
}
as opposed to adding the class to every input, IE:
<input name="myinput" type="text" class="ui-corner-all" value="" />
You can check out LESS, here is a very similar question on SO Can a CSS class inherit one or more other classes?
LESS is an extension for CSS a great level of abstraction with variables, nested rules, function, operations, etc
You can use the jQuery .addClass method to add a class to elements at any time, including page load, such as:
$(function() {
$(input).addClass('ui-corner-all');
});
This would add the ui-corner-all class to every input element in the html when the page loads. If you would like to select only certain elements on the page, use a more specific selection, such as:
$(function() {
$('#myInput').addClass('ui-corner-all');
});
This will add the ui-corner-all class to all of the elements on the page that have the ID of myInput.
You might want to look into checking out Sass. This will give you the option to extend css classes to your own classes via #extend.
This is a handy Sass + Compass video
Then after you can do this
This way, you don't have to depend on javascript to add classes. It's all done through css.
Hope this helps!
You could also use a preprocessor like LESS to achieve this. You would have to save your ui.css as ui.less and then you could do something like this:
#import url(ui.less);
input {
.ui-corner-all;
}
After compilation of your less to css, it would take all the styles of the ui-corners-all class and apply them to your inputs. And that is just one of the many advantages of using a css preprocessor. It is really worth looking into and is not very hard to learn if you are familiar with css. You can find more info here: http://lesscss.org/