I have tried giving css by using .style() method but it doesn't work. So please help me in customizing and making it look better
There's nothing special about the <select> elements that p5js creates. And the .style() function works fine with them. So it is not clear what you are having difficulty with:
let sel;
function setup() {
noCanvas();
sel = createSelect();
sel.position(10, 10);
sel.option('foo');
sel.option('bar');
sel.option('baz');
sel.style('background-color', 'orange');
sel.style('border-radius', '3px');
sel.style('width', '200px');
sel.style('padding', '0.5em');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
Browsers don't allow you to style the items list that appears when a select is expanded, so if you want to customize the appearance further you will need to do some extensive CSS and JavaScript customization. See: https://www.w3schools.com/howto/howto_custom_select.asp for example.
Related
So a little disclaimer: I am completely and utterly self taught. Bear over with me if I'm being a clown.
Anyways, I am currently working on a some platform and in need for a dropdown functionality. That's simple right? Just use HTML5 select tag. However option tags can't be styled :>
So onwards to build my own. The HTML5 select tag uses keyboard input (up/down/enter) for those with disabilities, and I thought I would implement that too. That did present a problem though: The :hover selector collided with my custom attribute, which I use to style keyboard selected items (&[data-selected=true] to be precise).
So onwards to implement my own :hover. And this is where my bewilderment starts.
const handleChildMouseOver = () => {
const items = Array.from(listItem.current?.children!); // The wonders of typescript XD
for (const item of items) {
if (item === event.target) {
item.setAttribute("data-selected", "true");
} else {
item.removeAttribute("data-selected"); // I'm removing the attribute, rather than toggling it, because I got components with 3 states: On, off, and default.
}
}
}
(...)
<ul css={css.list} /*emotion prop*/ data-toggled={toggled} /*parent state*/ onMouseOver={handleChildMouseOver}>
{children} // parent prop
</ul>
So it works as intended, which is fine. But I recall from my pre-react days that you should never manipulate the DOM in loops, as it causes repaints on every iteration. However when I look at the Dev Tools performance profiler, I barely see any "Paints", 8 or so, even when I'm switching hover targets like a madman. What I do see is one million "Composite layer". Oh, and as a bonus React doesn't re-render. Which is fine right? 'Cause I'm not really changing the state of anything, just adding some CSS.
So my question boils down to: Am I being bonkers or smart?
N.B.: I would love to share the actual component, but seeing as this is my first post on stackoverflow, I've got no clue how you do those fancy script tag. Well github is involved somehow, I know that much 🤔
I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..
I personally have not used kendo grid, but I quickly tried the demo here,
and found that it adds "k-state-active" class to the <a> element inside the <th> element.
However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.
So as far as i know, this is NOT possible in pure CSS
You need some javascript. Here is a possible solution using jQuery:
// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
setTimeout(function() {
// first make all headers normal, then make the filtered column header italic
$('th.k-header.k-filterable').css('font-style', 'normal').filter(
':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
}, 100);
})
setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.
My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.
But hopefully this was helpful to you! Let me know if you need any further help.
This is possible with one CSS line:
.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}
No need to use java script.
Is there a way - or anyone knows if someone already made this available - a way to style links in the form of buttons in the aristo style?
http://aristocss.com/
Using this CSS -reform a regular link to the style of a button?
You can more than likely copy all the CSS for those buttons and just use it on a link. In fact you'd probably be able to rip out a bunch of reset stuff as buttons often have all sorts of browser defaults which a link doesn't have.
So change:
button {
// Cut
}
to:
a {
// Paste
}
Hope that helps :)
(The css you need by the way starts right at the top of this file: http://aristocss.com/css/aristo.css)
Sure - just grab the CSS they're already using, change it from button to a.btn, add display:block, give your link a class of "btn" and you're all set.
Is it possible to create a new property in CSS? For example, say you're developing a control that displays a photo and you want to add a property to css to control what style frame to have around the photo. Something like:
#myphoto { frame-style: fancy }
Is there some way to do this in a cross browser compatible manner, and how would you define whether the style inherits or not?
EDIT: It's a custom control - your JS code would deal with the style - I'm not expecting the browser to magically know what to do. I want the user to be able to style the control with CSS instead of JS.
Sure, why not. Check this out as an example: http://bililite.com/blog/2009/01/16/jquery-css-parser/
You may also be able to get away with using CSS classes instead of properties. Not sure if that works for what you're doing.
You can't. Browsers interpret CSS based on how their layout engines are coded to do so.
Unless you took an existing open source engine like WebKit or Gecko, added custom code to handle your custom CSS and made a browser that used your customized layout engine. But then only your implementation would understand your custom CSS.
Re your edit: it'd depend on whether you're able to read that style somehow. Typically browsers just instantly discard any properties they don't recognize, and CSS is not normally reachable by JavaScript because CSS code is not part of the DOM.
Or you could look at Jordan's answer.
If you'd prefer a straight JavaScript solution that uses no JS libraries, you could use the query string of a background-image to keep "custom properties" inside your CSS.
HTML
<div id="foo">hello</div>
CSS
#foo {
background: url('images/spacer.gif?bar=411');
}
JavaScript
getCustomCSSProperty('foo', 'bar');
Supporting JavaScript Functions
function getCustomCSSProperty(elId, propName)
{
var obj = document.getElementById(elId);
var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image');
var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi);
return getParameterByName(propName, biurl[1]);
}
function getParameterByName(name, qs) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Demo:
http://jsfiddle.net/t2DYk/1/
Explanation:
http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html
I've tested the solution in IE 5.5-9, Chrome, Firefox, Opera, and Safari.
Say I have the following code:
...
<div id="originalContent">Foo</div>
...
How can I use CSS to insert "Bar" after "Foo" and make "Bar" a hyperlink, like this:
...Foo Bar...
I know that this would write "Foo Bar":
#originalContent:after { content: " Bar"; }
but I can't figure out how to make "Bar" a hyperlink. Any ideas?
As far as I know, you can't do that with just CSS. But, even if you could, I'd still recommend using JavaScript instead. CSS should only be used to specify style and layout information.
It's fairly easy to append a link to a div using JavaScript, especially if you use a library. Here's an example using jQuery:
$("#originalContent").append("<a href='bar.html'>Bar</a>");
In case you don't want to use a library, here's an example using native DOM operations:
var link = document.createElement("a");
link.href = "bar.html";
link.appendChild(document.createTextNode("Bar")); // This sets the link's text
document.getElementById("originalContent").appendChild(link);
As you can see using native DOM operations is quite a bit more work, but if this is the only JavaScript functionality you need, it might not be worth downloading a whole library.
You can't do this. Links are not properties of the CSS.