We Keep Coding

Why is the iframe not taking up the entire page?

I'm trying to get https://vscode.dev/ to pop up and take up the entire page when I click on the icon, but instead it seems to be only taking up the top part of the page. how can i fix this?
var div = document.getElementById("content");
while(div.firstChild) {
div.removeChild(div.firstChild);
}
document.getElementById("vscode").height = "100%";
document.getElementById("vscode").width = "100%";
}```

Elements are not 100% height by default and child elements are dependent on the parent height.
So you need to set the height of the parents including html and body elements to 100% height if you want a child to be 100% height.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#vscode {
width: 100%;
height: 100%;
border:0
}
<iframe src="https://vscode.dev/" id="vscode"/>
Additionally, you could use 100vh

html2canvas not displaying images in child divs

I am trying to work with html2canvas to create an image out of a div
Brief:
I have an image (png) with a transparent area in it
I have another image (can be jpg or png) that will be dragged/resized
to look good inside the transparent area of the above image using a
helper div
I have the helper div that will have highest z-index with draggable
and resizable
After user is happy he can click "done editing" to create a canvas with end result showing all images
<div id="container">
<div id="artwork">
<img src="http://preview.ibb.co/gsvuPR/photo1.png" alt="photo1" border="0">
</div>
<div id="img">
<img src="http://puckerupbuttercup.files.wordpress.com/2016/02/0092-happy-alone.jpg"/>
</div>
<div id = "dragger">
</div>
</div>
<a href="#d" id="done">
done editing
</a>
body {
padding: 0;
margin: 0
}
#container {
background: #ccc;
height: 400px;
width: 600px
}
#artwork {
width: 100%;
z-index: 2;
position: absolute;
}
#artwork img {
height: 400px;
width: 600px
}
#img {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
z-index: 1;
}
#img img {
position: relative
}
#dragger {
border: dashed 3px grey;
z-index: 3;
cursor: all-scroll
}
#done {
position: absolute;
right: 0;
top: 0;
z-index: 444;
padding; 5px;
background: yellow
}
$("#img img").css("max-width",$("#artwork img").width());
$("#img img").css("max-height",$("#artwork img").height());
$("#dragger").css("max-width",$("#artwork img").width()-5);
$("#dragger").css("max-height",$("#artwork img").height()-5);
var img_h = $("#img img").height()-5;
var img_w = $("#img img").width()-5;
var right = $("#artwork img").width()-img_w-5;
var bottom = $("#artwork img").height()-img_h-5;
$("#dragger").width(img_w);
$("#dragger").height(img_h);
$("#dragger").draggable({
axis: 'xy',
containment : [0,0,right,bottom],
drag: function( event, ui ) {
$("#img img").css('top', ui.offset.top +'px');
$("#img img").css('left', ui.offset.left +'px');
}
});
$("#dragger").resizable({
containment: "parent"
});
$( "#dragger" ).on( "resize", function( event, ui ) {
$("#img img").css('width', ui.size.width +5+'px');
$("#img img").css('height', ui.size.height +5+'px');
var img_h = $("#img img").height()-5;
var img_w = $("#img img").width()-5;
var right = $("#artwork img").width()-img_w-5;
var bottom = $("#artwork img").height()-img_h-5;
$("#dragger").draggable({
axis: 'xy',
containment : [0,0,right,bottom],
drag: function( event, ui ) {
$("#img img").css('top', ui.offset.top +'px');
$("#img img").css('left', ui.offset.left +'px');
}
});
});
$("#done").on("click",function(){
$("#dragger").toggle();
html2canvas($("#container"), {
allowTaint: true,
logging: true,
onrendered: function (canvas) {
document.body.appendChild(canvas);
}
});
});
All javascript is on ready
Everything work good in terms of resizing/dragging but html2canvas is not doing its job to display the images in a canvas for user to save
Here is a fiddle https://jsfiddle.net/p3vzgbzo/5/
I have tried this code locally with the images on same path to the page with no luck
I tried the DataToURL as well and didn't return any image
Ultimately I would like the rendered image to be uploaded to the server if possible as well
I am thinking the image needs to be converted to base code?
Thank you

Either the images in the #container must come from the same origin as the page, or you will have to embed them via base64.
Working JSFiddle with base64 images

This solution also will help someone. Elements with the absolute position are not rendering by default. Make sure all your elements are not absolute in position.

Styles apply just to first two slides

I 'm trying to do kind of slideshow on the background using two img tags. I have a couple of random images, so I have a javascript function to get a random name. But the main problem is: when I zoom or resize window first two slides crop well and display without any problem, but after that every slide is changing if I try to resize the window or zoom in-out.
Here you can see that bug: cullycross.github.io(nevermind about big images, im gonna resize them)
Here is my code:
function randomBackground () {
var active = $('#background .active');
var next = ($('#background .active').next().length > 0) ? $('#background .active').next() : $('#background img:first');
next.attr('src', getRandomName());
var imgHeight = next.height();
var windowHeight = $(window).height();
var diff = imgHeight - windowHeight;
if(diff > 0) {
next.css('top', -diff*0.6);
}
next.css('z-index', 2);
active.fadeOut(1500, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
}
window.onload = function() {
$('#background .active').attr('src', getRandomName());
$('#background').fadeIn(1500);
setInterval(randomBackground, 5000)
}
Here is css:
#background {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
#background img {
position: absolute;
z-index: 1;
float: left;
bottom: 0px;
left: 0px;
top: 0px;
height: auto;
width: 100%;
}
#background img.active {
z-index: 3;
}
Here is part of html:
<div id="background">
<img id="current-image" class="active" />
<img id="next-image" />
</div>

It seem to affect only the images loaded after first run.
Try adding images directly into html, using a
<ul><li><img ...></li></ul>
structure, and get the image from there.

You should decrease the fadeout delay. The problem is caused from the browser since the delay is big it can't handle both fadeout and zoom in/out
active.fadeOut(300, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
And try to use light size pictures, with the same aspect ratio

I didn't found an answer, but I found a library, that makes possible that thing, that I want. Thx to https://github.com/srobbin/jquery-backstretch

Changing the mask height depending on a responsive image

Having a problem in trying to copy the height of a responsive image to my mask on first load and on every time the window is resized. I've tried a few js scripts, but still I cant make it happen.
It is really a responsive image slider with a div(mask) exactly over it whatever the viewport screen size is.
this is my jQuery script:
function maskInit(){
var offsetDots = $("#slide").offset().top + $("#slide").height() + "px";
$("#mask").height() = offsetDots;
}
$(document).ready(function() {
maskInit();
});
$(window).resize(function(){
maskInit();
});
and my CSS:
#slide{
height: 10vw; /* to simulate a responsive image */
width: 100%;
margin: 0;
padding: 0;
background: red;
z-index: 0;
}
#mask{
position: absolute;
z-index: 1;
top: 0;
right: 0;
left: 0;
background: gray;
opacity: 0.8;
}
I've setup a jsFiddle here to simulate my problem

There is something wrong with your script.
You are NOT setting the mask height with this:
$("#mask").height() = offsetDots;
Check jQuery .height()
Instead use it this way:
$("#mask").height(offsetDots);
or you can set via css:
$("#mask").css({"height":offsetDots});
Here's your updated jsFIDDLE demo

.height() is a function so you can not do $("#mask").height() = offsetDots; use $("#mask").height(offsetDots); or by .css({"height":offsetDots}) to set height.

Zoom on a picture on resizing

I'm developing a website where I have to display a picture (not a problem).
But, I have to display it as this link: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
So, On resizing, I have to zoom on the picture to never scale it.
Does some on know how to do it?
Here is what I have:
html:
<div id="container_images">
<ul>
<li><img src="images/desktop/myimage.jpg" alt="An awesome image"></li>
</ul>
</div>
CSS:
#container_images{
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -999;
height: 100%;
width: 100%;
}
#container_images li{
display: block;
list-style: none;
z-index: -30;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:1;
}
#container_images li img{
width: 100%;
height: 100%;
display: block;
}

If I understood correctly you don't need the browser's inbuilt zooming (ctrl+), you just want to make the picture fill in the whole window of the browser when the window is resized.
You will need 2 things for that.
First, you need some javascript to execute on window resize event, then you will need some simple maths to calculate the center of the picture taking into account the new window size and set left/top margin of the picture to new values.
You can easily do that with jQuery:
$(window).resize(function() {
var h = $(window).height();
var w = $(window).width();
var pic = $('#container_images img');
var pic_width = pic.width(), pic_height = pic.height();
$(pic).css('margin-left': (w - pic_width)/2).css('margin-top': (h - pic_height)/2);
});
One thing to remember is that if your picture's width/height is already changed from its original size, you will get that new size from width() and height() functions.
So you either should make sure the original is not touched, or use one of the solution out there for grabbing the original picture size (e.g. How do I get actual image width and height using jQuery?).
Also the above snippet is to just get you started, you should grab the picture and its parameters in some init function and only recalculate/modify css on resize event.