I have starting to play with Foundation and I realised there was a possibility to support larger screens but I don't know how to enable.
What I basically would like to do is being able to address larger screens (up to 1920px) and use those additional breakpoints in various ways like for example the ability to specify how many elements of a block grid have to be displayed on xxlarge, xlarge, large,...
I have checked the settings file and there are a couple of things there that seem to indicate it's possible.
I have first uncommented:
//$row-width: rem-calc(1000);
and set it to:
$row-width: rem-calc(1920);
With this I see that my addressable screen is bigger but breakpoints are still the same.
I also have uncommented this:
$large-breakpoint: em-calc(1440);
$xlarge-breakpoint: em-calc(1920);
...etc..
(and almost everything in the d.Media query ranges section)
$include-xl-html-grid-classes: true;
$include-xl-html-block-grid-classes: true;
But even with all this enabled, breakpoints still doesn't work with a simple thing like this:
<div class="row">
<div class="xlarge-12 columns">content</div>
</div>
This displays a div of exactly the same size as for large-12
Any idea?
Thanks
Laurent
$row-width refers to the maximum width of content. The foundation grid is 12 columns, so any div with {size}-12 will be 100% wide. This is why large-12 and xlarge-12 divs will be the same width.
To make the content smaller on large screens and larger on xlarge screens, try this:
<div class="row">
<div class="large-10 xlarge-12 columns">content</div>
</div>
Related
I don't know why the virtual scrolling I implemented is looking weird.
I have a list of words and I wanna show them in a page. earlier I iterated these words using a for loop but the scrolling performance was horrible in android devices. So I decided to implement basic virtual scrolling as mentioned in ionic's official documentation.
http://rhymebrain.com/talk?function=getRhymes&word=baby
This is the data That I'm trying to iterate. I only need the words, no other info.
Code for my virtual scroll looks like this:
<ion-card *ngIf="words?.length > 0">
<ion-card-header>rhymes with...</ion-card-header>
<ion-card-content>
<ion-list [virtualScroll]="words" [approxItemHeight]=" '500px' ">
<button *virtualItem="let word" ion-button round small>
{{word.word}}
</button>
</ion-list>
</ion-card-content>
</ion-card>
In my web browser, the results I got are terrible. I will share some screens:
Pic 1: User searches for a word to fetch all rhymes but no data is shown even when response is not null.
Pic 2: If I navigate to another page and come back, I see a few of the rhymes.
Pic 3: If I repeat step 2 or scroll a little down, I see few more words. It looks so weird.
I have no idea why virtual scroll is acting like this. Can anyone tell me what mistake I made or a better solution for this?
thanks in advance
There's a few issues with virtual scroll that are unfortunately not documented. Fixing all these should get you in the right direction.
Predefined Height
All ancestors of your [virtualScroll] must have a predefined height. The virtual list will grab the elements height and based on that, populate the cells. If the height is 0, it will populate only a few cells which make up for the buffer space of scrolling quickly. Don't use inline CSS but for simplicity here's an example.
<ion-content>
<div style="height:100%">
<ion-list [virtualScroll]="items" approxItemHeight="50px">
...
</ion-list>
</div>
</ion-content>
Define Approximate Item Height
In the example above you can see I'm setting approxItemHeight. This is an important step that helps the virtual list with it's calculations.
Don't Wrap In If Statement
Unfortunately you can't put your virtual scroll inside an ngIf, ticket. Your virtual scroll needs to be rendered at the beginning of your components life cycle. So if you wrapped your virtual scroll inside of a condition which from the time of the constructor was equal to true, the issue would not exist. However if some point later on the condition becomes true, you'll have to redesign your implementation.
What I did for this was switch from using *ngIf to using [ngClass]="virtualClass". When I want to hide the virtual scroll I will set virtualClass = 'virtual-hide'.
.virtual-hide {
overflow: hidden;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
You can't use display: none since this will not render the virtual scrolls height, same problem we want to resolve. The above CSS should allow for the element to be on screen and take up the correct amount of space while not appearing to actually be there. This code might need to be adjusted based on your implementation.
Ensure Items Exist
Switching to using ngClass from ngIf will mean your virtual scroll is always in the DOM. Because of this, you must make sure that items (the array for [virtualScroll]) is always set. So make sure it's never undefined or null, instead set it to [] if you want it to be empty.
Let me explain a little bit what I'm working on :
I am an intern and I have to create a friendly website back-office for people who are not really used to computer.
Thus, the back office management has to be as simple as possible ! I already put a lot of drag & drop in my plugins, the front-end is cool etc.
But a problem subsist :
the templates and placeholders.
I managed to create a demonstration template page with multiple placeholder, some in full width and some in 6 columns, 4 columns etc.
So I have something like that :
<div fullwidth>
{% placeholder "title1" %}
</div>
<div 6 columns>
{% placeholder "text1" %}
</div>
<div 6 columns>
{% placeholder "Picture1" %}
</div>
<div fullwidth>
{% placeholder "text2" %}
</div>
Each place holder has default plugin, in order to helps users.
Ok it works great.
But what happen now if we want, in the website back-office, move the placeholder "text2" before the 2 six columns ?
It seems to be impossible to manage it dynamically.
If you have used wordpress, you must have experienced how easy is it to manipulate content, if you want to move a Title to an other location juste drag and drop it etc.
Then I was thinking about the multiple column, by default you would have a multiple column with one 100% width column. Up to you to reduce it.
But the problem is that it is complicate to integrate and modify.
And it is absolutely not friendly-user !
Well, in case I am not very clear, I need to manage placehoder positions dynamically or have something to manage multi columns in an easy way for the user !
I am totally lost and without idea about it.
Have you already experienced it ? What kind of option did you choose ?
It would be really great if you could share some point of view with me :)
By the way,
thank you in advance for reading my post.
EDIT :
Have you seen this : http://www.mir.de/django-cms-demo ? This is perfectly what I want to have. But I don't know how they are doing it... And it is in German language...
Have you tried djangocms-cascade? I allows one to create placeholders on the fly and it should allow to order thus created placeholders.
According to its github page:
DjangoCMS-Cascade allows web editors to layout their pages, without having to edit Django templates. In most cases, one template with one single placeholder is enough. The editor then can subdivide that placeholder into rows and columns, and add additional elements such as buttons, rulers, or even the Bootstrap Carousel.
I would like to recommend:
https://github.com/divio/djangocms-column
or
https://github.com/divio/djangocms-grid
Its a lot simpler compared to djangocms-cascade.
I have a set of two tabs. Each tab has a Google chart inside it. Both these charts should be identical in terms of size and position.
When the page is loaded, the position of the chart is how I want it (regardless of which tab you are initially on). When you then move to the other tab (initially hidden) the chart's position and sizing changes.
You can see this in the example here: http://cb.tortoise-dev.co.uk/
To simplify things I've added fixed widths and heights to the chart container, but this hasn't helped. I'm pretty sure that the problem is to do with the hidden container having no dimensions when the page is loaded and the chart being drawn to a sort of default size rather than filling the container (like it does in the initially visible tab). I'm not sure what the solution is though.
Any help would be greatly appreciated. Thanks in advance.
Your suspicion is correct: if the chart's container div (or a parent element) is hidden when the draw call is made, the Visualization API's dimensional measurements get messed up, and effects like the one you've noticed show up. There are a few different solutions you can go with:
draw the charts before you initialize your tabs, so all divs are visible at draw time
set up event handlers on your tabs to draw all charts within a tab when it is first opened
unhide all divs immediately prior to drawing the charts, then re-hide divs as necessary in "ready" event handlers for the charts
For Twitter Bootstrap users, I've found the following js snippet to be pretty useful. It's a way of using the second solution as provided by #asgallant and takes advantage of the built in Bootstrap Tab events documented at http://getbootstrap.com/javascript/#tabs-events.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if($(e.target).attr('id') == 'first-tab-trigger')
{
drawFirstChart();
}
if($(e.target).attr('id') == 'second-tab-trigger')
{
drawSecondChart();
}
})
The snippet requires that you add a unique class or id selector to your tab like so (e.g., class="first-tab-trigger" etc):
<ul class="nav nav-tabs">
<li class="active">
<a href="#section-one" id="first-tab-trigger" data-toggle="tab">
FIRST TAB
</a>
</li>
<li class="col-sm-3">
<a href="#section-two" id="second-tab-trigger" data-toggle="tab">
SECOND TAB
</a>
</li>
...
</ul>
Now, when a tab is clicked and the the tab's content is made visible, a drawing (or re-drawing) of the chart takes place. That solves the sizing problems you get when you have charts in hidden tabs.
You can also "re-size" your window whenever the content is visible again and it makes the trick of the chart redrawing :
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
window.dispatchEvent(new Event('resize'));
});
I've been googling around for hours now trying to look for a way to make a column be full browser width like the top bar is. Is there a way to do this or is the only solution to just make a custom div without the div row class?
Thanks for any help!
Yes, it sounds like making a div that is not a row is the best solution.
Rows will be sized by Foundation's grid. The size of the grid can be changed (see "Grid Variables" on this page) — but if you just want to make something fill the window, it sounds like you don't want to use the grid for this element.
<div class="row collapse">
...
</div>
By the 'Prezi-like animation' I mean that your canvas rotate/zoom/shift to the tiny little portion in a sequential manner.
P.S.: The question is not limited to AE. Any animation sw would be relevant.
Some suggest HTML5, but that targets web design (my purpose is only creating some animation for self entertainment.)
Still, if HTML5 is an option have a look at layerJS, an open source library which can create Prezi-like web interfaces. It even allows multiple layers if you need some elements to move independently of each other.
It's super simple: just add a stage div put one or more layers in and add as many frames as you want between you can have zooming, panning and rotating transitions.
The HTML code would look like this:
<div data-wl-type="stage">
<div data-wl-type="layer" data-wl-layout-type="canvas">
<div data-wl-type="frame" data-wl-name="frame1" data-wl-x="100" data-wl-width="1000" data-wl-rotation="45" ...>
</div>
<div data-wl-type="frame" ...>
</div>
</div>
</div>
Yes.
You could do it manually. A little tedious, but you would place your text layers in 3d space and push your camera around. You will spend a lot of time tweaking everything like the things in the visible things in the background and the easing moves into and away from the text.
Sure Target is free and could be a big time saver. You basically use it to square up the camera to null objects and it takes a lot of the tedium out of the process, even though you have to spend a few minutes up front to figure out how it works.
http://www.videocopilot.net/tutorial/energetic_titles/
Webpgr does offer this. It's HTML5 based and comes with a Photoshop-like online editor. It's in beta but you can request an account.