I'm using this javascript plugin: http://jacksasylum.eu/ContentFlow/
Well, I'm a beginner in js programming and I have this problem:
When I resize the browser window, the images are reduced too. But i don't have any idea how to turn off the resize function. I tried to comment many lines of codes that have .resize or something but it didn't work. I was searching on google but with no success for the answer, I hope someone could help me here :/
did you try to style the class item with fix width because I think this is the issue.
As I can see the class item is use on each div and everything is set with % width.
.item{
width:200px;
}
note that I put 200px but choose the size you want.
Related
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.
I have been wondering for quite a while now how can you achieve this: https://www.apple.com/mac-pro/
As I put it in my own terms, removing the scrollbar or hiding it. I know you can easily put overflow:hidden but that wouldn't really solve the problem, as in Chrome for example it will not let you scroll with the mouse-wheel (pretty annoying).
I've been looking for quite a while now how to achieve something similar to that, which by the way I have no idea how to call it (again I search it as hiding the scrollbar, removing scrollbar) but no success yet.
If anyone can point me to the right direction, that would be really awesome!
I think that the page does not fill more than the window , so that is why there is no scroll bar. When you do scroll up or down , there are most likely event listeners that are just altering the content.
body { overflow:hidden } would work in some browsers , but not all - So , to avoid having a scroll bar, just don't have the content get larger than the window.
It seems like a slightly altered take on Parallax Scrolling.
If you google for it, you can find a million and one different ways of doing it, tutorials, examples, templates, etc.
Change overview.css on line no 10
position: fixed;
Remove following from overview.css on line 415 and 8
overflow: hidden;
Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.
This one is an odd one. I've got HTML5 Facebook comments on one of my pages, and after the page loads, the Facebook comment area starts to shrink horizontally until it reaches 5 or 0px. You can see it here:
http://www.rocketcases.com/casestarter/captain-quinn
I cannot figure out why this has started to happen. It didn't start off like that, it just started doing it recently.
I've tried disabling all my other JS, and it's still happening. I've searched Google and StackOverflow. It doesn't seem like anyone else has ever come across this.
Any ideas? Am I missing something very obvious?
Set the span's width which is inside the fb-comments fb_iframe_widget container to 100% !important.
Like this:
.fb_iframe_widget span { width: 100% !important}
EDIT:
The reason appears to be in one of Facebook's scripts, which calculates the width of the element relative to the parent element. A piece from the script:
s.height=Math.max(this._shrinker.offsetTop,0)
What this means is, unless the parent element (in your case, the div with the classes fb-comments and fb_iframe_widget) has a fixed width, the script will loop and keep on reducing the width.
Here's the snippet from the script if you're interested: http://pastebin.com/GesPgQNY
Setting a min-width for the element will solve the problem. and it is better to assign a unique class to plugin's parent element, to avoid future conflicts.
.fb-comments.fb_iframe_widget span:first-child {
min-width: 600px;
}
It was because I had added some custom CSS to size the width of the FB comments div.
.fb-comments, .fb-comments iframe[style] {width: 90% !important;
Once I removed that, it works just fine. So odd.
Thanks for the help!
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?