I am having issues with my jcarousel installation. Currently how I have it set up is three items in a row with a viewport of 1140px. jcarousel automatically adjusts these items and sets them to 380px wide each to fit the viewport properly. The margin-right seems automatically defined as well. I am having an issue justifying my three items evenly within the viewport. I've looked through the jcarousel options though didn't find anything that might help. Here is a screenshot that should explain my issue:
http://i.imgur.com/PRQIG.jpg
Edit: I found a solution, the only thing I'm able to come up with. If anybody knows of a better solution please post!
My page is based on an 1140 responsive grid system. In my grid system the right margin for a three column row is ~3.8% and the width per column is ~30%. So for my carousel's horizontal viewport (.jcarousel-clip-horizontal) I set it's width to 103.8% rather then 100%, this allows for the three items to expand equally across the page container.
I was trying to adjust margins and paddings on individual items but that was incorrect. At first I placed a left padding on the carousel container to give it a centered appearance, but that wasn't sufficient for my responsive layout.
If you don't like the width jcarousel automatically does you can set it yourself in the setupCallback:function(){} with the jcarousel setup
for example: you want to set each li with the width 375, you can do this:
$('#a').jcarousel({
visible:3,
scroll:3,
setupCallback:function(){
$('#a.jcarousel-list li').each(function(){
$(this).width(375)
})
},
})
you can modify padding/margin on each item or on the viewport with setupCallback:function(){} to achieve what you want.
Related
I want the DIV at top of screen, say 100px high.
Horizontal Swiper under it with a calc'ed height 100% - 100px, resizing with window.
A second 'absolute' horizontal Swiper with specific height and width.
I've tried every combination of CSS, HTML and options on the new Swiper declarations for hours. DIV's around the containers. Positioning. I'm out of ideas. And yes, I've read the API over and over. I've dissected their samples. Height adjustments on container, wrapper, slides, content.
Width does not seem to be an issue.
Height games will make the container vanish, or add extra space to bottom, or cease function, or all kinds of funny stuff.
At this point, prove I'm an idiot with boilerplate working code, PLEASE..!
Technically, the goal is any number of Swiper containers that I can position and resize as needed. Seems simple but I'm exhausted. I'd estimate I've tried well over a hundred combos in code over six hours.
I'm currently working on a website which in future will be responsive. The site is primarily made up of images which in turn load into a FancyBox when clicked. v2 of FancyBox is now responsive and so re-sizes the images etc when screen size changes. As part of my design I have two fixed banners which appear at the top and bottom of the page, see image below:
By default there is a margin around the FancyBox so that it's styled nicely. However, with the fixed positioning that I've added to the banners I need to increase the top and bottom margin. I've looked through the JS source but I can't for the life of me find where I should be adding extra margin. There are all sorts of margins on the transitions etc (which I think is where I'm getting confused).
In theory I just need to add "x" amount of pixels to the margin, where x is the height of the banners. As an aside I'm not sure how I would replicate this in a responsive design, as the banners may be slightly shallower on a mobile. Adding the margin would mean there's a slight gap between the image and the banner, where currently the image goes behind the banner. See the following image for what I'd like it to look like:
I'd appreciate any thoughts/examples of where this has been done before.
Thanks in advance, Adam.
try the margin API option
$(".fancybox").fancybox({
margin: [120, 60, 20, 60] // top, right, bottom, left
});
See JSFIDDLE
Is there a way to determine the max scroll position for every browser, without actually scrolling to the end and reading this position?
Taken a container div with a fixed height and overflow. Several div elements in the container whose sum of heights is bigger then the height of the container.
There is a max scroll position (y) which I thought is simply the container-height minus the total items-height. This seems to be true until the line-height of the container is larger then the height of the items. If this is the case, it seems that every browser determines the max scroll position differently.
With padding it got even worse, some browsers add the top padding, some browsers add both top and bottom padding.
See this fiddle for example. Play around with the container line-height and the div.item height.
I only have the ability to test in a handful of browsers, but I think what you are looking for is:
elm.scrollHeight - elm.clientHeight
Shown in an updated jsFiddle.
Take a look at this How to find the HTML element Scrollable Height and width using JQuery ?, this shows how to get the scrollable height and width,
and there is some related posts regarding element scroll how to check if the scrollbars are currently visible? and how to determine if the vertical and horizontal scrollbars reaches the edges?.
and there are more FAQs available and i hope this will help you !.
I am using jQuery Masonry to display a grid of boxes (all the same size).
Here is my testing site.
Works great when the browser width is 1100px or below.
When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.
I have a max-width set on the outer container, but Masonry doesn't seem to acknowledge it and just keeps expanding the width of the Masonry container.
On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.
How can I add a hard rule to say, "This is the maximum width. Stop trying to add more columns."
Thanks
UPDATE
Here is a jsfiddle, although I"m not sure if it's even set up correctly. It's best just to go to my testing site to see the problem.
Setting a max-width on the parent element of the masonry'ed container works for me. Is this not the result you're looking for?
#wrapper { max-width: 990px; }
I have a top and a bottom with a line in between to resize(giving more real estate to either the top or the bottom).
Basically a split-screen layout. But I am having a problem getting the bottom portion correct, no matter what I do it always extends beyond the page, and I want the box in the bottom portion to perform exactly as it does in the top portion of the page.
The following demo will show you basically what I am doing as well as my problem:
http://jsfiddle.net/mstefanko/e38bE/67/
I don't have any hard-coded heights(everything is currently set by %'s), but I added them to the fiddle for demonstration of my issue.
Right now the divider that resizes the top and bottom is resizing the top, and I have some code from jQuery UI Resizable alsoResize reverse to reverse resize the bottom. I'm not sure that I even need the extra code, but when I couldn't sort this out, I figured it was worth a shot.
Also, there's a large bottom margin on the top in order to get the jquery ui handle right, this might be causing my problems but playing with it didn't seem to get rid of the issue.
Any help is appreciated, thanks!
Your problem is that you're trying to scrunch several divs of a fixed size into one bigger fixed-size div, but the other divs don't fit. You can't expect the text to resize when you move the resizer handle to make it fit, and the divs have to go somewhere, so they overflow. Here are a few suggestions:
Give the container a css overflow value of auto (so when you resize it and it's too big to fit, it will automatically give you a scrollbar)
Set the overflow value and get rid of the resizer entirely
Give container a css height value of auto or scroll (if size is not an issue)