0

Here's some code

<button id="test" class="ui-state-hover" value="Button">

Context:

I am using JQuery UI CSS class ui-state-hover on an HTML button (I want that button to always looks like its hover). But that class keep on disappearing when I mouseout another JQuery UI element, I guess this is normal behavior tought,

<button id="test" class="" value="Button">

so I figured that in that particular JQuery element there must be a line of code similar to this:

$('.ui-state-hover').on('mouseout', function(){$(this).removeClass('ui-state-hover');})

Which remove the class on every element that has the class. So I tough I'd only have to have a class of my own with the same CSS as ui-state-hover but different name. So I could just give that element the copy and POUF! problem solve! 

MyCssClass = ui-state-hover
<butotn id="test" class="MyCssClass" value="Button">

So need a way to copy content of one CSS class to another. I would rather have a pure CSS answer but if none exist JQuery or Javascript would do.

I though using something like this but it just seems silly I it doesn't work.

$('.MyCssClass').css($('.ui-state-hover').css());

Thanks!

EDIT:

Here is a bit more on what a tried to do.

I put a sh*t tone of different JQuery Theme in a directory and depending on users choice I switch the .css file and reload the page. Since every theme or almost every theme has the same classes they are interchangeable. So ui-state-hover might in the ui-darkness JQuery UI Theme have a black background color but in the ui-lightness JQuery UI Theme background might be gray.

This is why I need to dynamically copy some of those on page load into my own class and I can't just copy/paste the content of the .css file.

EDIT:

here is a fiddle illustrating my problem:

http://jsfiddle.net/yr89tg9g/

see how when you hover test2 it loose the ui-state-hover class? To stop this I tough about cloning the class but it seems it can't be done...

Sebastien
  • 1,308
  • 2
  • 15
  • 39
  • can't you just do `$('button').addClass('MyCssClass')` ? This would add the class `MyCssClass` to the button if you have it define in a used .css file. – cgf Aug 28 '14 at 15:15
  • You sure you don't want to just manually copy paste the class into a new class and give that to your button? I don't really see the point of doing it dynamically. – DanielST Aug 28 '14 at 15:18
  • @cgf Not sure you get what I mean, I guess my question could be clearer... – Sebastien Aug 28 '14 at 15:19
  • what is your question? why dont you copy the css of class a and paste them for your own class b? – Alex Aug 28 '14 at 15:19
  • 1
    @slicedtoad and Alex I can't copy/paste the class to my own because I swtich JQuery Theme so on one theme `ui-state-hover` might equal background red and in another might be backgroud bleu – Sebastien Aug 28 '14 at 15:21
  • Ok, then why aren't just using `$('button').addClass('.ui-state-hover')` ? Maybe I still don't get it. – cgf Aug 28 '14 at 15:23
  • then I'd add a class to the body each time you change the theme and copy the css of each theme, precede the theme name as selector for your copied own css class – Alex Aug 28 '14 at 15:23
  • also, maybe this might be interesting for you: http://stackoverflow.com/questions/2571164/jquery-event-that-triggers-after-css-is-loaded – Alex Aug 28 '14 at 15:24
  • another idea is to look through each stylesheet via `document.styleSheets` each time you change the theme. then you can copy out the css that applies for `.ui-state-hover` and create inline blocks with your own class – Alex Aug 28 '14 at 15:25
  • What about LESS? http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes – ctwheels Aug 28 '14 at 15:29
  • not helpful when the originated css is bootstrap, is it? – Alex Aug 28 '14 at 15:33
  • @ctwheels LESS seams freaking awesome! – Sebastien Aug 28 '14 at 16:57
  • @Sebastien if you want to get started with LESS, here is a link for it http://lesscss.org/ – ctwheels Aug 28 '14 at 17:17
  • @Sebastien this may also be of help to you if you're interested in LESS: http://www.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/ it really explains LESS well – ctwheels Aug 28 '14 at 17:23
  • @Sebastien If you'd prefer too, as most do, you can use SASS or SCSS (link: http://sass-lang.com/) and here is the guide: http://sass-lang.com/guide – ctwheels Aug 28 '14 at 17:36

2 Answers2

0

Probably that solves the Q:

A css is just a tag and HTML. It can have an ID:

<style type="text/css" id="sourcecss">
/* your definition here */
</style>

and thus:

jQuery("head").append('<style type="text/css" id="targetcss"></style)');
jQuery("#targetcss").html( jQuery("#sourcecss").html() );

works like a charm in one of our apps.

Axel Amthor
  • 10,980
  • 1
  • 25
  • 44
0

Maybe this?

$("#myButton").on("mouseout blur", function(){
    $(this).addClass("ui-state-hover");
});
Manuel Romero
  • 36
  • 2
  • That did solve a part of the problem. Until I take a look at @ctwheels LESS I'll patch everything with some function/event like this. – Sebastien Aug 28 '14 at 17:21