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.
Related
Building out a flickity carousel to look like this and having some issues w/ spacing on my CodePen.
codepen
looks good but want to make spacing between slides less and also the spacing is fairly equal but not 100% equal between each. For example, it says left 10% for the spacing but if you put a few more vertical photos back to back, see this image for approximate spacing in pixels that are not the same equal widths (pic)
Images should be <img src="x"> versus background image as well for accessibility and adding alt tags too.
Anyone have any hints in the code on how to fix it so the images appear larger, then take up more space (so there's less space between the slides) and also ensure that any image i put in there is equally horizontally spaced between them? Seems very close on the example attached. I tried messing with the padding/widths on 1st one but it gets strange.
Remove height: 100% from the image and only leave width: 100% so all images are going to have the same horizontal space.
And use .ui-thumbnail-img to center the image inside it.
I create a jsfiddle for the solution. https://jsfiddle.net/vzphr3n5/3/
I am using CSS3 to control my transitions and I've made my #wrapper's width 100%. However, when I animate divs across the entire width, it doesn't work right.
1. The animated birds duplicates if the browser's width is max out.
2. The animated birds will not move across the screen if the browser's width is resized to a much smaller size.
3. The clouds and the birds also resets or flicker every so often.
The demo page is here. I was wondering by setting these values to dynamic it might resolve the issue mentioned above. However, I'm not sure how to set these values dynamically based on the size of the browser's window. If I set the #wraper's to a fixed width and all the transitions and animations to a fix width it works fine.
Any help is much appreciated.
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.
I'm busy developing a web-app but I can't seem to find the correct way to scale all items so it fits the screen.
As you can see on the picture, the grey bars are menu and need to stay in position. The content in the middle (blue block including the white background) needs to move left and right, but also up and down. Resizing the window, zoom and whatever else should be taken into account. My current technique fails lots of times, so I was hoping if any of you knew some good technique.
So as I said, the content needs to move up and down, left and right. The parent div of all pages is the same width as all pages are together. So one page should have the correct window width. Same goes for height, but there are just 2 pages on the horizontal axis. Currently I'm adjusting size using JavaScript/JQuery.
Just as a sidenote, it might be possible to scroll vertically when the current content page is bigger than the screen can display. Horizontal scrolling is not possible.
Very hard to explain, I'm doing my best, but I hope someone can help me.
That's a lot fun! Perhaps working with em units will assist you. It's a neat little trick.
1 - Set the font-size to 100% on your parent container.
2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc.
3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use.
4 - Setup a window resize event. When the window resizes, get the new browser dimensions. Now, some basic math will allow you to compare the new browser dimensions to the original browser dimensions - and get a percentage.
5 - Still in the resize event, set that new percentage to the font-size of the parent element.
You can set this up with just your center container - or whatever. Any children elements of the main container that has the font-size property (and are defined in ems) will automatically scale with the browser window.
Text will scale
Border size will scale
Border radius will scale
Dimensions, padding, margins will scale
It's neato.
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)