I have a list of data that I need to display in a web page 3 at a time
The first needs to be displayed in a div called "left" , the second in a div called "centre" and the third in a div called "right".
And I need to be able to scroll through the data with a pager. And so the next 3 results will be displayed in a similar way, and so on till the end of the data set
Obviously the alternating templates in the repeater are not suitable for this.
Is there a smarter way to achieve this?
Try a loop like this
for (int i = 3; i < enumerable.length + 3; i++)
{
if (i % 3 == 0)
{
// Put it in div 1
{
else if (i % 3 == 1)
{
// put it in div 2
{
else if (i % 3 == 2)
{
// put it in div 3
{
}
The first time through, it will use div1, the second time div2, and the third time div3, and then the fourth time div1, and so on...
Related
I'm making a carousel from scratch, it contains 7 itens, the problem is when reaches the last item i still can click to the next one, i want that every time it reaches the last item it stops.
I'm using transform to make the sliding effect, so every time i press the next button it increases the translateX, i dont know if this is the better aproach.
transform: ${({ currentSlide }) =>
currentSlide ? `translateX(-${currentSlide}00%)` : "translate(0%)"};
I dont want this big space when I reach the last item
This should be the expected result when the last dog appears
Code: https://codesandbox.io/s/dogs-carousel-u7126?file=/src/App.tsx
I'd modify how currentSlide is handled. With 3 images on screen and 7 total in the carousel, advancing currentSlide past the 5th image is what causes the empty space, so preventing it from doing that by clamping currentSlide should fix the issue:
// hopefully self-explanatory constants:
const NUM_IMAGES_VISIBLE = 3;
const NUM_IMAGES_TOTAL = 7;
// after sliding, try this, assuming currentSlide 0 is the first image:
currentSlide = Math.min( currentSlide, NUM_IMAGES_TOTAL - NUM_IMAGES_VISIBLE )
I am trying to create a printable document using QTextDocument, which also includes a table, which I am adding using QTextCursor::insertTable.
However I have the requirement to use different background colors for the table rows. The table is meant to contain all days of a month, and weekends should have grey background, while workdays shall have no background.
I have tried this code:
QTextTable* table = cursor.insertTable(1, 7, normal); // 7 columns, and first row containing header
foreach (DayItem* day, month->days)
{
if (day->date.dayOfWeek() == 6 || day->date.dayOfWeek() == 7)
{
table->setFormat(background); // grey background
table->appendRows(1);
}
else
{
table->setFormat(normal); // white background
table->appendRows(1);
}
}
Now the issue with this is that the table->setFormat changes the format of the whole table, and I can't seem to find any function which lets me set the format for a row or a cell. There is formatting options for cells, however those are for the text format, and thus would not color the cell background.
I have also tried using QTextDocument::insertHTML and work with HTML tables, however Qt would not render the CSS correctly which I would use for styling the borders and so on.
How can I achieve alternating row background colors in QTextTable?
You can use QTextTableCell:setFormat to change the background color of each cell:
auto edit = new QTextEdit();
auto table = edit->textCursor().insertTable(3, 2);
for(int i = 0; i < table->rows(); ++i)
{
for(int j = 0; j < table->columns(); ++j)
{
auto cell = table->cellAt(i, j);
auto cursor = cell.firstCursorPosition();
cursor.insertText(QString("cell %1, %2").arg(i).arg(j));
auto format = cell.format();
format.setBackground(i%2 == 0 ? Qt::red : Qt::green);
cell.setFormat(format);
}
}
I am using QFormLayout with QLabels in the left column and various widgets in the right column. On the right, there are either labels, check boxes, combos or line edits. Unfortunately each of there controls has different natural height. But I would like to have each row in the form layout to have equal heights determined by the biggest one (I know in which row it is). Is there any simple way to achieve this? I cannot find anything like QFormLayout::setRowHeight().
One solution, just assign equal size to all widgets at runtime using the following function:
void setEqualRowHeight(QFormLayout *formLayout, int height)
{
QWidget *w;
for(int i = 0; i < formLayout->rowCount(); i++) {
QLayoutItem *item = formLayout->itemAt(i, QFormLayout::FieldRole);
if (item && (w = item->widget())) {
w->setFixedHeight(height);
}
}
}
I've a values something like this 1.25, 2.50, 3.75 or 4.00:
I can loop on the integers like 1, 2, 3 or 4.
But how I can loop on 3.75?
for (int i = 0; i < 3.75; i++)
{
// my logic
}
Updated:
The loop I needed as I'm creating a rating system and displaying the rating stars in loop. For example:
If 1.25 then star 1 and quarter (0.25) of star 2. Or if 4.75 then star 4 and last quarter (0.75) of star.
3.75/5
How I can display rating in stars?
Prepare 2 image files, one has 5 empty-stars and the other has 5 filled-stars, just like:
the 2 images must have same width and height, e.g. 400X70
place the filled-stars overlap on the empty-stars, then crop the filled-stars to a portion of the origin witdh the same as the Rating,
i.e. the crop div width = image_width / 5 * rating
e.g. With 3.5 Rating, width = 400 / 5 * 3.5 = 280
<html>
<head><title>test</title>
<style type="text/css">
.container > * {
position: absolute;
}
.container, .crop {
height: 70px;
}
.crop {
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<img src="https://i.stack.imgur.com/yiT2y.png" />
<!-- the width could be calculated either at server or client side, or define in css -->
<div class="crop" style="width:280px">
<img src="https://i.stack.imgur.com/oTi9e.png" />
</div>
</div>
</body>
</html>
Although generally it's not a good idea to loop on double, especially when you check for equality in the loop, in your case it's OK because your loop increment is can be represented precisely as a combination of powers of 2. Specifically, 1.25 is 20+2-2.
for (double i = 0 ; i < 6 ; i+=1.25) {
// my logic
}
Alternatively, you could loop on int, and multiply loop counter by 1.25:
for (int i = 1 ; i <= 4 ; i++) {
double val = 1.25 * i;
//
}
I'm creating a rating system and displaying the rating stars in loop.
You don't need a loop for this. If you have a number between 0 and 5, inclusive, representing the average, you need to know three things:
How many "filled" stars to display,
How big is the filled portion of of the partially-filled star, and
How many "blank" stars to display.
You can find out the answers to these three questions using math:
The number of "filled" stars is the integer portion of the number after truncation
The fraction of the partially filled star is the decimal part of the number
The number of "blank" stars is 5-ceil(n), where ceil(n) represents the "ceiling" of the number (i.e. the smallest int equal or higher than n).
Just use loop variable of type double:
for (double x = 1.25; x <= 4; x += 1.25)
{
// Your logic
}
You can iterate over a list of accepted values instead of iterating on float. If you don't want to manually edit known values, one way to generate them would be:
IEnumerable<float> CalculateBreakpoints(int min, int max, short unitPartitions)
{
var fraction = 1f / unitPartitions;
for (float i = min; i <= max; i += fraction)
{
yield return i;
}
}
It's unlikely that in the wild you'll have ratings that exactly match your known values. You could try choosing known value closest to rating at hand or approach it some other way. Amazon for example shows closest value above actual rating. That could be done like this:
float MapRatingToBreakpoint(float rating, IEnumerable<float> breakpoints)
{
var min = breakpoints.Min();
var max = breakpoints.Max();
if (rating < min || rating > max)
{
throw new ArgumentOutOfRangeException(nameof(rating));
}
foreach (var point in breakpoints)
{
if (rating <= point)
{
rating = point;
break;
}
}
return rating;
}
Once you have a processed rating, to display stars on the front end this code would be able to choose what type of star to use:
for (let i = 1; i <= 5; ++i) {
if (i <= Math.floor(rating)) {
console.log("addFullStar()");
}
else if (i > Math.ceil(rating)) {
console.log("addEmptyStar()");
}
else {
fraction = rating - i + 1;
console.log(`addPartialStar(fraction: ${fraction}`);
}
}
At this point it's up to you to choose how you want to display each type of star. You could use a sprite with all the different stars and play with CSS classes like <span class="star-0-25" /> to attach correct images. Another option for displaying a partial star could be to add full and empty star on top of each other, have empty star with hidden overflow, full star with visible overflow and adjust width of a parent tag.
I have a DataGrid in my project. It doesn't fit's the width of the form, so the scrollBar appears. The DataGrid, on it's initial state, displays a few columns and a part of the next column (which would appear after scrolling).
Is there any way, I can get the width of this, displaying part?
You should get the width of the parent object.
let's say the datagrid is in your application, then you should get the width of the stage.(stage.stageWidth)
If your datagrid is on a certain x location in your application (or any other parent object) then you should take the width of the parent object - the x value of your datagrid. (stage.stageWidth - dataGrid.x)
Ok, I had some time to dig more deeply in this problem. I've searched a few classes to see, how the Adobe was implementing those grid behavior (displaying columns partly). So, for those, who'll need to deal with this, the needed part is in DataGrid.as file, method configureScrollBars .. actually, this part of it:
// if the last column is visible and partially offscreen (but it isn't the only
// column) then adjust the column count so we can scroll to see it
if (collectionHasRows && rowCount > 0 && colCount > 1 &&
listItems[0][colCount - 1].x +
visibleColumns[colCount - 1].width > (displayWidth - listContent.x + viewMetrics.left))
colCount--;
else if (colCount > 1 && !collectionHasRows)
{
// the slower computation requires adding up the previous columns
var colX:int = 0;
for (var i:int = 0; i < visibleColumns.length; i++)
{
colX += visibleColumns[i].width;
}
if (colX > (displayWidth - listContent.x + viewMetrics.left))
colCount--;
}
That's pretty much all code, that needed to catch and measure all those tricky divided cols in a grid :)