I have built and uploaded this site here for a client. I used the Twitter bootstrap and customized it. My issue is the navigation it has jquery to animate the links. However i want this to disable and revert to an vertical list when screen size drops to phone size.
I know bootstrap already has the media queries built in but how do i do this.
Check the site and shrink browser to mobile size and you will see the list button appears but the links are still the same inside.
Not sure if i have made my point very clearly but more more info please ask.
Thanks
Here is the code responsible for animation:
$(document).ready(function () {
//When mouse rolls over
$(".blue").mouseover(function () {
$(this).stop().animate({
height: '100px'
}, {
queue: false,
duration: 1200,
easing: 'easeOutBounce'
})
});
//When mouse is removed
$(".blue").mouseout(function () {
$(this).stop().animate({
height: '50px'
}, {
queue: false,
duration: 1200,
easing: 'easeOutBounce'
})
});
});
Try matchMedia() to apply an animation only on small viewports:
if (window.matchMedia("(max-width: 480px)").matches) {
/* do animation here */
}
Of course you can change 480px to whatever you want or even check for other properties.
Related
I have a gallery on my site. Each image is a <div> which has a background image. The overflow is hidden, and I hide a caption div using margin. I then use the following jQuery to animate the captions when the mouse enters and leaves the picture <div>.
$(document).on("mouseenter", ".gallery-image", function(){
$(this).children(".caption").dequeue();
$(this).children(".caption").fadeIn({queue: false, duration: 500}).animate({marginTop: "350px"}, 500);
});
$(document).on("mouseleave", ".gallery-image", function(){
$(this).children(".caption").dequeue();
$(this).children(".caption").fadeOut({queue: false, duration: 500}).animate({marginTop: "400px"}, 500);
});
When I move the mouse in and out too fast weird things start to happen. The caption stays half-faded, or the caption simply stops appearing altogether.
The problem can be seen in this JSFiddle.
Why am I getting this unexpected behavior?
Use .stop(true, true) to stop the pre queues of the animations
$(document).on("mouseenter", ".gallery-image", function(){
$(this).children(".caption").stop(true,true).fadeIn({queue: false, duration: 500}).animate({marginTop: "350px"}, 500);
});
$(document).on("mouseleave", ".gallery-image", function(){
$(this).children(".caption").stop(true,true).fadeOut({queue: false, duration: 500}).animate({marginTop: "400px"}, 500);
});
Fiddle
I have four images on a page and when I hover over the image, I want a horizontal div to move up on the bar, and when the mouse pointer moves off of the image, I want it to slide back down. Now when I do this is works fine, however there seems to be a delay. Also, if I move back and forth repeatedly, the delay is more and the slider ends up going up and down on its own for a few seconds. Here is the code, please help!
$('.indexgall').on('mouseenter',function()
{
$(this).addClass('hoverimg');
$(this).children().animate(
{
top: 150
}, 600, function()
{
});
});
$('li').on('mouseleave',function()
{
$(this).removeClass('hoverimg');
$(this).children().animate(
{
top:250,
}, 600, function()
{
});
});
From your code, it doesn't look there should be a delay. Can you post a JSFiddle to show this problem in action?
To address the latter concern, you want to be using the JQuery stop() method to stop the animation by cleaning the animation queue.
This can be done, like so:
$(this).stop().animate({
width: 240
}, 500);
Check out this JSFiddle.
I'm using jcarousel lite to display an auto-scrolling carousel of brand logos on one of my sites. I tried to make it responsive (max 6 images on largest display) using the following javascript. The carousel works fine using the original code without me trying to modify how many images are visible.
<script>
function carouselLogic(){
if ($(window).width() > 959 ){
visible = 6;
changeCarousel(visible);
}
else if($(window).width() > 767){
visible = 4;
changeCarousel(visible);
}
else if($(window).width() > 599){
visible = 2;
changeCarousel(visible);
}
}
carouselLogic();
$(window).resize(function(){
carouselLogic();
});
/* original function for first page load
$(function() {
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: 6
});
});
*/
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: visible
});
}
</script>
Images appear inline with a 20px margin left/right.
This code is supposed to change the visible number of logos to ensure they still fit on the page with each responsive change.
The result is the carousels auto scroll goes all crazy. It bounces back and forth all over the place, and much quicker than the default.
Any suggestions on how to improve this code?
The original jCarouselLite has been forked here;
https://github.com/kswedberg/jquery-carousel-lite#responsive-carousels
It's not quite as Lite as it originally was but it has many more methods, and is touch screen scrollable and responsive. You can add the following options which are working for me;
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: true,
speed: 1000,
visible: visible,
autoWidth: true,
responsive: true
});
}
As pointed out here,
Run jCarouselLite again, after an AJAX request
You might want to end the original carousel as well in your carouselLogic() function
$(".logoCarousel").trigger("endCarousel");
This is old but in case it helps, i'm pretty sure you need to "reset" jcarousellite. Otherwise you are instantiating it again and again after each window resize.
To initialize it properly after it has already been initialized, you need to call a reset method. I don't remember the syntax off the top of my head, but if you search the jcarousellite.js source for "reset" you should find the correct syntax
Basically I want the header and footer to remain in their positions but the three (inline-block elements) in the center to slide in from the right side when page loads. You can see what I am trying to achieve on this example page:
http://flooring-by-design.com
Here is my website where I want to achieve this same effect:http://contestlancer.com/davidicus/
As you can see it is twitter boot strap site. So the three divs which I want to slide in are inline-block elements with class="span4" and unique id. I tried this but it doesn't work on the page for some reason.
$("#portfolio").animate({left: "0"}, {
duration: 2000
});
$("#music").animate({left: "0"}, {
duration: 1000
});
$("#blog").animate({left: "0"}, {
duration: 500
});
Regards
Ahmar
How about this?
$('#portfolio').click(function(e) {
e.preventDefault();
$('#portfolio').animate({
'right' : '100px'
}, 2000);
});
I want smooth transitions between tabs when the user clicks on a tab.
I know jQuery tabs supports basic animations (see this question about animation fx), but how can I do smooth transitions?
things got easier over the years, now it's a built in option for that, for example slide to-left-out and from-right-in is just:
$("#tabs .tabs-container-wrapper .tabs-container").tabs({
hide: { effect: "slide", duration: 800, direction: "left", easing: "easeInOutQuart" },
show: { effect: "slide", duration: 800, direction: "right", easing: "easeInOutQuart" }
});
You will need to do a few things to get this working:
Do not use the CSS that comes with jQuery UI
Structure your HTML so your tabs can slide left and right.
Add CSS for the "left" transition. For example:
#tabs .tabs-container-wrapper .tabs-container { transition:left 0.5s ease-in-out; }
When a tab is selected, change the "left" value.
$(function() {
var onTabChange = function(event, ui) {
$("#tabs .tabs-container-wrapper .tabs-container").css("left", offsets[ui.index]);
};
$('#tabs').tabs().bind('tabsselect', onTabChange);
});
See this gist for a full working example.
This will work with modern browsers that support transitions and fall back to normal tab behaviour if it's not supported.