Regarding Pixel Art Maker toggle () and remove () - javascript

I need help regarding Pixel Art Maker.
where I added two extra features toggle () and remove () .
The problem is, when I insert numbers to draw grid, and click submit button, in first attempt , it draw the grid. But after clicking the toggle button or remove button , in my second attempt to draw grid, the submit button doesn't work and I can't able to draw grid.
Here is the link.
https://codepen.io/sofianayak55/pen/dKEaPw
Please go through this link, avoid the styling part, I will do it later Kindly go through the JavaScript and jQuery section.
Thank you.

Update your remove function.
$(".clearGrid" ).click(function() {
$("#pixelCanvas").html("");
});
You have used $("#pixelCanvas").remove() which is actually removing #pixelCanvas table. So next time it is not getting bind. You just need to clear only its html part.

Related

Reload all data points on c3.js graph

I made a simple div in html:
<div class='all'>
Show all
</div>
Here's the JS I tagged along to it:
$(document).ready(function () {
$('.all').click(function(){
chart.flush();
});
});
When a user clicks on the various x data set names in the legend, the data points will disappear. I want it so that if they click, say 20 data point names, all they will need is a single click of a button to put them all back on the graph instead of having to reclick all 20 options again.
I'm trying to make it so that when I click on the div class all, the chart will reload all of the data points there.
Like-wise, I also want it so that I can remove all data points.
In the c3.js reference guide for flush (http://c3js.org/reference.html#api-flush), I thought that this would reload all of the points on the graph. Apparently it doesn't. Is there a way so that once I click the div, all the points will be placed back onto the graph?
Have you tried to do chart.show(); instead of chart.flush();?
To hide all data you can then do chart.hide().
chart.toggle() can do the trick too, it will show the hidden data and hide the displayed ones.

Edit Yaxis values using textbox in popup

I want to edit Highchart Yaxis values on double clicking series point using popup with textbox same like attached snapshot URL, on pressing ok or enter button chart must be redraw with changed values.
Any help would be appreciated.
https://onedrive.live.com/redir?resid=EE658CD68AB0C97A!2696&authkey=!ALdbY9xxPI2oxYY&v=3&ithint=photo%2cpng
Look at this example for using a popup on click:
http://www.highcharts.com/demo/line-ajax
See the answer here for another way, using jQuery dialog:
Highcharts: tooltip Click instead of hover
You can capture the result of the update, and send it to the point.update() method, reference here:
http://api.highcharts.com/highcharts#Point.update
If you have more specific questions, get an example going and ask away.

Highlighting rows with DataTables (or other table/grid plug-ins)

There's an example in DataTables for highlighting rows on hover:
http://datatables.net/examples/advanced_init/highlight.html
However, I'm looking for something a bit different. I'd like the highlight to be trigged when users click on words outside the table. For example, in the above link, I'd like row #2 to be highlighted when a user click on "visibility" in the text above the table (so it's kind of a hyperlink).
I'm assuming I can find an highlighting plug-in that maybe can do what I need. But before
I got there, is there any easy way to do this with DateTables or other table/grid plug-ins?
Thank you!
Here is an example of highlight on click.
It also has an example of deleting a row on click from a link outside the table.
EDIT: This example won't do exacly what you want, but it get's you most of the way there. I have retrofitted the example in this fiddle to do what you want. Here is the "click link to highlight row" part of it:
$("#rowHighlightLink").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$('#example tbody tr').eq(1).addClass('row_selected');
});

Dynamically created selectors in jQuery

Hi I am trying to dynamically create a selector for jQuery instead of using a static one. The problem is, it is not working predictably/consistently.
I created a fiddle here: http://jsfiddle.net/Cc92f/
If you click run and click in each of the top radio buttons once, they work, but you cannot use the same buttons a second time.
If you click a top button, and then a bottom button, you can no longer click any of the buttons.
You may have to reload it a couple of times to see how different uses break it in different ways.
Thanks you for any and all help!
$(".concattest").click(function(event)
{
var radioid=event.target.id.split("_");
$('#r_2_'+radioid[2]).attr('checked', 'checked');
event.preventDefault();
});
Use .prop('checked',true) instead of .attr('checked','checked').
http://jsfiddle.net/5LWEk/
If you want to:
When changing selection in the top row, change value of bottom row
accordingly
When changing selection in the bottom row, select the last option in
the top row
Then use change event and prop() function, here is the demo

HighChart is preventing click event on a parent

I am building a table where when cell is clicked high charts is shown in its place(same way as flip cards). And when highchart is clicked a cell is reverted back it is original state.
However, after creating a chart dynamically all my click functions on a parent stop working when clicking on a chart directly.
I have created this small jsFiddle to demonstrate my problem:
http://jsfiddle.net/2j4qQ/2/
Code:$('#contentDiv').on('click', '.homepageChart', function() {});
$('#contentDiv').on('click', '.homepageChart', function() {});
This function does not fire when clicking directly on a chart. Why? and how can it be
Thanks in advance.
Have a look at this: jsfiddle.net/cssimsek/4Wa32/1. Since you were appending the Highcharts <div> with each click I added the .detach() method to the callback function of the .hide()method, in order to remove the <div> on secondary clicks. It seems to be working ok now.
I have added an overlay with z-index:1; to my highcharts which seems to solve the problem. However, this seems incorrect, since i should be able to listen to dynamically created highcharts events. If anyone has some info on this please share.
Here is updated fiddle:
http://jsfiddle.net/2j4qQ/5/

Categories

Resources