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.
Related
i was working on woocommerce site.My Site . The single product page has a control generator with a number of drop down options.So when a user selects each options he cannot see the changes happening at the top.So i position the image div as fixed.As follows.
.single-product .images{position:fixed;}
this made the image fixed but it is floating till down the page.I only need it just before the description/review tabs starts.Is there any other css or any js/jquery solutions to solve this .Please help.Thanks!!
Based on your website environment, you need something like this:
var images = jQuery('.images');
jQuery.fn.followTo = function (pos) {
var $this = this,
$window = jQuery(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos - $this.height()
});
} else {
$this.css({
position: 'fixed',
top: 'auto' //earlier it was 0
});
}
});
};
images.followTo(jQuery('#myTab').offset().top - images.height());
You may need to re-position the elements a bit, but the script will work on your website, as I tested with firebug.
I have note written this script, the script attributed to: Stopping fixed position scrolling at a certain point?
Let me know if you can take it forward from here :)
I am using parallax.js to animate a series of elements on a homepage. I searched for code that would allow me to add a simple "slider" effect to the elements as well.
Everything seems to be working properly, except that after the first li, the parallax effect only works horizontally. On li #1, the element hovers as expected, following the mouse in every direction.
Here's a link to jsfiddle: http://jsfiddle.net/sdeviva/t6uwq/1/
Here's a link to the revised jsfiddle: http://jsfiddle.net/sdeviva/t6uwq/5/
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
var scene = document.getElementById('scene2');
var parallax = new Parallax(scene2);
(function($) {
$.fn.ezslide = function ( options ) {
var defaults = {
fadeIn : 1000,
fadeOut : 1000,
delay : 500
},
settings = $.extend( defaults, options ),
$this = this,
cur = 0,
fadeIt = function( which ) {
var li = $this.find('li');
cur = which = (which >= li.length) ? 0 : which;
li.fadeOut( settings.fadeOut );
li.eq( which )
.delay( settings.fadeOut )
.fadeIn( settings.fadeIn, function(){
setTimeout(function() {
cur++;
fadeIt( cur );
}, settings.delay);
});
};
fadeIt( cur );
};
$('ul.scene').ezslide({
fadeIn : 600,
fadeOut : 600,
delay : 3000
});
})(jQuery);
EDIT: I sort of fixed this. I don't really know what I'm doing, so there's probably a cleaner way. But, I realized that the parallax effect was only being applied once to the first list item. The script that makes each item fade in wasn't getting the benefit of the parallax.js script.
SO - I put each fading element into its own ul, with a unique id, and a shared class. By some miracle, this actually works. But let me know if there's a better way.
This is an interesting one. The issue is that the parallax code sets the very first layer to position: relative and all others to position: absolute. This has the effect of making the parent ul have the dimensions of only the first layer. This is normally fine, except that when you display any element other than the first, the first is hidden. This causes the ul to have 0 height. The parallax depends on the height of the scene, as a result no height means no vertical movement.
You can fix the issue by applying a fixed height to your ul:
#scene{
height: 128px;
}
http://jsfiddle.net/t6uwq/7/
You can find greater detail on the motion calculation in the documentation on github.
I have three divs and i am trying to show/hide div2 when we click on any div. So far i have succeeded in it but now i want to implement some animation while show.hide the div.
I tried a lot and read many solution but due to i am new to jQuery i cant do it. Here is my code that i tried before animation
http://jsfiddle.net/9Lw6T/119/
$(".more , .expander,.headingopen").click(function() {
var expanderDiv = $(this).parents(".content_item").find(".textContent");
if ($(expanderDiv).length > 0 && $(expanderDiv).hasClass("expander") ) {
$(expanderDiv).removeClass("expander");
var MoreDiv = $(this).parents(".content_item").find(".more");
$(MoreDiv).html("Mindre");
}
else {
console.log("addclass");
$(expanderDiv).addClass("expander new");
var MoreDiv = $(this).parents(".content_item").find(".more");
$(MoreDiv).html("More");
}
});
jQuery(document).ready(function() {
jQuery(".more , .expander,.headingopen").click(function() {
jQuery('.expander').slideToggle("slow");
});
});
After Animation or slidetoggle
http://jsfiddle.net/9Lw6T/123/
Is there any way to animate the divs and stop at certain height while slideup as before animation i have done it in my first try without animate. Slidedown needs auto hide and its working with this code.
Thanks
There is an issue when using jQuery animate going to auto so you have to do a little work around (see: JavaScript jQuery Animate to Auto Height)
// get the current height
var curHeight = $textArea.height();
// set set the css to auto height and get how tall it is
var autoHeight = $textArea.css('height', 'auto').height();
// set the css back to the original height, then animate to the new height
$textArea.height(curHeight).animate({height: autoHeight}, 1000);
Here it is all together
http://jsfiddle.net/9Lw6T/127/
I have 20 different divs.
5 class="icon",
5 class="rainskin",
4 class="schoolproject",
4 class="wallpaper", &
2 class="miscellaneous".
Each div has one div with class=".type". I have the header portion (about 27 pixels) of the .type div showing, but the rest of it is hidden. When someone hovers over the .type div, it slides up (by changing the margin-top: to 0px). When the mouse no longer hovers it, it goes back down to its original spot (margin-top: 110px).
Here's my fiddle. and java code.
(function ($) {
var original = [];
$('.type').each(function (i) {
original.push($(this).css('margin-top'));
});
$('.type').hover(function (e) {
$(this).stop().animate(
{"margin-top" : (
$(this).parent().outerHeight() -
$(this).outerHeight()
)},
250
);
}, function (i){
var i = $('.type').index($(this));
$(this).stop().animate(
{"margin-top": original[i]},
250
);
});
}(jQuery));
It works perfectly fine, UNLESS someone hovers over one .type div, and goes to hover over another .type div BEFORE the first .type div slides back down. THEN the .icon, .rainkin, .schoolproject, etc. div is moved down a bit. Go to my fiddle and check it out yourself. I don't know why it's doing it.
when you use "margin-top" you're actually messing with the flow of the css divs, so if you use "top" rather , the position just applies to that div, you also need to set .type as "relative". One other thing, your original position can just be "0", and the amount to pull up can be the size of your .type div.
Check this modification out:
(Test here: http://jsfiddle.net/gfefN/9/ )
(function ($) {
var original = [];
$('.type').each(function (i) {
original.push(0);
});
$('.type').hover(function (e) {
$(this).stop().animate(
{"top" : -(
$(this).height()
)},
250
);
}, function (i){
var i = $('.type').index($(this));
$(this).stop().animate(
{"top": original[i]},
250
);
});
}(jQuery));
I have a piece of code here which it works but not sure why my fadein and fadeout doesn't work for the body,
If you think what the issue i'm having please let me know thanks
<script type="text/javascript">
$(window).load(function() {
var lastSlide = "";
$('#slider').nivoSlider({
effect: 'random',
directionNavHide : true,
slices : 15,
animSpeed : 500,
pauseTime : 6000,
controlNav : false,
pauseOnHover : true,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
beforeChange: function(){
if(lastSlide == "images/header_used.jpg") { //use the bg image of the slide that comes before the newslide
$("body").attr("style","background: #000 url(images/bg.jpg) top center no-repeat;").fadeIn("slow");
} else {
$("body").attr("style","background: #ADADAD url(images/bgnd_grad.jpg) repeat-x;").fadeOut("slow");
}
},
afterChange: function() {
t = $(this).children("a:visible");
lastSlide = $("img", t).attr("src");
}
});
});
</script>
While it may solve your mission with the body background. i would instead have used addClass and removeClass. You are manipulating the style attribute which also show/hide uses it.
I have no way to test it but what happens if you switch the fades to show() and hide(), just to determine if delay is a factor.. :)
It my come by the fact that "lastSlide" variable could store multiple object (the one from img and the one from visible link).
t = $(this).children("a:visible");
lastSlide = $("img", t).attr("src"); //could store multiple source.
This make comparation a little bit tricker and could create bug.
Plus the fact that you use the worst way to style your body. As other says, use class or .css jQuery function (http://api.jquery.com/css/).
Hope this help
fadein and fadeout work for body,absolutely.
as Reflective said, it should be
$("body").css("background","#000 url(images/bg.jpg) top center no-repeat;").fadeOut("slow")
if still doesn't work, you may should look into your nivoSlider function