Hey lovely StackOverflow Community.
I have a problem with my website. I added the Bootstrap Carousel from getbootrap.com and it actually works very well. But there is one problem. Everytime the image sitch, my whole website goes up and down.
I don't know what could be the problem, cause i changed nothing on the code from getbootstrap.com :-/
Sorry for my bad english :D Hope you can understand my problem.
Overwrite the Bootstrap class. This will solve your problem
.carousel-inner>.item {
width: 100%;
}
My issue with the Carousel was not directly related to the image, but rather the content within it that was causing the shifting of the page. To avoid it while being elsewhere on the page, I just used JQuery to detect if I had scrolled past my carousel and to make it pause. I know its a workaround but its effective.
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('#slider').carousel('pause');
} else{
$('#slider').carousel('cycle');
}});
It is because it changes some class on the carousel items.
You can set a min-height to the carousel container (.carousel-inner) and it won't jump anymore.
Set the value that fits better your needs.
ALSO:
Seam like there is a little effect on the images, so that every time that an image change, it became a bit smaller. If you just want to avoid the all website jump, use what i said above, if you want to change the "change-of-size" behave, you need to check the class .next and (probably) .right/.left and see if there's a change of height. It is hard to inspect them from a live website, that why i'm telling you to check this from the code - Or upload the code if you prefer.
Related
There was a similar question asked on here (not enough information was given) so no real solution was presented. I am using MixItUp to filter content within a framework (Foundation) based on a button being clicked. I noticed a weird movement that happens when a button is clicked. I have uploaded the files to be viewed here
http://cantaloupecreative.info/filter-code-snippet/
After the animation fires, I see page elements jump to the right a bit. If that's what you're referring to, take a look at the scroll bar. When there aren't enough elements on the page, the scroll bar disappears and everything re-centers, which is likely what you're seeing. You can avoid this by permanently enabling or disabling the scroll bar with CSS
overflow-y: scroll;
or something similar.
Okay here is what I uncovered in my search for a solution. WebKit is overriding the css change I am making to my body class. You cannot use overflow-y in chrome because of this. Now when I was making the change to my sass file it wasn't compiling correctly. After hardcoding the webkit fix into my stylesheet I was able to remove the scrollbar on all toggled divs with the following code.
::-webkit-scrollbar {
display:none
}
Obviously this only fixes half of the problem because now I am without a scrollbar. But it atleasts fixes the hoping issue.
I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.
If you'll take a look at this:
http://jsfiddle.net/hunterscott/JYLVQ/
You'll notice that if you try to drag the image, you can see the helper move, but it won't leave the gallery box. I have a feeling this is a CSS thing, but I'm not sure where it is.
Edit: Sorry, I need to be more specific, since that fiddle is pretty watered down from the full project. Gallery-wrap has to be set to overflow:hidden because it is an image carousel that shows 5 images at a time, and the rest are hidden. The user clicks arrows to advance through them. If I make gallery-wrap visible, then the images that shouldn't be seen are seen stacked below the first 5.
#gallery-wrap
is the culprit, it has overflow:hidden; set.
EDIT: ah, thanks for the clarification. Does this help?
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.
Here is my app - http://www.shalgreetings.com/ I am trying to override the scroll bar going down to a imagesection in CSS, so that whole app is visible with logo, header and other controls all the times when people navigate through different #sections. I am not sure where in the CSS, I am making the mistake as clicking on #sections traverses the page. Here is this app's original inspiration code, which has got this right.
Anyone can point me where the problem seems to be in the above app?
Edit - It was not a problem with CSS. Perhaps I am looking for a Javascript solution that would follow the link, but still ScrollTo(0,0).
There is no mistake in your CSS, the inspiration code "cheated" in a way: he used just a few photos so the viewport would never be too short to display everything. In the example you can make your window height short and it will exhibit the same problem.
You probably already know that you can solve this problem with a bit of javascript (onclick="return false;"). I'm afraid there is no pure CSS way from preventing this from happening.