I have a button with a PLUS svg image in it. On click, I what that Plus svg to disappear. I checked in console and the function works fine, the class "visible" is removed and the class "invisible" is added. But in the UI the Plus svg doesn't disappear.
"Invisible" is a class in Tailwind that should make an item to be hidden.
const BtnAddEle = document.querySelector(".addEle");
const plusSvg = document.querySelector(".addElePlus");
BtnAddEle.addEventListener("click", function () {
plusSvg.classList.remove("visible");
plusSvg.classList.add("invisible");
});
This is happening because tailwind only adds class styles which you have used in the final CSS file
So you can do something like this
const BtnAddEle = document.querySelector(".addEle");
const plusSvg = document.querySelector(".addElePlus");
BtnAddEle.addEventListener("click", function () {
plusSvg.style.visibility = "hidden"
});
The reason why it is not working for you is that-
To have tailwind classes to work from JS file you have to define the path of js file in the content portion of tailwind.config.js file.
Example:
content: ["./*.{html,js}", "./src/**/*.{html,js}"]
Using this, your tailwind compiler will know that you are trying to add a css class from your JS file and that class will appear in the output css file.
Content Configuration is mentioned and explained in details - Here [Official Documentation]
Related
There's a block:
let block = document.createElement('div')
how to add styles without creating css file? I mean we can do the following:
block.classList.add('classname')
but in this way we must create css file with classname we use
I want to add styles right in js, something like this:
block.addTailwindStyles('w-full')
I try to write the following way but all of them doesn't work:
el.classList.add('w-full')
el.className = 'w-full'
el.style.cssText = 'w-full'
First option now is working...
el.classList.add('w-full')
to adding multiple styles write in double quotes:
el.classList.add("w-full", "text-bold", ...)
During the upgrade process of Font Awesome 5 from 4.7.0, I noticed that any class bindings I gave to an <i> tag would not function as it did before.
Imagine the following element with a class binding:
<i class.bind="iconClass"></i>
And imagine the initial value of the iconClass being 'fas fa-cog'. When changing the value of iconClass to 'fas fa-ship', the icon won't update to the newly set icon classes. It will remain a cog icon.
I believe this happens because Font Awesome 5 replaces the <i> tags with <svg> tags and doesn't copy over the class binding properly and thus not trigger an icon change.
In the following example, the bound classes are changed after two seconds to illustrate the problem, please see this GistRun for an example of the issue. See app.html and app.js for the implementation. It also contains a dirty workaround.
How can/should this behaviour be implemented?
Inspired by the answer of #huocp utilising innerhtml.
Using a custom component to solve this problem does indeed work. However, as I will only be having one icon with a class binding in my project, I have found a simpler way of doing this:
<i innerhtml="<i class='${iconClass}'></i>"></i>
A change of the iconClass value will generate a new <i> child (while replacing the old <svg> element) within the parent, after which Font Awesome 5 will convert this <i> child into an <svg>.
Any elements can be used as parent and child elements of course, I just think <i> looks short and clean, it will nest the <svg> generated by Font Awesome 5 within the <i>.
See working gistrun here: https://gist.run/?id=55559f3bd606aa854502f3ddbbcad480
Use this custom component like this.
<fa-svg icon-class.bind="iconClass"></fa-svg>
fa-svg.js
import {inject, inlineView, bindable} from 'aurelia-framework';
#inject(Element)
#inlineView("<template></template>")
export class FaSvg {
#bindable iconClass;
constructor(element) {
this.element = element;
}
iconClassChanged(newIcon) {
if (!this.live) return;
this._rebuild(newIcon);
}
attached() {
this.live = true;
this._rebuild(this.iconClass);
}
detached() {
this.live = false;
}
_rebuild(iconClass) {
this.element.innerHTML = iconClass ? `<i class="${iconClass}"></i>` : '';
}
}
I had exactly same issue before.
As you said, you were using "svg with js" (the fa5 recommended way). It does fight Aurelia since the svg version use JavaScript to replace DOM element, the binding of Aurelia getting destroyed along with old DOM element.
Switch to "web font with css" which fa5 supported perfectly. It will obey your command as fa4.
Is there a way to define own list styles for ckeditor. I have found the plugin http://ckeditor.com/addon/liststyle but it lets me choose only things like circle or square.
I want to define own css classes for ol or ul in my application that i can use. For example a class to define more space between list elements. the users of the editor should pick the list class via a context menu like in the nice "liststyle" plugin.
Is there a way to do this?
Confirmed the approach mentioned above works, I am using Drupal, Ckeditor List Style (plugin) and the Ckeditor List Style module (Drupal module).
I needed to make a change to the lang > en.js file to add the appropriate Title in instead of the function as the OP.
cute: 'Cute',
Once that was done, inside the liststyle.js file I updated the existing code to this:
Existing code in liststyle.js file:
commit: function(element) {
var value = this.getValue();
if (value)
element.setStyle('list-style-type', value);
else
element.removeStyle('list-style-type');
}
New code:
commit: function(element) {
var value = this.getValue();
if (value) {
if (value == 'cute') {
element.setAttribute("class", 'cute');
element.removeStyle('list-style-type');
} else {
element.setStyle('list-style-type', value);
}
} else {
element.removeStyle('list-style-type');
}
}
I am dealing with CKEditor to add custom list styling to the liststyle plugin.
I added one new style (you can add more if you like) using the CSS class.
Here's how: in liststyle.js (after de-obfuscating) I insert my .logo class:
..........
function e(c,e){
c.lang.liststyle.logo="My bullet"; // BBoyanov - adding 'My bullet' as title in dropdown list (in current language), otherwise it stay "empty" title
var b=c.lang.liststyle;
........
style:"width:150px",
items:[[b.notset,""],[b.circle,"circle"],[b.disc,"disc"],[b.square,"square"],
[b.logo,"logo"]],//BBoyanov - css class 'logo' as Bullet \,[b.logo,"logo"]\
........
commit:function(a){
var b=this.getValue();b?a.setStyle("list-style-type",b):a.removeStyle("list-style-type");
"logo"==b?a.setAttribute("class",'logo'):a.removeAttribute("class");//BBoyanv set 'logo' as CSS class
........
h={a:"lower-alpha",A:"upper-alpha",i:"lower-roman",I:"upper-roman",
1:"decimal", disc:"disc", circle:"circle", square:"square",logo:"logo"};//BBoyanov \,logo:"logo"\
........
You define the CSS class in ckeditor.css (to be visualised in CKEditor) and in your own CSS file.
If you prefer different titles for different languages, you must put translation in the corresponding language .js file of CKEditor.
It worked for me.
However, probably this is injection because it takes over the allowedContent - need tests and confirmation.
I am using this script code but it display the font blurry.How it solve the problem
$(document).ready(function() {
console.log("Doc is ready");
$('#pdf').click(function() {
var pdf = new jsPDF('portrait', 'mm', 'letter');
var options = {
pagesplit: true
};
pdf.addHTML($('body'), 0, 0, options, function(){
pdf.save("Report10.pdf");
});
})
})
</script>
I also had same problem with jsPDF export for Highcharts and AngularJS. I have found one solution for this. I don't know why jsPDF behaves like this, but this solution Solved my problem. :)
You can check screenshot
Step 1) Add one empty div with id before your graph element div.
<div id="tempStyleDiv"></div>
Step 2) Write CSS selector for text element of your graph and assign property display:none. Here I have used inspect element of chrome browser to find CSS selector. You need to add following line of js code just before pdf.addHTML() function.
$('#tempStyleDiv').append("<style>.highcharts-container>svg>g>text{display:none;}</style>");
Step 3) After successfully export of pdf, now we need to remove display:none property. So just add following line after pdf.save(),
setTimeout(function(){$('#tempStyleDiv').html("");},2000);
attempting to have my webpage be a bit more dynamic by having the background change on some elements when a checkbox is clicked. I am trying to do this via class change and a CSS sheet. I have the following which is kicking out an error that my onclick function ins not defined (in IE9). More importantly will the webpage update if I only change the class of the object which would have a different class in the CSS file. Whats a better alternative if this does not work?
my elemenet and function
UPDATE
I made updates to both my HTML and CSS file as suggested by many. I am still getting no change in my webpage but the console is claiming that my function called from the onclick event is not defined which is a bit odd since it is. Also does this type for scripting belong in the HTML or should I pull it out and put in a seperate file. I figured since it was creating elements it belongs in the main html. Is there a cleaner more compact way of accomplishing this and not making my home screen html huge?
<tr class= 'tr.notchosen'><td><input type='checkbox' onclick='handleClick(this.id)'/></td></tr>
function handleClick(cb) {
var currentColumn = cb.parentNode
var currentRow = currentColumn.parentNode
if (currentRow.className === "chosen")
{
currentRow.className = "notchosen";
}
else
{
currentRow.className = "chosen";
}
}
and my css file is the following
tr.chosen
{
background-color:rgba(255,223,0,0.75);
}
tr.notchosen
{
background-color:rgba(255,223,0,0);
}
There are a couple of things going on here. First, your css selector is not quite right. In fact, I would suggest making the class name just "chosen" or "not chosen" and then selecting tr elements with that class.
<tr class='notchosen'>
And then you can target it from css (which was probably the original intention)
tr.notchosen
{
background-color:rgba(255,223,0,0);
}
Further, although I would not suggest using inline javascript, using your example, you should pass this if you want to work with the element and not this.id which would pass a string.
onclick='handleClick(this)'
The last part would be to sync up your javascript with the class name change
if (currentRow.className == "chosen")
{
currentRow.className = "notchosen";
}
else
{
currentRow.className = "chosen";
}