I am developing an application using ExtJS.
I have an Accordion and need to select an active item(so it expands).
Accordion.setActiveItem outputs the following:
"setActiveItem" is not a function in a browser's error window.
Second issue is that hideCollapseTool property, when set to true in the initialisation, doesn't do anything. Collapse tools still are being displayed.
I am using ExtJS 3.1.1.
I would be very thankful for any tips and answers.
I have had little luck with setActiveItem myself. Examining it in Firebug, the accordion panel doesn't even have that method.
What I did to get around it was to call expand() on the item I want to have focus,
e.g. :
accordion.items.itemAt(2).expand();
You can also expand some item in an accordion panel by it's component id like this:
Ext.getCmp('myAccordion').expand();
Ext.getCmp('myAccordion').items.key('myAccordionPanel').expand();
I fixed it in a controller with a ref called userview
this.getUserview().items.items[1].expand();
Ext.getCmp('myAccordion').getLayout().setActiveItem(0); // First Child
Ext.getCmp('myAccordion').getLayout().setActiveItem(1); // 2nd Child and so on
I spent a good 6 hours wrestling with this. collapse() and expand() didn't seem to be working. I'd expand a panel under the accordion and other panels would break.
Finally figured out there is some issue that happens if your accordion is hidden and then you show() it right before collapse() and expand() operations on the sub-panels.
My workaround was to never set the accordion to "hidden=true" and never show() it. Instead, I used style={opacity:0} to begin and then set opacity:100 when I needed to see it. This fixed everything, but isn't the most graceful solution.
Related
By default, clicking a UIkit nav accordion submenu row will close any already open submenu as it opens its own. But if you click a non-submenu nav row, it does NOT close already open submenus. The docs (https://getuikit.com/docs/nav#accordion) perform the same way.
I find this behavior inconsistent and undesirable. Ideally there's be be a UIkit.nav(element).reset(); method to close all open menu items, but none seems to exist.
My guess is that I need to use the built-in click event, but I have no idea how to approach this. UIkit JS docs and examples are few and far between, adding to the challenge.
My workaround is here ... https://codepen.io/neokio/pen/OrMNZY ... which basically involves finding the index via ...
var open_index = $('#left-col > div > ul > li.uk-open').index('.uk-parent');
... and then UIkit's native toggle method ...
UIkit.nav('.uk-nav-default').toggle(open_index, true);
Thanks to #zzseba78 on gitter.im for helping me refine the index.
I'm using swiper with framwork7 to have swipeable tabs, it comes with this class tabs-swipeable-wrap which allows get it.
However, I need to create dynamic slides so what I have tried so far is append and appendSlide.
The best result I have is swipeable slides however I can't go more than the 2nd slide as it jumps back to the first one.
I have tried calling
update();
also tried with and without tabs-swipeable-wrap class
All works except for the swiping.
Is there a way to call tabs-swipeable-wrap manually maybe!?
Okay, so I found the solution, simple:
var mySwiper = document.querySelector('.swiper-container').swiper
So get the inilized swiper and use update(); after appending instead of reinilizing it.
http://jsfiddle.net/wztgb8e5/6/
There is problem with script. You have tabbar with id linked to tab1,tab2,tab3 where as you are appending swiper slider with id tab0,tab1,tab2. this will repeat for each click. so there is match for tabbar href and tabs ids. if you rectify it. then it will work fine. I have made some update to the fiddle check that too.
I'm working on a project and I am attempting to create a modal dialog "pop-up" to capture data in a form. I haven't worked with jQuery UI's Dialog widget previously, but I've worked with others and it seemed straight forward.
I created the following very simple code snippet to test as I went along:
<div class="app-email">
<div>
<a href="#"
class="app-email-opener">
Click to add or edit your e-mail settings.
</a>
</div>
<div class="app-email-modal">
Oh, Hai.
</div>
</div>
$('.content').on({
click: function () {
console.log('I was totes clicked.');
var parent = $(this).parents('.app-email');
console.log(parent);
var target = parent.find('.app-email-modal');
console.log(target);
$(target).dialog('open');
}
}, '.app-email-opener');
$('.app-email-modal').dialog({
autoOpen: false,
modal: true,
show: false
});
For reference: the class 'content' is a higher level block to catch delegated events without having to go all the way up the DOM.
The issue I'm running into is that the div with class="app-email-modal" seems to flash onto the page and then disappear from the DOM completely. jQuery, therefore, isn't able to find it and do anything because at that point it simply doesn't exist.
The overall project is in ASP.NET MVC 4, using Visual Studio 2013.
Any information would be greatly appreciated.
So, finally discovered what's happening via this previously answered question:
Jquery Dialog - div disappears after initialization
//EDIT
For any possible future usefuless -
What was happening was that jQuery UI will move any DOM elements specified as Dialogs to the bottom of the page, rather than keep them in the location specified in the HTML markup. So, in my case, I was looking for things by class, but only within the scope of the app-email-openers parent app-email div.
To remedy this, I used templating (in my case, Razor) to add unique ids to each app-email-modal div, and added a data- attribute to associate the link with the specific unique id. This way they jQuery UI can move the elements as it sees fit, but there still easily accessible.
//END EDIT
I feel like that functionality should be better spelled out in the documentation. Even their own example doesn't operate like this.
Corollary: I attempted to use the appendTo option to have the DOM elements not be shifted to the bottom of the page, but they're still moved to the bottom. So, there's that.
I'm new to this site.
Javascript is not much, but I found a code to show and hide divs.
This is what I have for now, when clicking on Details1 also shown Details2
jsfiddle.net/qU3TG/3/
How I can do to make the effect only to the current item?
example:
If I have the options Details 1 Details 2, 3 ..... Details DetailsN, clicking on Details # shows only the div that belongs.
The effect Show / Hide, applies to everyone, not just one. I would like to help me with this code or wish I could recommend another code
I have almost one day trying to fix this problem but I couldn't fix it.
Based on your jsFiddle, I've renamed the links inside hidden blocks:
hide
then updated the jQuery code:
jsFiddle
Use this as in your jQuery part:
$('.slidingDiv .hide').click(function(){
$(this).parent().slideToggle();
});
This will cause the parent div which contains the hide anchor to toggle. I hope this is what you needed
I have two lists in which using jQuery sortable i can move the items between them.
$( '#productsList, #orderList' )
.sortable({connectWith: '.containerDiv'})
.disableSelection();
However I run into a problem when i want to use custom scroll bar and set overflow:hidden; on the two lists. I want them to be with max-height:400px.
If i set overflow hidden i cant see the items after i drag them outside of one div, If i dont set hidden the list will have default scroll bar.
Can anyone suggest a solution.
thanks
If you remove the style position:relative from your lists is seems to work as you want it to.
http://jsfiddle.net/cCDcQ/2/
Edit:
I would have thought that using the appendTo option would fix this issue and I was right. After a bit more fiddling, I got it to work. This way, you can keep the position:relative if you need it.
http://jsfiddle.net/cCDcQ/4/
I know this ticket is somewhat dated, but I had ran into the same issue while using my custom scrollbar solution and attempting to drag between Sortable's with overflow hidden. After adding code to fix-up Sortable to work with my Scrollpane, I noticed what appeared to be an omission for the appendTo functionality.
The code for appendTo only appends the helper to the target if it doesn't exist in the DOM. That's why the clone options works for some (but not for all and I won't go into that here). The key to fixing it was to add this code toward the end of the _mouseStart function of the widget:
if (!this.helper.parent().is(this.appendTo)) {
this.helper.detach().appendTo(this.appendTo);
// update position
this.offset.parent = this._getParentOffset();
}
Note that this.appendTo is set-up earlier in the function:
this.appendTo = $( o.appendTo !== "parent" ?
o.appendTo :
this.currentItem.parent() );
With this fix in place, I specified an appendTo that targeted the div that contained both Sortable's and ceased to have the overflow issue.
The complete fix-up, including other flow fixes, is available in the scrollsortable JS file for the jQuery-UI-ScrollPane available here: https://github.com/borgboyone/jQuery-UI-ScrollPane.
Cheers!