Re-Initialize jquery anythingslider - jquery-plugins

Currently, my anythingslider has too many slides to fit in the wrapper without wrapping some elements below the others. This should make sense to users of this plugin. I'd like to show/hide some of the invisible elements as the back/forward buttons are clicked. My problem so far is that the plugin is looking for elements that have been hidden after it's been initialized.
Is there a way to re-initialize the plugin so all slides are up-to-date on the fly?
I really hope this makes some sense!
Thanks.

This functionality was added in AnythingSlider version 1.5... there have been a few updates since ;)

Calling anythingSlider(); will re initialize the the slider. No need to specify the options. Just call $("#element").anythingSlider();

Related

custom card component Vue.js + Vuetify

I found this card component example on the internet and would like to build something similar with Vuetify. I'd like to know what is the best/easiest way to approach this? Using default v-card and add custom elements/css inside.Or building the whole card with Vuetify gid?
You can recreate something similar with an outlined v-card with only a v-card-text child. The top section looks like an outlined v-alert with left border. Use v-row and v-col (col-auto on all) grid inside, with v-spacer for the whitespace after first column. Bottom section will also have the grid. You could also put the v-alert inside v-card-title for similar effect but I don't think the banner alert is appropriate as a "card title".
Vuetify is a Vue UI library that provides ready-to-use components saving the developer time. So if the components Vuetify makes available to you are fine out of the box, you're fine, otherwise there's nothing wrong with adding custom CSS. In reference to the screenshot you attached, vuetify allows you to make that card in a practically identical way. In addition to studying the functioning of the basic components, I recommend that you take a look at the ready-made CSS classes that Vuetify provides you. Thanks to those you can do a lot of things. I hope I was helpful.

Angular5 pass DOM object to ng-content

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.

admin-on-rest: How to set the value of a TextField with an option selected in a DefaultOptionsField

I have a SimpleForm within an EditView, where the SimpleForm contains a DefaultOptionsField and a TextField.
The idea is to select an option in the DefaultOptionsField, which then updates the value of the TextField.
I can make this work by updating the TextField on DefaultOptionsField onChange using basic JavaScript, but I would prefer a more Admin-on-Rest and React-like way to set the TextField's value. Yet somehow the EditView layer seems to complicate things for me - I have yet to find a simple, clean and elegant way to make the TextField and DefaultOptionsField interact in that vein.
Is there maybe some basic example code of how I might structure such a solution within Admin-on-Rest?
Your use case pretty much describes AOR Dependent input. Check it out here
https://github.com/marmelab/aor-dependent-input

changing navigation in magento dynamically

I want to know that can i change the navigation menu dynamically,i am having two tabs on the basis of which i want to render the navigation menu.How can it be done
Thanks in advance
For usability reasons, the global navigation generally shouldn't change. Users will expect to see the same options available to them and will get confused (and leave) if they aren't.
Could you explain the requirement more?
EDIT:
Usability issues aside, try adding all necessary items to the top nav, then use Javascript to toggle between tabs. If you don't want to change the navigation PHTML files to add IDs to them, you can use the existing classes to target which nav items to show and which to hide.
Since Magento stores cannot function without JS anyway, you should be pretty safe with that solution. Preferably, you can change the top nav's template (I believe app/design/frontend/base/default/template/page/template/links.phtml in 1.4) to use IDs for those LIs as well, in which case you can target those instead.
Thanks,
Joe

Can Subccategories be included in the menus directly?

Hi I just want to know that how can i add Subccategories in the Navigation menus without making the parent category to show up there Any Ideas???
thanks in advance
This will take quite a bit of surgery to make this happen in a programatic fashion. You'll need to override the Mage_Catalog_Block_Navigation::_renderCategoryMenuItemHtml() method.
Alternatively, you might be able to hide the parent categories using your skin's CSS? The ul#nav li elements have quite specific class and id values that should allow you to show or hide them. However I suspect given the complexity of the fly-out nav, you may find it more efficient to rewrite the PHP. It probably comes down to where your proficiency lies.
HTH,
JD

Resources