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.
Related
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.
I have a <ul> where each li reponds on :hover. Here is the css:
.profile_nav_item:hover {
border-color: #af0621;
}
But it want these borders to stay colored when I click them.
I have this jQuery function:
$('a[rel="tab"]').click(function(e){
var url = $(this).attr('href');
$('.profile_nav_item').css('border-color', 'transparent');
$('.profile_nav_item', this).css('border-color', '#af0621');
But after clicking, the :hover css property isn't called anymore. Does anyone know how I could fix this?
Here is the fiddle: http://jsfiddle.net/zRJK9/
You need to reset CSS properties to '' (empty string) for the style sheet to kick in again.
$('.profile_nav_item').css('border-color', '');
basically you are forcing the element style to #af0621 after which the stylesheet will do nothing to override it (element styles take priority).
Passing an empty string value to css() removes the inline style setting.
JSFiddle: http://jsfiddle.net/zRJK9/6/
Because inline css attribute has more priority then included one. So when you set it with jQuery it got like this: style="border-color: #af0621". Try to use !important in your css:
.profile_nav_item:hover {
border-color: #af0621 !important;
}
I am developing a web app in sencha touch. I need to dynamically change the style for one of the class with psuedo element.
Below is my element in the css file..
.testdiv::before{
margin-left: -0.4em;
margin-top: -0.10em;
}
I need to change the margin-top values dynamically in the code as the style needs to be changed in different screens.
I tried
Ext.select(".testdiv").setStyle('margin-top','1em').
But this doesn't apply style to the psuedo element ": before".. How can I do this ?
this is not possible even in jQuery, but I found a solution here: link
you need to add an extra class to your testdiv elements, e.g. on and add a css rule:
.testdiv.on:before {
margin-top: 1em;
}
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.
I'm trying to apply unknown styles to unknown selectors and it would seem that shorthand css cannot be applied using jQuery's .css() method. Is this correct? Is there a work-around?
Note that I am building the object dynamically to be passed in to the .css() and do not want to use .css('background','#000') syntax.
$('#example').css({background:'#000000 url("images/bg.gif") repeat-x scroll 0 0 transparent'});
The code above doesn't work. However, the code below does.
$('#example').css({background:'#000'});
And so does this.
$('#example').css({background:'url("images/bg.gif")'});
But when used together they naturally overwrite each other. Any suggestions?
background: #000000 url("images/bg.gif") repeat-x scroll 0 0 transparent;
… is invalid CSS. You've specified the background-color twice (#000000 and transparent). It should work if you use valid CSS.
That said, using classes and external stylesheets is usually a better bet.
Your better option would be to have a set of pre-defined CSS classes in your CSS file and then apply those target styles on the fly as necessary.
This has the added benefit of keeping your jQuery code down to a readable and manageable level.
So instead of writing:
$('#example').css({background:'url("images/bg.gif")'});
You can opt for the simpler:
$('#example').addClass('myClass1');