Is it possible in SCSS to loop through of series of say three divs like:
<div class="video_holder">
<div class="video_title"></div>
</div>
<div class="video_holder">
<div class="video_title"></div>
</div>
<div class="video_holder">
<div class="video_title"></div>
</div>
And for each video_title add a property that does something like:
.video_title:after{ content: "number" }
So for each div, we'd start at 1.1 and go through to 1.x (whatever is needed)
I can't quite seem to get anything working based on other loops I've found
This can be done with css only, you don't need sass loop. You have to use css counter-increment.
First wrap all of your divs in another div:
<div class="video_counter_reset">
<div class="video_holder">
<div class="video_title"></div>
</div>
<div class="video_holder">
<div class="video_title"></div>
</div>
<div class="video_holder">
<div class="video_title"></div>
</div>
</div>
and use this css:
.video_counter_reset {
counter-reset: item;
}
.video_holder:after {
counter-increment: item;
content: "1." counter(item);
}
Read this Smashing post for more details.
But there is a sass mixin you could use.
Related
I would like if it's possible to select a div that is the child of two previous div. Based on my code the targeted div is "Middle" but it is inside :
class="start-page epages no-sidebars"
AND
class="Layout1 GeneralLayout Div"
I tried ".start-page .Middle " but it doesn't work
<body class="start-page epages no-sidebars" itemtype="http://schema.org/CollectionPage">
<div class="Layout1 GeneralLayout Div">
<div class="Header HorizontalNavBar HeaderSticky">
</div>
<div class="NavBarTop HorizontalNavBar" style="background-position-y: 90px;">
</div>
<div class="Middle">
</div>
</div>
</body>
i dont know much about website design but here is what i have. I am creating a blog page and i have created an array with the title and summary. I want to add an image to that then create a card layout for it. I cannot seem to find code where i can also add an image. here is what i have done so far,
<div class="card">
<div class="imgheader"></div>
<div class="container">
<div id="title">[[item.title]]</div>
<div id="summary">[[item.summary]]</div>
<div id="image" img src="[[item.image]]"></div>
</div>
</div>
</template>
<app-footer></app-footer>
</template>
<script>
class BlogPage extends Polymer.Element {
static get is() { return 'blog-page'; }
static get properties() {
return {
_blogPosts: {
type: Array,
value: function () {
return [
{title: 'Mt. Mckinley', summary: ' A journey to the top of Denali. ', image:'web/images/Mckinley.jpg', },
{title: 'Fishing', summary: 'Catching your largest trout', },
{title: 'Camping', summary: 'Camping with the family', },
i have tried iron image and img src inside the image tag for the first array please let me know of a better way to do this, i dont have much knowledge of polymer i just finished a course on html and css, and i barely know java. any help would be appreciated.
If you are trying to show in loop of <dom-repeat> below code
<template is="dom-repeat" items="{{_blogPosts}}">
<div class="card">
<div class="imgheader"></div>
<div class="container">
<div id="title">[[item.title]]</div>
<div id="summary">[[item.summary]]</div>
<div id="image" img src="[[item.image]]"></div>
</div>
</div>
</template>
try to change as :
<template is="dom-repeat" itmes="{{_blogPosts}}">
<div class="card">
<div class="imgheader"></div>
<div class="container">
<div id="title">[[item.title]]</div>
<div id="summary">[[item.summary]]</div>
<div id="image">
<img src="[[item.image]]">
</div>
</div>
</div>
</template>
Also check _blogPosts array has an image value or empty.
How to place another div below the <div main-title>My App</div> such that the content in second div should come below the content in first div.
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
Try wrapping in another div that has display block.
Like this:
<div style="display:block;">
<div main-title>My App</div>
<div other-div>Something</div>
</div>
I'm trying to display a Banner <div> after 2 rows of 4 x "col-md-3", followed by another 2 Rows - so the resulting markup would look like:
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
<div class="col-md-3">5</div>
<div class="col-md-3">6</div>
<div class="col-md-3">7</div>
<div class="col-md-3">8</div>
<div class="col-md-12" id="Banner">Banner</div>
<div class="col-md-3">9</div>
<div class="col-md-3">10</div>
<div class="col-md-3">11</div>
<div class="col-md-3">12</div>
<div class="col-md-3">13</div>
<div class="col-md-3">14</div>
<div class="col-md-3">15</div>
<div class="col-md-3">16</div>
Trying to simulate this using AngularJS so would have to use ng-repeat - but cannot seem to get this working. Any help appreciated: My Plunker
<div ng-repeat="n in Numbers">
<div class="col-md-3">{{n}}</div>
</div>
There are just a couple of problems with your plunker. First maincontroller.js is missing the .js extension, so it is never loaded.
Next all of the references to load angular should start with https instead of just http.
To display the banner after a certain number of rows place it within the first div and use something like:
<div class="col-md-12" id="Banner" ng-if="$index==5">Banner</div>
Not sure if 5 is the number you want there or if you want to use some kind of expression to see if ng-if is divisible by a certain value, but using $index and ng-if should get you there.
You could use ng-repeat-start and ng-include with a ng-if to conditionally include the banner if it's at the correct index with n===8.
Please have a look at the code below or in this plunkr.
angular.module("app", [])
.controller("MainController", mainController);
function mainController($scope) {
$scope.Numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-controller="MainController" ng-app="app">
<h1>Demo</h1>
<div class="col-md-3" ng-repeat-start="n in Numbers">{{n}}</div>
<div ng-include="'banner.html'" ng-if="(n === 8)" ng-repeat-end></div>
<script type="text/ng-template" id="banner.html">
<div class="col-md-12" id="Banner">Banner</div>
</script>
</div>
I have a problem. I have Index page where i load different pages in <div ng-view></div>.I have sidebar, so while im waiting that ng-view load page sidebar goes on left side and i dont want that.
In index i have <div ng-view></div> and right side menu:
<div class="col-lg-3 col-md-3">
<div class="right-sidebar">
#foreach (var item in Model.SideAccountBanners)
{
<div class="promo">
<a href="#item.LinkTo">
<div class="image">
<img class="resize" src="#item.BannerPath" alt="" />
<h1 class="title">#MvcHtmlString.Create(Html.Encode(item.Title).Replace("-", "<br />"))</h1>
<p class="description">#MvcHtmlString.Create(Html.Encode(item.Description).Replace("-", "<br />"))</p>
</div>
</a>
</div>
How can i set default size for that <div ng-view></div> or set something like document ready? idk
You should be able to do this with css:
[ng-view] {
min-height: 100%;
}
Something like the above.
EDIT: If you have multiple ng-views you will want to change the css.