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>
Related
<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 have 2x Divs and 1x Img with the following CSS
#StageDiv {
position: absolute;
left: 50%;
margin-left: -200px;
}
#LogoDiv {
position: absolute;
margin-top: 135px;
left: 50%;
margin-left: -500px;
}
#logoimg {
/* max-width: 75%; /* */
width: 1000px; /* */
}
inside of #logoimg, I would like to use max-width: 75%; and then have margin-left: of both #LogoDiv and #StageDiv be a function of #logoimg as it changes
http://jsfiddle.net/3KLUW/1/
Is this possible in pure CSS or will I have to do this in javascript in a on resize event? (not sure what the actual function call is currently but im sure my buddy google will know) I think in the long run, I will most likely have to use a javascript event to scale my kineticjs stage anyway but I am curious to know if there is some CSS wizardry to do the first part.
Thoughts?
Edit:
window.onresize=function(){
var img = document.getElementById('logoimg');
var width = img.offsetWidth;
var div = document.getElementById('LogoDiv');
div.style.marginLeft= "-" + width/2 + "px";
};
still would be interested in a CSS solution
If you can get away with a wrapper div for the whole logo:
<div id="logo">
<div id="StageDiv">...</div>
<div id="LogoDiv">
<img id="logoimg" src="..." />
</div>
</div>
Then you can set the width and max-width on it, and use margin: auto to center it on the page:
#logo {
width: 1000px;
max-width: 75%;
margin: auto;
position: relative;
}
And positioning the other elements become much easier:
#LogoDiv {
top: 135px;
position: absolute;
}
#StageDiv {
text-align: center;
}
#logoimg {
width: 100%;
}
The margin: auto and text-align: center together give us the automatic margin you wanted.
Updated fiddle: http://jsfiddle.net/3KLUW/2/
The canvas will need to be scaled though, as you said on the question.
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.
I got simple html like below, my goal is to make the image full fill the page completely and proportionally and without the vertical scroll bar.
the image I use https://www.dropbox.com/s/w7t8sj7e5f86s8d/Dior2d1.jpg.zip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="mainImg"><img src="my_big_photo.jpg"></div>
</body>
</html>
html, body{
width: 100%;
height: 100%;
}
.mainImg{
width: 100%;
height: 100%;
}
.mainImg img{
width: 100%;
height: 100%;
}
CSS tricks have an article on this.
You want technique number 2.
With your existing HTML, you'll want something like this:
body {
margin: 0;
}
.mainImg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.mainImg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
http://jsbin.com/ekugASE/1/edit
Is there a reason why you would not load the image in the browser instead of an html page containing the image? Typically when someone wants to cover an entire page with an image it is only used as a background image. If that is the case you could set the background-image for the body in the css/style.
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())
;
});