So here is the idea, creating a sidescrolling game from JS, and working on the enviroment. The foreground element is set to scroll normally, the background elements are fixed (sky, sun). I have a middleground element that I want to scroll along with the foreground, but I want it to move in smaller 'porportion' to the foreground. It is a fixed element of the page, so I suppose that I will probably need to access the layer and adjust the background-position, but I am not sure how to accomplish this in javascript. Would really like to leave jquery out of the equation and go just with the JS and CSS.
CSS code:
<style>
body{ background: #5993fc; text-align: center; height:100%; width:100%;
padding: 0; margin: 0; overflow-x: auto; overflow-y: hidden; }
.sun{ position:fixed; height: 320px; width: 320px; z-index: 10;
background-image: url('wasteland/wasteland_sun.png'); opacity: .9;}
.cloud{ position:absolute; height: 160px; width: 800px; z-index: 30;
background-image: url('wasteland/wasteland_cloud.png'); }
#ground{ position:absolute; height: 169px; width: 10000px; z-index: 130;
background-image: url('wasteland/wasteland_foreground.png');bottom: 0px;left: 0px; }
#middleground { position:fixed; height: 244px; width: 100%; z-index: 129;
background-image: url('wasteland/wasteland_middleground.png');bottom:80px;left:0px; }
</style>
You can see an example of the actual page and issue http://thomasrcheney.com/games/wasteland-perspective.html
and a jsfiddle here http://jsfiddle.net/K5f7b/
The only thing I can think of after pondering is an event listener attached to the arrowkey, but that would be useless if the user were to grab and drag the scrollbar. Just not even sure how to best approach writing a function to handle this.
Related
I've started using Codepen for fun, and I wanted to try my hand out at this JavaScript code called "Croppie"(I'm new and still learning JavaScript).
I want to place an image on top of the div that contains the JavaScript. But the image does not show up and gets hidden behind the div. I also want to be able to move the image in the viewport even with the image on top of it.
I've tried messing around with the z-index, but the image I want on top keeps getting hidden behind the div. Here is the CodePen. (It wouldn't let me post without putting any code in my question so this is what I'm talking about in the CSS).
.mask {
max-width: 100%;
max-height: 100%;
background-image: url('http://eprogramers.com/triangle.gif');
position: absolute;
z-index: 1;
}
#demo-basic {
width: 300px;
height: 300px;
margin: auto;
z-index: -1;
}
I changed the style of mask CSS class as follows:
.mask{
width: 100%;
height: 100%;
background-image:url('http://eprogramers.com/triangle.gif');
background-repeat:no-repeat;
position:absolute;
z-index:99;
}
Please check the following code snippet:
//create a variable called basic, the variable attaches to div called demo-basic, which is an instance of croppie
var basic = $('#demo-basic').croppie({
//awknowledge the viewport
viewport: {
width: 150,
height: 200
}
});
//basic variable.croppie binds with url of cat
basic.croppie('bind', {
url: 'https://foliotek.github.io/Croppie/demo/cat.jpg',
points: [0,0,0,0]
});
body {
background-color: pink;
}
.mask{
width: 100%;
height: 100%;
background-image:url('http://eprogramers.com/triangle.gif');
background-repeat:no-repeat;
position:absolute;
z-index:99;
}
#demo-basic {
width: 300px;
height: 300px;
margin: auto;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.4.2"></script>
<script src="https://foliotek.github.io/Croppie/croppie.js"></script>
<link rel="Stylesheet" type="text/css" href="https://foliotek.github.io/Croppie/croppie.css" />
<div id='demo-basic'>
<div class="mask"></div>
</div>
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;
}
Here is a simplified JSFiddle of the problem.
As you can see, the content is beat out of alingment with the header because of the scrollbar.
As far as I know, the only way to deal with this is to calculate the width of the scrollbar using Javascript (David Walsh's excellent method springs to mind) and to set it as left/right: -scrollbarwidthpx value to the header.
However, considering the dynamic nature of the page I'm working on, with the headers place in the DOM and position changing depending on at what point the user has scrolled to, this is an option I am hoping to turn to only if there's nothing else I can do.
My question is, is there any way that I can maybe take the scrollbars or the content out of the flow while preserving a scrolling overflow, or otherwise align the two elements using only HTML/CSS? Are scrollbar widths consistent across all browsers/OS's that have them affect the flow? Or will I have to resort to using Javascript to align them?
Thanks!
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
.scroll {
overflow: auto;
width: 100%;
height: 100%;
}
#content{
width: 400px;
height:auto;
margin: auto;
background:gray;
}
.header {
width: 400px;
position: fixed;
margin: 0 auto;
height: 60px;
background: yellow;
z-index: 10;
}
.content {
height: 1200px;
background: linear-gradient(red, orange);
width: 100%;
margin: auto;
position: relative;
z-index: 1;
border-top:61px solid;
border-bottom:1px solid;
}
<div class="scroll">
<div id="content">
<div class="header"></div>
<div class="content"></div>
</div>
</div>
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%;
I have a <div id="right_side_bar"> with css:
#right_side_bar{
margin-top:38px;
width:272px;
margin-left:722px;
background-color:#FFF;
padding-bottom:20px;
overflow-y:scroll;
}
I saw similar questions on stack but I can't figure out how to make the right_side_bar change its height so that its always 100% of the window. I want it fixed so that it doesn't scroll with the rest of the page. But exactly the way Gawker.com does it where the div itself is scrollable.
It's simple:
#right_side_bar {
position: fixed;
top: 38px;
bottom: 20px;
background-color: white;
overflow-y: scroll;
width: 272px;
}