I am working on a site and integrated the bootstrap carousel. Everything is working well, except for a one thing that: When I click on next or previous icon, images will jump a little bit and I feel very annoying about it. I tried every solutions which I have searched and applied but it still didn't work.
Can anybody help me with this problem, the url as below:
https://test5.extensionesdepelobaratas.net/hair-blog/
You will see the first carousel which have number from 1 to 8.
Look forward to hearing solutions from everybody.
Thank you very much.
It looks like there are a handful of elements with the class .item which are not properly being transitioned when it comes to it's attributes and the active class ones which are being applied thereafter.
If you add the following CSS to your .carousel-inner .item elements, all of the values will be transitioned properly.
.carousel-inner .item { transition: all 0.5s ease !important; }
Tested this with the existing website and there is no more 'jumpiness' when it comes to the elements sliding in. Instead, they grow rather than jump to the size which the carousel is setting them as.
Related
Working with angular and using animate.css to handle some animations that get applied to views as they enter and leave. I've come into a problem that has eluded my attempts to solve it thus far.
What I'm after: Getting various elements to slide in/out as if you're panning across
The problem: While the actual animations work just fine, the view change renders them with an offset so that they don't appear to be sliding. After a second the correct styles get applied, but I can't tell why. I've looked at the docs for ng-animate, tried deactivating modules, and isolating the problem in other ways but can't seem to figure it out.
Misc.:
I'm using animate.css to handle the transitions, but that doesn't seem to be the culprit as the transitions work 'normally'/as they should in some cases (on refresh, on direct URL load)
this appears to be a reflow, which happens sometimes on href nav but not on refresh. Tried tracking this down in the ng-animate docs but I can't make out why/how it only seems to happen on href nav from links and not on a refresh (something to do with template cacheing?)
doesn't seem to be browser-specific
haven't seen any questions anywhere on SO or elsewhere talking about this, so resources work as in addition to answers
I can include more code once someone has an idea of what area might be causing the problem. Don't want to include the entire project at first :)
Using:
everything 1.2.21
angular
ngAnimate
ngMocks
resource
sanitize
Here's what happens:
(note: the second command I give is a refresh, where the animation happens normally)
Some initial code:
I use this mixin to handle the .ng-enter and similar classes
#import "../bower_components/animate.css/animate.sass";
#mixin panInner($direction, $LeftOrRight) {
#extend .animated;
#extend .slide#{$direction}#{$LeftOrRight};
}
#mixin pan{
.ng-enter, .ng-enter-active {
#include panInner(In, Right);
}
.ng-leave, .ng-leave.ng-leave-active {
#include panInner(Out, Left);
}
.ng-enter-active, .ng-leave-active {
animation-duration: 2s;
}
}
#include pan;
This is for a project I've been really close-up to for a long while now, so it's always possible that I've missed something dumb, but I hope not.
It appears you are animating the pages in Position: relative rather than Position: absolute.
So what this means is that as the first section animates out, the second section still thinks it's there "above" it and is offset downwards accordingly until the first section has completed its animation and is removed from the DOM.
With Position: absolute the page element being animated in won't care about the previous sibling element being animated out. Just keep in mind that both should be inside of the same wrapper element with a relative or absolute position so that they don't jump up when switching to Position: absolute.
I've been working on a personal website for a class project. I've come across some bugs in it that I can't seem to get fixed. You can find the website at bnb.im or at CodePen (the codepen is mostly copy and paste; I did the best I could with it).
So, the first problem is the white space to the right of the screen. I can't tell what's causing it--when I use the Select element feature on FF, it just selects <html>. I asked on another site, and someone said that it was caused by the animation of the portfolio items sliding in--I tried the fix they suggested, adding overflow: hidden; to body, but it didn't work (the page became unscrollable). I also tried making the portfolio items smaller (45% instead of 50%), but that didn't help, either. Any ideas?
The second problem is with the portfolio items and/or the social section. Whenever I try to add margin-top or margin-bottom to put some white space between the last portfolio item and the social section, nothing happens for the most part. The only time I've gotten it to work is when I put the margin-top on the social section to 200%, but it was too much so that won't work. Any ideas with this one?
Thanks a lot--I really appreciate you taking the time to read through this and (hopefully!) look at my site.
The first problem looks fixed to me? Did you figure it out?
The second one take off height:100%;from .portfolio
I've created a plant database, the client wanted a small image of each plant, that grows in size when you hover over it. I found a jQuery that seemed to work from here: https://github.com/jmar/jquery-hoverZoom
The first time a page loads and you hover over the image, the image isn't centered in the grey box (it's shifted down). Any time after the first time you hover over the image, it is centered in the box. I can't figure out why this is only happening the first time you load the page. I have a "test" page which works fine. The thumbnail image of the plant also shifts position on the page after the first time you hover over it.
I don't know much about the jQuery, so if that's causing the problem I'm not sure how to fix it. I suspect there's some conflicting CSS, but can't find it.
NOT WORKING: http://briggs.honeycombsites.com/plants/product-search/ (NOTE: Click on any of the plants here to take you to the plant page where the hover is set up)
TEST PAGE: http://briggs.honeycombsites.com/test/ (works fine the first time)
ALSO - This doesn't seem to work in Chrome, or Safari :( Once you hover over the image the first time, the thumbnail disappears entirely.
You can apply the scale to the elements on roll over following the basic syntax of this:
CSS
.yourClass {
transform: scale(1, 1);
transition: all .5s ease-in-out;
}
.yourClass:hover {
transform: scale(3, 3);
}
If you have the element within a div I believe you will have to apply it similarly to the parent div. Also, for cross browser functionality, be sure to use the vendor prefixes on both the transition and the transform:
-webkit-
-moz-
-o-
-ms-
There seems to be a conflict between your main style.css ul and li styles and the zoom's style. Try placing jquery.hoverZoom.css last, before </head> and see if the placement of the thumb is correct afterwards.
I have searched all over the site, but due to my low knowledge I was unable to find the right words. I am working my website and the script I was using had a previous theme.
I did a lot of changes so far and I am totally satisfied with it.
However there is a effect which I think from jquery whom sometimes brake my design. I want to remove this effect but couldnt find how. The effect is, when your cursor comes on certain links and buttons, they get bigger and kinda zoomed.
Here is the example of it, http://www.uluyemek.com/demo/
If you look on the left sidebar and get your mouse on the "Giriş Yap" which means log in, the image gets bigger, I would really like to delete this since its causing problems on other pages, to me.
Please help me find where the jquery hide itself.
That effect is being handled by CSS3 transforms applied to that button.
Remove the following CSS from the button and it will make the effect stop:
-webkit-transform: scale(1.1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
I'm creating a web based mobile application and looking for a way to slide between pages.
Currently I have all the pages (which are divs) set to absolute and have them placed exactly on top of each other. Only one page is visible at a time, when the user clicks a button it hides the current page and sets the button targeted page's visibility to true.
I need the page to slide though, like iOS and other mobile platforms do. Using jQuery Mobile is not an option for me (I'm creating a framework myself).
If anyone can advise me on how I can have the pages slide in rather than cut and show immediately I'd appreciate that.
Thanks
You can use css transitions to animate the div's position, e.g.
.page {
position: absolute;
transition: left 1s;
left: 100%;
}
.page.in {
left: 0
}
See also: http://jsfiddle.net/jkDUm/
It probably doesn't show the exact effect you are looking for but it demonstrates the idea...