I have a question related to chaining effect on elements in a Backbone.js application and how to achieve that.
I have a Backbone.js application which has multiple Backbone.View's. Each of the views is tied to a <div> element on the page and the view controls/owns that element with all it's children. My design choice is that other views don't know or care what children are in each of the views and what effects are applied to them. All other views how is that each view has a show() and a hide() method which takes care of any effects on it's children.
So, a view which owns the <body> element can call .show() or .hide() on all the "children" views to have their own elements animated.
What I would like to be able to do be able to wait until one animation has completed before another one starts. For example: I'd like the element of View1 to hide completely before the element of View2 starts showing.
I could take a page from jQuery and implement "complete" callbacks in all the .show() and .hide() calls but that gets very ugly, very quickly if there are more than two views to deal with.
Can anyone give me an idea of how to accomplish this?
I am working on a jQuery plugin which operates on the following markup:
<ul>
<li class="item">
<a href="#">
<ul>
<li class="item"></li>
</ul>
</li>
</ul>
The entire outer <ul> element has a "z-index" value of 99 and all the rest of the elements inherit that value.
What I would like to do is insert a new div element in the DOM and position in under the <a> element. When I say "under" what I mean is not "below" but really under - same vertical and horizontal position on the page but the <div> underneath the <a> element.
I know that in a normal layout, this will be achieved with the "z-index" property, however I am not sure how this plays out for the <div> element.
I've played around with inserting the <div> element before and after the <a> element but it still shows up on top of the link rather then below it.
I am attempting to use jQuery for the following purpose: 1. I have page that contains a div element which will contain my generated HTML code. The width of this div element is arbitrary. 2. In that div element, I would like to fit several other div elements which have their "display" property set to "inline-block" 3. The div elements from step 2 are returned by an AJAX call from the server after the page was loaded. 4. Once the returned HTML is placed inside the top level div (using $().html ()), I set the "display" property to "none" and then call the ".slideDown" method on the containing div to have the appearance of the newly loaded content be presented to the user.
The problem that I am see is that the sliding effect works well on the first row of child divs but then ends up jumping when it reaches the second. I have the feeling that this is due to the fact that because I generate all the child div's in one continuous line and let the browser split them into multiple "lines" depending on how many can fit inside the containing div (because I don't know it's width).
I am looking for advice on how to do this better? Any help is appreciated. Thank you