I followed this link to achieve an effect like jQueryUI collapse but it could expand any number of regions.
Then, I used highcharts to render two charts in two of the regions. But only the second chart could show correctly while the first chart couldn't. I set the width and height of the region that the first chart renders to but got the same.
I have wrote two javascript functions to control rendering the two charts separately.
It's strange enough that if I commented out the second function that rendered the second chart , the first chart could show correctly.
Please give me some tips on how to resolve the problem.
The html file like this:
<div id="notaccordion">
<h3>first chart<h3>
<div id="firstchart"></div>
<h3>second chart</h3>
<div id="secondchart"></div>
</div>
The two javascript functions like this:
function render_one() {
...
// set the variable 'renderTo' to "firstchart"
...
}
function render_two() {
...
// set the variable 'renderTo' to "secondchart"
...
}
Related
When inserting a table into the editing area of Summernote editor, how do I outline the boarders of the table sections with a line? For example - the way Word does it's tables.
All help appreciated.
If you open Microsoft Word and insert a box, you will see that the boxes have boarders around them. SummerNote does display a very very faint line around the boxes of the table but on a white background it's impossible to see. I would like to draw darker and even thicker lines around the boxes. I would like to provide an example from Word but can't see a way to do it. Yes, I think I can edit CSS given some guidance.
Summernote calls tableClassName when table is created via jquery's addClass method. So I used that to inject my jquery code like this:
<script>
$('#xyz').summernote({
tableClassName: function()
{
$(this).addClass('table table-bordered')
.attr('cellpadding', 12)
.attr('cellspacing', 0)
.attr('border', 1)
.css('borderCollapse', 'collapse');
$(this).find('td')
.css('borderColor', '#ccc')
.css('padding', '15px');
},
});
</script>
Link for Information
Im using angularjs grid: this component allaways displays only data which fits to page. Suppose I want to have all data displayed at once, even if it takes a few pages (page scrolling is needed to see all data, but without grid scroll).
How to do it?
I played with:
parameter ui.grid.autoResize
trying to overwrite default css
setting.
No result.
Did you tried adding a class to your div. I can see the grid scroll bars if I add a CSS like so. You need to change the below CSS according to your needs.
.grid {
width: 580px;
height: 500px;
}
And here is my ui-grid
<div>
<div class="grid" ui-grid="assetGridData" ui-grid-move-columns ui-grid-resize-columns ui-grid-selection></div>
</div>
Also it will be good if you can have a fiddle for this issue.
One hacky way to make it is to set
gridOptions.minRowsToShow = rows.length + 0.1
0.1 is needed to completely remove the vertical scrollbar of the grid. If 0.1 doesn't work for you, try a higher value like 0.2.
ui-grid-auto-resize worked in my case
I have a page which has a few links. Clicking on a link generates a list of different charts in the bottom of the page without page reload. Put it another way, each link clears previous charts, gets new data from the server, invokes Highcharts to draw new charts. No page reload.
Here comes the issue.
I am using the following Javascript to collect the charts on the page and send the data to the server.
var svgArray=[];
$(Highcharts.charts).each(function(i, chart){
if (chart) {
svgArray.push(chart.getSVG());
}
});
I notice that Highcharts.charts array grows by ADDING new charts to its end of when a link is clicked. I dont need old charts. I just want to collect new charts.
How can I initialize Highcharts or Highcharts.charts when a link is clicked.
Thanks and regards.
Here is what I did and it appears to get rid of charts created earlier. When a link is clicked and before the new charts get drawn, I try to destroy all charts the following way:
$(Highcharts.charts).each(function(i, chart){
if (chart) {
chart.destroy();
}
});
It seems working, but I am not sure if this is the right or best way or it can help others. I love to hear the input from experts.
Thanks!
I've been trying to create an horizontal radiobutton horizontal list, but somehow I don't get the same visual result as when done with the data-* attributes.
If I do it with code I get squared buttons, while using the attributes I get a nice rounded corner toolbar.
Here is the code I use for creating the button list:
$(element).controlgroup({ mini: true, type: "horizontal" });
which should be the same as the one I use with the data-* attributes:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
I've posted a jsfiddle to show the result
http://jsfiddle.net/simonech/zeDt4/3/
Can someone shad some light on this strange behavior?
Thx
Simone
To make them look the same, try this:
$("#mycontrolbox").controlgroup({ mini: true, type: "horizontal"});
$("#mycontrolbox").attr("data-role", "controlgroup");
updated jsFiddle - http://jsfiddle.net/zeDt4/4/
Now, why is this.
I think that jQuery mobile is actually not build upon jQuery UI even though it is currently very close. jQuery mobile is using those data-** attributes to select what is going to be a role of each tag. When the element is added to the html, jqm reads the content and based on what is in these data-role attributes, it decorates / replaces / the current content with its own. This is more about what is done to the element in order how it looks.
On the other hand, when you call
$("#mycontrolbox").controlgroup();
This does create a jQuery component allowing you to use the methods of that component. etc.
This is close to how the component behaves from the script point of view. This does not, however, add data-role attribute to the element itself.
I'm facing an issue with jquery-ui progressbar labels.
I'm trying to do a single code that will handle multiple progress bars, in the fiddle I'm providing you will notice that bars are working perfect but I cannot solve the labels, I always get the last data-width value, when I'm looking to display the value of each one of the bars.
Have a look please: http://jsfiddle.net/jotapee/TRuND/21/
the problem is on this line :
$('.progress-label').text(width.toFixed(0) + "%");
When you set text, BOTH labels with .progress-bar class will be called.
Here is one possible solution : fiddle
In HTML:
<p><strong class="plabel">Master Plan</strong><span class="progress-label index-0"></span>
<p><strong class="plabel">Design</strong><span class="progress-label index-1"></span>
In .js:
$('.index-'+index).text(width.toFixed(0) + "%");