I'm trying to append a class via addClassName on future elements on a page with Prototype, however I do seem to struggle a bit with it.
I know of jQuery's .live feature, but I cannot find a similar feature in Prototype.
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.
For a project i am currently working on i need to be able to pass an elements absolute path/ selector to a ajax request.
I found this stackoverflow answer which shows how this can be achieved using jQuery, which i would love to use, however the project requires the use of prototype.
I was thinking about using:
.previousSiblings().size()
for indexing the current element, but not sure what to replace:
name += ':eq(' + index + ')';
(particularly :eq) for the path selector string.
I need to be able to select the same element again using prototypes $$('path') selector.
This jsfiddle should help you
http://jsfiddle.net/s7aWH/
I took the answer from the other stackoverflow answer and ported to PrototypeJS
the jQuery .index() is similar to the Prototype .indexOf()
and you can still use the ':eq()' CSS selector but you need to increment by one
Anyone knows where I could find a complete list of built-in DOM events in Backbone.js? I managed to guess some fancy ones like "mouseout", but just a complete list would be very helpful. Not available in official docs or google.
Thanks!
Backbone's DOM event for Views (which is what I'm assuming you're talking about) come from jQuery or ZeptoJS (whichever one you are using). Any valid event from either of those libraries, is a valid event in a Backbone view.
http://api.jquery.com/category/events/
http://zeptojs.com/
I am sure this is on here already...
I want to be able to disable autocomplete for some CMS generated form fields with some frontend javascript code, preferably Prototype but neat javascript will do if it has no cross-browser problems.
I have ids for my boxes and I am not using some clever 'prototype autocomplete' (that seems to stuff the Google results on this). Regular browser autocomplete is what I want to turn off and not for the entire form.
Knew I would find it as soon as I asked:
$$('.MacGuffin')[1].setAttribute('autocomplete', 'off');
$$('.MacGuffin')[7].setAttribute('autocomplete', 'off');
That is specifying elements by class rather than id.