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
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
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
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...
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!
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