I'm currently building an application using Sencha Touch. We have a certain Carousel on a page that contains multiple items. Upon clicking a button on a different panel, certain items are added and removed to the panel.
The problem: all works as planned for the first click, but clicking upon clicking the same button again, the functionality stops working and the Carousel display turns blank, with none of the items visible.
Below is the handler for the buttons that change the content of the carousel itemsCarousel. The function adds itemPanels[ b.getBadgeText() ] to the itemsCarousel's items. For the first four clicks or so, this works great. After around then, when I click a button, all the items in the Carousel vanish, and I cannot add or remove any more content, even invoking the Carousel manually from the console.
handler: function(b, e) {
itemsCarousel.insert(1, itemPanels[ b.getBadgeText() ]);
itemsCarousel.doLayout(); itemsCarousel.doComponentLayout();
itemsCarousel.setActiveItem(1);
itemsCarousel.remove(0, false);
}
Things I have attempted:
Changing the order by inserting the item at slot 0, setting 0 active, and then removing 1.
Putting javascript breakpoints on each of the lines, seeing where the carousel goes blank. Sometimes it occours at the .insert() statement, sometimes at the .remove().
Doing all this manually, from the console.
Tweaking the autoDestroy parameter in the .remove() call (as seen above) and in the declaration of itemsCarousel.
If you need more code I can post whatever you think may be relevant, I didn't want to pollute this thread with excess code. Thanks for your help!
Edit: If anyone knows another way to reproduce the same functionality, I am open to that as well. I am thinking perhaps creating a dummy holder Container with one item, a carousel, and deleting the entire carousel and re-adding a brand new (with the new items) one upon the button click?
Well, I figured out how to reproduce the functionality using a different method.
I built multiple carousels, each containing the panels I wanted, and then had a root panel that simply sets the active carousel based on button presses. For example, the hierarchy looks like this now:
rootPanel
{
carousel[0]
{
panel1
panel2
}
carousel[1]
{
panel3
panel4
}
...
}
and I perform rootPanel.setActiveItem(x) to display the new carousel.
Related
I am using a AJAX search plugin for Wordpress that displays in my mobile menu by targeting a specific menu ID (menu-item-6101). Everything works great, but when I click on it the menu is dismissed (which prevents you from doing any searches, the expected behaviour is for the menu to stay visible while typing).
I have spent a number of hours researching, and it seems that there is an onclick event attached to the <a> of that menu item that is likely causing the menu to be dismissed (note that none of the other parent -> child toggles cause this, only this menu item that the search plugin is using to display a search box).
I have tried every single variation of event.preventDefault();, event.stopImmediatePropagation(); & event.stopPropagation();, as well as trying to remove the listener, send it to null, etc. but unfortunately I am having issues with either the targeting (e.g. fetching the ID, and then targeting the <a>, or it is being overridden due to the javascript load order.
I have also tried to make an onclick event for that menu item div that forces the mobile menu to stay visible (the menu gets style="display:none;" added to when when focus is changed), so I thought perhaps that would be a different approach:
jQuery('div.proinput').click(function(){
var element = document.getElementById('#mobile_menu');
element.style.removeProperty("display");
jQuery('.et_mobile_menu').css({
display: inline-block !important;
});
});
I would really appreciate it if someone could help me.
Thanks!
I think the menu toggle is actually being fired by the div#ajaxsearchpro3_2 inside de anchor. Try with this (assuming the div will allways have the same ID):
FIXED
document.getElementById('ajaxsearchpro3_2')
.addEventListener('click', function(e) {
e.stopPropagation();
});
The final solution is:
jQuery(".et_mobile_menu .menu-item a").not(".toggle-menu").off("click");
Hope that this helps someone :)
I have a form, that when the "Next" button is clicked, a new div appears in place of the old one with this code:
function showDiv() {
document.getElementById('2').style.display="block";
document.getElementById('1').style.display="none";
}
I am then, once the form is submitted, sending my data to a server so that it is emailed to me. The problem is that the previous action, the transition between divs after the button click, is being performed far too quickly. People have told me that it would look a lot better with some sort of transition or a quick loading icon, and that it doesn't look authentic.
Is there any way to have my second div "slide" into the position of the new one? Or some sort of transition? Keep in mind, this is just switching two divs out for one another. No actual data is being processed yet, and no new page is being loaded. Or is there any way to create a loading icon on this action to last for 1second?
Thank you for your help.
Try this
// send data
// show loading gif
setTimeout(function () {
// hide loading gif
// show other div
}, 2000);
You get a 2 second delay this way. Hope it helps.
I assume you're open to using jQuery based on your tags. jQuery offers a number of ways to animate changes to divs. .animate() provides a way to do custom animations, or your can use one of the provided options. In your case, perhaps something like .fadeToggle() would work?
Detailed information here: https://api.jquery.com/category/effects/
I am creating a site where content is dynamically loaded using Ajax into OwlCarousel items, which are created as needed using the addItem() method.
As can be seen on the demo at http://owlgraphic.com/owlcarousel/demos/manipulations.html, when addItem is called, the carousel always jumps back to the first item (i.e. to the extreme left, or the first 'page'). I would like it to scroll automatically to the newly created item (i.e. to the extreme right or last 'page', to show the newly-created item). Is there some way to modify the code to make this happen? It seems that as soon as addItem() is called, the carousel jumps.
New to Bootstrap and having some issues with accordion. Hoping someone would help me resolve it.
Basically I have an empty accordion and a drop down menu. Every time a selection made in the drop down menu, it is added to the accordion, with full .accordion-group mark up, but with empty .accordion-body div. After that this accordion-group set as droppable and .ui-droppable class is automatically added.
After that I am able to drag and drop a bunch of other divs into the .accordion-group and those divs are appended to .accordion-body of this particular group. This part works fine, however, as soon as i click to expand any given .accordion-group, .ui-droppable class gets stripped from ALL of them.
How do I stop it from removing .ui-droppable class??
Steps to reproduce:
Use html markup from Bootstrap page:
(For some reason I am unable to format HTML as code here by indenting it with 4 spaces,so im just pasting the link to it)
http://twitter.github.com/bootstrap/javascript.html#collapse
Add JS, which makes groups droppable
$('#accordion2').find('.accordion-group').each(function() {
$(this).droppable();
});
Inspect elements to make sure .ui-droppable class is set
Click to expand a group. Any group.
Inspect elements. .ui-droppable has been stipped from ALL of them
Resolved this, but I think it is a very stupid way to achieve the result, so I am not happy with how Bootstrap handles toggles. I really don't think there is a need to loop though every .accordion-group to re-apply droppable attributes every single time someone opens OR closes a section.
Going to re-do it with just a button and a div for each section.
Here is the solution:
$('#host-groups').on('shown', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
$('#host-groups').on('hidden', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
/facepalm
I've got a div containing 3 divs, each containing an iframe. The 3 internal divs are 115px tall, and when you click on "view more" for each one, they all collapse, and the one then slides down to 200px.
I would like when that 200px tall one is clicked again, it will collapse and they will ALL slide down back to 115px, kind of like resetting it?
I spent 2 hours last night trying to figure it out and I'm SURE it's simple, but I'm not sure what I'm doing wrong :/
Here's the fiddle http://jsfiddle.net/demchak_alex/zUDBN/1/
Here is the solution: http://jsfiddle.net/zUDBN/5/ There were two issues. The first is that you needed this code $('.partner-wrap').slideDown("slow"); when you clicked on an item that was already selected. The second was that you were binding wrong. When you do this: $('a.normal').click(...); that will bind that function call to the objects returned by that selector on page load. After page load it doesn't matter what the selector is anymore. So that function was firing whenever the links were clicked regardless of whether they had the "normal" or "showing" class. Your second selector wasn't working for the same reason: $('a.reviews-trigger.showing').click(...);