Link to JsFiddle
I'm having the need to change the cell's background color everytime the user click on it, but I can't get it to work!
This is my script :
$( function() {
$('.tk099 td').click( function() {
$(this).toggleClass("red-cell");
} );
} );
in which tk099 is the table's class, and I don't want any td tag which has a class be affected by the event. Is this possible? Thanks alot!
Your selector .tk099 td takes presidence over .red-cell because:
It is more specific
It is declared later than .red-cell (and CSS cascades)
Declare .red-cell later on and make it just as specific/more specific:
.tk099 td {
background-color:#EEEEEE;
text-align:center;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
}
td.red-cell {
background: #F00; /* Or some other color */
}
JSFiddle
change css to and should be declared at the after the default css
td.red-cell {
background: #F00; /* Or some other color */
}
Related
I'm using jQuery to expand/retract a menu bar from the left-side of the screen.
Here's what I have so far:
$(document).ready(function(){
$('.menu-button').on("click",
function(){
$('.menu').css("left","0");
$('.menu-button').addClass("clicked");
}
);
$('.menu-button clicked').on("click",
function(){
$('.menu').css("left","-168");
$('.menu-button').removeClass("clicked");
}
);
});
The menu bar is expanding, but not retracting back. I think this code makes sense- but apparently not. Thoughts?
You need to change
$('.menu-button clicked')
to
$('.menu-button.clicked')
But then the problem is when you click again. Both clicks will happen. So you add and remove the class. To fix that you could do something like
$(document).ready(function(){
$('.menu-button').on("click", function(){
if($('.menu-button').hasClass('clicked')) {
$(this).removeClass("clicked");
$('.menu').css("left","-168");
} else {
$(this).addClass("clicked");
$('.menu').css("left","0");
}
});
});
But the most simple would be to use toggleClass like so:
$('.menu-button').on("click", function(){
$('.menu').toggleClass( "clicked" );
$(this).toggleClass( "clicked" );
});
and if possible you should always change CSS via CSS and not use javascript inline-styles.. so now with .toggleClass you toggle the class and change your css. Just adding colored borders here to give you an idea but you change your styles how ever you need them.
.menu {
/* add your styles here */
left: -168px;
border: solid 2px red;
}
.menu.clicked {
/* add your styles here */
left: 0;
border: solid 2px green;
}
.menu-button {
/* add your styles here */
border: solid 2px orange;
}
.menu-button.clicked {
/* add your styles here */
border: solid 2px lime;
}
I have a scenario where when click i am changing the border color from black to red by append a class to a div using ng-class.
But when i click a button the modal is getting triggered but the class is not getting appended.
<div ng-class="{'addBorder':clicked}" class="beforeClicked">
<button ng-click="clickToOpen()">My Modal</button>
</div>
function MyCtrl($scope, ngDialog) {
$scope.clicked=false;
$scope.clickToOpen = function () {
$scope.clicked=true;
ngDialog.open({ template: 'templateId' });
};
}
.addBorder{
border:1px solid red;
}
.beforeClicked{
width:100px;
height:300px;
border:1px solid black
}
DEMO
Here the div is already in black border when click on button i am making the flag true which should add class addBorder to the div which appends red color border.
But it isn't happening.
Any help would be appreciated.
Currently, beforeClicked border properties are overriding the border of .addBorder.
Just interchange the order of your css styles for .addBorder to have more preference.
.beforeClicked {
width: 100px;
height: 300px;
border: 1px solid black
}
.addBorder {
border: 1px solid red;
}
Updated fiddle: http://jsfiddle.net/nashcheez/mb6o4yd1/700/
just make the style !important
.addBorder{
border:1px solid red !important;
}
demo
Update your css like below
.beforeClicked{
width:100px;
height:300px;
border:1px solid black
}
.addBorder{
border:1px solid red;
}
add border class after before clicked class.
I need to validate a field such that if it has a value, a 'tick' symbol is displayed next to the field.
I have the following javascript function which does the validation
function validate_this_field(field_value, field_id)
{
if($j('#' + field_id).val() ) {
$j('#' + field_id ).addClass('mandatory_field_completed');
}
}
css code
.mandatory_field_completed{
border-style: solid;
border-width: 1px;
border-color: green;
background:url(../images/tick.png) right no-repeat;
padding: 4px 4px 4px 34px;
}
The problem with the above css is that the image is displayed inside the field. I would like to display the 'tick' image outside and next to the field being validated.
Any suggestion is most appreciated.
Thanks a lot.
Put image next to the div with display:none style and then show it:
function validate_this_field(field_value, field_id)
{
if($j('#' + field_id).val() ) {
$j('#' + field_id ).addClass('mandatory_field_completed')
.next().show(); // show next element after div
}
}
or, you can have some control container div and set style to it with image in background.
If you want it outside the fields, you will have to apply the image to the background of the wrapping element:
<div class="tick"><input class="txtInput" type="test"></div>
CSS:
.txtInput {
width:200px;
}
.tick {
background-image:url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Check_mark_23x20_02.svg/19px-Check_mark_23x20_02.svg.png);
padding-right:20px;
background-repeat:no-repeat;
background-position:205px 0px;
}
Add the class to the wrapper upon validation.
I want that some of my jquery dialogs, not all, have a different title bar color.
How can I acheive this?
I used the property dialogClass:"myClass" in desired dialogs but this doesen't change the title bar, just the dialog body.
Thank you!!
Specifying a dialogClass adds this class to the outermost div wrapping the entire dialog including the title bar, so you just have to make sure that you CSS rule is targeting the correct element. For instance:
.myDialogClass .ui-widget-header {
background: purple;
}
div.ui-widget-header {
border: 1px solid #3b678e;
background: #3b678e url("images/ui-bg_gloss-wave_35_3b678e_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
You could do:
div#myDialog .ui-dialog-titlebar {
background-color: red;
}
The .ui-dialog-titlebar is what you are looking to apply your style to.
I want to be able to hover on a row and highlight all of it but I am having an issue with the code below since some cells have a different background.
<tr style="" onmouseover="this.style.background='Red';" onmouseout="this.style.background='#595959'" >
That is fine all all cells have the same background but if I click a cell it highlights it and onmouseout="this.style.background='#595959'" will always reset it.
How can I change that to something like:
onmouseout="this.style.background='currentCellBGColor"
It can be done with a pure CSS solution. No JavaScript needed
Pure CSS solution that will work in IE8+ all other modern day browsers
tr:hover td { background-color:yellow }
td.selected { background-color: green; }
tr:hover td.selected { background-color: lime; }
Fiddle
If you need IE7, you need to add a class onmosueover to the table row and remove the class onmouseout.
tr:hover td, tr.hover td { background-color:yellow }
td.selected { background-color: green; }
tr:hover td.selected, tr.hover td.selected { background-color: lime; }
Even if I agree that is better to make it with css hover, I like to answer to the question, how to do it with javascript.
You can save it on one attribute and use it to restore it as:
<script>
function setBackground(me, color)
{
me.setAttribute("data-oldback", me.style.background);
me.style.background=color;
}
function restoreBackground(me)
{
me.style.background = me.getAttribute("data-oldback");
}
</script>
and
<tr onmouseover="setBackground(this, 'Red');"
onmouseout="restoreBackground(this);"
style="background:blue;" >
and a test : http://jsfiddle.net/AdDgS/3/ and this http://jsfiddle.net/AdDgS/4/