Overwrite auto generated css - javascript

I am using a Jquery wysiwyg editor which at runtime automatically adds code to the textarea.
My problem is that it's inserting an inline style of style="width:320px" and I need to take that off as I've already set the styles to make it go 100%
Is there anyway to remove or overwrite that code with jquery
It's basically adding an inline style to a div with a class called wysiwyg...
so:
<div class="wysiwyg" style="width:320px">
The editor I'm having the trouble with is called: jWYSIWYG
Here's a demo url: http://akzhan.github.com/jwysiwyg/help/examples/

If you want to override inline styles you have two options:
Pure CSS:
.wysiwyg {
width: 120px !important;
}
jQuery:
$(".wysiwyg").css({width:120});
If you want to use styles from somewhere else you can also do:
$(".wysiwyg").css({width:"inherit"});

Reset the width using jQuery:
$('.wysiwyg').css('width', '100%');
Alternatively, you could remove the style attribute altogether:
$('.wysiwyg').removeAttr('style');

Have you tried declaring your own CSS with:
!important
eg.
#textarea-id { width: 300px !important; }

You can either define a new css rule with !important, or use jquery:
$("rule target").width(value);

This should work for you:
$('.wysiwyg').removeAttr("style");
or alternatively you can set the width to 100%
$('.wysiwyg').css("width", "100%");

You can remove undesired attributes on server-side with removeAttribute() DOM-method if you have server-side DOM manipulation module.
Or you can try to create your own slightly modified version of your WYSIWYG JS module.

Related

Why does using jquery css background.color remove :hover?

Here is an example:
https://jsfiddle.net/6kg43qfr/
Code:
Jquery:
$('#foo').css('background-color', '#f8f7f7');
Html:
<div id="foo">
test
</div>
CSS:
#foo:hover{
background-color: red;
}
Question: Why doesn't the hover work?
That is because how you set the color in your javascript code.
Inline styles has more priority then styles applied to classes or id's
There are actually many rules, of how to properly override styles. Please take a quick look at this http://www.hongkiat.com/blog/css-priority-level/
I strongly suggest you to read more about css before proceeding with the project, in order to keep code clean and maintainable.
in order to fullfill your needs, take a look at this fiddle:
https://jsfiddle.net/6kg43qfr/2/
$('#foo').addClass("green-background")
Because the $('#foo').css() function puts the style in a style attribute on the element, which therefore overrides the stylesheet.
The best solution is:
#foo:hover{
background-color: red;
}
#foo {
background-color: #f8f7f7;
}
Or
You also can use this:
$('#foo').css('background-color', '#f8f7f7').hover(
function(){
$(this).css('background-color','red');
},
function(){
$(this).css('background-color','#f8f7f7');
});

Unexpected behavior with class added by jQuery

A tale of two fiddles (please use the run button after the jsfiddle pages load for a clearer idea of what is happeneing).
The First Fiddle
Dead simple:
$("body").addClass("noScroll");
alert($("body").hasClass("noScroll"));
$("body").removeClass("noScroll");
alert($("body").hasClass("noScroll"));
With this css:
.noScroll {
background-color: pink;
position: fixed;
width: 100%;
top: 200px;
}
We have a class. The class is added to body, changing the body's appearance/behavior. The class is removed from the body and the body reverts to default. Working as expected.
The Second Fiddle
$("body").addClass("noScroll");
alert($("body").hasClass("noScroll"));
$(".noScroll").css({
"background-color" : "pink",
"position" : "fixed",
"width" : "100%",
"top" : "200px"
});
$("body").removeClass("noScroll");
alert($("body").hasClass("noScroll"));
No accompanying CSS this time, as it's added by jQuery, but otherwise pretty similar to above. Working to a point. CSS is applied, but it isn't removed. Why is this happening?
Thanks!
For the second fiddle, when you call css() on the noScroll selector, it applies those styles inline to the element with class noScroll. However, those styles are not preserved in a named css style.
So the code is actually working. It is adding a class noScroll, but no styles are affiliated with that class in the css. Also, it is removing that class, but the styles from the css() call stay because they were applied inline.
To get a better idea, see this fiddle where the inline style is removed manually at the end.
Inline styles and CSS classes are two different concepts. Adding and removing one does not add or remove the other. Inline styles only override styles applied via classes.
The selector you used to find the element to apply the inline styles to does not get stored anywhere. So jQuery/the browser can't possibly know which inline properties to remove when you remove the class.
You've applied inline CSS in the second example. This is equivalent to doing this:
<body style="background-color:pink; position:fixed; width:100%; top:200px;">
...over this (your first example):
<body class="noScroll">
...which is obviously removed by the removeClass(...) function call.

Cannot style Jquery element using CSS

I have a Jquery selectmenu called #Main which implicitly gets a #Main-button. When I try to set #Main-button's width using css as
#Main-button {
width:200px;
}
it has no effect.
When I explicitly set
$( "#Main" ).selectmenu({ width:200})
it has the desired effect and under Firebug I see that it has appended a style="width:200" on the #Main-button, which is what I tried using CSS at the first place.
What is different? I've checked that the my CSS style sheet gets called AFTER the Jquery one, so there is no precedence issue
Also I notice that html elements turned to Jquery elements cannot be styled using CSS targeted at the specific element, even with the use of unique id's,but require the use of Jquery classes like .ui-menu etc
why do they behave differently? are there any specific styling gudilines when Jquery is involved?
In your CSS you've
#Main-button {
width:200px;
}
but the JS is adding dynamic inline style based on content. So it's having style attribute.
So in terms of CSS specificity their CSS beats you.
You must use !important in your rule to avoid overriding of your CSS.
#Main-button {
width:200px !important;
}
To style selectmenu or every jquery widget, you need to use jquery default classes. Your selector must be like
#Main-button.ui-selectmenu-menu li a
And also you can extend _renderItem and _renderMenu functions of selectmenu for different styling.

Responsive image in CMS

I have problem with CMS. I need to change css that the page could be responsive.
One of the div has data-height, data-weight and height, width in style in html that it looks like that
div class="classOf" id="idOf" data-width="755" data-height="125" style="width: 755px; height: 125px;"
I can't use my new css due to is not working if I select this id and change properties.
This is CMS so I can only console to append new css and js.
My question is how to neutralize this set properties on html and apply css with max-width:100%
that will work ?
Try to include your own customized css at the end of the html document, it will override any existing css file included before.
In your css add !important to the width attribute, it should over-ride the inline style.
Example:
.classOf{
width: 100% !important;
}

Override Inline Styles added via JS with CSS

A js plugin is adding a style that is giving me some headache:
element.style {
z-index: 100 !important;
}
So i have tried this:
html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox
div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView
div.janrainHeader[style] {
z-index: 1 !important;
}
and still nothing.
Contrary to the other answers, it is possible to override inline styles with CSS:
http://css-tricks.com/override-inline-styles-with-css/
I would guess that the extremely long selector might not be hitting the element.
I had a similar z-index issue with the Janrain plugin that was solved by this:
#janrainEngageEmbed > div[style] {
z-index: 0;
}
In your case, you probably need:
z-index: 0 !important;
The inline style will trump any selectors. Either reset the style yourself in javascript or patch the plugin... it doesn't sound like a particularly well written anyway, to be honest. : )
inline style always override external and internal css, plus the fact that the plugin is using the !important clause (very bad practice!), all together makes it impossible to get it fixed with css only. I reckon you will have to use some custom js to override the plugin settings.
maybe the best way would be to check if you can specify a callback function with the plugin and set the style as you wanted. another answer here suggested to edit the plugin itself, that is cool if you don't plan to ever update it - otherwise you're better off leaving the plugin code as it is, and just adding some bespoke js of your own

Categories

Resources