I'm creating a responsive site and I'd like to use a really wide image slider (I'm sure you've seen the type of thing).
What I'd like to happen is for the main site to be, for example, maximum 1,200 pixels wide and use a fluid width. I'd then like the image slider to be, for example, 2,000 pixels wide. On a static site this is relatively straightforward as I could simply give the image slider a negative left margin of -400 pixels to center it. Sadly in the case of a responsive site this isn't possible as that offset needs to be fluid.
I did come across some script that made the offset fluid but this only worked when the screen was wider than the site width (i.e the max width of the main content area). When the window then becomes narrower than this max width the script fails to keep the image slider centered .
Any ideas how this could be written to keep the image slider centered horizontally in the window, whether the users window is wide or narrow?
<script type="text/javascript">
function setMargins() {
width = $(window).width();
containerWidth = $("#flexslider_width").width();
leftMargin = (containerWidth-width)/2;
$("#flexslider_width").css("marginLeft", -leftMargin);
}
$(document).ready(function() {
setMargins();
$(window).resize(function() {
setMargins();
});
});
</script>
Thanks for any thoughts in advance,
Tom
EDIT: I understand now. Try this: http://codepen.io/anon/pen/azoRwo
.outer{
position: relative;
width: 100%;
height: 100px;
border: 2px solid red;
overflow: hidden;
}
.image {
position: absolute;
left: 50%; /* Move to the middle of the parent */
margin-right: -50%; /* Remove that extra width */
transform: translate(-50%, 0); /* Move left again; No IE8 support*/
width: 1000px;
height: 96px;
border: 2px solid cyan; /* Just useful for debugging */
background: url('http://i.imgur.com/rBkbXS3.jpg');
overflow: hidden;
}
Basically we move right, then left, using percentages of the parent's width. If you want the same functionality in IE8, you'll have to use JavaScript.
Reference: http://www.w3.org/Style/Examples/007/center.en.html
Alright, check this out: http://codepen.io/anon/pen/LEPgLp
html, body {
margin: 0;
}
.image-slider{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
.main{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid green;
margin: 0 auto;
position: relative;
}
#media only screen and (max-width: 800px) {
body {
overflow: hidden;
}
.image-slider {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
top: 0;
}
.main {
margin-top: 100px;
}
}
When your window is smaller than 800px (was easier to develop. just change the values), I'll position your slider absolute and in the middle. Because of the absolute position, your .main div will move to the top so I'll add a margin-top. Just change your margin-top to the hight of your slider. Good luck!
Related
This is not my script.
I tried editing this script so when my pictures are clicked, they would not be larger than the device's resolution, and they would be centered in the screen. Unfortunately, what I've tried places them on the top-left and makes them smaller than the resolution.
I've tried margin auto, max-width / height, and removing top:0; left:0;
Here's where the script is deployed: http://idealportraits.com/
When I click an image on the PC, the original code works well. When I use my phone and tap an image, depending whether the image is larger vertically or horizontally, it becomes much too large and goes off-screen.
How do I make the image open as the full resolution (width or height, whichever is reached first) of the device being used, not larger, and centered in the screen?
<!-- Images enlarge on click -->
<script type="text/javascript">
function showImage(smSrc, lgSrc) {
document.getElementById('largeImg').src = smSrc;
showLargeImagePanel();
unselectAll();
setTimeout(function() {
document.getElementById('largeImg').src = lgSrc;
}, 1)
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.display = 'block';
}
function unselectAll() {
if(document.selection)
document.selection.empty();
if(window.getSelection)
window.getSelection().removeAllRanges();
}
</script>
<style type="text/css">
#largeImgPanel {
text-align: center;
display: none;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
</style>
<!-- End script -->
Just as a work around. I have typed up a quick CSS only onclick event for your images. So when you click on the images, it should expand them to 100% height/width, and also be centred on the screen.
It also means your have to copy/paste the relevant bits onto your piece of code, But why use JS when you can use CSS, after all people do disable Javascript sometimes.
http://codepen.io/Ballard/pen/JRjAod
.box {
width: 700px;
height: 700px;
background-color: #000;
color: white;
margin: 0 auto;
display: flex;
justify-content: center;
}
.inbox {
text-align: center;
vertical-align: middle;
line-height: 350px;
width: 350px;
height: 350px;
background-color: #fff;
color: #000;
align-self: center;
}
#btnctrl {
display: none;
}
#btnctrl:checked + label > .fb {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
margin: auto;
overflow: auto;
}
<div class="box">
<div class="inbox">
<input type="checkbox" id="btnctrl"/>
<label class="btn" for="btnctrl"><img src="https://s19.postimg.org/777mf3pdv/facebook.png" class="fb"></label>
</div>
</div>
Let me know if this is any good for you, may save alot of scripting time.
By the sounds of it, you might be dealing with the old Android position: fixed problem. Try this.
If that doesn't solve the problem, try setting 100% width and height on the document/container and then using max-width and max-height for the images.
I'm not providing this in the comment section, because I don't have enough reputation to post comments.
From what i can see, the problem is not just with the script. e.g. if you hold your mobile device in landscape mode and click on the images you will see that all large images are fully visible when clicked(they may not fill the screen though).
At the moment the HTML for the large images seem to be hardcoded with a height of 100%, you will need to remove that and set that in Javascript by checking the ratio, if it is portrait image then set the height to be 100% and if it is a landscape image then set the width to 100%
<div id="first">Something</div>
<div id="last">something too</div>
<style>
#last {
position: absolute;
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
}
#first {
}
</style>
My problem is that I can't reach last div with the border of the first div. I want last div to be at bottom and first div to have overflow:auto;? But it doesn't work. When I fill my div some text nothing is showing no scrollbar or anything like that and the first div kind of goes behind the last div even though I haven't assigned them any z-index values.
How Can I solve this? I want my first div to grow until it reaches last div and fill it with text maybe with scrolling appearing when it is only needed. I mean when two divs touch each other kind of.
This will give you a fixed size footer (#last) but the content (#first) expands as needed:
body {
margin: 0px;
padding: 0px;
}
#wrapper {
position: absolute;
top: 0;
bottom: 200px;
left: 0;
right: 0;
}
#first {
background-color: #5588FF;
width: 100%;
max-height: 100%;
overflow-y: auto;
}
#last {
background-color: #FF8855;
position: fixed;
bottom: 0px;
height: 200px;
width: 100%;
}
See this fiddle for the full solution: http://jsfiddle.net/xWa9f/4/
Is this what you want? Fiddle link: http://jsfiddle.net/emw2x/2/
body, html{
height: 100%;
}
#last {
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
border: 1px solid black;
width: 100%;
height: 10%;
}
#first {
border: 1px solid red;
height: 90%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
}
Give that a try to see if that's what you want.
if you accept some javascript in the mix, i have this solution for you.
first, change the absolute positioning to fixed positioning of the #last div.
set overflow:auto to the #first div and the javascript does the rest (you need jQuery):
(function () {
var heights = window.innerHeight;
var outerHeights = $("#last").outerHeight(true);
jQuery('#first').css('height', (heights - outerHeights) + "px");
})();
basically it calculates the window height of your monitor, it subtracts the height of the #last div and gives what's left to the #first div. when the content exceeds the available pixel height, a scroll bar will appear.
check it here: http://jsfiddle.net/vlrprbttst/rR7Uu/2/
the plus here is this works at any window resolution, so you don't have to worry about screen resolutions and you don't have to worry about the height of your #last div (margins, paddings, borders, whatever included)
I want to have the effect like dropbox:https://www.dropbox.com/ where my website is centered in the exact middle of the page.
Achieving this effect is way more complicated than it should be. Here's a bare-bones working example: http://jsfiddle.net/JakobJingleheimer/UEsYM/
html, body { height: 100%; } // needed for vertical centre
html { width: 100%; } // needed for horizontal centre
body {
display: table; // needed for vertical centre
margin: 0 auto; // needed for horizontal centre
width: 50%; // needed for horizontal centre
}
.main-container {
background-color: #eee;
display: table-cell; // needed for vertical centre
height: 100%; // needed for vertical centre
// overflow: auto; // <- probably a good idea
vertical-align: middle; // needed for vertical centre
width: 100%; // needed for horizontal centre
}
.container {
background-color: #ccc;
padding: 20px;
}
If you want to achieve this:
Here are different methods, with the pros/cons of each one, for centering a page vertically. Choose which one you prefer:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
EDIT. As suggested, I will proceed to explain one of the methods. It only works if you already know the height/width of the element to center (the link includes more methods). Assuming all your content is within <body>, and that your content is 900px x 600px, you can do in your css:
html {
width: 100%;
height: 100%;
}
body {
width: 900px;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px; /* Half of the height of your body */
}
However, this falls short for dynamically generated content, since you don't know the height of it. I've used it succesfully on log-in box pop-up and settings pop-up.
Another method I've used in the past for the whole page is the Method 1 from the link. It makes a set of divs to behave as a table, which can vertical-align to the middle.
If you want to align it vertically center, please check this web page: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you know the width and height of your page
then wrap your contents in following div css
.center
{
position:absolute;
top:50%;
left:50%;
margin-left: -(yourPageWidth/2);
margin-top: -(YourPageHeight/2);
}
On your topmost div give margin:0 auto 0 auto; Also define some width to that div.
First create a main container of the desired width and then put all your code inside the main container. For Eg.
<body>
<div id="container">
......... your code
</div>
</body>
And in the css
#container{
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
You can change the width as per your needs
<body>
<div class="container">
......... your code
</div>
</body>
#container{
width: 700px ;
margin:0 auto ;
padding:0px;
}
Try this:
html
<span id="forceValign"></span><!--
--><div id="centerMiddleWrap">
<div id="centered">Hello this is some text. Hello this is some text. Hello this is some text.</div>
</div>
CSS
html {
height: 100%;
background: #eee;
}
body {
margin: 0;
height: 100%;
/*important*/
text-align: center;
}
#centerMiddleWrap {
/*important*/
display: inline-block;
vertical-align: middle;
}
#forceValign {
/*important*/
height: 100%;
display: inline-block;
vertical-align: middle;
}
#centered {
background: #000;
color: #fff;
font-size: 34px;
padding: 15px;
max-width: 50%;
/*important*/
display: inline-block;
}
Here is an demo
Wrap a div and define its width, use margin:0 auto for centering the div.
You can check a site's CSS by using Firebug or browser extensions.
I'm having some trouble with a page that has a floating background image (absolutely positioned) where the image is dynamically changed out via javascript. Basically this is a big gallery that changes behind a portfolio:
I have a section of markup that looks like this:
<div class="content">
<div class="content-container">
<div class="content-image">
<img id="galleryTarget" src="../images/main/source.jpg" class="image-resize" alt="background image"/>
</div>
...etc...
Here's the relevant CSS classes:
.image-resize {
position: absolute;
min-height: 750px;
min-width: 1000px;
width: 100%;
left: 0;
text-align: left;
vertical-align: middle;
margin-top: -25%;
top: 25%;
}
.content-image {
position: absolute;
top: 0;
left: 200px;
width: 100%;
min-height: 750px;
max-height: 750px;
min-width:1000px;
overflow:visible;
opacity: 0.5;
z-index: 1;
}
.content-container {
position: relative;
min-height: 750px;
}
.content {
position: absolute;
top: 0;
width: 100%;
max-height: 750px;
overflow: hidden;
background: purple;
z-index: -5;
}
This is all absolutely positioned so that I can swap out the image source with Javascript and then dynamically resize the container (background) to fill the new content. There's minimum bounds so it always has a size.
What I'm trying to do is to pin this image to a CENTER point so that when it is resized the interesting parts of the image (rarely the top left corner) are displayed.
In the inspector in chrome I see that top and margin-top are never the same value even though they have the same (percentage) value. What am I missing here?
Example:
top: 187.5px and margin-top: -389.5px. It looks as though margin-top uses the img-source resolution and top uses something for the life of me I can't figure out--I'm assuming min-height + the offset in the page?
Any help here would be appreciated, this is a rather large part of the design and I'd love to have it better than what it is.
Browsers:
Chrome Version: 30.0.1599.66 m
Android Chrome: 30.0.1599.82
This does fix the problem in chrome--but I'd like to know why it is using 1000px as the baseline for the margin instead of the 750px of the unit.
/*Hack of a vector similar to 50%*/
margin-top: calc(-50% * 0.75);
top: 50%;
http://jsfiddle.net/3qMnM/1/
HTML:
<div class="info-panel"></div>
<div class="image">
<img src="http://placehold.it/960x1400">
</div>
CSS:
.image {
height: 100%;
width: auto;
margin-right: 200px;
}
.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}
I'm trying to scale images down (never up) dynamically to fit into the image-div (without cropping), which is variable in height (100%) and width (set to auto). The image also needs to be centered (vertically and horizontally) and have equal padding of a few pixels top and bottom.
There is an info panel next to the image container as you can see in the fiddle, but I'm not sure if this is relevant.
Do my statements make sense?
Thanks, I have spent way too much time experimenting with this already! :/
If I understand correctly, you want something like this.
It scales down if the image is too large, but keeps the original size when it fits inside the window. In other words, it never scales up - only down.
It is a combination of CSS and some jQuery:
This short JS centers the image vertically:
function verticallyCenterImage(){
var $img = $('.image img'),
windowHeight = $(window).outerHeight();
if($img.height() < windowHeight){
var delta = windowHeight - $img.height();
$img.css('margin-top', (delta / 2) + 'px');
}else{
$img.attr('style', '');
}
}
And this line of CSS keeps the image centered horizontally:
.image {
padding-right: 200px;
text-align: center; /* <- this one */
max-height: 100%;
overflow: hidden;
}
And to keep the original size of the image, I just set the max height and width on the img inside the .image class, like so:
.image img {
max-width: 96%;
max-height: 96%;
margin: 2%;
}
You can adjust the size and margins to your needs, just remember to keep them in relation too each other :)
Some of the techniques discussed here could work for you:
http://css-tricks.com/centering-in-the-unknown/
The trick there is to use table elements, or CSS 2.1 table display.
Edit: More approaches here: http://www.vanseodesign.com/css/vertical-centering/
You are mixing px with %. If you want to achieve that only by CSS, you need to use % for both widths:
.image {
width: 85%;
}
.image img {
width: 100%;
}
.info-panel {
position: fixed;
width: 15%;
height: 100%;
background-color: red;
right: 0px;
}
... otherwise, you have to use JS to calculate the current available width on the left side and assing it the .image div:
HTML
<div class="info-panel"></div>
<div class="image">
<img src="http://placehold.it/960x1400" />
</div>
CSS
.image {
min-height: 600px;
width: auto;
}
.image img {
width: 100%;
}
.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}
JS (jQuery)
$(document).ready(function() {
$('.image')
.css('min-height', 'auto')
.height($(window).height())
.width($(window).width() - $('.info-panel').width())
;
});