Develop Reference

Is there a way in svelte where I can put the calendar icon inside input field? And, how can I change the color of the calendar?

This is my code:
https://svelte.dev/repl/f137b909d3e740f99a030576189091db?version=3.22.3
How can I the calendar icon inside input field? And, how can I change the color of the calendar?
Thanks in advance!

You use a 3rd party component and a quick look at their documentation tells me, that it does not support custom placement of the icon.
https://svelte-mui.now.sh/datepicker/datefield
Changing the color was a bit tricky to figure out. They use global css variables, and I'd do it like this. Add the following snippet to your App.svelte:
<style>
:global(:root) {
--primary: red;
}
</style>
There are more global variables, that you could overwrite. See their example:
https://github.com/vikignt/svelte-mui/blob/master/example/assets/global.css

How to add a class to a specific stylesheet?

I want to use CSSStyleSheet.insertRule() to insert a new class inside a specific stylesheet. That stylesheet has the id "customStylesheet" for example.
This page says "A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.". However I can't figure out how to access that specific stylesheet.

It is fairly straight forward.
var sheet = document.getElementById('customStylesheet').sheet;
sheet.insertRule('.someclass {display: none;}'); // was missing a ' here
Here is a fiddle showing it working. I have updated the fiddle to show it working on a style tag in the head also.

This can be done with no jQuery. Say that you wished to set everything with the class purpleText to color: purple. First, you would get the stylesheet using document.styleSheets[_index_].ownerNode.sheet. Next, use the insertRule() method. The parameter is just a string holding the CSS code, as in ".purpleText{color: purple}". So, for the first stylesheet, the whole command would be document.styleSheets[0].ownerNode.sheet.insertRule(".purpleText{color: purple}");

To get a styleSheet by ID, use this:
document.getElementById('stylesheet').sheet;

Polymer change custom element

I have a question regarding custom elements in polymer.
I have acustom element that has a style nested inside it's template, for a div inside the template like so:
<template>
<style>
#navWrapper{
height: auto;;
color:red;
position:fixed;
background-color:black;
width: 100%;
}
</style>
<div id="navWrapper"><content></content></div>
</template>
Now, I'd like to change the color of navWrapper when I scroll down the page.
I want to use jquery for that.
Therefore I have a script inside of my custom element like so:
<script>
Polymer('responsive-nav',{ready: function() {
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 100) {
$(this.$.navWrapper).css({backgroundColor : 'rgba(0,0,0,0.0)' })
}else {
...
}
})
} });
</script>
Now sadly that does nothing. I have put an alert(test) before the $(this.$.navWrapper) to find out if I even get to that point and I do. Also when I want to change the background color or something else from an element that lives in my normal HTML file it works. For example $("#testDiv").css({...}) changes. So my question is: How do I access the css of my element properly?

Looks like your JQuery CSS call is wrong.
I think it should be:
.css("background-color", "rgba(0,0,0,0.0)")
rather than
.css({backgroundColor : 'rgba(0,0,0,0.0)' })
Cross referencing what you've done with the JQuery docs, you've definately missed the '-' out of 'backgroundColor', but also I don't see anything in the docs that states using a JSON object to make the change.
You can however use an array of property names and values (Which is what I suspect you may have been trying to do)
Update (Approx 1 hour later)
Since Iv'e been wrestling with a not too dissimilar problem today (but involving bootstrap rather than jquery) I was already investigating things around similar concepts.
As a result, I took the OP's original code and started playing with it.
What I present below is a partial JQuery solution (we still use JQ's scroll detection) where I also figured out an alternate way of changing the style using polymers conditional binding syntax.
http://www.polymer-project.org/docs/polymer/expressions.html
Essentially what i did was to pass a user data object into the scroll event at set-up time.
This user object contained a property that reflects the current polymer object (This is needed so that the JQ handler when it fires can update polymer properties)
When the window scroll event occurs, the handler extracts this property, then uses it to get at a local variable inside the polymer element, and thus updating it with the current scroll top value.
Since that locally scoped property is part of the actual polymer object, ANY polymer data-binding can read it, at this point it's simply just a matter of creating a couple of styles, then using the expression binding to pick the correct style.
Remember, styles cascade, so you can easily just make one master style for the whole thing, then 2 styles that simply just change the background color as appropriate.
Expression bindings work by using the text on the left side of the : only if the expression on the right evaluates to true eg:
{{ {frogs: a == 1} }}
would replace the expression binding with '' if property 'a' was NOT equal to 1 and set it to 'frogs' if property 'a' was equal to 1.
Expression bindings however are singular in nature, so in order to have more than 1 expression binding you need to pass the entire thing through one of polymers filters, specifically the 'tokenList' filter.
once you do this, you can build a whole object of different checks up, so expanding on our previous example:
{{ {frogs: a == 1, tadpoles: a == 2} | tokenList }}
will now make the result be equal to '' if property 'a' was NOT equal to 1 and NOT equal to 2 , while setting the result to 'frogs' if property 'a' was equal to 1 and setting the result to 'tadpoles' if property 'a' was equal to 2.
you can expand this to as many checks as you like, but the more you add in (I'm guessing anyway - iv'e not tested it) the slower performance is likely to be.
For now, the code below will do exactly what you need, well once you make a few alterations so that it targets your own elements and set's your own styles up anyway :-)
<link rel="import" href="polymer.html">
<polymer-element name="x-mypolymercomponent">
<template>
<style>
.under100
{
background-color: green;
}
.over100
{
background-color: red;
}
</style>
<h1 class="{{ {under100: scroll_top <= 100, over100: scroll_top > 100} | tokenList }}">This header has a dynamic class</h1>
</template>
<script>
Polymer('x-mypolymercomponent', {
ready: function ()
{
$(window).scroll({scope: this}, function(event) {
var sT = $(this).scrollTop();
event.data.scope.scroll_top = sT;
})
},
scroll_top: 0,
});
</script>
</polymer-element>
Iv'e just tested this in the .NET project I'm currently working on, and it works fine in chrome 36, there are still problems in Firefox though, but this I think is possibly due to a bug I discovered last night so I wouldn't worry too much about it.
I have JQuery loaded at page level too, so it would appear that the component can pick up the page events just fine from it.
Give it a try see where you go from here, I'm about to adapt it for my specific issue, then turn it into a typescript module :-)

Modify more than 1 css file with javascript

I'm trying to find a way for modify CSS while HTML is running, so far I find that is possible just with a little script like this next...
$("button").click(function(){
$("p").css("color","red");
});
As I can concern this is an effective way to modify the local CSS stylesheet refered to our HTML while webpage is running (i.e. pushing a div button).
What I'm trying to do is modify an specific .class from CSS stylesheet of an jQuery plugin for replacing the standard right-click context menu.
I didn't found any way in JS to call an specific stylesheet for modify any .class or #id
So my HTML had the following definitions:
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<link rel="stylesheet" href="localstyle.css">
But when I try to update custom jQuery CSS with a script like this
$('#red').click(function(){
$('.contextMenuPlugin').css({'background-color': 'white'});
.contextMenuPlugin (native in jquery.contextmenu.css) isn't recognized, that script only work with a .class or a #id from my own stylesheet (localstyle.css).
I try things like using my local CSS embedded in HTML, and referencing jQuery CSS with an id but still nothing change. So there's the link of Github repo from jQuery plugin:
https://github.com/joewalnes/jquery-simple-context-menu
I try to make a live but JSfiddle dosn't work at all with this proyect, so if it helps or anyone want to check it, there's an pastebin of issue:
http://pastebin.com/u/27GRiS (4 files)
I hope someone help me clarify this, thanks in advance,
Federico.

The problem is that you think that
$('.contextMenuPlugin').css({'background-color': 'white'});
creates a stylesheet with
.contextMenuPlugin { background-color: white }
But it's not like this.
$('.contextMenuPlugin') gets all elements with class contextMenuPlugin in the moment you use it, and then, .css({'background-color': 'white'}) modifies the inline style of each element.
That means, if you create new elements with class contextMenuPlugin after that code, they won't be affected.
Then, you can:
Make sure that your target element exists when you use the code
Create a stylesheet with the desired CSS
Some time ago, I created a function which adds desired rules to an stylesheet, and allows you to reference and change/delete them. You can see it in this answer.

You should rethink your solution. Instead, add an additional class to your stylesheet that has the CSS changes you want.
Then, on clicking the button you can call addClass to add it to the appropriate elements.

Take your <script> code out of the <head> and put it at the end of the <body>.
Also you don't need this:
$(function() { ... })
if you already have this:
$(document).ready(function() { ... })
In other words, remove line 29 and line 27 (the $(function() { and });) from this file

Using Jqprint need color, or need alternative

I'm using the jqprint plugin and really like how it operates with only one problem. I need to add color to the object that I'm trying to print. I tried to colorize the object before it gets sent to Jqprint but that didn't change anything. I know you can write CSS inside a #media tag but when my html gets rendered into the print preview in chrome it seems to be changed into a pdf and I can't access the elements like regular html.
Does anyone use any other printing plug ins or have any ideas on how to get color into my printing with jqprint.
Basically I have a table that I send to jqprint like this:
var $printStuff = $("#divTable");
$printStuff.jqprint();

I was looking for a better solution and, in case you want to change more than one CSS style for the printed version, I recommend you to add an specific CSS file for that funcionality:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Inside the CSS file you can also hide content using this line:
.classToHide { display: none; }
Regards.

It is not the most clean solution, but you can try to add the style directly to the printed object, just before the jqprint() call.
I also preffer to create a copy of the printed object, because it does not affect the object inside the loaded page. After the printing, destroy it.
var $printStuff = $("#divTable").clone();
$printStuff.css("color", "blue");
$printStuff.jqprint();
$printStuff.empty().remove();
Remember that you can manipulate the cloned object too, removing the tags you won't print.
Try it and good luck!