I have a div element with a background-image. The image is a pattern which cannot be cut, so it always has to end to the bottom of the image. The image height is 400px. So I want the div to always be 400px, or higher, but it has to be divided by 400px so that the background image doesn't cut away when there will be text overflow. Example: 400px->800px->1200px etc.
if the content ain't changed after the page load u can use a simple javascript:
window.onload = function(){
var divs = document.getElementsByClass('exampleClass');
for(var i=0;i<divs.length ; i++)
if(divs[i].clientWidth % 400 != 0)
divs[i].clientWidth += 400 - (divs[i].clientWidth % 400);
}
Related
I have a Matlab script that creates a Model Block for each element i found in a text file.
The problem is that all Models are created on each other in the window. So i'm trying to make a loop like:
for each element in text file
I add a Model block
I place right to the previous one
end
So it can look like this:
As you can see on the left, all models are on each other and I would like to place them like the one on the right.
I tried this:
m = mdlrefCountBlocks(diagrammeName)+500;
add_block('simulink/Ports & Subsystems/Model',[diagrammeName '/' component_NameValue]);
set_param(sprintf('%s/%s',diagrammeName,component_NameValue), 'ModelFile',component_NameValue);
size_blk = get_param(sprintf('%s/%s',diagrammeName,component_NameValue),'Position');
X = size_blk(1,1);
Y = size_blk(1,2);
Width = size_blk(1,3);
Height = size_blk(1,4);
set_param(sprintf('%s/%s',diagrammeName,component_NameValue),'Position',[X+m Y X+Width Y+Height]);
Inside the loop but it returns an error Invalid definition of rectangle. Width and height should be positive.
Thanks for helping!
The position property of a block does actually not contain its width and height, but the positions of the corners on the canvas (see Common Block Properties):
vector of coordinates, in pixels: [left top right bottom]
The origin is the upper-left corner of the Simulink Editor canvas before any canvas resizing. Supported coordinates are between -1073740824 and 1073740823, inclusive. Positive values are to the right of and down from the origin. Negative values are to the left of and up from the origin.
So change your code to e.g.:
size_blk = get_param(sprintf('%s/%s',diagrammeName,component_NameValue),'Position');
set_param(sprintf('%s/%s',diagrammeName,component_NameValue),'Position', size_blk + [m 0 0 0]);
The title is quite clear, I'm using Leaflet and I need to show only the vertices of a polyline. For exemple see this image :
Currently I can only have the black line, I'd like only the red squares. Using markers is not an option for performance issue, my lines can be huge (500 000 vertices) and the use of smoothFactor is a need.
Is that possible? If not, does someone knows a plugin that does that, or have a hint on how could I do that by extending the Polyline class?
What you could do here is every time the polyline gets rendered, get the segments of it's SVG path, use those points to add SVG rectangle elements to the polyline's container:
var polyline = L.Polyline([]).addTo(map),
list = polyline._path.pathSegList
// Iterate segments
for (var i = 0; i < list.length; i++) {
// Create SVG rectangle element
rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
// Set rectangle size attributes
rectangle.setAttributeNS(null, 'height', 4)
rectangle.setAttributeNS(null, 'width', 4)
// Set position attributes, compensate for size
rectangle.setAttributeNS(null, 'x', list[i].x - 2)
rectangle.setAttributeNS(null, 'y', list[i].y - 2)
// Set rectangle color
rectangle.setAttributeNS(null, 'fill', 'red')
// Append rectangle to polyline container
polyline._container.appendChild(rectangle)
}
Seems to work as far as i had time to test it ;) Had to use a timeout though, don't know why, look in to that when i've got more time on my hands.
Example on Plunker: http://embed.plnkr.co/vZI7aC/preview
Thanks for viewing and answering.
I am using Google Charts (TimeLine) to display information from database.
But the Google Chart reference only provide setting fix height for the chart.
Whereas I would like to change chart height based on the number of rows I get from data.
So I made the code:
var graph = $('#chart_timeLine').children()[0].children[0].children[1];
$(graph).css('height',graph.scrollHeight);
$(graph).css('overflow-y','auto');
Now the chart don't have a vertical scrollbar and I am satisfied.
But I found that the scalebar, which shows the the scale of timeline chart is missing.(It is actually hiding under the chart, instead of showing up at the bottom of the chart).
So then I changed scalebar's position to absolute and set it to the bottom of my chart.
Then it is ugly because it has a height of 200px, while the scale is at the bottom of that 200px, leaving a huge blank between my chart and the scale.
Is there a fix for that?
Thank you.
Instead of messing with the internal workings of the chart, set the height based on the number of rows of data in the DataTable:
// set a padding value to cover the height of title and axis values
var paddingHeight = 40;
// set the height to be covered by the rows
var rowHeight = data.getNumberOfRows() * 15;
// set the total chart height
var chartHeight = rowHeight + paddingHeight;
and then in the Timeline's options, set the height:
height: chartHeight
I tried the answer, but it did not work for me. The way I got it to work for me was this:
// Calculate height
var rowHeight = 41;
var chartHeight = dataTable.getNumberOfRows() * rowHeight + 50;
var options = {
height: chartHeight
}
The + 1 to the getNumberOfRows() is for the X-axis text.
$.ajax({
...
success: function(jsonData){
...
var options = {
height: (jsonData.length * 40) + 80,
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
}
});
As far as I can tell its:
30px height for each bar
10px padding for each group.
60px for the Series.
So for a 9 bar Group = (30 * 9) + 10 = 280px
Chart Height = 280px + 60px
If you are Grouping Rows you will need to determine if your date ranges overlap with any others in that group.
Google does this by:
Getting the Group items IN START DATE ORDER
Creating an empty array of Group Display Rows
For each Group Item:
For each Display Row
If Item fits in Row...
Add it to existing Display Row
Next
If No existing Display row found
Add New Display Row
Next
I would like to have a string of text that's centered on a line. I've tried this:
figure
axis([0,10,0,10])
d = 2.81;
center = 5;
line([center - d,center + d],[5,5])
th = text(center,4.9,'mmmmmmmmmmmmmmmmmmmmmm');
set(th,'HorizontalAlignment','center')
The text is aligned with the line on the right but not on the left. The above image is a screen shot. I did not consistently have this problem in saved versions of the figure.
Is there a way to center text on a line? I am not concerned about resizing the figure right now, but I would like to use the default font.
It seems that it's not possible to position text arbitrarily precise. I tried getting size of text and drawing line and re-positioning text accordingly. More about text properties here.
str1 = 'mmmmmmmmmmmmmmmmmmmmmm';
center = 5;
text_line_spacing = 0.2;
figure
axis([0,10,0,10])
% Set text initialy
th = text(0,0,str1);
% Get size of text
ext = get(th, 'Extent');
% text_width = ext(3);
% text_height = ext(4);
% Draw appropriate line
left = center - ext(3)/2;
right = center + ext(3)/2;
line([left right], [5 5])
% Reposition original text
set(th, 'Position', [left 5+text_line_spacing]);
I need to get a trimmed CGImage. I have an image which has empty space (alpha = 0) around some colors and need to trim it to get the size of only the visible colors.
Thanks.
There's three ways of doing this :
1) Use photoshop (or image editor of choice) to edit the image - I assume you can't do this, it's too obvious an answer!
2) Ignore it - why not just ignore it, draw the image it's full size? It's transparent so the user will never notice.
3) Write some code that goes through each pixel in the image until it gets to one that has an alpha value > 0. This should give you the number of rows to trim from the top. However, this will slow down your UI so you might want to do it on a background thread.
e.g.
// To get the number of transparent rows at the top of the image
// Sorry this code is so ugly
uint32 *p = start_of_image;
while ( 0 == *p & 0x000000ff && p < end_of_image_data) ++p;
uint number_of_white_rows_at_top = (p - start_of_image) / width_of_image;
When you know the amount of transparent space from around the image you can draw it using a UIImageView, set the renderMode to center and let it do the trimming for you :)