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
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/
The website is http://teothemes.com/wp/Teo/ and the section I'm reffering is the Portfolio section with the filterable portfolio. On hover on each element, two icons show up http://prntscr.com/1a1wxx
If you click on the "+" one(which means extend), the slider is totally messed up, http://prntscr.com/1a1x00 . I don't understand why it takes all the images in just one slide. And, it happens just on the first time I load a portfolio, if I try it for other portfolio items after I open the first ope, it works just fine.
I've tried setting the position to relative, thought it's a css problem with margins, padding, the width of the top container, I set it to 100%, but it just doesn't want to work.
I think the problem is with some of the default CSS code for the flexslider container, but I'm not sure what exactly to check.
Any help is appreciated.
My portfolio website currently uses masonry.js to show the posts in a grid-like manner. Though i've recently come up on a bug that i can't seem to get rid of. If you go to my portfolio website at http://www.aerosphere.nl on a small resolution (resize browser or look at it with a tablet/phone), and somehow the masonry blocks move below the navigation menu.
I've tried adjusting the widths of the columns, even moving the sidebar to the right of the masonry blocks, all with no luck. Anyone care to look at the source code and/or know how to fix this?
The problem lied at the fact that i didn't use fixed positions for the nav menu and the masonry section of the site. MasonryJS uses fixed positions to get the whole effect, and when resizing it calculates screen size from the far left side of the screen since it doesn't have an x-coordinate assigned.
Since the nav bar is in the way to position the whole thing at x = 0 the whole section moves below the nav bar.
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 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)