I am asking a question about Isotope
It is a great plugin for jQuery.
I have been playing with it for a while now, but I don't know enough about javascript to combine two of the Isotope techniques, responsive Isotope and centered Isotope.
I have sucessfully used the responsive mod and it worked pretty well, except now I need to center the whole thing within a div. The centered layout mode isn't documented as well as the responsive mode, so I am having some trouble getting it to work. Basically the inscructions for the centered layout mode are :
To use this mod, copy the revised methods found in the demos’ page source.
Unfortunately, there are all sorts of javascript things going on in the view source and I don't have enough experience with javascript to pick it out and also combine it with the responsive script I already have working.
Any help would be greatly appreciated.
A site with a working example of what I need.
My site that I am experimenting with.
Works better in Firefox I think.
Here is an example provided by David DeSandro himself:
http://jsfiddle.net/desandro/P6JGY/6/
This jsfiddle will probably solve your problem: http://jsfiddle.net/schmidjon/6Z3sn/.
It's a simple extension to Isotope with breakpoints:
(function ($) {
var $container = $('.example'),
colWidth = function () {
var w = $container.width(),
columnNum = 1,
columnWidth = 0;
if (w > 1200) {
columnNum = 5;
} else if (w > 900) {
columnNum = 4;
} else if (w > 600) {
columnNum = 3;
} else if (w > 300) {
columnNum = 2;
}
columnWidth = Math.floor(w/columnNum);
$container.find('.item').each(function() {
var $item = $(this),
multiplier_w = $item.attr('class').match(/item-w(\d)/),
multiplier_h = $item.attr('class').match(/item-h(\d)/),
width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
$item.css({
width: width,
height: height
});
});
return columnWidth;
},
isotope = function () {
$container.isotope({
resizable: false,
itemSelector: '.item',
masonry: {
columnWidth: colWidth(),
gutterWidth: 4
}
});
};
isotope();
$(window).smartresize(isotope);
}(jQuery));
Source: Using jQuery Isotope for masonry in fluid layouts
try using the transition on your css file for each of your classes on child content. it should be helpful and it can be more slowmo
.css
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
hope this working
Related
I am using ionic modal in ionic project. the modal is appearing on page clearly, but when I am trying to enter any text into any textbox the keyboard is appearing on page.
Once the keyboard appeared, I am unable to see the html of modal and also unable to scroll modal.
kindly refer the screenshot.
Thank you.
Waited for long time and did't get any answer, So I have written some css to fix this issue, This is working in my project as well as dominik
also tried this. see the comment by him
#media(min-width: 680px){
.modal{ top: 0; height: 70%; }
body.keyboard-open.modal{ height: 90%; }
body.keyboard-open.modal.scroll{ overflow-y: scroll !important; }
}
.overflow-scroll.keyboard-up:not(.keyboard-up-confirm){
overflow-y: scroll;
height: 100% !important;
top: 0;
}
Had to come up with this fix. it worked for me, so give it a try: Put the code in your app.run
NOTE: this issue is normally caused when you set android:windowSoftInputMode="adjustPan" in your AndroidManifest.xml
Make sure jquery is included in your app.
window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardShowHandler(e){
setTimeout(function() {
var originalHeight = window.innerHeight-30;
var newHeight = originalHeight - e.keyboardHeight;
$('ion-modal-view ion-content').css("height", newHeight);
}, 0);
}
function keyboardHideHandler(e){
setTimeout(function() {
var newHeight = '100%';
$('ion-modal-view ion-content').css("height", newHeight);
}, 0);
}
I want to update the data shown by a Directive using an animation:
slide old information off downwards;
while offscreen, change the data to be shown (I also presumably need to change the translateY from +100% to -100% at this stage)
slide the new content form above.
My approach is below, but it relies upon a $timeout. I have calibrated as best I can for my development machine but it is not always reliable, and leads to erratic visual effects. There must be a better way, such the second animation only starts when it is signalled that the first is complete?
This is my html
<div class="selectedRestoContainer divider">
<resto-elem
id="selectedResto"
resto="list.selectedResto"
idx="list.selectedIndex"
ng-class="list.animationClass"></resto-elem>
</div>
This is my css
.selectedRestoContainer {
$height : 65px;
height: $height;
overflow: hidden;
resto-elem {
min-height: $height; //
transform: translateY(-100%); // ensure that without .flash element is off screen
}
.flash-add { // start - off-screen above
transform: translateY(-100%);
transition: all 0.7s ease; // incoming - i.e. transition to 0
}
.flash, .flash-add.flash-add-active {
transform: translateY(0);
}
.flash-remove.flash-remove-active {
transform: translateY(100%);
transition: all 0.4s ease; // outgoing
}
}
And this is what I have in my controller
$scope.$on("selectedResto", (e, qname) => {
// start first animation (400ms set in css)
$timeout( () => this.animationClass = "", 0 );
// second animation starts 450ms later
$timeout( () => {
this.selectedIndex = qname;
this.selectedResto = this.recs[qname];
this.animationClass = "flash";
}, 450);
});
I have a dynamic list of items using ng-repeat. When something happens an item may disappear. I have handled smoothly animating the removal of these items using ng-animate, but after they are gone, the remaining items simply snap to their new position. How can I animate this movement smoothly?
I've tried applying an "all" transition to the repeated class and using ng-move with no success.
You can achieve this by animating the max-height property. Check out this sample:
http://jsfiddle.net/k4sR3/8/
You will need to pick a sufficiently high value for max-height (in my sample, I used 90px). When an item is initially being added, you want it to start off with 0 height (I'm also animating left to have the item slide in from the left, as well as opacity, but you can remove these if they don't jibe with what you're doing):
.repeated-item.ng-enter {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
max-height: 0;
opacity: 0;
left: -50px;
}
Then, you set the final values for these properties in the ng-enter-active rule:
.repeated-item.ng-enter.ng-enter-active {
max-height: 90px;
opacity: 1;
left: 0;
}
Item removal is a bit trickier, as you will need to use keyframe-based animations. Again, you want to animate max-height, but this time you want to start off at 90px and decrease it down to 0. As the animation runs, the item will shrink, and all the following items will slide up smoothly.
First, define the animation that you will be using:
#keyframes my_animation {
from {
max-height: 90px;
opacity: 1;
left: 0;
}
to {
max-height: 0;
opacity: 0;
left: -50px;
}
}
(For brevity, I'm omitting the vendor-specific definitions here, #-webkit-keyframes, #-moz-keyframes, etc - check out the jsfiddle above for the full sample.)
Then, declare that you will be using this animation for ng-leave as follows:
.repeated-item.ng-leave {
-webkit-animation:0.5s my_animation;
-moz-animation:0.5s my_animation;
-o-animation:0.5s my_animation;
animation:0.5s my_animation;
}
Basics
In case anyone is struggling with figuring out how to get AngularJS animations to work at all, here's an abbreviated guide.
First, to enable animation support, you will need to include an additional file, angular-animate.js, after you load up angular.js. E.g.:
<script type="text/javascript" src="angular-1.2/angular.js"></script>
<script type="text/javascript" src="angular-1.2/angular-animate.js"></script>
Next, you will need to load ngAnimate by adding it to the list of your module's dependencies (in the 2nd parameter):
var myApp = angular.module('myApp', ['ngAnimate']);
Then, assign a class to your ng-repeat item. You will be using this class name to assign the animations. In my sample, I used repeated-item as the name:
<li ng-repeat="item in items" class="repeated-item">
Then, you define your animations in the CSS using the repeated-item class, as well as the special classes ng-enter, ng-leave, and ng-move that Angular adds to the item when it is being added, removed, or moved around.
The official documentation for AngularJS animations is here:
http://docs.angularjs.org/guide/animations
TLDR: Jank is bad, do animations with transform. Check out this fiddle for css and demo.
Explanation
Note that animating height, max-height, top, ... is really bad performance wise because they cause reflows and thus jank (more information on html5rocks|high-performance-animations).
There is however a method getting this type of animation using only transforms by utilizing the sibling selector.
When elements are added there is one reflow because of the new item, all items below are transformed up so they stay at the same position and then the transformation is removed for a smooth slide-in.
In reverse when elements are removed they are transformed to the new position for a smooth slide-out and when the element is finally removed there is again one reflow and the transform is removed instantly so they stay at their position (this is also why it is important to only have transition set on ng-animate).
Alternatively to the example you could also do a transform: scaleY(0) on the deleted item and only transform: translateY() the siblings.
Caveat
Note that this snippet has trouble when multiple elements are removed in quick succession (before the previous animation has completed).
This can be fixed by having an animation time faster than the time a user takes to delete another item or by doing some more work on the animation (out of scope of this answer).
Finally some code
Note: apparently SO breaks the demo with multiple deletes - check out the fiddle to see it in work.
angular.module('app', ['ngAnimate'])
.controller('testCtrl', ['$scope', function($scope) {
var self = this;
self.items = [];
var i = 65;
for(; i < 72; i++)
{
self.items.push({ value: String.fromCharCode(i) });
}
self.addItem = function()
{
self.items.push({ value: String.fromCharCode(i) });
i++;
}
self.removeItemAt = function(index)
{
self.items.splice(index, 1);
}
}])
li
{
height: 48px;
width: 300px;
border: 1px solid lightgrey;
background-color: white;
position: relative;
list-style: none;
}
li.ng-enter,
li.ng-enter ~ li {
transform: translateY(-100%);
}
li.ng-enter.ng-enter-active,
li.ng-enter.ng-enter-active ~ li {
transform: translateY(0);
}
li.ng-animate {
z-index: -1;
}
li.ng-animate,
li.ng-animate ~ li {
transition: transform 0.6s;
}
li.ng-leave,
li.ng-leave ~ li {
transform: translateY(0);
}
li.ng-leave.ng-leave-active,
li.ng-leave.ng-leave-active ~ li {
transform: translateY(-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular-animate.js"></script>
<div ng-app="app" ng-controller="testCtrl as ctrl">
<ul>
<li ng-repeat="item in ctrl.items" ng-bind="item.value">
</li>
</ul>
<button ng-click="ctrl.addItem()">
Add
</button>
<button ng-click="ctrl.removeItemAt(5)">
Remove at 5
</button>
</div>
How can I make angular bootstrap collapse, collapsing horizontally?
Something like here?
You are going to need to either modify the collapse directive or create a new directive based on that to handle collapsing the width only. I would suggest the latter unless you want all of the collapse directives in your app to collapse horizontally.
Please see the Plunk here demonstrating the use of a collapse-with directive based on the bootstrap collapse directive.
On top of changing the directive you will need to add new classes to handle the transition and set a width for the element you want to collapse (you could also change the directive to collapse to and from 100% width, not sure on your use case but hopefully you get the idea):
.well {
width: 400px;
}
.collapsing-width {
position: relative;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
And the directive just requires a few changes to the expand, expandDone, collapse and collapseDone functions and adding/removing the css class above as follows:
.directive('collapseWidth', ['$transition', function ($transition, $timeout) {
return {
link: function (scope, element, attrs) {
var initialAnimSkip = true;
var currentTransition;
function doTransition(change) {
var newTransition = $transition(element, change);
if (currentTransition) {
currentTransition.cancel();
}
currentTransition = newTransition;
newTransition.then(newTransitionDone, newTransitionDone);
return newTransition;
function newTransitionDone() {
// Make sure it's this transition, otherwise, leave it alone.
if (currentTransition === newTransition) {
currentTransition = undefined;
}
}
}
function expand() {
if (initialAnimSkip) {
initialAnimSkip = false;
expandDone();
} else {
element.removeClass('collapse').addClass('collapsing-width');
doTransition({ width: element[0].scrollWidth + 'px' }).then(expandDone);
}
}
function expandDone() {
element.removeClass('collapsing-width');
element.addClass('collapse in');
element.css({width: 'auto'});
}
function collapse() {
if (initialAnimSkip) {
initialAnimSkip = false;
collapseDone();
element.css({width: 0});
} else {
// CSS transitions don't work with height: auto, so we have to manually change the height to a specific value
element.css({ width: element[0].scrollWidth + 'px' });
//trigger reflow so a browser realizes that height was updated from auto to a specific value
var x = element[0].offsetHeight;
element.removeClass('collapse in').addClass('collapsing-width');
doTransition({ width: 0 }).then(collapseDone);
}
}
function collapseDone() {
element.removeClass('collapsing-width');
element.addClass('collapse');
}
scope.$watch(attrs.collapseWidth, function (shouldCollapse) {
if (shouldCollapse) {
collapse();
} else {
expand();
}
});
}
};
}]);
You may need to tweak the css a little to ensure the spacing and margins are consistent with your use cases but hopefully that helps.
I want my canvas-Element to always have the same size - independent of the client's screen-resolution.
If the user zooms with the browser, the canvas-element should always have the same size.
Furthermore, the aspect-ratio should always be the same - I want a coordinate-space of 1920-1080 points. (There can be a border on the side of the canvas-element, if the browser doesn't have the same ratio).
I managed to implement this with html + css:
with = 100% of screen
max. coordinates are 1920 x 1080
But when I imlemented fabric.js, it changed the size of canvas. And I cant set it back, to have a responsive design.
How can I achive this with fabric.js?
After experimenting a bit, I finally found a solution where I only have to modify css-properties.
The answer is very simple, although it's very long.
This is my html-body:
<body onload='init()'>
<div id="canvasWrapper">
<canvas id="canvas" width="100px" height="100px"></canvas>
</div>
</body>
And this is my css:
*{
padding: 0;
margin: 0;
border: 0;
}
body{
overflow: hidden;
}
#canvasWrapper {
background-color: red;
display: inline-block;
}
The important parts are the "inline-block" of my canvas-wrapper, and the "overflow: hidden" of the body-element. It seems that there are some pixels below the canvas, which would make both scrollbars appear.
After some experimenting, I got the following js-code:
function init(){
resizeCanvas(); //resize the canvas-Element
window.onresize = function() { resizeCanvas(); }
}
Whenever the screen-size changes, my "resize"-Function will be called.
The whole trick is done in this resize-Function:
function resizeCanvas() {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var cv = document.getElementsByTagName("canvas")[0];
//var cc = document.getElementsByClassName("canvas-container")[0]; //In case of non-Static Canvas will be used
var cc = document.getElementById("canvasWrapper");
var cx,cy; //The size of the canvas-Element
var cleft=0; //Offset to the left border (to center the canvas-element, if there are borders on the left&right)
if(x/y > sizeX/sizeY){ //x-diff > y-diff ==> black borders left&right
cx = (y*sizeX/sizeY);
cy = y;
cleft = (x-cx)/2;
}else{ //y-diff > x-diff ==> black borders top&bottom
cx = x;
cy = (x*sizeY/sizeX);
}
cc.setAttribute("style", "width:"+x+"px;height:"+y+"px;"); //canvas-content = fullscreen
cv.setAttribute("style", "width:"+cx+"px;height:"+cy+"px;position: relative; left:"+cleft+"px"); //canvas: 16:9, as big as possible, horizintally centered
}
This function calculates the window-width, and the biggest canvas-size that is possible without changing the ratio.
After that, I set the wrapper-div to fullscreen-size, and the size of the canvas-Element to the previously calculated size.
Everything works without the need of changing the content of the canvas element and without redrawing anything.
It's cross-browser compatible (tested on Firefox 25, Chrome 31 and Internet Explorer 11)
a solution in version 2.4.2-b， It's official Api method:http://fabricjs.com/docs/fabric.js.html#line7130
it works in my code, set width and height 100% :
fabricCanvas.setDimensions({
width: '100%',
height: '100%'
},{
cssOnly: true
});