I've been playing around with knockoutjs recently to see if it's going to be of any help to the things I do. I'm a bit stuck on something though.
Say I have an observableArray and and I want to bind the items using a template but without a container, or render itself. Is it possible?
The sample markup is:
<div class="header row">
<div class="cell">Product Name</div>
<div class="cell" data-bind="foreach: option_types">
<div class="cell" data-bind="html: Name"></div>
</div>
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
However what I would really want is something like this (note no child .cell elements, and "renderSelf" - made up parameter)
<div class="header row">
<div class="cell">Product Name</div>
<div class="cell" data-bind="foreach: option_types, renderSelf: true">
${Name}
</div>
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
Which would then result in something like
<div class="header row">
<div class="cell">Product Name</div>
<div class="cell">Name 1</div>
<div class="cell">Name 2</div>
<div class="cell">Name 3</div>
<div class="cell">Name 4</div>
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
Is that going to be possible? Or am I thinking of it in the wrong way?
Thanks.
Version 1.3 which is "stable beta" allows you to declare what's called a Containerless Control Flow. This is a fancy way of saying you can declare the foreach within an HMTL comment which will allow you to achieve the desired output. For your example it would look like this:
<div class="header row">
<div class="cell">Product Name</div>
<!-- ko foreach: option-types -->
<div class="cell" data-bind="html: Name"></div>
<!-- /ko -->
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
See this article on Steve Sanderson's blog for more info.
I've been using 1.3.0 on a relatively large application recently and found it to be very stable.
As an aside the ability in 1.3.0 to also access the parent and root viewModel within a foreach template is incredibly useful and helps keep your viewModel design much cleaner.
Related
Is there any way I can remove the element in JS and to move inside another class. I have tried multiple ways but its throwing an error.
<div class="posts container">
<div class="row">
<div class="posts-item col-md-7 col-xs-12 p-0">
Abc
</div>
<ul>
</ul>
</div>
</div>
<div class="blog">
XYZ
</div>
I am trying to get output like using Javascript
<div class="posts container">
<div class="row">
<div class="posts-item col-md-7 col-xs-12 p-0">
Abc
</div>
<div class="blog">
XYZ
</div>
<ul>
</ul>
</div>
</div>
Iam trying to move the class name "blog" inside "posts-item".
Use insertBefore for moved your item:
const referenceNode = document.querySelector('.posts-item')
referenceNode.parentNode.insertBefore(document.querySelector('.blog'), referenceNode.nextSibling);
Try something like this, which works in Chrome for me, for the result you describe in the text:
document.querySelector('.posts-item').append(document.querySelector('.blog'))
...or to get the result you've illustrated, perhaps this:
document.querySelector('.posts-item').after(document.querySelector('.blog'))
You may need to modify the selectors if there are more elements sharing the classes used.
See docs at https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after and https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
Good evening,
I have a question regarding the Bootstrap 4.1 Grid. I built a normal website with multiple "containers" and "columns".
<div class"container">
<div class"row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
<div class"container">
<div class"row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
On normal displays, this works perfectly fine as both containers are showed underneath each other.
But on very large screens the containers are besides each other.
How can I adjust my code, so that independently of the screen size, the containers are always showed below each other.
Thank you in advance!
I can't really reproduce your issue but you might be missing an equal sign in your classes.
class="container"
class="row"
You are missing equals
<div class="container">
<div class="row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
CONTENT
</div>
</div>
</div>
I have been trying to implement a solution for this for a while and I have not come to a clean one yet.
Please, help me.
I have 2 routes:
/login
/register
They have very similar templates:
login.html
<div class="main-container">
<section class="fullwidth-split">
<div class="container-fluid">
<div class="row">
<div class="col-12">
[...more similar html to both views...]
<h2>Login</h2>
</div>
<!--end of col-->
<div class="col-12">
Login form HTML
</div>
</div>
</div>
</section>
</div>
register.html
<div class="main-container">
<section class="fullwidth-split">
<div class="container-fluid">
<div class="row">
<div class="col-12">
[...more similar html to both views...]
<h2>Registration</h2>
</div>
<!--end of col-->
<div class="col-12">
Registration form HTML
</div>
</div>
</div>
</section>
</div>
As you can see, most of the HTML is the same, including the section and container div. I would like to reuse this template and I have tried using child routes and using on the dynamic HTML part, but as you can see the h2 changes its content as well, so unless I duplicate this template it's not possible. The best I've got is using the router-outlet, but then I have a STATIC title h2 and can't change it on the child component because it's on the parent component template.
Any suggestions?
Here is one possible solution.
Create a component (my-component) that uses the shared html and add content projection to it. The html should look something like this:
<div class="main-container">
<ng-content></ng-content>
</div>
You project the different content like this:
register.html:
<my-component>
<h2> Registration </h2>
</my-component>
login.html:
<my-component>
<h2> Login </h2>
</my-component>
You could also have multiple content projections.
This is done by adding a select attribute to the ng-content in my-component:
<div class="main-container">
<ng-content select=".heading-content"></ng-content>
<ng-content select=".form-content"></ng-content>
</div>
And use like this:
<my-component>
<h2 class="heading-content"> Login </h2>
<div class="form-content">
.....
</div>
</my-component>
I'm trying to make custom gallery grid using bootstrap. All goes well but im stuck on last step.
I'm posting HTML structure since i belive it's problem in here somewhere but my code cotains some css (paddings/margins mostly) and JS (explained why below).
HTML:
<div class="about_gallery">
<div class="col-xs-9 pd-9">
<div class="row">
<div class="col-xs-8 pd-8">
<div class="color1"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
<div class="col-xs-4 pd-4">
<div class="color2"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
<div class="row">
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color11"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-8 pd-8">
<div class="color4"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
<div class="row">
<div class="col-xs-6 cl-5">
<div class="color5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color12"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
<div class="col-xs-6 cl-6">
<div class="color6"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3 pd-3">
<div class="color8 "><img class="pion-rect" src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color9"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
</div>
</div>
Here is fiddle: http://jsfiddle.net/y6co8e5u/
The goal is to have grid like here: Grid example
As you can see on bottom left corner instead of 1 horizontal rectangle i have two squares and i don't know how to "connect" them since it's in different columns. It's my first time with bootstrap so it's probably a little bit messy. (I'm also not sure if my JS is needed here but when i added spaces between pictures i needed to extend the pictures) I'm open for any other solution too.
Thanks for help!
I will assume you are trying to add the .color7 div, append it to <div class="col-xs-4 pd-4">, just after the .color3 block. The block will look like this:
<div class="col-xs-4 pd-4">
<div class="color3"><img src="https://s-media-cache-ak0.pinimg.com/originals/7c/7e/41/7c7e41ad177113fecc68a0213cf724c2.jpg"/></div>
<div class="color7"><img src="http://1.bp.blogspot.com/-lTAkZcm_aO0/VoR2I2nDq8I/AAAAAAAAGIg/G0vVuMw1nrI/s1600/NEW-YEARS-RESOLUTIONS-calendar.jpg"/></div>
</div>
then on the css, set .color7 {width: calc(200% + 10px);}
here is the updated fiddle: http://jsfiddle.net/y6co8e5u/3/
no change to the js code.
You need to restructure your HTML a bit, have to put
<div class="color10"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTj4NOe5Usd1_GJv4waOL5JbnJFVEGeduUHlB3Ej-TIpUhqVEouLw"/></div>
inside the <div class="col-xs-4 pd-4">
of second row. Hope this is what you want.
Check updated jsfiddler: http://jsfiddle.net/mayankN/y6co8e5u/1/
I have website that where the php code generates all the products on the same page.
So far i get something like this.
http://ratecleveland.com/irregular_height_columns.jpg
however i am trying to get something like this.
http://ratecleveland.com/new.jpg
any idea if this can be done in css. or if no, is there a javascript examle.
thank you for the help
jQuery Masonry: http://masonry.desandro.com/
Here's a fiddle, use display:inline-block; with the ?display hack
http://jsfiddle.net/qW3TV/
No javascript is necessary.
Looks like all of the divs are the same width. Why not just create containing column divs around the ones you want to stack?
<div class="col1">
<div class="a"></div>
<div class="e"></div>
<div class="i"></div>
</div>
<div class="col2">
<div class="b"></div>
<div class="f"></div>
<div class="k"></div>
</div>
<div class="col3">
<div class="c"></div>
<div class="g"></div>
<div class="l"></div>
</div>
<div class="col4">
<div class="d"></div>
<div class="h"></div>
<div class="m"></div>
</div>
Float each column left and your interior div's, which appear to already have specified width and height, will fall into place. You can even give the columns the same class, since they will just be floated left containers.