2

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.

sietedosfede
  • 21
  • 4
  • 1
    You really should have the – ggdx Jan 31 '14 at 23:18
  • 1
    @dwhite.me is that really true? Can't you modify the rules in `document.styleSheets`? – George Mauer Jan 31 '14 at 23:24
  • @GeorgeMauer - Doesn't really do anything to the stylesheet, in practice no different than $('.whatever').css(), in fact this is much much more flexible. – ggdx Feb 01 '14 at 00:58
  • Note that any changes with jQuery .css are actually adding stuff to the style tag of the found elements. It does *not* change any stylesheet, and inserting new elements will make them the usual style. – NoBugs Feb 01 '14 at 20:02

3 Answers3

3

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.

Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • You have the reason. There's no element with class tag .contextMenuPlugin! But now, how can modify the class element that is located in the external file jquery.contextmenu.js from my HTML index? – sietedosfede Jan 31 '14 at 23:39
  • @sietedosfede Not sure what you mean. – Oriol Jan 31 '14 at 23:45
  • Sorry for my misconception, what I try to say is how can I modify a custom CSS that will be applied to the right-click script contextmenu instead HTML home? It need to be triggered from HTML? Cause, I can modify the CSS rules of contextmenu while web are not running, refresh it and get the change: but I cannot do the same while web are running, by an CSS UI for pick custom styles... – sietedosfede Jan 31 '14 at 23:58
2

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.

John - Not A Number
  • 659
  • 4
  • 9
  • Problem is, that class just will apply changues to my HTML index, while I'm trying to apply CSS changues from HTML index to the custom CSS of a right-click contextmenu. – sietedosfede Jan 31 '14 at 23:51
  • Does something like this not work? $('#red').click(function(){ $('ul.contextMenuPlugin').addClass('newClass'); }); – John - Not A Number Jan 31 '14 at 23:57
1

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

Deryck
  • 7,608
  • 2
  • 24
  • 43
  • You right, but what's the difference between put the script in body instead of head? Thanks for the review! – sietedosfede Jan 31 '14 at 23:42
  • 1
    The script is run before the DOM has fully loaded and the elements aren't there to be altered at the time of its execution. Also, this is a common practice to reduce latency of loading since running the script first will block the rest of the DOM from loading until it's complete (minus the ASYNC functions). Putting it at the end of the body allows the DOM to load and script has something to look for. – Deryck Jan 31 '14 at 23:45