I want to make something like that:
#if ( some-statement )
{
<div class="row-link">
}
else
{
<div class="row">
}
<div class="new">some content</div>
</div>
but the compiler keeps telling me that the if has no closing character!
What's wrong?
Thanks!
I'm not fluent in c# but why don't you use a variable to hold the classname?
#string classname;
#if ( some-statement ) {
classname = "row-link";
} else {
classname = "row";
}
<div class="#classname">
<div class="new">some content</div>
</div>
Or you could use a helper function. It keeps your html cleaner.
Use <text>
#if ( some-statement)
{
<text>
<div class="row-link">
</text>
}
else
{
<text>
<div class="row">
</text>
}
<div class="new">some content</div>
</div>
and check out
http://weblogs.asp.net/scottgu/archive/2010/12/15/asp-net-mvc-3-razor-s-and-lt-text-gt-syntax.aspx
hope this helps
try
#if ( some-statement )
{
#:<div class="row-link">
}
else
{
#:<div class="row">
}
<div class="new">some content</div>
</div>
You may consider closing your <div> and remove your common end </div>
#if ( some-statement )
{
<div class="row-link"></div>
}
else
{
<div class="row"></div>
}
<div class="new">some content</div>
Related
Lots of examples can be found to hide a parent div when ONE inner div is empty, but in my case I need to hide the parent div if TWO inner divs are empty:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Background: I am using Angular with ng-content select to fill the child divs with content. Sometimes none of these templates are used thus both child divs will be empty.
<div class="parent">
<div class="child1"><ng-content select="[child1]"></ng-content></div>
<div class="child2"><ng-content select="[child2]"></ng-content></div>
</div>
Sorry I run out of time, but would be a shame to not share what I was trying to make. Maybe not perfect because of the time but hopefully you get the idea. PS using jQuery.
$(".parent").each(function() {
var empty1 = 0;
var empty2 = 0;
var who = $(this);
$(this).find(".check").each(function() {
var check = $(this).html();
if(check == '<ng-content select="[child1]"></ng-content>') {
var empty1 = 1;
}
if(check == '<ng-content select="[child2]"></ng-content>') {
var empty2 = 1;
}
if(empty1 == 1 && empty2 == 1) {
$(who).slideUp(100);
}
});
});
.parent {
height:10vh;
background:#F00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="check child1"><ng-content select="[child1]"></ng-content></div>
<div class="check child2"><ng-content select="[child2]"></ng-content></div>
</div>
<div class="parent">
<div class="check child1"><ng-content select="[child1]">a</ng-content></div>
<div class="check child2"><ng-content select="[child2]"></ng-content></div>
</div>
I solved it using Angular ViewChild:
<div class="column column-3" [class.hidden]="!hasContentInColumn3">
<div class="line-1" #c3a>
<ng-content select="[c3a]"></ng-content>
</div>
<div class="line-2" #c3b>
<ng-content select="[c3b]"></ng-content>
</div>
</div>
export class ListItemComponent implements OnInit {
public hasContentInColumn3 = false;
#ViewChild('c3a', { static: true }) c3a: ElementRef;
#ViewChild('c3b', { static: true }) c3b: ElementRef;
ngOnInit () {
// Hide div.column-3 when line-1 and line-2 are not provided
this.hasContentInColumn3 = (
(this.c3a.nativeElement.childNodes.length > 0) ||
(this.c3b.nativeElement.childNodes.length > 0)
);
}
}
I hope this helps someone.
I have tried :nth-of-type and :nth-child, but those don't work for selecting a specific instance on the entire page. For example, if I wanted to select the 8th div.box element below ("plane") how can I do this?
<div>
<div class="box">blueberry</div>
<div class="box">cherry</div>
<div class="box">pineapple</div>
<div class="box">orange</div>
<div class="box">grape</div>
</div>
<div>
<div class="box">car</div>
<div class="box">boat</div>
<div class="box">plane</div>
<div class="box">bike</div>
<div class="box">motorcycle</div>
</div>
You can do this with javascript. I don't think you can do such a specific task with CSS, but I'm not sure.
let base = document.getElementsByTagName("div");
let divs = [];
for (let i = 0; i < base.length; i++) {
let elems = base[i].getElementsByTagName("div");
for (let j = 0; j < elems.length; j++) {
divs.push(elems[j])
}
}
function findNElement(n) {
return divs[n-1].textContent; // This is to return text. Remove .textContent to remove th element
}
console.log(findNElement(8));
<div>
<div class="box">blueberry</div>
<div class="box">cherry</div>
<div class="box">pineapple</div>
<div class="box">orange</div>
<div class="box">grape</div>
</div>
<div>
<div class="box">car</div>
<div class="box">boat</div>
<div class="box">plane</div>
<div class="box">bike</div>
<div class="box">motorcycle</div>
</div>
You can use this snippet to select a certain element of the textContent of the element.
For the completely general case, where you do not know the document's structure (i.e. div.box elements are 'scattered' as you say) I think you'll need Javascript.
The element you want is
document.querySelectorAll('div.box')[7]
of course you'll want to check that it actually exists before trying to do anything with it so something like:
function findBox(n) { //n starts at 1
const boxes = document.querySelectorAll('div.box');
if (boxes.length >= n) return boxes[n-1];
else return false;
}
let n = 8;
let box = findBox(n);
if (box) {
box.style.backgroundColor = 'silver';
}
else {
console.log('There is no ' + n + 'div.box');
}
<div>
<div class="box">blueberry</div>
<div class="box">cherry</div>
<div class="box">pineapple</div>
<div class="box">orange</div>
<div class="box">grape</div>
</div>
<div>
<div class="box">car</div>
<div class="box">boat</div>
<div class="box">plane</div>
<div class="box">bike</div>
<div class="box">motorcycle</div>
</div>
Im attempting to implement the following Flexbox table from Vasan Subramanian with vue.
That table is built manually, but That doesnt give much help when trying to make a component of it.
So Im willing to make it dinamically. and my first obstacle is to group each pair of two rows inside one div. Like the following
<div class="Table">
<div class="Table-row Table-header">
<div class="Table-row-item" v-for="key in cols" v-bind:style="{'flex-basis':basis, 'flex-grow':key.grow}">
<a #click="sortBy(key)">{{key.title}} <i v-if="key.sortField==sort" class="{{reverse==1?'fa fa-sort-desc':'fa fa-sort-asc'}}" aria-hidden="true"></i></a>
</div>
</div>
The previous code gives the normal table header
<div class="Table-row-item">
firstname
</div>
<div class="Table-row-item">
lastname
</div>
<div class="Table-row-item">
email
</div>
<div class="Table-row-item">
company
</div>
Im trying to achieve the following:
<div class=divider>
<div class="Table-row-item">
firstname
</div>
<div class="Table-row-item">
lastname
</div>
</div>
<div class=divider>
<div class="Table-row-item">
email
</div>
<div class="Table-row-item">
company
</div>
</div>
My Issue is I dont know how to represent that in code.
Any help would be very appreciated. I couldnt find any good examples about responsive tables with Flexbox. just the previous and this other from Jonathan Lehman An excellent Lecture using Sass.
You want to group your columns, and then loop over the columns within each group. Use a computed to do the grouping. Your grow specification doesn't quite fit this model; it seems like you want to have one grow spec per group, but I don't know exactly what the goal is there.
This code makes column groups of whatever size you choose and puts them in your dividers.
new Vue({
el: '.Table',
data: {
columns: ['firstname', 'lastname', 'email', 'company'].map((n) => ({
title: n,
sortField: n
})),
perDivider: 2,
basis: '50%',
grow: 1,
sort: null
},
computed: {
colGroups: function() {
return this.by(this.perDivider, this.columns);
}
},
methods: {
by: function(n, arr) {
const result = [];
for (var i = 0; i < arr.length; i += n) {
result.push(arr.slice(i, i + n));
}
return result;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<div class="Table">
Table here
<div class="Table-row Table-header">
<div class="Table-row-item" v-for="colGroup in colGroups" v-bind:style="{'flex-basis':basis, 'flex-grow':grow}">
<a v-for="key in colGroup" #click="sortBy(key)">
{{key.title}} <i v-if="key.sortField==sort" class="{{reverse==1?'fa fa-sort-desc':'fa fa-sort-asc'}}" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
I Started with a computed property
odd(){
var numberOdds = 0;
var arr = [];
for (var i = 0; i < this.cols.length; i++) {
if (i % 2 == 0) {
numberOdds++;
}
}
var j=0;
for (i=0;i<numberOdds;i++){
this.arr[i]=j;
j+=2;
}
return numberOdds;
}
so..
<div class="Table">
<div class="Table-row Table-header">
<div class="divider" v-for="number in odd">
{{cols[arr[number]].title}}
{{cols[arr[number]+1].title}}
</div>
</div>
<div class="Table-row" v-for="item in items.data" >
<div class="divider" v-for="number in odd">
<div class="Table-row-item">
{{item[cols[arr[number]].name]}}
</div>
<div class="Table-row-item">
{{item[cols[arr[number]+1].name]}}
</div>
</div>
</div>
</div>
This works. testing purposes
I'm trying to edit the border-bottom-color individual depending on a property of the element in ng-repeat.
Here is an example how the html is structured. The changed style is
.active-tool::after {border-bottom-color: rgb(247, 153, 248)}
html:
<div data-ng-repeat="row in rows">
<div class='container'>
<div
data-ng-style="getPrimaryColor(tvShow)"
class='folder tvshow'
data-ng-class="isActiveFolder(tvShow)"
id='{{tvShow.id}}'
data-ng-repeat="tvShow in row track by $index">
<div data-ng-click="setSelectedTvShow(tvShow)">
<p class="tvshow-name">{{tvShow.name}}</p>
</div>
</div>
</div>
controller.js
$scope.isActiveFolder = function(tvShow) {
if($scope.selectedTvShow !== null && tvShow.id !== null) {
return $scope.selectedTvShow===tvShow.id ? 'active-tool' : '';
}
};
$scope.getPrimaryColor = function(tvShow) {
if($scope.selectedTvShow !== null) {
var result = '{' + tvShow.id + '.active-tool::after {border-bottom-color: rgb(247, 153, 248)}}';
console.log(result);
return result;
};
Any ideas how this could be done?
I use this quick hack:
put this inside your template:
<style type="text/css">
.active-tool::after {
border-bottom-color: {{getShowBorderColor(tvShow)}};
}
</style>
and then in your controller:
$scope.getShowBorderColor = function(tvShow){
return tvShow.color; // change this for how you want to calculate the color
};
You cannot use ng-style like this, because html style attribute does not support css selectors.
Actually, you can do it with no javascript at all:
markup:
<div data-ng-repeat="row in rows">
<div class='container'>
<div class='folder tvshow'
data-ng-class="{active-tool : selectedTvShow === tvShow.id}"
id='{{tvShow.id}}'
data-ng-repeat="tvShow in row track by $index">
<div data-ng-click="selectedTvShow = tvShow.id">
<p class="tvshow-name">{{tvShow.name}}</p>
</div>
</div>
</div>
</div>
css:
.active-tool::after {
border-bottom-color: rgb(247, 153, 248);
}
So I am attempting to create a menu element that shows and hides specific divs on a page, while also changing the text of the menu. After a little searching I have it worked out for the most part (although I know the code is a bit kludgey):
$(document).ready(function(){
$('.section[id="option1"]').click(function(){
$(this).text($(this).text() == 'OPTION1' ? 'OPTION1 >>' : 'OPTION1');
$('.blurb').not('.blurb[id="option1"]').hide();
$('.blurb[id="option1"]').slideToggle();
});
$('.section[id="option2"]').click(function(){
$(this).text($(this).text() == 'OPTION2' ? 'OPTION2 >>' : 'OPTION2');
$('.blurb').not('.blurb[id="option2"]').hide();
$('.blurb[id="option2"]').slideToggle();
});
$('.section[id="option3"]').click(function(){
$(this).text($(this).text() == 'OPTION3' ? 'OPTION3 >>' : 'OPTION3');
$('.blurb').not('.blurb[id="option3"]').hide();
$('.blurb[id="option3"]').slideToggle();
});
$('.section[id="option4"]').click(function(){
$(this).text($(this).text() == 'OPTION4' ? 'OPTION4 >>' : 'OPTION4');
$('.blurb').not('.blurb[id="option4"]').hide();
$('.blurb[id="option4"]').slideToggle();
});
$('.section[id="option5"]').click(function(){
$(this).text($(this).text() == 'OPTION5' ? 'OPTION5 >>' : 'OPTION5');
$('.blurb').not('.blurb[id="option5"]').hide();
$('.blurb[id="option5"]').slideToggle();
});
$('.section[id="option6"]').click(function(){
$(this).text($(this).text() == 'OPTION6' ? 'OPTION6 >>' : 'OPTION6');
$('.blurb').not('.blurb[id="option6"]').hide();
$('.blurb[id="option6"]').slideToggle();
});
});
(full code in action can be viewed here)
This code works for the most part, except that if you already have a certain element (class="blurb") shown, when you click on the menu item (class="section") for another element, the menu indicates that the other element is still open. It seems like there must be a simple way to append or remove the desired text on click, but I can't seem to find a good way of doing it. Would it be worth rewriting the code using something like expander.js?
Here is the effected html
<div class="nav">
<div class="section" id="option1">option1</div>
<div class="section" id="option2">option2</div>
<div class="section" id="option3">option3</div>
<div class="section" id="option4">option4</div>
<div class="section" id="option5">option5</div>
<div class="section" id="option6">option6</div>
</div>
<div class="blurb hidden" id="option1">
<h1>content for option1</h1>
</div>
<div class="blurb hidden" id="option2">
<h1>content for option2</h1>
</div>
<div class="blurb hidden" id="option3">
<h1>content for option3</h1>
</div>
<div class="blurb hidden" id="option4">
<h1>content for option4</h1>
</div>
<div class="blurb hidden" id="option5">
<h1>content for option5</h1>
</div>
<div class="blurb hidden" id="option6">
<h1>content for option6</h1>
</div>
I'm still fairly new to jQuery, so any advice/pointers is greatly appreciated.
I solved your problem using a custom class and :after CSS styles: http://jsfiddle.net/mblase75/sDrZ2/3/
First, some CSS to append the arrows and convert to uppercase without modifying the text directly:
.uppercase {
text-transform: uppercase;
}
.uppercase.arrowed:after {
content: " >>";
}
Add in some changes to your HTML to utilize data- attributes, remove duplicate IDs and add an arrowed class which the JS toggles:
<div class="nav">
<div class="section arrowed" data-blurb="option1">option1</div>
<div class="section arrowed" data-blurb="option2">option2</div>
<div class="section arrowed" data-blurb="option3">option3</div>
<div class="section arrowed" data-blurb="option4">option4</div>
<div class="section arrowed" data-blurb="option5">option5</div>
<div class="section arrowed" data-blurb="option6">option6</div>
</div>
And finally, a rewrite to optimize your JavaScript a lot:
$('.section').click(function () {
$(this).addClass('uppercase').toggleClass('arrowed')
.siblings('.section').removeClass('arrowed');
$('#'+$(this).data('blurb')).slideToggle()
.siblings('.blurb').hide();
});
Note that the arrowed class is toggled, so it needs to be added initially so that it's toggled off on the first click.