This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 6 years ago.
I've been sending this emails:
I'm about to release an application for web application security which requires the use of a grid like Masonry. I've tried all, and every single angular module, directives, and different approaches, including CSS based techniques, pure Vanilla JS, and your solution is, one of the best options available online. I found, however a main issue, that affects not only your approach, but every single Angular module or addon.
Issue #1:
Your solution, as any other solution, is based on an array of information that is already handled by angular. In your example case, it would be source="photos". Now, the problem comes when there's 2 different groups of elements. Let's assume, that I have a group of elements that where previously defined in the DOM. In other words:
<div angular-grid>
<p class="angular-grid-elem">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="angular-grid-elem" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="angular-grid-elem" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
Now, as you can see in the example, the content inside the main div, , should be all, affected by the masonry layout. Of course, this is pseudo code and I'm aware that the sintaxis of your approach is different. However what I'm trying to represent here, is that your module, would be way better, if you would be able to apply the masonry like grid, including elements which are already present in the DOM/HTML in first place, with elements that are coming from an array.
Issue #2:
There's a second issue I found in multiple angular modules and approaches. What happens if I have 2, 3 or let's say even 16 divs which all of them, present the same masonry like behaviour? I have to admit, I didn't try it with your module, as I couldn't solve the initial problem, that requires the proper handling of the combination of elements that are (1) pre-defined in the HTML, and (2) coming from and ng-repeat function.
A possible approach:
In order to solve the second problem and the first one, at the same time, I have thought that the best approach might be to make use of element classes and elements ids to handle the situation? Why? Because it can easily applied into elements that are already there in the DOM in first place, as well, to elements that are joining or leaving dynamically by the use of a ng-repeat or any other of the angular functions.
Here's an example of what I'm saying:
<div class="angular-grid-dad-one" ng-grid="{'dad': 'angular-grid-dad-one', 'childs': 'angular-grid-elem'}" >
<p class="angular-grid-elem">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="angular-grid-elem" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="angular-grid-elem" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
In this case, the main div defines itself as id="angular-grid-dad-one",
And also tells the Angular module, that the element angular-grid-dad-one is a container div of a masonry like structure,
And that it's childs are marked as angular-grid-elem.
As we could see on this line.
ng-grid="{'dad': 'angular-grid-dad-one', 'childs': 'angular-grid-elem'}"
This way, it allow us to make use of the Angular module in multiple instances. For example.
<div class="seccion_01" ng-grid="{'dad': 'seccion_01', 'childs': 'seccion_01_child'}" ng-show="seccion == '1'">
<p class="seccion_01_child">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="seccion_01_child" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="seccion_01_child" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
<div class="another_container" ng-grid="{'dad': 'another_container', 'childs': 'child_of_container'}" ng-show="seccion == '2'">
<p class="child_of_container">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="child_of_container" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="child_of_container" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
<div class="redundant_example" ng-grid="{'dad': 'redundant_example', 'childs': 'childs_of_redundancy'}" ng-show="seccion == '3'">
<p class="childs_of_redundancy">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="childs_of_redundancy" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="childs_of_redundancy" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
I have used a Json styled instruction in the ng-grid value in order to explain my point, but it doesn't really have to be Json. It even could be 2 different paramenters:
<div class="dad" ng-grid-dad="dad" ng-grid-childs="childs" ng-show="seccion == '3'">
<p class="childs">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="childs" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="childs" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
As well, regarding the infinite scroll that you have created, you would be able to load more elements, triggering the infinite scroll, and loading only elements from one specific array, of course.
Please let me know if I can help further, I would like to integrate your module into my application.
And let's hope that by the next implementation of HTML and CSS we have this situation fully under control by the next generation of browsers, I'm aware of the work it takes to make this grids in Javascript.
Actually, I am gonna go out on a limb and say that flex-wrap: wrap will fix the issue.
.holder {
flex-wrap: wrap
-moz-columns: 2 auto;
box-sizing: border-box;
display: flex;
padding: 0 40px;
width: 100%;
}
Related
UPDATE: Messed up with my CSS, as nothing to do with dynamic content.!
The answer is very informative though!
I'm creating tags and inserting content with handlebars:
Handlebars code:
{{#each docs}}
<article class="first">
<p class="date">
{{#date}} {{date}}
</p>
<h4 class="header">{{#venue.title}} {{venue.title}}
- {{#venue.city}} {{venue.city}}</h4>
<p class="details">
{{#description}} {{description}}
</p>
</article>
{{/each}}
If I just list articles, the CSS works - but when I let handlebars dynamically create them, it won't apply.
CSS code:
div.gig-items{
article: nth-of-type(n +2);
height: 0;
padding: 0;
}
Is there a way to first create the content and then apply CSS or some more elegant solution?
The CSS is applied automatically at each repaint. So inserting your code in the source html or dynamically with js doesn't matter, the css will be applied correctly.
The problem come for sure from your code which has several errors...
First the CSS
You want to style every div elements with class gig-items, but
there is no div and no class gig-items in your template...
You define a property article with value nth-of-type(n+2), but this is not a property, this is a selector
you should use it like :
article:nth-of-type(n+2) {
color: blue;
}
Then in your handlebar template :
I assume you want to insert values by their names, but you use the
prefix # which is reserved for handlebar's loop values like
#index or #keys
Another error is that you write double handlebar
block to display the value. One is enough.
The correct way to insert value is :
<p class="date">{{date}}</p>
Learning HTML/Angular.
I have a bunch of HTML code that I want to be re-usable. Basically I write it once and modify the same code base, then just insert the dynamic data using Angular.
My question is - How do I create re-usable HTML code that can be injected into a page using Angular?
For instance, lets say I am an app developer and want to showcase 25 apps on the same page each with their own HTML component (not just a bunch of images). Rather than copying the HTML 25 times I would just like to inject that HTML snippet via some angular command, then insert the text into the corresponding divs etc. I need to stick with Angular/HTML (no other frameworks)
Or is there a better way?
(look at the image for reference - imagine inserting that layout 25 times without duplicating code)
I have tried this using ng-repeat but when I do so it throws the repeating items in the same spot on top of each other. I was hoping that for every div that is repeated it would put it underneath the other div.
<div id="apps" ng-controller="MyApps">
<div id="appsection" ng-repeat="app in applist">
<img class="rightappimg" src={{app.img}} />
<strong class="appbannertext">{{app.firstLine}}</strong>
<strong class="appbannertextsubtitle">{{app.secondLine}}</strong>
<strong class="appbannertextsubtitlesmall"><span class="ios">iOS, iPhone, iPad</span> & <span class="android"> Android</span></strong>
<strong class="appbannerdescriptiontitle">{{app.fourthLine}}</strong>
<p class="appbannerdescription">{{app.fifthLine}}</p>
</div>
</div>
Ok the answer was to us ng-repeat as such:
<div id="apps" ng-controller="MyApps">
<div id="appsection" ng-repeat="app in applist">
<img class="rightappimg" src={{app.img}} />
<strong class="appbannertext">{{app.firstLine}}</strong>
<strong class="appbannertextsubtitle">{{app.secondLine}}</strong>
<strong class="appbannertextsubtitlesmall"><span class="ios">iOS, iPhone, iPad</span> & <span class="android"> Android</span></strong>
<strong class="appbannerdescriptiontitle">{{app.fourthLine}}</strong>
<p class="appbannerdescription">{{app.fifthLine}}</p>
</div>
And then simply to specify a min-height in the div id in the CSS file so the items wouldn't overlap each other.
I am sorry that I am so bad at explanation.
I am using responsive grid from http://www.responsivegridsystem.com/ and using 3 column style.
What I want to achieve is pretty much shown in the image. The order by which DIV elements are generated is labeled. The problem here is that after 1 , 2 , 3 are generated 4 should go to the place arrows point. I dont mind even 6 going there, but the place should be filled.
Div elements are generated using Database
<div class="section group">
<div class='col span_2_of_6 classifyGroup' style="height:50px;">
<h3 class='classifyHeading'>BEVERAGES</h3>
</div>
<div class='col span_2_of_6 classifyGroup' style="height:75px;">
<h3 class='classifyHeading'>salads</h3>
</div>
<div class="section group">
I have uploaded the site to here
You are using floating elements, that's not designed for result you are expecting.
On modern browsers, you should use CSS multiple-columns like here:
jsFiddle
See article on CSS trick
See supported browsers: http://caniuse.com/#search=columns
To support older browsers as IE8/9, you should use isotope jQuery plugin: http://isotope.metafizzy.co/
add -webkit-column-count: 3; to parent section container
change you div's class span_2_of_6 to span_1_of_1
add width:100%;margin-left:0 important; to class .col
I am using this: http://angular-ui.github.io/ui-utils/ and to be more specific this:https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md
however it does not seem to work. Here is an example:
<div ng-scroll-viewport style="height:240px;" class="chat-messages">
<div class="chat-message" ng-scroll="chat in chats">
<div ng-class="$index % 2 == 0? 'sender pull-right' : 'sender pull-left'">
<div class="icon">
<img src="{{chat.img}}" class="img-circle" alt="">
</div>
<div class="time">
{{chat.time}}
</div>
</div>
<div ng-class="$index % 2 == 0? 'chat-message-body on-left' : 'chat-message-body'">
<span class="arrow"></span>
<div class="sender">{{chat.name}}</div>
<div class="text">
{{chat.msg}}
</div>
</div>
</div>
</div>
But All I get in HTML is this :
<div class="chat">
<div class="chat-messages" style="height:240px;" ng-scroll-viewport="">
<!--
ngScroll: chat in chats
-->
</div>
If I replace ng-scroll with ng-repeat, it works perfectly. But chats need scroll bars, so... How can I get one? :)
The documentation of ngScroll directive had also tricked me into simply replacing ng-repeat by ng-scroll. Unfortunately, it turned out not as simple as that, see also the small, working example at http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4 .
Note that
"datasource" (or whatever object you want to iterate over for the contents of the scroll list) must implement a method "get(index,count,success)" that calls success(results), see hXXps://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#data-source
The array must have exactly count elements. Otherwise, no scroll window/bar will ever show, which can be very irritating!
Although UI.Utils says it has no external dependencies, ui.scroll has actually a dependency on either ui.scroll.jqlite, or jQuery. So make sure to list both ui.scroll and ui.scroll.jqlite in your module definition which contains the controller with datasource object (and load their .js files, or load ui-utils.js which contains both), see https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#dependencies
Be careful when your server is sending some Content Security Policies (CSP). Maybe turn them off while trying to get ng-scroll to work first, then re-apply CSP and tune the policies accordingly for ui.scroll to work.
One way of getting a scroll is to use CSS, set overflow-y to scroll and you will get scroll bar.
If you need to scroll to the bottom, play with anchorScroll
http://docs.angularjs.org/api/ng.$anchorScroll.
I've got a website set up with well structured pages, eg. <h1> for the website name, <h2> for the page name and <h3> for the different sections on the page.
Anyway, I was looking to set a bunch of the really long pages (an FAQ page for example) up with an "accordion" effect, with the <h3> elements being the toggle and the content directly following being toggled. But the collapsible content needs to be in it's own <div class="draw"> (or similar) and this isn't how the content is set up currently. I was hoping this was possible without touching the existing HTML and just somehow changing the DOM with JS (with jQuery assistance?) to accommodate.
I thought maybe wrapping content between the <h3> elements in a classed <div> might work but wouldn't know how to get this done. Help?
Here's one way to do it that doesn't rely on traversable DOM elements between the h3 tags. I'm not sure how efficient it is to swap out the entire contents of the body tag like this on every load though...
$(document).ready(function(){
var content = $('body').html();
content = content.replace(/(<\/h3>)((.|\n|\r)*?)(<h\d>|$)/gi, "$1<div class=\"draw\">$2</div>$4");
$('body').html(content);
});
I tested this out on content formatted like so:
<body>
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
...
</body>
The jQuery documentation on the accordion widget is very easy to use. http://docs.jquery.com/UI/Accordion. But using the jQuery method only works if you have the structure they describe in the docs. In other words (as far as I know) it is impossible to use the jQuery accordion widget without touching your HTML. This is the structure:
<div id="accordion">
<h3>Tab 1</h3>
<div>
First tab content
</div>
<h3>Tab 2</h3>
<div>
Tab two content
</div>
<h3>Tab 3</h3>
<div>
Tab three content
</div>
</div>
Then you would create the widget using the line of javascript:
$("#accordion").accordion();
If you wanted to use jQuery to format your HTML for you, you still need a way to select and parse your HTML. Each tab's content needs to be selectable some how. If your HTML already has the tabs separated somehow, then you need to take a look at this page http://docs.jquery.com/Manipulation. It should be pretty straightforward.
If you're willing to consider non-JS alternatives, Stu Nicholls has some interesting html/css (no js) options on his CSS Play website:
http://www.cssplay.co.uk/menu/gallery3l
http://www.cssplay.co.uk/menus/tabmenu.html
(Among others)
I suppose it looks like this:
<html>
<h1>site name</h1>
<h2>page name</h2>
<h3>section</h3>
<p>some stuff</p>
<p>different paragraph</p>
<ul><li>a list</li></ul>
<h3>next section</h3>
<p>different stuff</p>
...
</html>
you could iterate over all direct children of html. At first h3 you start collection all subsequent items until the next h3. if a next h3 comes or page end you create a div, and add it after the starting h3 all collected elements should be removed from their parent (the html) and added as children of the div.
looking at http://docs.jquery.com/Traversing this should be easy. I'm not an expert on jquery, but it should be doable.
Dave Ward of Encosia has great 10 minute tutorial on jQuery, Firebug and selectors that builds exactly what you looking for.