Modify more than 1 css file with javascript - 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

Related

If element has class, apply class to body

I have a website where each section displays as a full screen panel.
I would like to style all the other elements on the page according to what panel is displaying.
For example, if the panel with the class .style-reality-green-bg is active, I would like to style the navigation and other items to compliment the green.
Currently when you scroll, the full screen panel has a constant class called .onepage-section. When you scroll between panels, a second class is added depending on which panel is currently on screen.
This is handled by the theme, but I set the panel classes
At the moment I have a few sections which have classes such as...
.style-reality-green-bg
.style-rebel-red-bg
.style-rethink-blue-bg
I can't style all the elements I need to because they are not children of these panels so I was trying to find a way to add the same class to the body when each panel was active. So - if .onepage-section has a class of .style-reality-green-bg add the class .style-reality-green-bg to the body as well.
I have done some digging but I can mostly only find examples for 'click' actions
My latest attempt is
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$(this)body().addClass('style-reality-green-bg');
}
But it just returns an error saying
$ is not a function
****** EDIT
To clarify
What I am trying to achieve is...
If the full screen container has a class of
.onepage-section
AND a class of
.style-reality-green-bg
add
.style-reality-green-bg
to the body, and so on
I'm not sure if that was clear
The reference to body seems malformed, the code should be
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$('body').addClass('style-reality-green-bg');
}
if $ is still undefined, do you have jQuery included? https://jquery.com/
Your error means that you dont include the external Jquery Library. You can use for example a cdn to include jquery. Add this line above your closing body tag. Good would be to inlcude jquery before your Jquery command is calling.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
It looks like you're trying to use jQuery but haven't imported the library. For that, see https://jquery.com/download/
Additionally, in your code snippet you should select the body with $('body').
Alternatively, if you want to use vanilla JavaScript, you can use the following snippet:
if (document.querySelector('.onepage-section').classList.contains('style-reality-green-bg')) {
document.body.classList.add('style-reality-green-bg');
}
For information on classList, see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
$(this)body() doesn't exists. Better write this instead:
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$('body').addClass('style-reality-green-bg');
}
And rememer to include jquery library.

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;

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!

ckeditor default style or class for the textarea

Does anyone know how i can make my textarea in a ckeditor object, use a class or custom style so i can show to the user something similar to what is getting rendered in the site?
Thanx
So i'm using bodyClass: 'class' in the config object, i use firebug and see the iframe body has my class applied, but it doesn't get the classes properties neither from my CSS, nor from contents.css (ckeditor)...
Well i was able to do it, adding an event to the object like this:
editor.on('instanceReady', function(){
$('#'+divname).find('iframe:first').contents().find('body').css({
'background-color':'#000000',
'font-family':'arial',
'font-size':'12pt',
'color':'#cdcdcd'
});
});
if anyone has the real solution, i think bodyClass should be it, i will gladly change my code.
Thanx
Simply edit the css file located at contents.css - edit the .cke_editable class to whatever suits your needs. Works 24/7

Drupal - special css file if JS is turned off?

I'm building a Drupal theme up and want to know if there is a Drupalish way to add a css file only if the user has js turned off.
This would ideally go in the theme.info file to keep it neat!
Something like this would be ideal:
conditional-stylesheets[if no javascript][all][] = nojs.css
If this isn't possible then I'm going to keep all the css that needs JS out of the css files, and add it dynamically using JS but this seems a bit messy...
Any ideas?
You don't need conditional comments or noscript-tags for that. By default, Drupal adds a 'js' class to the html element and sets a cookie if javascript is enabled:
// Global Killswitch on the <html> element
if (Drupal.jsEnabled) {
// Global Killswitch on the <html> element
$(document.documentElement).addClass('js');
// 'js enabled' cookie
document.cookie = 'has_js=1; path=/';
// Attach all behaviors.
$(document).ready(function() {
Drupal.attachBehaviors(this);
});
}
(That's on line 296 in /misc/drupal.js.)
All css selectors that should only apply when js is enabled, can be prefixed with .js. If you want, you can put those css rules in a separate file, but you don't have to.
I don't know drupal that well, but it's a good question either way. According to W3Schools, the <noscript> tag is allowed only within the body element, so that is out.
Have you considered doing it the other way round? i.e. adding a script-specific CSS stylesheet using JavaScript? See starting points for that here.

Categories

Resources