We Keep Coding

Custom slide out div jQuery script

I am having a few more issues with a script. I am trying to achieve a responsive slide out div script for a "meet the team" page. The way I see it working is that when the persons image is clicked, it slides out their bio. I am running into a few issues though.
1) Script works fine until you click the 3rd or 4th image in the row:
When the 3rd image is clicked, it slides out the div fine, but creates a blank space on the next row (i'm assuming it is pushing the image onto a new line but also adding a margin...)
When the 4th image is clicked, it is creating the bio outside of the container. The only way I can see a fix for this would be to have it slide the opposite way for every 4th item in a row. I can add a counter class to the divs dynamically using my CMS, just not sure how to reference this in the javascript.
2) I'm unsure how to make it work responsively. I am dropping the container from 1/4 to 1/2 on tablet and mobile. So I need to basically double the margin and size of the bio container. How can I declare this in the script?
Many thanks in advance for any help. Credit to Trim Kadrui who helped me with the script so far.
JS Fiddle:
http://jsfiddle.net/QrfzA/21/
Script code:
$(document).ready(function() {
$('.team-photo').click(function() {
var teamBio = $(this).next();
var nextBlock = $(this).parent().next();
if(teamBio.width() > 0){
teamBio.animate({width: 0, opacity: 0});
nextBlock.animate({marginLeft: '0%'});
}
else {
teamBio.css("display", "inline-block");
teamBio.animate({width: '100%', opacity: 100});
nextBlock.animate({marginLeft: '25%'});
}
});
});

$(document).ready(function() {
$('.team-photo').click(function() {
var teamBio = $(this).next();
var nextBlock = $(this).parent().next();
if(teamBio.width() > 0){
nextBlock.css("clear", "none");
teamBio.animate({width: 0, opacity: 0});
nextBlock.animate({marginLeft: '0%'});
}
else {
teamBio.css("display", "inline-block");
teamBio.animate({width: '100%', opacity: 100});
if(nextBlock.position().left>10) {
nextBlock.animate({marginLeft: '25%'});
if(!nextBlock.next().length || nextBlock.next().position().left<10) {
nextBlock.animate({marginLeft: '0'});
nextBlock.css("clear", "both");
}
}
}
});
});
if(nextBlock.position().left>10) does the trick,basically it checks if the there are more than 10 pixels to the left of the nextBlock and then applies the margin left property.
I've checked to see if nextBlock.position().left is greater than 10,you can set it to suite your needs.
EDIT: nextBlock.next().position().left<10 was also needed to be checked in case,the image is last but one in that line. CSS property clear:both was used to send the nextblock to the new line instead of using a margin.
Here is the updated JSFiddle.

Bootstrap Accordion - change the position of top panel when collapse

I'm using bootstrap accordion plugin and my question is:
How can we change the position of the top panel when opened and return to its first position when closed. Please look at the photo:
Here is the pen,
and thanks in advance,

I would do something like this using jQuery:
var original = $('#accordion').position().top;
$('.accordion-toggle').click(function(){
var parent = $(this).data('parent');
var body = $(this).attr('href');
if($(body).is(":visible")) {
$(parent).animate({top: original}, 350);
}
else {
$(body).css({
position: 'absolute',
visibility: 'hidden',
display: 'block',
height: 'auto'
});
var offset = original - ($(body).height() / 2);
$(body).removeAttr('style');
$(parent).animate({top: offset}, 350);
}
});
Hope is helps or puts you in the right direction.

(CSS/jQuery) How resolve the conflict between top and bottom property with jQuery

Someone know how convert a bottom position to top with CSS transition and jQuery?
I need to change the anchor of my image. And i have this problem. There is a conflict between bottom and top.
EDIT : In my scenario, the image has 100% of the width of the screen. And when the window is resized, i have a code in JS whoes get the new position of the image. If my anchor is always "top" for example, in some situations I have this hole who show-up for severals milliseconds and if I set at this moment bottom instead of top it will fix my issue. But I have this "jump" in the animation.
I made this fiddle to understand my issue.
Sorry for my English! Someone have an idea about this? Thank you !

You can get around the jumps by using a class, and removing the inline style as you go, like so:
if ( image.hasClass("bottom") ) {
image.css("bottom", "").animate( { top: "0" } , 1000, function(){
image.removeClass("bottom");
});
} else {
image.css("top", "").animate( { bottom: "0" } , 1000, function(){
image.addClass("bottom");
});
}
and add a css class
.bottom {
bottom: 0;
}
as per http://jsfiddle.net/rZPq3/
edit for cross-browser:
var top = image.position().top + 'px';
var bottom = image.parent().height() - image.height() + 'px';
if (image.hasClass("bottom")) {
image.finish().css({ "bottom": "", "top": top }).animate({ top: "0px" }
, 500, function () { image.removeClass("bottom"); });
} else {
image.finish().css({ "top": "","bottom": bottom }).animate({bottom:"0px"}
, 500, function () { image.addClass("bottom"); });
}
http://jsfiddle.net/wCuuX/

You should stick with one of the properties to avoid conflicts. I changed your fiddle to use top only and using a class to toggle the value instead.
var toggle = $("button#toggle");
var image = $("div img");
toggle.click(function () {
image.toggleClass("toggled");
});
See updated test case on jsFiddle.

How to implement jquery like slideDown() in zepto

I am using zepto library for my mobile web site. I have recently learnt that zepto does not have slideDown() plugin like jquery. I would like to implement the same for zepto.
I have tried one on jsfiddle (http://jsfiddle.net/goje87/keHMp/1/). Here it does not animate while showing the element. It just flashes down. How do I bring in the animation?
PS: I cannot provide a fixed height because I would be applying this plugin to the elements whose height property would not be known.
Thanks in advace!!

Demo: http://jsfiddle.net/6zkSX/5
JavaScript:
(function ($) {
$.fn.slideDown = function (duration) {
// get old position to restore it then
var position = this.css('position');
// show element if it is hidden (it is needed if display is none)
this.show();
// place it so it displays as usually but hidden
this.css({
position: 'absolute',
visibility: 'hidden'
});
// get naturally height
var height = this.height();
// set initial css for animation
this.css({
position: position,
visibility: 'visible',
overflow: 'hidden',
height: 0
});
// animate to gotten height
this.animate({
height: height
}, duration);
};
})(Zepto);
$(function () {
$('.slide-trigger').on('click', function () {
$('.slide').slideDown(2000);
});
});​
​

This worked for me:
https://github.com/Ilycite/zepto-slide-transition
The Zepto Slide Transition plugin add to Zepto.js the functions bellow :
slideDown();
slideUp();
slideToggle();

Speransky's answer was helpful, and I'm offering a simplified alternative for a common drop-down navigation list, and separated into slideUp and slideDown on jsfiddle: http://jsfiddle.net/kUG3U/1/
$.fn.slideDown = function (duration) {
// show element if it is hidden (it is needed if display is none)
this.show();
// get naturally height
var height = this.height();
// set initial css for animation
this.css({
height: 0
});
// animate to gotten height
this.animate({
height: height
}, duration);
};

This would work for what you need:
https://github.com/NinjaBCN/zepto-slide-transition

Change Div Y Position with mouse wheel and sidebar

I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.
I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):
UPDATE:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("body").offset();
$(window).scroll(function ()
{
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
}
else
{
$("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
Thanks

You can use
$(window).scroll(function() {
// Your scroll code here
});
to grab whenever the user is scrolling on the page.
Next you want to change the div's y-value.
If the div is positioned absolute, this is just changing its top-value.
$('my-div').top = original-top-value + $(window).pageYOffset;

I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
The values of z-index, top and left are dummy values. Change em with your ones.
UPDATE:
Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/