I'm trying to make a slider with width: 100% of the parent.
Here is a working demo.
.moving_container ul li {
/*width: 100%;*/
width: 500px;
height: 300px;
list-style: none;
float: left;
position: relative;
display: block;
/* background-repeat: no-repeat;
background-size: 100%;*/
}
It's working fine now. When i set width 100%, I am not getting the slider view as in width 500px. What is the correct property so that this slider works in all the sized windows.
I just played with background-properties. Unfortunately I din't get it.
Any Suggestions?
Add this on top of your JS Function:
$('.moving_container li').width($(window).width());
Related
I'm using the featherlight lightbox to open iframes with different widths, please see the 1st 2 links on the fiddle below:
http://jsfiddle.net/sm123456/d5Lvw1rs/
The issue is that I seem I cant seem to be able to make the iframe responsive ie. when the browser window goes below the iframe width, the iframe should switch to 100%.
I've tried the code below which should work great, but doesn't, even when removing data-featherlight-iframe-height="575" data-featherlight-iframe-width="800".
data-featherlight-iframe-style="width: 100% !important; max-width: 800px !important;"
Any assistance would be very much appreciated!
After reading the documentation, I found out you can add a custom class to the lightbox using the data-featherlight-variant="classname" attribute. Using this attribute, I added a different class to both the 800px and the 1350px one. Using that class, I applied the style. Check the JSFiddle to see it in action.
For the 800px width one:
data-featherlight-variant="custom-class-800"
#media only screen and (max-width: 800px) {
.custom-class-800,
.custom-class-800 .featherlight-content{
width: 100%;
}
.custom-class-800 .featherlight-content .featherlight-inner {
margin: 0 auto;
}
}
For the 1350px width one:
data-featherlight-variant="custom-class-1350"
#media only screen and (max-width: 1350px) {
.custom-class-1350,
.custom-class-1350 .featherlight-content {
width: 100%;
margin: 0;
}
}
JS Fiddle
Hey #JimWids
Try to use that CSS:-
.featherlight-iframe .featherlight-content{
/* dimensions: 1140px prevents iframe from spanning the full width of the browser */
width: 80%;
max-width: 1140px;
/* spacing */
margin: 0;
padding: 0;
}
.featherlight-iframe .featherlight-inner{
/* positioning */
display: block;
float: left;
position: relative;
/* dimensions */
width: 100%;
}
.featherlight .featherlight-inner:after{
/* dimensions */
content: "";
float: left;
width: 80%;
height:80%;
padding-top: 57%;
display: block;
position: relative;
}
}
Here is that code:- JS_Fiddle
use this css
#media (max-width: 1024px){
.featherlight .featherlight-content {
width: 100%;
}
.featherlight .featherlight-image {
width: 100% !important;
object-fit: cover;
}
}
Hey all you wizards of the interwebs,
I've been pulling my hair out for the past couple of days trying to figure this one out.
I'm trying to include a fullscreen video background and it seems I have hit a snag.
Below is an image of what I am trying to accomplish.
I tried it with the video element as well as an iframe. I can't get the div below to always nest under, when the browser window is resized.
Any help or pointers are greatly appreciated. Closest I've gotten was with a min-width/height but it still leaves a gap...
What I end up with is what shws in the 2nd img. The video resizes with the browser and there's a gap below it
To prevent the problem you need to do this:
css:
.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}
and put your video inside div1:
<div class="div1">
<video autoplay>...</video>
</div>
<div class="div2">
</div>
It don't allow video element to show at overflow. and div1 is always height:100% and div2 is always height:100%.
If you like to fit the video to the div1 add
object-fit: cover;
to the video tag.
IE Doesn't Support object-fit
I'm not sure if this will work but
Have you tried removing width: 100% and only keeping height: 100% ?
I might be able to give better suggestions, if you can show the code :p
EDIT:
Since you want height to be screen height and width can be more or less, I'd say, try
min-height: 100%;
width: auto;
height: auto;
This should do the trick
NEW EDIT:
body{
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
}
.videoInsert {
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
position: absolute;
left: 0%;
top: 0%;
}
video{
display: inline-block;
vertical-align: baseline;
object-fit: fill;
}
So i have a div with a background image and i would like to make the div same size as the background image when i resize the window, so i can place some text in the center of it and i want to image to be responsive and so the div also.
my html for the image and text:
<div id="headerimg" class="header">
<h1>Welcome to my website</h1>
</div>
and my cc for it so far:
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: cover;
width:100%;
}
.header{
height: 700px;
width: 100%;
margin: auto;
padding: 20%;
color: white;
text-align: center;
font-size: 50px;
}
i am just using a random image from google atm, ill replace later; but anyway.. how can i get the height to align whenever? Jquery maybe? -but im not realy familiar with jquery much...and yes, i want the div to be full width of the site all the time.
Would something like the following work for you:
https://jsfiddle.net/44k0320v/
I've updated your header width to use 50vw units, your example image has an aspect ratio of arount 2:1 meaning that if you want the div to maintain the correct height you need to set the height to be half of the viewport width (the measurement across the width of the screen is 100vw).
I have also updated the background image to have a size of 100% rather than cover so it's width will scale with the div.
I've also updated the font size to also use vw units.
New css below:
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: 100%;
}
.header{
box-sizing: border-box;
height: 50vw;
width: 100%;
margin: auto;
padding: 10% 20%;
color: white;
text-align: center;
font-size: 3.5vw;
}
A similar solution to jazibobs, also using the vw height but with more "flowy" text. Currently the background will respond to pretty much any width however at narrow widths it doesn't really make much sense with the text. For this you could use media queries to possibly even hide the background at smaller widths or just set the text smaller.
https://jsfiddle.net/kzhzasot/
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: 100% auto;
width: 100%;
height: 100vh;
}
.header{
margin: 0px;
padding: 0;
color: white;
text-align: center;
font-size: 50px;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
}
I am using jQuery to make a background image appear fixed (since background-attachment: fixed doesn't play nicely with background-size: cover). In some environments the image doesn't flicker but in others it does, and I can't figure out why. (A related but different question is here, but I'm not using parallax scrolling.)
It doesn't flicker here and on this fiddle:
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#bg').css('background-position', 'left ' + scrolledY + 'px');
});
body {
height: 3000px;
margin: 0;
}
#bg-wrap {
position: relative;
width: 100%;
}
#bg {
height: 600px;
width: 100%;
position: relative;
background-attachment: scroll;
background-image: url('http://classicescapes.businesscatalyst.com/Images/home-banner/CAPE_RT_desat.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: cover!important;
}
#bg-text {
position: absolute;
top: 200px;
left: 47%;
font-size: 3rem;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bg-wrap">
<div id="bg">
</div>
<div id="bg-text">Hello!</div>
It flickers here when using Webkit and Edge browsers (but doesn't flicker on IE and Firefox).
Over here it flickers until one initializes a Google Map by clicking on the "Region Map" tab.
Any help as to understanding the cause and providing a possible fix would be greatly appreciated.
Try using:
transform-style:flat
on the css rule of the flickering image
or
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
While I still don't know what is causing the issue on the test page, I fixed my original problem by removing a rogue CSS transform!
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!