Is there a way to horizontally center slides that have a max-height set with various widths using slick.js? Notice in the url below how they are floated to the left leaving an empty space to the right of each slide.
Here's is an example: http://valeriebischoff.com/staging/work/post-soviet-estonia/#feature
Couple ways to go about it, pick one
1) Remove max-height from .slick-slide
2) Add a min-width to .slick-slide and add overflow:hidden on the parent container.
3) Change from using an <img> tag to a <div> and set the image as the background, with the property background-size:cover
Related
I have three images to be shown on a page and I want the image which comes in center by sliding should have margin-top that means my center image should be little down then the other two images which are on both the sides of the image.
If you are using centerMode:true, there's a .slick-center class applied to the element in the middle. You can create a css rule like:
.slick-center {
margin-top:0.5%;
}
If you don't have centerMode:true on, and for some reason you can't enable it, you can always target the .slick-current class (which will be the first of the three slides that are showing, and then target it's adjacent sibling like this:
.slick-current + .slick-slide {
margin-top: 20px;
}
However, if both options are available to you, I would suggest going with Tutch's answer as it scales better in cases where you might increase/decrease slide counts dynamically.
I would like to make a menu effect such as on the example below, where HR tag is used to create sliding line effect under menu items.
But in the example under the link the "moving" hr is positioned using static settings (see the link for actual example):
http://codepen.io/rm/pen/ldhon
.two:hover ~ hr {
margin-left: 25%;
}
I have a set of images that constitute my website menu, but these are positioned in floating way and I do not know their position at design time. I need therefore to modify code above in such a way that at least margin-left matches the position of the element (image) that has class two (the one that gets hovered) and, if possible, also match its width to the width of the element with class two. How I could possibly achieve that, do I manage with css or have to have a jQuery code?
If you set the hr's position to absolute, you can set its left offset and width with jQuery:
$('.container a').mouseover(function() {
$('.container hr').css({
left: $(this).offset().left,
width: $(this).width()
});
});
I don't think you can do so in CSS alone without hard-coding the widths.
CodePen
My page has a 1000px container for the header(above the red box in below image) and the content(below the red box in the image attached). Those containers are fixed width. But I need to setup a image slider that will be displaying the images in full width.
I mean, I will be including a much wider image. Say, 1800x200 px. So, if the user's screen resolution(width) is less than or equal to 1000px, then the middle portion of the image would be displayed and the image slider should be 1000x200 px in size(resized). But if say the user's screen resolution is 1300(width), then the image slider should be resized displaying the center portion of the image and the slider container would be of size 1300x200 px in size!
Since there are lots of jQuery plugins already available, I thought of not to reinvent the wheel. So tried many jquery sliders. But none of them seems to be meeting my above needs. Or am I missing some settings in those sliders that I tried?
Any suggestions?
Maybe add an extra outer container? Then center the 1000px container within the outer one.
Then when you resize the window the image slider will respond to the outer container and the inner container stays centered.
outerContainer {
width: 100%;
.....
}
innerContainer {
width: 1000px;
margin: auto; /*or left:50% right:50%*/
}
you have to wrap all div in .wraaper div and define width 100%.
.wrapper{width:100%;}
and in inner div you have to define section using an
.inner(width: 1000px;)
where you need 100% slider dont use this .inner class.
this is help for you.
One page website.
Header at the top with anchor links
To different divs (sections) on the page.
Say my screen resolution is 1280*800 and each div section is max 800 and the content on each div section is visible when my browser is maximum size. I forgot to mention that scrolling is disabled so the other divs are only visible (scrolled automatically) using the anchor links at the top. So heres the problem, when I resize my browser, say for example theres only 450px worth of height on my browser, I can only see that amount of content on the screen and cannot scroll until the bottom of the div, so it hits the bottom of my browser.
Another point to understand is that all the elements in the div itself are not overflowing the height of the div so a simple overflow does not work because the issue is to do with the size of the browsers' height.
In essence when the browser window is anything less than 800px, the div is then covered up at the bottom by the amount reduced by the browser. I want the whole div (NOT THE CONTENT INSIDE IT) to be pushed up (top position) as far as it needs to so that the bottom of the div i.e. 800th pixel touches the bottom of the browser.
Any solution?
You can listen to changes in the window size and adjust the size of your divs to it. This way the div will always have the size of the window, so if it gets too small its overflow will show.
$("div").css("height", $(window).height());
$(window).bind("resize",function() {
$("div").css("height", $(window).height());
});
Working example at jsFiddle. Remember to set the div's overflow to auto, so they will show when the screen gets too small.
Update: from what I could understand in your update, your requirements can be satisfied with simple CSS. Let the html, body overflow at will, but set the "container" div's overflow to hidden (so it will only scroll one page at a time) and its height to 800px. When the browser window is resized to less than 800 px, the body's scroll bars will appear, letting you scroll the container div up and down. Both the container and the contentes will remain the same size: 800px.
html,body {
overflow: auto;
}
.container, .contents {
height: 800px;
overflow: hidden;
}
Working example at jsFiddle. Is that what you need? If you literally want to push the container div up until its bottom is aligned to the window, try setting padding-top or margin-top instead of top (though in this case I don't know how the scrolling will work).
Use media queries:
#media screen and (max-height: 450px) {
body { overflow: auto; } /* Or change the height or whatever */
}
I think the best solution to set min-height of main wrap 800px, else you have to add overflow hidden for your main content. Scrolling can be triggered by setting main content top position, but it must be absolute or similar. You cat write a function witch helps you to move main content changing it's top position.
I am translating a flash carousel to JavaScript and I am having problems with the position. This is the CSS of the div that contains the images.
#tiovivo{
height:382px;
width:793px;
background-color:#F5F5F5;
z-index:-1000;
overflow:hidden;
position:relative; }
If the position is not relative the JavaScript code has to be longer and the images go out of the border
The images are in the div like this:
<div id="tiovivo">
<img id="tio4" style="cursor:pointer; position:absolute;" onClick="location.href='tio4.php'" height="150px" src="tio4.jpg">
<img id="tio5" style="cursor:pointer; position:absolute;" onClick="location.href='tio5.php'" height="150px" src="tio5.jpg">
</div>
The problem is that when #tiovivo is position:relativeI am unable to click the images, the events "onclick" don't work and the cursorpointer is not shown.
If #tiovivo is in position:static the "onclick" and the cursor:pointer do work correctly.
I need images "position: absolute" so I can put them easily in the JavaScript code.
1.) Remove z-index:-1000 to make the all elements in the div clickable.
2.) If absolute position for the images, you have to add a vertical and a horizontal position (left or right, top or bottom) to them.
Also see my jsfiddle.
Your problem is the z-index: -1000 setting.
Compare this (with the z-index on #tiovivo):
http://jsfiddle.net/ambiguous/5HZdp/
and this (without the z-index on #tiovivo):
http://jsfiddle.net/ambiguous/HLp3Z/
Your negative z-index is pushing #tiovivo and its children under <body> so the images never receive click events. You don't need the z-index to get your absolutely positioned images on top, they'll be on top by default.
There are several problems with your case
there is no javascript involved, at least it is has nothing to do with positioning here
you are using position absolute with no other position attributes eg.left,right etc.
remove z-index CSS and it will work. You are placing whole DIV UNDER everything else even if it is transparent
Thank you all, it was the z-index: -1000 I used this index because I was programing a "3D" effect and I want to avoid that the bottom of #tiovivo cover the images.
This is the function I use to update the carrousel
pos0+=(offx-tempX)/5000;if(pos0> 6.28318531){pos0-=6.28318531}
image0.style.left=offx+310*Math.cos(pos0)+"px";
ytilt=Math.sin(pos0);
image0.style.top=offy+310*ytilt*((offy+tempY)/1000)+"px";
image0.style.zIndex=Math.round(ytilt*10);
pos1+=(offx-tempX)/5000;if(pos1> 6.28318531){pos1-=6.28318531}
image1.style.left=offx+310*Math.cos(pos1)+"px";
ytilt=Math.sin(pos1);
image1.style.top=offy+310*ytilt((offy+tempY)/1000)+"px";
image1.style.zIndex=Math.round(ytilt*10);
I fixed the problem adding an offset to zIndex of the images because sin() function goes from -1 to 1.
image0.style.zIndex=100+Math.round(ytilt*10);
And removing the z-index: -1000 from #tiovivo