I'll try to lay this out as thoroughly as possible:
I'm working on behavior for an SP2013 app that displays employee profiles on team sites.
- The app displays employee profile "bubbles" 5 at a time, with scroll arrows to advance or go back at the bottom.
- Clicking on the profile "bubble" takes you to the employee's complete bio.
- You can preview the bio from the existing list by clicking the preview button in the bubble, this is where the accordian-like action comes in.
I have come up with plenty of options for animating this action, but have run into two significant challenges:
- Previewing the bio for the top "bubbles" works fine. It expands and pushes the lower bubbles off of the viewable area as desired. However, the lower "bubbles" push their own expanded bios out of the viewable area. How can I identify those bubbles that would expand themselves out of the viewable area and instead have them reach up, pushing the items above them out of the viewable area?
- Only one bubble should open at a time, opening another should close any that are currently open as part of the action and animation. I can do this fine in the browser just by indicating $(this). SP2013 however, seems to have issues with $(this) as the app is loaded in an iFrame and the IE 9 and 10 (my only options) interpret "this" as the entire iFrame itself. I'll reiterrate that this occurs only when loading this as an SP 2013 app. It works fine normally. How can I get the same functioanlity without using $(this)? Bear in mind that I am dynamically loading the list of employees which is always changing which makes it hard (for me) to give each bubble a unique identifier.
I haven't gotten far with my jQuery because of the issues listed above but somethign as simple as this provides the basic animation I'm looking for:
$(function() {
$('.profileBubble .clickPre').click(function() {
$('.profileBodyPreHolder').toggle(500);
});
});
Obviously, .profileBodyPreHolder is hidden by default.
Here's my basic structure:
<div class="profileBubble">
<div class="topprofileLine">
<div class="profileName">Jason Thomas</div>
<div class="profileAttach"> </div>
<div class="profileImage"> </div>
</div>
<div class="midprofileLine">
<div class="profileTitle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, consectetuer adipiscing elit.</div>
</div>
<div class="botprofileLine">
<div class="bdlLeft">
<div class="status">Status: Active</div>
<div class="KSA list">KSAs</div>
</div>
<div class="bdlRight">
<div class="clickPre"><a href="#">Click to preview <img src="images/ArrowSm.png"/></a></div>
</div>
</div>
<div class="profileBodyPreHolder">
<div class="profileBodyPre"> Maecenas porttitor congue massa.
</div>
</div>