I've replicated the fluid/responsive mode of Isotope: http://isotope.metafizzy.co/demos/fluid-responsive.html but with the addition of animating the width of the clicked element using "transition: width 0.3s". This does work, however it disables the 'reLayout' animation of which I'm triggering on 'transitionend'.
I'm thinking that one is overriding / conflicting with the other. Has anyone had similar issues or know a way around this? I've tried setting 'animationEngine : 'jquery', and this does resolve the issue, but it looks terrible - browser re-paining issues!?
Thanks for any help!
And here's a live demo...
http://www.voyced.com/isotope-test/
If you disable the css property "transition: width 0.3s" in the developer tools the 'reLayout' animation works again.
Issue a $(window).resize() after you animate the item.
or
$container.isotope('reLayout', function() {
$(window).resize();
});
Related
I'm working on a Wordpress site (it's in "coming soon" mode so I can't give a link) where the client wants a background image to zoom slightly. I figured I could achieve this easily with CSS animation, manipulating the background-size. It worked great!... except in Safari and IE.
Why not use an image and set the z-index and use scale(), you ask? Well, they only want the background on one post. And that means 'post', not 'page', otherwise I'd just set up a new page template and be done. It forced me to specify the background image on the individual post body class (body.postid-23.custom-background {...}).
So I need a way to animate the background-size, without hovering or clicking, as soon as the page loads. Anyone do this before? Any help is appreciated. I'm not a javascript/jquery coder, but I can use them well enough to make it work for my sites.
This is what you want:
$(function() {
$("yourSelector").animate({
backgroundSize: "100px 100px"
});
});
Just use the document.ready function in this way :
$(document).ready(function) {
$("selctorOfYourBackgroundImage").animate({
backgroundSize: "100px 100px"
});
});
As soon as the DOM has finished loading, the animation will occur!
This will fire once the page has finished loading.
$( document ).ready(function() {
console.log( "ready!" );
});
Not sure if you require the code in the middle aswell?
I have an element where I'm using the Twitter Bootstrap Affix plugin. If the window gets vertically resized to the point where it is smaller than the height of the item, I'd like to remove the affix functionality from the element since you wouldn't be able to see all of it in the window.
So far I've tried this in the console just to see if it can be removed, but it doesn't seem to be working.
$("#myElement")
.removeClass("affix affix-top affix-bottom")
.removeData("affix");
$(window)
.off("scroll.affix.data-api, click.affix.data-api");
Maybe I'm going about this the wrong way? How Can I programmatically remove the affix from an element that already had it applied?
I ended up going for a mostly CSS solution, similar to what #Marcin Skórzewski suggested.
This just adds a new class when the height of the window is shorter than the height of the element.
var sizeTimer;
$(window).on("resize", function() {
clearTimeout(sizeTimer);
sizeTimer = setTimeout(function() {
var isWindowTallEnough = $overviewContainer.height() + 20 < $(window).height();
if (isWindowTallEnough) {
$overviewContainer.removeClass("affix-force-top");
} else {
$overviewContainer.addClass("affix-force-top");
}
}, 300);
});
And then in CSS, this class just gets added:
.affix-force-top{
position:absolute !important;
top:auto !important;
bottom:auto !important;
}
EDIT
For bootstrap 3, this seems to be effective:
$(window).off('.affix');
$("#my-element")
.removeClass("affix affix-top affix-bottom")
.removeData("bs.affix");
Deprecated: Answer refers to Twitter Bootstrap v2. Current version is v4.
There are few options to try.
Use function for data-offset-top. Normally, you use the integer value, for number of scrolled pixels to fix the element. According to documentation you can use the JS function, that will calculate the offset dynamically. In this case you can make your function to return different number depending on the conditions of your choice.
Use media query to override affix CSS rule for small window (eg. height 200px or less).
I think, the second variant should be suitable for you. Something like:
#media (max-height: 200px) {
.affix {
position: static;
}
}
If you would provide jsfiddle for your problem others could try to actually solve it, instead of giving just theoretical suggestion, that may or may not work.
PS. Bootstrap's navbar component uses media query for max-width to disable fixed style for small devices. It is good to do that not just because the screen size is to small for navbar, but in mobile devices position: fixed; CSS works really ugly. Take w look at navbar inside the bootstrap-responsive.css file.
Your $(window).off is close, according to #fat (author of bootstrap-affix.js) you can disable the plugin like this:
$(window).off('.affix');
That will disable the affix plugin.
See: https://github.com/twitter/bootstrap/issues/5870
On line 1890 of bootstrap is a conditional for whether the default action should be prevented. This allows your to listen for events and if some condition is met, prevent the affix from happening.
line 1890 from bootstrap:
if (e.isDefaultPrevented()) return
Example:
$('someselector')
.affix()
.on(
'affix.bs.affix affix-top.bs.affix affix-bottom.bs.affix'
, function(evt){
if(/* some condition */){
evt.preventDefault();
}
}
);
Even though this was answered, I just wanted to give my solution for this in case someone ran into a similar situation as mine.
I modified the offset top option to a ridiculous number that would never get scrolled to. This made it so I did not have to do $(window).off('.affix'); and disable affix for everything.
$('#element-id').data('bs.affix').options.offset.top = 1000000000;
is there anyway to ease my page scroll? I'm doing a horizontal page scrolling. Its working, as you can see below, but I want to make a ease scroll.
Already tried to scroll it whit css3 transitions on jQuery (via Transit) and didnt work because it triggers too many times.
How can I do this?
Thanks!
$('#holder')
.bind('mousewheel', function(event, delta) {
this.scrollLeft -= (delta * 20);
});
You would have to use animate function. A simple example I have done is here
http://jsfiddle.net/bd6pf/2/
Scroll to the right and and try to scroll on element
I have been over this and its best to just use jQuery to do this or at least javascript, I know its cool to use CSS3 and I try to use it as often as possible but in this case I would stick with the javascript.
Here is a great one that I have used:
http://pagescroller.com/
Here's the breakdown...
wrapper (position:relative; overflow:hidden; )
section-container (position:absolute)
multiple child sections
I attach a mousewheel event listener and animate (with easing) the 'top' position of 'section-container'. As this position changes, the 'background-position' of each section moves vertically based on the position of 'section-container's 'top' property (continually updated through a setTimeout()).
All of that works as it should, except as the 'background-position' changes, the image has a bit of a jitter. This doesn't happen if the 'background-attachment' is set to 'fixed'... but I don't want that.
Can anyone explain this, with a possible fix? I continually refer to the https://victoriabeckham.landrover.com/ site and can't figure out what they're doing differently to get theirs operating so efficiently.
You can check this out, i believe its where they do most of the animating:
https://victoriabeckham.landrover.com/js/ScrollAnimator.js?v=471
I would have to say they have some kind of framework that they are using to accomplish this.
EDIT: Sorry didn't see the new answer above mine, seems like a good starting point.
-Ken
If you inspect this website carefully, you will able to use it like landrover site.
You need to use: scrollTo plugin and parallax plugin
And document jQuery should be like this:
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#intro').parallax("50%", 0.1);
$('#second').parallax("50%", 0.1);
$('.bg').parallax("50%", 0.4);
$('#third').parallax("50%", 0.3);
});
Ok. So I figured out my issue was when trying to animate() the 'section-container' on the 'top' property. I was using a "+=" to allow it to increment from its current position. Not a good idea when using 'mousewheel' events. I changed it to a hard-set variable that is continually incremented/decremented.
I'm having problems to create a equivalent slideDown for xuijs.
The slideUp (hide) is easily done with
x$('elm').tween({height:'0'});
but there seem to be no way to revert back to original height using tween.
$x('elm').setStyle('height','auto !important');
works fine but no animation of course,
x$('elm').tween({height:'auto !important'});
does not work. (setting height to fixed value does however, but that's not an option).
Kind of stuck here, document.getElementById('target_box').clientHeight doesn't help either once the height is set to 0 by tween or setStyle. Only solution I can think of is storing the heights in an array before initial global collapse of divs.
thankful for any help.
(the divs affected uses overflow: hidden)
regards,
//t
If you're using html5 Why not store the height as a data- attribute before you call tween?
x$.extend({
'slideUp' : function(){
this = this[0];
x$(this).attr('data-h',this.clientHeight);
x$(this).tween({height:'0'});
},
'slideDown' : function(){
this = this[0];
x$(this).tween({height:x$(this).attr('data-h');});
}
});
this code is untested, but it's worth a shot.
Not sure if you have solved this but I got a solution. Pretty sure there are better ways but this seemed to do the trick.
emile.js and xui animation needing double click?
uses emile instead of tween but sure you could change it if you want however emile.js is in xui.