I'm working on a one-page-layout and used skrollr for it, which works quite nicely. However, now I've encountered a slight problem. With the desktop version of the site everything fits neatly on the screen, but on a mobile device the content of some slides does not fit at all, so I'd like to use a variable height for those slides, but I can't get it working, the content is always cut off at the window height / overlaid by the next slide. Is there a way to remedy that? Or am I trying something impossible here?
Thanks + greetz,
Tox
Related
I got a website (which I didn't made) that, when I resize to test responsiveness, it works normally, though, when getting it back and scrolling down (and then up), there seems to appear a gap between the header and the element under it.
Site: http://miriam.mx/index/
Before resize and scroll:
After resize and scroll:
The site is using a lot of plugins and css:
The thing is that I need some hint to solve it, since I'm not experienced with any of those CSS works yet.
This has to do with your sticky code. Looks like you are using Sticky-Kit. It's setting the height of the sticky div to a height bigger than your children elements. You are using 1.1.1, which they have 1.1.2 and that seems to add some support with auto adjusting when scrolling. You could also play around with the recalc settings.
So I've been lately working on a project of mine that I'd really like to finish, not only Photoshop wise but also HTML/CSS wise and I've encountered a problem.
This is the website & some help graphics - I would like to make the content inside the white rectangle scrollable, but everything outside the rectangle should stay exactly as it is. I'm going to either use Skrollr or Parallax Scrolling, but I first need to figure out how to make it so the entire website has a fixed height and never stretches, while the subcontent div can be scrolled down and up.
Overflow: auto; does this for you, in a heartbeat.
I'm using stellar.js to apply a parallax effect to a background image. The height of the container around the background image is set by javascript to the window height minus the height of the header. I have the background image set to cover in css and want it to fill the container regardless of the screen size. This works fine with no parallax effect, but once I apply the parallax effect the positioning changes, so when the container is tall the image doesn't fill it.
I spoke to Mark Dalgleish, the creator of stellar.js to see if he had any ideas, and he said that the background image has to be taller than the container for it to fill it, which is pretty much the conclusion I had come to. So I'm wondering if there is a different way I can accomplish this. Does anyone have any ideas?
Here's the site I'm trying to make it work on. If you resize the browser window by pulling it in from the side and reload the page you will see what I mean. There's a gap below the image.
http://sonomarinwebdesign.com/agnitio
I'm not quite sure if this would work but something to try is to add javascript that runs when the page resizes:
$(function() {
$(window).resize(function() {
// replace "100" with whatever makes it the best height:
var newHeight = ($(window).height() - 100);
var pictureHeight = 823;
if (newHeight > pictureHeight) newHeight = pictureHeight;
$(".an-yee-tsee-o.parallax.panel-pane").height(newHeight + "px");
});
});
The point here is that you want to resize the parallax background panel when the window is resized. Even if this isn't quite right, hopefully it gets you on the right track. Best of luck!
Note - I was trying to fix the way the site looks when you load it on a "short" screen and then resize the browser larger. For your issue of the background not filling you can scale your background image up for that in a tool such as gimp for larger screens (or get a larger image to start with).
EDIT - Added code to make sure the div never ends up larger than the picture. You can also run this same code on load. It might not look as originally intended but it should work at least.
I finally solved this by using skrollr.js instead of stellar.js, and then setting the background image to "background-attachment: fixed" in the css. The scripts give a similar effect, but scrollr.js starts with the top offset at 0 so it doesn't leave a gap below the image.
I believe I have tried about everything and am failing miserably. I have been working with the lush responsive slider and have been having some major issues.
To start off I took the exact code from the demo and placed it in my header, but it had a strange padding on the bottom and right side so I removed it and thought it was working fine except for the height. It's so large that it takes over more than half the page.
When I resized the window and reloaded the page though the background of the slider sat in the top left corner much smaller than it needed to be. So the responsiveness only works if you reload at 100% screen? That doesn't make any scenes.
Also, the height is bothering me. I cannot get it to resize at all and when I did put static heights on the ul and li of 10em it did resize, but then the responsiveness went out the window.
I tried to post this in a js fiddle, but the plugin was so much code that it crashed it without running anything. If it would help I can post a dev site with this on it. As I said I used the exact html and css from the demo files I only took away a bit of padding to make it full width.
Any help would be much appreciated.
Ok, I have managed to work out a solution for the width issue. The problem seems to relate to the initial baseWidth, which defaults to 1140 pixels. Playing around with the
data-base-width="600" and data-base-height="600"
attributes in the first lush slider div tag may see you make some progress, but it looks like only fixed values are accepted, no percentages. I opted for this solution which seems to work, write the first div tag using document.write method and programmaticaly set the width the the clientWidth, as such :
<script>
document.write('<div id="lushDiv" class="lush-slider autoload shadow-a" data-slider-pause-on-hover="true" data-base-width="' + document.body.clientWidth + '" data-base-height="600" style="background: rgb(229, 229, 229)">');
</script>
My suggestion is not to use Javascript or JQuery. Some simple CSS and HTML will do.
Here is the fiddle: http://jsfiddle.net/jacobdubail/bKaxg/7/
You obviously don't need all of the CSS. Just change it to accompany your layout.
Change your width to percentages, like so:
min-width: 100%;
I would suggest changing the height to ems.
Im trying to use this plugin:
http://www.jacksasylum.eu/ContentFlow/
2 points:
I want to know how can I get it into my div and stay inside the volume of the div? As it is right now, my div is 185px, but when I put the coverflow inside of the div, it breaks out of it and plays outside the div.
If I take the height off the div, it will stay inside the div, but... the div MUST remain at height of 185px. I dont really see any padding or margin elements inside the CoverFlow css, so im not sure what im supposed to edit.
I also have plans to put the coverflow into an even smaller div on another page, so I want to know how to scale it and fit into my set-height div properly without problems.
When I load the page into another div thats in another page, the coverflow will not load. So basically, the coverflow only loads in its own page. Ive put the links to the .js and css into the main file that loads the coverflow page, but its still not working.
Can anyone help me figure out these 2 important points?
What is happening there is that ContentFlow completely ignores the container's height; it seems to be using some kind of fixed aspect, with only width being taken into consideration, and the height being calculated from that.
Therefore, the simplest solution, in your case, given that you have a fixed height, is to reduce the width of the container, therefore making ContentFlow calculate an smaller height.