We Keep Coding

div wipe/reveal without affecting content

I've run into a bit of trouble with a project.
I have a menu item, when it is clicked I would like a loading animation that will wipe left-to-right and change the colour of both the text and the background.
The best way I could think to do this is to duplicate the div, apply a 'cloned' class that changes the colours and lays it atop the clicked div. I can't seem to make a wipe work though.
I'm trying to use clip:
$('.flight').click(function () {
$(this).clone(true).addClass('cloned').appendTo($(this).parent())
$(this).siblings('.cloned').stop().animate({
'clip': 'rect(0px 0px 300px 0px)'
}, 1000)
});
JSFIDDLE
Any advice on where I'm going wrong would be really appreciated!

Ok so I found a work-around from the clip issue. It's not pretty but it works! I'm only allowing myself to use this as the animation is not required for functionality, and the cloned block is to be deleted upon completion.
$('.flight').click(function() {
// Clone and add the class
$(this).clone(true).addClass('cloned').appendTo($(this).parent())
// For every div under .cloned fix the width and height, this will prevent
// any responsiveness that we don't want.
jQuery.each($('.cloned div'), function(){
$(this).css('width', $(this).innerWidth())
$(this).css('max-height', $(this).innerHeight())
})
// Set the container width to 0 now, would not work before as we need
// calculable widths. Then animate!
$('.cloned').css('width', '0')
$('.cloned').animate({
width: '100%'
})
});
JSFIDDLE

Is it possible to animate position of flex items when items are removed/added?

I'm using flexbox to display items in a container- the items snap to their new positions when items are removed/added. Is there anyway to smoothly transition between the states? Transitions between multiple lines is desired and items can be of variable width. I'm using angular JS to add/remove items.
I haven't been able to come up with a working solution. Any ideas?
Plunker here.

I don't know much about angularJS, but you could do this:
http://jsfiddle.net/H9mvd/5/
using transitions. To remove an element, first you'd change the width, margins etc. to 0, and then remove the item on the 'transitionEnd' event:
$(this).css({
'margin-left': '0',
'margin-right': '0',
width: '0'
}).on('transitionend', function(){
$(this).remove();
});
And for adding elements, insert the new element with the style attribute such that width, margins etc. are 0. Then remove these from style so that the element gets transitioned to it's proper size:
container.append('<div style="margin-left:0;margin-right:0;width:0;"></div>');
setTimeout(function(){
// needs placing in a timeout so that
// the CSS change will actually transition
// (CSS changes made right after inserting an
// element into the DOM won't get transitioned)
container.children().last().css({
'margin-left': '',
'margin-right': '',
width: ''
});
},0);
There are 'jumps' in position when adding/removing elements because the flexbox is set with justify-content: space-around;, so adding/removing an element (even one with zero width) will cause the 'space' between elements to be redistributed. I think it'd be fairly tricky to work around this.

yes, it is,
test & try it using animation CSS : http://plnkr.co/edit/VnFTz5VKDJIjFIJ6YBwG?p=preview
div.ng-scope {max-width:15em;overflow:hidden;animation:deploy 2s;}
#keyframes deploy {
from {
max-width:0;
}
to {
max-width:15em;
}
}

amCharts doesn't display chart for initially-hidden divs

I am using amCharts (which uses Raphaël behind the scenes) to render some charts as SVG; and have noticed that if the SVG is rendered in an initially-invisible div, the browser does not immediately render the image when the div becomes visible. If I modify the display however, e.g. by resizing the browser or Ctrl-mousewheel zooming, the SVG image is then rendered as expected when the page is redrawn.
The exact method of div visibility switching is via Bootstrap's tabbed navbar.
I admit to not being very experienced with SVG - is this an issue with the browsers' rendering, or amCharts' SVG markup, or am I required to explicitly call some sort of repaint method when I can tell the visibility of an SVG has changed?
Here's a jsFiddle which illustrates the problem; if you switch to Section 2 (in Chrome, Firefox) the chart isn't visible initially. Resizing the display causes it to appear.

I've found the reason for both the initial behaviour and the workaround - and it's all amCharts specific (nothing to do with SVG per se) so I'm rephrasing the title accordingly.
What happens is that when amCharts creates the SVG, it needs to (or at least, decides to) define the width and height in absolute terms. These are based on the size of the target div, obtained via the offsetWidth and offsetHeight properties.
The inactive tab has the display: none property set, and as a result this part of the DOM is not even rendered, so returns zero for both size properties. This ultimately leads to amCharts creating a 0x0 SVG chart when chart.write is called for the hidden div.
Resizing fixes things because each chart registers a listener to the onresize window event, which calls the chart's handleResize method. This forces a recalculation of the width and height based on the div's new (current) dimensions.
So in conclusion I think there are two alternative ways to handle this:
Call chart.write for a chart when and only when its tab becomes visible.
Call each chart's handleResize method when the tabs change.
(The first option avoids the initial hit of rendering an invisible chart, but then does a full redraw every time the tabs are changed. The latter takes a hit up-front but is likely quicker thereafter. For bonus marks, the best solution would be to render each chart exactly once between each resize, the first time it becomes visible, but that's a lot more complex as it would involve interfering with the default event listeners, amongst other things.)
Update: There's further complications with rendering an invisible chart; in particular, I found issues with the height calculations not taking into account the space required by the domain axis and so stretching the chart out of its div. This wasn't fixed by calling handleResize - calling measureMargins beforehand looked like it should work but didn't. (There's probably another method one could call after this to make it work such as resetMargins but at this point it started to feel very flaky...)
As such I don't think it's practical to render a chart for the first time on a non-visible div, so I went with some combination of the bullets above. I listen for when a chart's tab becomes visible for the first time and then call chart.write for the appropriate chart object - and whenever the tabs change, all previously-rendered charts are told to handle the resize.

* Edited *
Here is a updated fiddle. The Canvas will only be rendered once the tab is shown.
I store the chartdiv ids in an array and check whether there are in it or not.
* Edited *
The only solution I found was to show the Graph after the specific tab is shown.
As you see in this jsFiddle.
var tabs = $('.tabbable').tab()
tabs.on('shown', function(e){
id = $(e.target).attr('href');
chartdiv_id = $(id).find('.chartdiv').attr('id');
doChart(chartdiv_id, true);
});
I guess it isn't exactly what you are looking for, but i hope it helps for the moment.

I had the same problem, but my solution it's alternative to display:none, you can use this class in the css
.hidden {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
this dissapear of the screen but visible for the amchart, so the resolution of the chart never lose the size!!!!

I completely agree with Andrzej Doyle.
Issuing handleresize on the chart when clicking on the selected div (tab) works for me on cs-cart with custom tabs (not jquery ones).
The following works while cart beeing globally defined.
function refreshchart(){
chart.handleResize();
};

I also ran into the issue and fixed it by making the initializer a function. Working fiddle.
$("#button").click(function(){
$("#chartdiv").toggle();
makeChart();
});
function makeChart() {
var chart = AmCharts.makeChart("chartdiv", {
//all the stuff
});
}

This Might help you to resolve issue . I have my amchart showing in different tab pan . SVG Component does not allow them to show that div due to resizing issue .
$(window).resize(function() {
setTimeout(function() {
chart.write("chartdiv1");
}, 300);
});
resize again your window while you create your charts ..

Show me charts
<div class="charts_div" style="display:hidden;">
some charts here
</div>
<script>
$(document).on('click', '.show_charts', function(){
$('.charts_div').toggle();
//just redraw all charts available on the page
for(var i = 0; i < AmCharts.charts.length; i++) {
AmCharts.charts[i].validateData();
}
});
</script>

var chart = null;
AmCharts.ready(function () {
chart = AmCharts.makeChart('chart', .....);
});
$(document).ready(function(){
$("#view_chart").click(function(){
chart.validateSize();
});
});
<button type="button" id="view_chart">View Chart</button>
<div style="display:none;" id="chart"></div>

Another work around would be
drawTransactionTypeChart();
setTimeout(function(){hidePieCharts();},1);
Initially set display:inline to div which is chart container, it gets rendered .
Then set display:none using setTimeout() after 1ms.
Hope this helps...

I have two amcharts on different tabs.
A stock chart to be place on #chartdiv and a pie chart to be placed on #chartdivpie.
This is how I solved my problem.
My custom css - to overwrite bootstrap -
#chartdivpie { width: 1138px; height: 500px; }
.tab-content .tab-pane {
position: absolute;
top: -9999px;
left: -9999px;
display: inline;
}
.tab-content .tab-pane.active {
position: inherit !important;
}
JQuery call
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show');
chart.invalidateSize();
chart.write('chartdiv');
})

TinyMCE width and height disobedient!

According to the (conflicting) documentation of TinyMCE, the editor takes on the size of the textarea (or other) element that it replaces. It also says that you can set the size of the editor by specifying { height: '123', width: '123' } in the init method.
I have tried BOTH and still get only one result - the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it.

Its saves the last size because of the theme settings. You can turn it off by using the following
$('textarea.tinymce').tinymce({
theme_advanced_resizing: true,
theme_advanced_resizing_use_cookie : false,

I know all about this, it is very annoying.
Adding this to any loaded CSS file fixed the width for me (I just put it in the global css, not in any of the TinyMCE css files, I did not test with height):
.mceEditor > table {
width:/* my width */ !important;
}
This would affect all instances, which was fine in my case. You can target the toolbar itself with .mceToolbar
You kind of do want TinyMCE to resize the textarea, so it can be wide enough to fit all the toolbar icons.

Here is my fix.
It works also for multiple instances of TinyMCE editors (init() with 'height' property works only for the first instance, so it's a workaround to achieve a fixed or minimum height of the editor box).
.mceEditor td.mceIframeContainer iframe {
min-height: 350px !important;
}
.mceEditor table {
height: auto !important;
}

Although there are a lot of good suggestions here I found the answer by reading the question. There is NO problem with height or width so why all these work arounds with CSS or writing functions, the method in the docs works.
The original challenge was about resizing, the author never said the height or width didn't work, it just didn't do what he/she expected - it was only stated as quoted below:
"the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it."
Saidul Islam answered the question correctly and to take it one step further Stuart went on to describe how to turn off the cookies. If you need to set the height and width do it when in init() and be done. You can read more here:
https://www.tinymce.com/docs/configure/editor-appearance/#min_height
Sizing the input area in both height and width works as outlined below.
tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});

tinyMCE.init({
mode : "exact",
.....
mode : "exact" will disable the ability to resize grid by drag

Yes, this is very annoying. I wrote my own function to adjust the height to the given input. You may modify it to set your height/width as you wish:
resizeIframe: function(frameid) {
var frameid = frameid ? frameid : this.editor.id+'_ifr';
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera){
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
styles = currentfr.getAttribute('style').split(';');
for (var i=0; i<styles.length; i++) {
if ( styles[i].search('height:') ==1 ){
styles.splice(i,1);
break;
}
};
currentfr.setAttribute('style', styles.join(';'));
}
},

im setting width and height to editor area like this
<style>
#content{width: 620px; height: 500px;}
</style>
<textarea name="content" id="content" cols="50" rows="15"></textarea>

I noticed that a containing table was enforcing widths, and also the icon set are td's, so there's a minimum width they'll collapse down to, so if you have many icons in a single row - it could be messing all over your widths.
Sort of related SO question of mine, ended up being quite related to your problem: Able to float td elements consistently?

I found the TinyMCE text-area (called '.mceContentBody' in my theme) too small and awkwardly margined in the new post content area.
In my theme there's a css file called editor-style. I changed the width (to 98%) yet since TinyMCE uses cookies to remember the editor size, the CSS changes weren't sticking. After CLEARING MY BROWSER'S CACHE, the CSS width/margin changes took effect. Finally. Gah.

Add a 'body_id' using tinymce.init and then use that id in 'content_css' to give the editor the desired css behavior. Like so:
tinymce.init({
selector: "textarea",
content_css: '/css/app.css',
body_id: 'new-journal-editor'
});
And then in app.css:
#new-journal-editor {
height: 123px;
width: 123px;
}

I am facing the same problem but I end up doing this
#tinymce-textarea_ifr {
min-height: 500px !important;
}
.mce-tinymce {
width: 96% !important;
margin: 0 auto !important;
}

I find the best method to restrict the width tinyMCE 4+ textarea is to wrap the textarea in a new div or span tag. Then apply the width to that. This way you get use percentage widths instead of fixed px. if you want to adjust height edit the rows="15" value.
example:
<div style="width:90%!important;" ><textarea name="content"cols="100" rows="15" class="mceEditor" id="content"><?php echo $content;?></textarea></div>

jScrollPane Scrollbar height relative to div

I have a resizable div which is using custom scrollbars of jScrollPane.
I want to have vertical scrollbar above the resize handle, is it possible to do so?
I tried changing verticalTrackHeight to be always 40 less and bar size reduces too, but when we scroll the scroller goes to the bottom.
Here is my code http://www.jsfiddle.net/WRMSn/4/

It seems like some extra space is somehow being added below the scrollbar. You can use a jspCap to get around this using some code like this:
.jspCapBottom {
display: block;
height: 22px;
}
I added that to your fiddle and it seems to work well:
http://www.jsfiddle.net/UnEqt/

You forgot ; on var pane = $("#container")
It should be var pane = $("#container");