I have about 100 items that I use jade iteration to write each one of them to html. However, I'm struggling to find an elegant way to separate the items into rows of three.
To be clear, I want something like this:
.row
.item1
.item2
.item3
.row
.item1
... and so on...
I've tried things with inline javascript like this with no luck:
- var a = 0;
each item in list
- a++;
- if(a % 3 == 0)
.row-fluid
.span3(id='#{item.id}')
p #{item.id}
- else
.span3(id='#{item.id}')
p #{item.id}
note: this kills the list
while list.length > 0
.row
for item in list.splice(0, 3)
.span3(id=item.id)
p= item.id
let me know if this works as i just wrote it off the top of my head
- var i = -3;
while i <= list.length
- i += 3;
.row
each item in list.slice(i, i+3)
.span3(id='#{item.id}')
Related
I want to get following if condition in jade.
each item,count in display
if(count % 3 === 0)
{
ul.thumbnails
}
li.span6 //nested under ul
//more code nested under li
I googled searched a lot, but with no luck.
Basically, I want to make a new list for every count which is divisible by 3
I tried this:
mixin display_list
li
//code
each item,count in display
-if(count === 0 )
ul.thumbnails
mixin display_list
-else
mixin display_list
It still doesn't work!
Since Jade forces you to indent stuff that is nested, I think the only way (not sure, but it's certainly the most straightforward) is to do it like this:
- var i = 0;
- while(i < display.length)
ul.thumbnails
- var k = i + 3
- while(i < k && i < display.length) // Will repeat three times, unless display.length isn't large enough
li.span6 //nested under ul
//more code nested under li
- i++
Assuming display is an array
(This answer has been updated, the former answer was completely wrong)
Update 2: Fixed that k could be greater than display.length
I found a way but I don't think it is the correct way to do it.
a = [1,2,3,4,54,6,7,8,9,4,5]
each item, i in a
if i % 2 == 0
|<ul>
li #{item}
if (i+1) % 2 == 0
|</ul>
I am using a node.js server for a multiplayer synchronized dice, but i am having some strange problems with variables changing that are not referenced or used...
var origonalRolls = rolls;
//identify epic fails
var epicFails = [];
for(var r = 0; r < rolls.length; r++)
if(rolls[r] === 1)
epicFails.push(r);
console.log("TEST 1 :: " + JSON.stringify(rolls));
console.log("TEST 2 :: " + JSON.stringify(origonalRolls));
//remove epic fails and the corresponding heighest
if(epicFails.length > 0){
for(var i = epicFails.length-1; i >= 0; i--){
rolls.splice(epicFails[i], 1);
if(rolls[rolls.length-1] >= success)
rolls.splice(rolls.length-1, 1);
}
}
console.log("TEST 3 :: " + JSON.stringify(rolls));
console.log("TEST 4 :: " + JSON.stringify(origonalRolls));
the above should find any element in the rolls array which is 1 and then add it to epicFails. it should then remove it from rolls as well as the heighest remaining roll. (note, rolls is sorted numerically)
for some reason the output of this segment of code is as follows:
TEST 1 :: [1,1,2,3,3,6,7,7,9,9]
TEST 2 :: [1,1,2,3,3,6,7,7,9,9]
TEST 3 :: [2,3,3,6,7,7]
TEST 4 :: [2,3,3,6,7,7]
I am unsure why rolls and origonalRolls start the same and end the same. I am only using rolls.
Any help and/or explanation to this problem is welcome, it's been troubling me for a long time now...
In Javascript Arrays and Objects are only shallow copied - which means that an array (rolls) copied from another array (originalRolls) is only a reference to originalRolls - it is not an entirely new array, and modifying values in one will affect values in the other.
You will need to implement a deep copy function to create an entirely new array based off another. There are numerous imlementations of deep copying arrays/objects both here and elsewhere on the net - here is one of them from a quick Google.
Replace var origonalRolls = rolls; with:
var origonalRolls = [];
for (var i = 0, len = rolls.length; i < len; i++) {
origonalRolls[i] = rolls[i];
}
What is the way of doing this in the view template in playframework? I have tagged with groovy, because apparently, the play template engine is based on groovy.
%{
for(int i=0, int j = 0; i < userdata.size(), j < user.size();i = i + 4, j++){
}%
<div style="text-align: center;">
<h3>
${foo.get(j)}
</h3>
</div>
If this is not possible, or just for curiosity sake:
I also tried passing foo as a hashmap, the keys of which are already present in userdata. I tried something like this but to no avail:
${foo.each{ k, v -> println "${k}:${v}" }}
Since you are talking about groovy, I presume you are using playframework 1.x. Playframework 2 uses scala templates.
You can loop over two conditions, like you would do in any other language. The syntax is just a little different.
Java:
for (int i = 0; i < 10; i++){
for (int j = 0; j < 10; j++) {
System.out.println(String.format("i: %d, j: %d", i, j));
}
}
playframework template:
#{list items:0..10, as:'i'}
#{list items:0..10, as:'j'}
<p>i: ${i}, j: ${j}</p>
#{/list}
#{/list}
Check out the documentation for the #{list} tag
It seams that you can't do this with play template builtin tags. Furthermore, I also have a compilation failure using for loop with multi-parameter initialization in a play 1.2.4 template. You can make it work with a while loop :
%{
int j = 0, i = 0;
while (i*i <= j) {
}%
${i}^2 <= ${j}
%{
i++;
j = j+2;
}
}%
//prints
//0^2 <= 0
//1^2 <= 2
//2^2 <= 4
I cannot get Jade to indent the code in the for loop correctly:
div.container
- var cell = 0
- for(var i = 0; i < results.Items.Item.length; i++)
- if(cell == 0)
div.row
div.span3
div.cell
span #{results.Items.Item[i].ItemAttributes.Title}
- else
div.span3
div.cell
span #{results.Items.Item[i].ItemAttributes.Title}
- if(cell < 3)
- cell++;
- else
- cell = 0
The code in the else statement does not go inside div.row but instead renders under div.container, or on the same level as div.row. I need the code in the else statement to render inside div.row. How can I get Jade to do this?
What I'm trying to do is to get div.row to render and then after every 4th div.cell (as counted by the cell object) render another div.row
I believe you have to do it like this:
div.container
- var cell = 0
- for(var i = 0; i < results.Items.Item.length; i++)
div.row
div.span3
div.cell
span #{results.Items.Item[i].ItemAttributes.Title}
- if(cell < 3)
- cell++;
- else
div.row
- cell = 0
use curly braces "{" and "}"
div.container
- var cell = 0
- for(var i = 0; i < results.Items.Item.length; i++){
- if(cell == 0){
div.row
div.span3
div.cell
span #{results.Items.Item[i].ItemAttributes.Title}
- }
- else{
div.span3
div.cell
span #{results.Items.Item[i].ItemAttributes.Title}
- }
- if(cell < 3)
- cell++
- else
- cell = 0
- }
I'm trying to produce a line chart using Flot, but I want the data labels to show up on the chart - meaning, I want the value of each point to appear next to that point. I feel like this should be an option, but can't find it in the API. Am I just missing something, or does someone know a workaround?
Thanks in advance.
Here is how I added the feature, including a pleasant animation effect:
var p = $.plot(...);
$.each(p.getData()[0].data, function(i, el){
var o = p.pointOffset({x: el[0], y: el[1]});
$('<div class="data-point-label">' + el[1] + '</div>').css( {
position: 'absolute',
left: o.left + 4,
top: o.top - 43,
display: 'none'
}).appendTo(p.getPlaceholder()).fadeIn('slow');
});
You can move the position and display css to a stylesheet.
The feature you want is requested here in the Flot Google group. It doesn't look like it was ever implemented (there's nothing in the API about putting any labels inside the chart itself). I think that the answer to your question is that No, it's not possible at this time to show values next to certain points on lines inside the graph.
Ole Larson, head developer on Flot, mentioned that showing labels inside the chart is different than anything else on FLot and that they would have to think about how to extend the API / plot parameters to do it.
That said, you might want to go post a question on the Flot forum or make a suggestion on the bug-tracker for the new feature. Ole Larson is actually really good at getting back to all the questions, bugs, and suggestions himself.
If anyone else is looking for a quick solution, see this plugin:
http://sites.google.com/site/petrsstuff/projects/flotvallab
Looks like the flot-valuelabels plugin is a fork of a previous flot plugin -- but the forked code renders the labels on the canvas. You can see a demo of what this looks like on the plugin's Github wiki page, here (it looks quite pleasing to the eye).
function redrawplot() {
$('.tt1').remove();
var points = plot.getData();
var graphx = $('#placeholder').offset().left;
graphx = graphx + 30; // replace with offset of canvas on graph
var graphy = $('#placeholder').offset().top;
graphy = graphy + 10; // how low you want the label to hang underneath the point
for(var k = 0; k < points.length; k++){
for(var m = 1; m < points[k].data.length-1; m++){
if(points[k].data[m][0] != null && points[k].data[m][1] != null){
if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) {
showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color);
}
if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) {
showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color);
}
}
}
}
}
function showTooltip1(x,y,contents, colour){
$('<div class=tt1 id="value">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y,
left: x,
'border-style': 'solid',
'border-width': '2px',
'border-color': colour,
'border-radius': '5px',
'background-color': '#ffffff',
color: '#262626',
padding: '0px',
opacity: '1'
}).appendTo("body").fadeIn(200);
}