I'm wondering how to replicate the functionality of the draggable column/row dividers such as found at http://jsfiddle.net/.
Is this built on top of some library?
Thanks!
The draggable dividers in the jsfiddle site are implemented using the code in jsfiddle.net/js/LayoutCM.js and jsfiddle.net/codemirror/js/codemirror.js.
Note: The new code change in SO makes it really finiciky to directly link to the jsfiddle implementation in order to explain how they implemented something.
Other relevant StackOverflow questions include
Resize elements by dragging divider handler
Draggable div without jquery ui
What is a lightweight script jquery extension that implements a draggable divide ?
The is functionality is provided various projects including jquery plugins and other javascript scripts
jquery-divider
jquery-splitter
splitplane
jqueryui Resizable (used as component to implement)
jqueryui Draggable(used as component to implement)
mootools splitter
yui resize (used as component to implement)
jquery split plane
Also see other resources including
An example jquery splitplane implementation
The example splitplane in Google's closure library
split plane control in yui example
Most people seem to use an existing jquery plugin or make their own implementation using the Draggable and Resizable components, for example code see the other StackOverflow posts mentioned.
Related
I'm newest in web.
I want customize default scroll-bar in ag-grid. I try use ngx-scrollbar for this. In sources ngx-scrollbar I found that ngx-scrollbar using ng-content for wrapping elements(link to github source file). If wrap ag-grid-angular element then scrolling even doesn't shows because content doesn't overflow ag-grid-angular content because oveflow happen in div with class .ag-body-viewport where using stock srolls. In order to achieve needed effect I wish pass DOM element with class .ag-body-viewport to ng-content of ngx-scrollbar. Is it possible?
More info here github issue but I don't use Nice Scroll or Perfect Scrollbar
I want use ngx-scrollbar because it has capability of customization.
UPDATE
I can pass DOM element to ng-content using next sintax(agGridViewport is native element):
<ng-scrollbar>
{{ agGridViewport }}
<ng-scrollbar>
but it pass element like a copy of real DOM object but I want pass this like a refence.
Now I got UI like a stack style:
[rendered real ag-grid-angular]
[rendered ng-scrollbar with his content]
But it isn't that I need. Also I got bad rendering with artifacts and even some components doesn't appear. Now I want to try use Renderer2 for putting ng-scrollbar element between two DOM elements in tree(.ag-body-viewport-wrapper and .ag-body-viewport). But I think it's very bad idea because Renderer2 doesn't have methods for putting elements between DOM elements in tree and my code will be very unlify and complicated :( It's must be like injection.
No, I can not do injection in DOM with Angular tools. It's bad idea do it and it is not possible now. AgGrid doesn't support customization with tools like ngx-scrollbar which using ng-content for wrapping components and other elements. May be better way using other tools which working by another way or using webkit customization which supports not all web browsers.
UPDATE
Also I try to use smooth-scrollbar. I managed to get better result. I bind him to element .ag-body-viewport. It works fine but it scrolling only content of grid without header be careful. smooth-scroll bar doesn't have options for horizontal and vertical scrollbar as a different units. I know how issue can be solve. Vertical scrollbar must be bind to .ag-body-viewport and horizaontal scrollbar must be bind to .ag-root. If your can find scrollbar which let you do it that you can solve this problem. May be I write special component for Angular in near future and then add link to this answer. If you do it faster you can add yourself link or you can add link to already existing packages.
Is there an equivalent Greensock (GSAP) implementation or plugin that has similar behaviors to Metafizzy's Isotope.js (Masonry layout). Specifically, I have implemented a series of card and card promotion animations in isolation. I am now at the point of merging these into a single prototype. I am working behind a colleague who put together a separate prototype using Isotope that supports card shuffling even with cards "growing" to different states. I am unifying both internal efforts. Before I engage on GSAPifying Isotope, I would like to know if there is an existing or similar implementation that I can leverage.
Thanks in advance for your time!
Chris
For anyone still googling this, a quick solution to have gsap render the isotope animations is using the jquery-gsap-plugin that can be downloaded at their website. It needs to be added after all the other libraries, for example:
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.gsap.min.js"></script>
What this does is override all the jQuery.animate() methods - which is awesome. There are some exceptions however that are listed on the website as well.
Now the only thing that is left to do is tell isotope to use jQuery as the animation engine, details can be found in the documentation.
$('#grid').isotope({
itemSelector: '.item',
layoutMode: 'fitRows',
//etc
animationEngine: 'jquery'
});
And viola! The only caveat here that jQuery is required, so for anyone using pure vanilla or whatever will have to override the animations manually - how that's done is a whole other topic.
I'm aware of the JoomlArt JA Wall template but it doesn't appear to meet our use case as we have the need to include tiles in the feed that are Adsense banners. I've read up on JQuery Masonry and see that it uses the infinite scroll feature.
Is it possible to create a Joomla template using Masonry that also will take Adsense banners ?
Of course it's possible, just make sure you add the class you choose for masonry to each element; depending on what kind of elements you want to align: modules? blog items? it should be fairly easy; if you want to apply masonry to items across the whole page, just make sure you don't enclose modules and blog items in their own div groups.
I have a basic app I'm creating with a Top Nav button Bar a bottom button Bar and a Viewstack for content in the middle. The catch is the content, and skins are completely dynamic based on XML I'm loading. Therefore I have to create the ViewStack dynamically (because I don't know how many children it could have) and the same goes for the top and bottom Nav button bars. Now, I could handle this very neatly with Flex 3 , however I want to to do this with Flex 4 and would like to take advantage of its new logic and skinning separation architecture. I have seen many tutorials on this as far as components known at compile time but not for custom class creation. Can anyone list some good tutorials? thx - Mike
I could not find any tutorials , so I figured I would create my components dynamically as I would in Flex 3, the only difference would be that if I have a component I need to skin, in my case a button, and I'm creating it dynamically I would use :
btn_nav.setStyle("skinClass",skins.NavMainToggleButtonSkin);
Where the host component is : [HostComponent("spark.components.ToggleButton")]
I also am using custom Spark Viewstack that a developer wrote:
spark Viewstack
Also this article helped me with creating a custom component and connecting wih a skin class and how it relates to the component lifecycle:
http://flexguruin.wordpress.com/2010/12/08/flex-4-spark-component-life-cycle/
-Mike
How can i change the look of the jqgrid without changeing the stylesheet. Basically im using jqueryui to style my site but i want to use different background images for just the grid. Is this possible?
Is it that you want to apply several jQueryUI themes to the same page, and have jqgrid use one of them while having other elements in your page use the other?
You may want to look at this page which discusses how to add scope (I'm assuming the easy way is to have the rest of your page use the manually scoped theme, and have jqgrid use the "default" scope, unless you want to dig into the jqgrid jquery extension code to see how to use a custom scope)
I haven't done this, but the strategy that I would use would be to define some alternate styles for your grid, keeping the same basic CSS definition layout that jQuery UI uses, but redefining the style content the way you want it. I'd make sure that these styles are included after the jQuery UI style sheet. Then I would use javascript on document load to go and apply the new CSS classes to elements of the jqGrid that have the matching jQuery UI classes to your styles.
I think it will be a major pain as there are many classes and I'm not sure that I would do it since sort of defeats the purpose of having a theme.
.jqgrid-widget { ... override widget styles ... }
.jqgrid-widget input, .jqgrid-widget select ...
.jqgrid-widget-content { ... override widget-content styles ... }
$(function() {
$('#myGrid .ui-widget').addClass('jqgrid-widget');
$('#myGrid .ui-widget-content').addClass('jqgrid-widget-content');
...
});
This function removes all (at least almost all) the jquery ui candy
/* Remove jquery-ui styles from jqgrid */
function removeJqgridUiStyles(){
$(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
$(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
$(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
$(".ui-jqgrid-pager").removeClass("ui-state-default");
}