Table colour change over mouse click - javascript

I would like to change the particular html table cell colour while the mouse click event occurs. Which one is most suit to my need whether CSS or Javascript?

Here is a jquery function that should do the trick
$(document).on('click', '#tableID', function(e){
$(this).css('background','#000080');
});

Here is jquery function to change particular html table cell color when mouse click event occurs.
CODE:
$(document).on('click', '#TABLEID', function(e){
$(e.target).css('background','#6688ff');
});
DEMO:
http://jsfiddle.net/Ra2VP/

Refer this for creating click event on table row.
http://stackoverflow.com/questions/1207939/adding-an-onclick-event-to-a-table-row
use css to set the color for the table or by,
mycurrent_row.style.backgroundColor = "#EEF4EA";

You can use like this
$('td').click(function(){
$(this).css('background-color','red');
$('td').not($(this)).css('background-color','white');
});
See this demo

Related

.on mouseover and eventListener proper placement

I created an etch-a-sketch type of program so that when a user enters a height, width, and select a color choice, they are able to draw on the provided grid below. I am having troubles with the drawing part. I included a link to my code via codepen ... Online 37, I created a mouseover event but I can't figure out why it won't work. Any feedback would be greatly appreciated.
$("#pixelCanvas td").on("mouseover", function(){
var colorPicker = $("#colorPicker").val();
$( this ).css("background-color",colorPicker );
});
https://codepen.io/unicorn1/pen/JpVmZV
$("#pixelCanvas").on("mouseover", "td", function(){
var colorPicker = $("#colorPicker").val();
$(this).css("background-color", colorPicker);
});
Your td are being dynamically genererated, your #pixelCanvas exists from start, so you want to put an eventListener on the #pixelCanvas, but you only want it to react if a td is actually clicked. Since the #pixelCanvas existed from the start it will know if there happened something inside of it's container, while i generated td wouldn't know that it was supposed to have an eventListener
I think this discussion shows you the main differences between mouseover and hover.
Here is the link to it (when to choose mouseover() and hover() function

How to add custom CSS on button click?

I have a button that has some predefined CSS. With this button i have created an action button and a textarea.
Whenever i write some CSS in textarea then it should be added to existing button's CSS when submitting this CSS by action button.
I tried this-
jQuery-
$(function(){
$('.add').click(function(){
var custom=$('.textarea').val();
$('.button').css(custom);
});
});
But it doesn't seem to be working, How can i do this?
Is iframe Needed here?
Fiddle
You could try something like:
$('.button').attr("style", custom);
jsFiddle
Maybe try this
$(function(){
$('.add').click(function(){
var custom=$('.textarea').val().split(',');
$('.button').css(custom[0],custom[1]);
});
});
pass in background,redin text area

Change css when tab has active class

I'm trying to change the background colour of the <body> depending on what tab specific is active.
When a tab is active, a class called 'st_view_active' is added onto the tab content. In the tab content I add a hidden div with the hex code of what my body background colour should be when that tab is active, my jQuery code looks like this:
$(document).ready(function() {
$(function(){
$('body').css('backgroundColor',$('.st_view_active').find('.background').text());
});
});
And my html code when the tab is active is following:
<div class="tab-6 st_view st_view_active" >
<div style="display:none" class="background">yellow</div>
<div class="st_view_inner">
tab 6
</div>
</div>
So when tab6 is active the background of the body should be yellow. However, this is not working, the background colour is not changing, what am I doing wrong here?
DEMO and JSfiddle
Thanks
PS: The red and blue square is the next and previous tab handler..
See here: http://jsfiddle.net/CNYDU/25/
I put the default color at the end of sColor, but you could instead grab the first view and use its color. I did it this way to cut down on testing since your fiddle is painful to work with.
$(document).ready(function() {
var hsh = window.location.hash.replace('#','');
var sColor = hsh ? $("#slidetabs_45").find("."+hsh+" .background").text() : "#3b0";
$("body").css("background-color", sColor);
$("#slidetabs_45").slidetabs({
onContentVisible:function(e){
var color = $("#slidetabs_45").find(".st_view_active .background").text();
$("body").css("background-color", color);
}
});
});
I also added the .st_view_active class to the first view so that it will start correctly.
I also added a CSS3 transition to the background color, which isn't necessary.
This sounds like a great opportunity to use data elements in html. Rather than having a hidden div with the background color you want, you can simple add a data-color attribute to your tab a tag. Then when the div is clicked you can set the color easily with an event handler.
link to an updated fiddle - http://jsfiddle.net/CNYDU/15/
Note: The next and previous tabs do not work in this example, but it should be easy to get them working, just attach a listener to each that runs
$('body').css('background-color', $(".st_tab_active").attr('data-color'));
as its callback.
Check out the livequery plugin for jQuery.
Live Query also has the ability to fire a function (callback) when it matches a new element and another function (callback) for when an element is no longer matched. This provides ultimate flexibility and untold use-cases. For example the following code uses a function based Live Query to implement the jQuery hover helper method and remove it when the element is no longer matched.
Their example:
$('li')
.livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this)
.hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
You should be able to adapt this to your css changes like fired events, and therefor perform your actions based on which tab is active.
I have forked Jlange's jsfiddle, which uses the data attribute, for a demo of how this plugin would be used:
http://jsfiddle.net/nj6ZY/2/
http://jsfiddle.net/nj6ZY/2/show/#tab-10 - Also works with a link to activate a specific tab
And the relevant bits:
$('.st_tabs_ul li a.st_tab_active').livequery(function(){
$('body').css('background-color', $(this).data('color'));
});
Put ID's on your tabs. Example for id="tab6":
$(document).ready(function() {
if ($('#tab6').attr('class') == 'tab-6 st_view st_view_active') {
$('body').css('background-color', 'yellow');
}
});
However, why would you attach this function to document ready only? I would bind the function to when the element is clicked...

Inputbox width on body click remove function

I am new with JavaScript and I am trying to use it on my Inputbox.
I know how to add the width when I click on the Inputbox but I don't know how to remove the function on body click.
Check out this JSFiddle.
Use blur event on textbox:
var box = $$('.inputbox');
box.addEvent('blur', function myfunction(event){
box.morph({width:210});
});​
See Demo: http://jsfiddle.net/r4nEv/1/
I would probably add the click event the result and not to the document body as well as use blure to make sure that the box is reset. here is a quick fiddle to demonstrate this.
http://jsfiddle.net/r4nEv/4/
Hope this helps!

basic problem in jQuery code

http://jsfiddle.net/nhmbA/
In above link you'll find my working code.
The issue is when you first click on Select For button, it'll show a list but again you click on the same button then the list should not be visible but its vice-versa.
I know, this is due to blur event applied to the list but I also want the list to be hidden when its clicked outside.
Help me to sort this minor issue..
In your code change
$('.tglrOptns').blur(function(){
$(this).css('display', 'none').siblings('.optnTglr:first').removeClass('seltd');
});
to
$('body').click(function(e){
$('.tglrOptns').css('display', 'none')
.siblings('.optnTglr:first').removeClass('seltd');
});
and add this
$('.tglrOptns').click(function(e){
e.stopPropagation();
});
Demo
I have added a close label, on clicking it closes the options div
hi if you change the on click function
to:
$('.optnTglr').live('click', function(e){
this should help

Categories