Owlcarousel (1.3.3): Adding Item without jumping back - javascript

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.

Related

dGrid: Using DnD and Paginaiton together

I am using Dgrid with pagination extension to display Data. For the same grid I have implemented grid's DnD. So I can move rows up and down and rearrange row index using it.
But now, as the number of rows have increased, the grid is divided into more than 5 pages. In this case, how can I move the rows from my 5th page to 1st page using DnD?
One possibility I see is by changing the page on hover of pagination bar at bottom. As per the docs there is one method called as gotoPage which switches the page programmatically. But, how to capture grid pagination hover event? And how to get page number on hover so that can be passed to gotoPage method above.
Solved this using Dgrid events on dom nodes. So basically, we can attach event for pages like below
grid.on('.dgrid-footer .dgrid-pagination .dgrid-navigation .dgrid-page-link:mouseover',function(event){
var pageindex = event.target.textContent.trim();
if(!isNaN(pageindex)){
grid.gotoPage(pageindex);
}
})
This will give control to dragged page number and then you can handle the rest afterward.

Multiple instances of same variable

I'm using an AJAX call to pull filenames from a database which are then used to populate a carousel with images of the same name.
My web app makes use of tabs which when tapped, reload the AJAX and pull from the database a different set of filenames which then repopulate the carousel.
What I'm finding is when the web app initially loads, the carousel works fine, but if I tap any of the tabs, the carousel begins to function incorrectly, i.e. the first time I tap and then use the carousel the carousel moves by two images at at time, a second tap and the images move three at a time, so on and so forth.
If I check console I can see that following the call, when I click either the left or right arrow in the carousel, it's as if there are two instances of the same variable, or as if both AJAX calls are being called in some way. Image attached to show what I mean.
As you can see, following initial load everything is fine, however once any subsequent calls are made it's as if the count from the previous call continues, and a secondary count also starts associated with the new data, or a third or fourth or fifth, dependent on how many calls have been made.
$('.tabs-nav li').on('click', function() {
tabName = $(this).html();
place = 0;
products = getProductDetails(selected); //AJAX call
data = dealWithData(products, place); //Deferred object that works data
});
Sounds like you are having a scoping issue. The easiest way is to have your logic in a closure so your variables get scoped to the particular tab. So instead of something like this:
var place,count
$(".tabs").on('click',function(){/*shares same place & count */});
it would look like this:
$(".tabs").each(function(){
var place,count
$(this).on('click',function(){/*each has their own place,count*/});
});

Highlight last inserted document in Meteor

I have form and list of objects at the same page. When I insert a new row, it is not very easy to see where the newly inserted row is placed. Therefore, I thought I could color/highlight the newly inserted row (and perhaps remove the highlight after a few seconds).
How can I do this? I think a way to do this could be using a method on the server which returns the inserted id (return Collection.insert(doc);) and on the client use a callback with
Meteor.call('insertDoc', function(err,result) {
// do something with result
});
I think I can use a reactive-var to save the id of the last inserted row and in the loop highlight the row with
{{#each docs}}
<li class="{{isActive}}">{{name}}</li>
{{/each}}
and have a helper to return active if this._id equals the reactive var with the last inserted id.
But is this the best way to do it? How can I remove the color after some seconds? I have seen such behaviour on many pages but I cannot find any tutorials/code snippets to achieve this.
I wrote a package that uses Meteor's UI hooks to fade items in and out of a list as they are added and removed, to help users maintain context as data changes:
https://github.com/mizzao/meteor-animated-each
There is a demo at http://animated-each.meteor.com/. You can see that as items are added and removed, they are faded in and out. If items are inserted off the screen, the visible area does not scroll.
This isn't doing exactly what you want, but you can use the same idea to highlight items as they appear as well, as opposed to the simple fade in.
Note that all of this happens at the UI rendering level - not the template/code level. The UI hooks are also not well documented right now, but they've been around for a while.
I don't know if your method is the best, but that's how I'd go about doing it.
As for the animation, I'd use a CSS3 animation. Plenty to choose from ( https://developer.mozilla.org/en-US/docs/Web/CSS/animation ), and you can easily make them fade to the standard color. The animation would also only be applied to the last inserted item (because of the way you did it, only the last item would have the "active" class)

Troubleshoot simple jquery expand/collapse with iframes?

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(...);

Items in Sencha Touch Carousel disappearing

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.

Categories

Resources