How do you toggle all dimensions in a Flot chart at once? - javascript

From the Flotcharts example: https://www.flotcharts.org/flot/examples/series-toggle/index.html
I'd like to toggle on/off all flot series at once (i.e. Select All / Select None).
Toggling the checkboxes themselves is easy enough:
$('input:checkbox').addAttr('checked'); // Select All
$('input:checkbox').removeAttr('checked'); // Select None
But how can I also trigger the dimensions to change?
Here's a jsfiddle of the flotcharts example:
https://jsfiddle.net/uzc5rqow/

I understand that "dimensions" refers to the axes. In your code, it is simple, you just need to call plotAccordingToChoices. I have forked your fiddle to show how to add all ticks with a button ( https://jsfiddle.net/Lk4oqvm5/ ). In the opposite case, when you uncheck every box, you need to decide which behavior you want. With no data, the graph cannot calculate the dimensions (if you manually uncheck every box, you will see that the last line does not disappear).

Related

JS toggleClass right way

I've this project where when I click on the plant the scale changes and show some texts.
http://www.gaianet.com.br/Nissin-teste/
I've this project where I should click on a planet and scale's it and show another div by opacity.
Right now i've been trying to do by js using toggle class but I need some help to make it work right.
If I click on first planet it works fine, but when this planet is 'selected'and I click on another all the classes start to toogle and the scale and opacity goes crazy.I don't know how to make a 'reset' to the original css if I click on another planet when one has already changed the class.
$(".layer.planeta1").click(function(){
$(".institucional").toggleClass("escala-planeta repo1-1");
$(".planet-info1").toggleClass("opacidade-planeta ");
$(".educacao").toggleClass("escala-menor-planeta repo1-2");
$(".pdv").toggleClass("escala-menor-planeta repo1-3");
});
$(".layer.planeta2").click(function(){
$(".educacao").toggleClass("escala-planeta repo-2-1");
$(".planet-info2").toggleClass("opacidade-planeta ");
$(".institucional").toggleClass("escala-menor-planeta repo-2-2");
$(".pdv").toggleClass("escala-menor-planeta repo-2-3");
});
$(".layer.planeta3").click(function(){
$(".pdv").toggleClass("escala-planeta");
$(".planet-info3").toggleClass("opacidade-planeta ");
$(".educacao").toggleClass("escala-menor-planeta");
$(".institucional").toggleClass("escala-menor-planeta");
});
I'm sure there should a way better way to do that but I have no idea how.
Thanks a lot
I think I am clear on the acceptance criteria, but just to be sure, here is what I am going with:
When I click on a planet, I want it to scale.
If I click on a planet that is already scaled, I want it to reset to original scale.
When I click on a planet, I want to 'reset' any other planets to their original scale, and scale the planet I clicked on if it is not already scaled.
Given that, you might try being more explicit about what needs to happen when you click on a 'planet':
$('.planet').on('click', function(event){
$('.planet').removeClass('scale'); // Explicitly remove the scale class from other planets
$(this).toggleClass('scale'); // Scale the one I am clicking on, or if it's already scaled, revert it
});
A simplified example demonstrating this: http://codepen.io/anon/pen/xbMJRd
If it is creating so much of hassle using then I would use jQuery addClass and removeClass instead of toggleClass.
Another suggestion, I would save jQuery dom elements in a variable so that I dont search on entire dom again and again.

Extjs 4.2.1 - Grid mask won't hide

I have a UI with several grid components. For some reason, even after it's populated with rows, one of the grid's Load Mask stays visible.
I have to work out why the mask stays after load, but first I was trying to determine the code that would hide the mask.
Here's what I've tried:
Ext.getCmp('callClassAvailableGrid').setLoading(false)
Ext.getCmp('callClassAvailableGrid').unmask()
Ext.getCmp('callClassAvailableGrid').view.unmask()
Ext.getCmp('callClassAvailableGrid').viewConfig.unmask()
None of which hide the mask.
Also of note:
Ext.getCmp('callClassAvailableGrid').store.loading
returns false
How can I hide the Mask on this Grid?
I believe you need to be calling unmask() on the Ext.Element instance for the grid.
mygrid.getEl().unmask()
Found the answer:
Ext.getCmp('callClassAvailableGrid').view.loadMask.hide();

Adjusting dropdown in ExtJS combobox

I need such combobox, that's it dropdown's width ant that one of input are different and dropdown is adjusted to the right edge of the input.
First part is easy - juts set matchFieldWidth to false and assign listConfig.width = something. But what is the easiest way to perform the adjustment? Here is a picture which illustrates the question.
I'll be the first, but will not gain a reputation - all we should do - is just set pickerAlign to tr-br.

How can I use this JQuery plugin to move an object X positions?

http://desandro.com/demo/masonry/docs/
I got this to display nicely. But,
How can I modify this plugin so that when someone clicks an object, it does the nice "re-ordering" effect as seen in: http://desandro.com/demo/masonry/docs/filtering.html#demo
And it moves the object "X" positions up or down the list?
Is it easy to modify this to do that?
From the moment that all elements has float:left; when the user click the button hide the element with specific classes, for example if he clicks grey, then will hide red and black. In jquery the above example would be like this:
$(document).ready(function(){
$("#grey-button").click(function(){
$(".red, .black").hide()
});
});
This will hide all elements with classes red and black, adding the css property display and value none.
This will make the browser don't "see" them, so the rest elements will be positioned in a different place, according the floats you have set for them.

Add Hover display for table cell

I have a table, but it is not in a list format, meaning not a column/row format. I look for specific cells to add a hover event that displays a description of the cell.
$("#TableID td").hover(function(){
//ifCellThatIWant
$(this).append("<span>Message that was brought in</span>");
},
function(){
$(this).children().remove();
});
The problem is right now is that the hover displays a span(with info. inside) that I used jquery to append the span to the cell when mouseover, which expands the cell, which is an effect that I don't like or want. I'm Trying to have an out of the table look,but still be by the cell that triggered the event; because if the span has a lot of info. in it, expanding the cell dynamically will start to look pretty nasty. Also will help if I had some type of css direction on how will I make the display for the mouseover "description" span look nice. My mind thought is that a way to accomplish what I want is giver the appended span the position of my mouse cursor when hover, but not sure if its the right approach or what the syntax would look like.
Make the span display as block and set the z-index greater than anything else on the page. Then you can absolute position it and set the left and top properties to the x and y positions of the mouse location.
EDIT:
Here's a demo of what I mean --> http://jsbin.com/odape. Instead of appending a span, I would suggest just creating a placeholder one at the bottom of your html to use for each cell and just change the text to display (not sure how you were bringing it in so I didn't add it in my example.

Categories