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
Related
I'm trying to make a body map which would when clicked on certain parts of the body, be highlighted with the color red and also transparent while staying in that state so I can click on the others too like a selection but so far I can't seem to find the solution.
Here is the sample
http://79.170.44.80/sicuandomain.com/#
Thanks!
I am not myself familiar with the map and area implementation. But, After just trying some jQuery Plugins for exercise and learning, I think this will help your cause.
jQuery Plugin : http://davidlynch.org/projects/maphilight/docs/
So, Basically you need to initalize the map with this jQuery plugin and define the click event for the area you want to use as :
$(function () {
//Initalize the Image with the plugin
$('.map').maphilight({
stroke: false,
//Use the color you want
fillColor: '000000'
});
//Map area selector to intercept the click event
$('#Map area').click(function (e) {
e.preventDefault();
var data = $(this).mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
});
});
The document for the plugin is not good however. So, you can try and use if you like.
JSFIDDLE DEMO
There is lot to do here like removing the previous selected area on click event. But, I guess you can achieve that yourself.
And, There are other plugins to do the job as well. Plus you should know how the plugins works as well if you would like to do it manually.
I hope this help your cause.
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
I'm trying to make a custom dropdown be able to be "tabbed into" using jquery. That is, it is made of a ul, and I want the text input directly above it, when tabbed out of give some sort of focus to the ul. But for some reason this
var input = $("ul.dropdown_ul").prev("input");
$("#container").on("blur", input, function(){
alert("test");
});
does not work. With click as the event, the alert fires. But blur is not working.
JSBIN
Any ideas on why this doesn't work? Thanks.
Your #container is a div. Typically blur is used on inputs, thats why it not working. The following works fine.
$("#container input").on("blur", function () {
alert("test");
});`
Update Regarding Comment:
If your looking to have a specific element have the on blur event. Just make sure you select it properly and apply the listener to it. I think this is what you're trying to accomplish.
var $input = $("ul.dropdown_ul").prev('input')
$input.on("blur", function () {
alert("test");
});
Example
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...
Was styling the checkboxes of my webpage with jquery using the tutorial here
But i realized that I could not do SelectAll checkbox that will select all the checkboxes in my list. It works in the backend (the checkboxes are selected) but it does not show in my page.
Added a demo to show my problem. May need to port to your system to test it out
Demo
what can I add to the jQuery Custom Radio-buttons and Checkbox javascript file in the to achieve the select all checkbox function
Thank you!
You can try this FIDDLE:
$(function () {
var $chbxs = $('.checkbox');
$('#sel_all_lbl').toggle(
function() {
$chbxs.css('background-position', '50% -50px');
$('#checkboxall .truefalse').prop('checked', true);
},
function() {
$chbxs.css('background-position', '50% 0px');
$('#checkboxall .truefalse').prop('checked', false);
}
);
});
What I've done? First, in your fiddle you need to correct some syntax errors, then add a plugin code to the DOM, and you scripts to the script panel, so they will fire when DOM is ready. (This is all about jsFiddle, so you to understand how it works)
About actually your code, you attached click-handlers (.toggle()) to the checkbox element. But click event does not fire on it. Script simply changed the property of the checkbox, but there is no click. So you need to attach these handler to the element wish user actually clicks, that is square icon. (I added an id="sel_all_lbl" to it)
Try to use event handling on the select all checkbox and manually check all the checkboxes from javascript.