I want to Generate and Download Screenshot of webpage without lossing the styles. I have a web page .In that web page i have a download button . When user click on download button then the screen shot of entire Page need to download as image in user computer . How can i do this ?
Please check my code
Index.html
<html>
<body>
<link href="style.css" rel="stylesheet">
<h1>Scrrenshot</h1>
<form class="cf">
<div class="half left cf">
<input type="text" id="input-name" placeholder="Name">
<input type="email" id="input-email" placeholder="Email address">
<input type="text" id="input-subject" placeholder="Subject">
</div>
<div class="half right cf">
<textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
</div>
<input type="submit" value="Submit" id="input-submit">
</form>
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>
</body>
<script>
(function (exports) {
function urlsToAbsolute(nodeList) {
if (!nodeList.length) {
return [];
}
var attrName = 'href';
if (nodeList[0].__proto__ === HTMLImageElement.prototype
|| nodeList[0].__proto__ === HTMLScriptElement.prototype) {
attrName = 'src';
}
nodeList = [].map.call(nodeList, function (el, i) {
var attr = el.getAttribute(attrName);
if (!attr) {
return;
}
var absURL = /^(https?|data):/i.test(attr);
if (absURL) {
return el;
} else {
return el;
}
});
return nodeList;
}
function screenshotPage() {
urlsToAbsolute(document.images);
urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
var screenshot = document.documentElement.cloneNode(true);
var b = document.createElement('base');
b.href = document.location.protocol + '//' + location.host;
var head = screenshot.querySelector('head');
head.insertBefore(b, head.firstChild);
screenshot.style.pointerEvents = 'none';
screenshot.style.overflow = 'hidden';
screenshot.style.webkitUserSelect = 'none';
screenshot.style.mozUserSelect = 'none';
screenshot.style.msUserSelect = 'none';
screenshot.style.oUserSelect = 'none';
screenshot.style.userSelect = 'none';
screenshot.dataset.scrollX = window.scrollX;
screenshot.dataset.scrollY = window.scrollY;
var script = document.createElement('script');
script.textContent = '(' + addOnPageLoad_.toString() + ')();';
screenshot.querySelector('body').appendChild(script);
var blob = new Blob([screenshot.outerHTML], {
type: 'text/html'
});
return blob;
}
function addOnPageLoad_() {
window.addEventListener('DOMContentLoaded', function (e) {
var scrollX = document.documentElement.dataset.scrollX || 0;
var scrollY = document.documentElement.dataset.scrollY || 0;
window.scrollTo(scrollX, scrollY);
});
}
function generate() {
window.URL = window.URL || window.webkitURL;
window.open(window.URL.createObjectURL(screenshotPage()));
}
exports.screenshotPage = screenshotPage;
exports.generate = generate;
})(window);
</script>
</html>
style.css
#import "compass/css3";
#import url(https://fonts.googleapis.com/css?family=Merriweather);
$red: #e74c3c;
*,
*:before,
*:after {
#include box-sizing(border-box);
}
html, body {
background: #f1f1f1;
font-family: 'Merriweather', sans-serif;
padding: 1em;
}
h1 {
text-align: center;
color: #a8a8a8;
#include text-shadow(1px 1px 0 rgba(white, 1));
}
form {
border: 2px solid blue;
margin: 20px auto;
max-width: 600px;
padding: 5px;
text-align: center;
}
input, textarea {
border:0; outline:0;
padding: 1em;
#include border-radius(8px);
display: block;
width: 100%;
margin-top: 1em;
font-family: 'Merriweather', sans-serif;
#include box-shadow(0 1px 1px rgba(black, 0.1));
resize: none;
&:focus {
#include box-shadow(0 0px 2px rgba($red, 1)!important);
}
}
#input-submit {
color: white;
background: $red;
cursor: pointer;
&:hover {
#include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
}
}
textarea {
height: 126px;
}
}
.half {
float: left;
width: 48%;
margin-bottom: 1em;
}
.right { width: 50%; }
.left {
margin-right: 2%;
}
#media (max-width: 480px) {
.half {
width: 100%;
float: none;
margin-bottom: 0;
}
}
/* Clearfix */
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.half.left.cf > input {
margin: 5px;
}
For this i used the method [http://www.xpertdeveloper.com/2012/10/webpage-screenshot-with-html5-js/] , here screenshot is generated but without style also it is not downloading . Please help , is there any jQuery library available for this?
You can achieve this using the following JavaScript libraries ...
html2canvas ( for taking screenshot of webpage )
FileSave.js ( for downloading the screenshot as an image )
ᴅᴇᴍᴏ
(function(exports) {
function urlsToAbsolute(nodeList) {
if (!nodeList.length) {
return [];
}
var attrName = 'href';
if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
attrName = 'src';
}
nodeList = [].map.call(nodeList, function(el, i) {
var attr = el.getAttribute(attrName);
if (!attr) {
return;
}
var absURL = /^(https?|data):/i.test(attr);
if (absURL) {
return el;
} else {
return el;
}
});
return nodeList;
}
function screenshotPage() {
var wrapper = document.getElementById('wrapper');
html2canvas(wrapper, {
onrendered: function(canvas) {
canvas.toBlob(function(blob) {
saveAs(blob, 'myScreenshot.png');
});
}
});
}
function addOnPageLoad_() {
window.addEventListener('DOMContentLoaded', function(e) {
var scrollX = document.documentElement.dataset.scrollX || 0;
var scrollY = document.documentElement.dataset.scrollY || 0;
window.scrollTo(scrollX, scrollY);
});
}
function generate() {
screenshotPage();
}
exports.screenshotPage = screenshotPage;
exports.generate = generate;
})(window);
#import url(https://fonts.googleapis.com/css?family=Merriweather);
$red: #e74c3c;
*,
*:before,
*:after {
#include box-sizing(border-box);
}
html,
body {
background: #f1f1f1;
font-family: 'Merriweather', sans-serif;
padding: 1em;
}
h1 {
text-align: center;
color: #a8a8a8;
#include text-shadow(1px 1px 0 rgba(white, 1));
}
form {
border: 2px solid blue;
margin: 20px auto;
max-width: 600px;
padding: 5px;
text-align: center;
}
input,
textarea {
border: 0;
outline: 0;
padding: 1em;
#include border-radius(8px);
display: block;
width: 100%;
margin-top: 1em;
font-family: 'Merriweather', sans-serif;
#include box-shadow(0 1px 1px rgba(black, 0.1));
resize: none;
&:focus {
#include box-shadow(0 0px 2px rgba($red, 1)!important);
}
}
#input-submit {
color: white;
background: $red;
cursor: pointer;
&:hover {
#include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
}
}
textarea {
height: 126px;
}
}
.half {
float: left;
width: 48%;
margin-bottom: 1em;
}
.right {
width: 50%;
}
.left {
margin-right: 2%;
}
#media (max-width: 480px) {
.half {
width: 100%;
float: none;
margin-bottom: 0;
}
}
/* Clearfix */
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.half.left.cf > input {
margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="wrapper">
<h1>Scrrenshot</h1>
<form class="cf">
<div class="half left cf">
<input type="text" id="input-name" placeholder="Name">
<input type="email" id="input-email" placeholder="Email address">
<input type="text" id="input-subject" placeholder="Subject">
</div>
<div class="half right cf">
<textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
</div>
<input type="submit" value="Submit" id="input-submit">
</form>
</div>
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>
I found that dom-to-image did a much better job than html2canvas. See the following question & answer: https://stackoverflow.com/a/32776834/207981
If you're looking to download the image(s) you'll want to combine it with FileSaver.js (already mentioned here), and if you want to download a zip with multiple image files all generated client-side take a look at jszip.
Few options for this
either use this
<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>
or You can use Mordernizr
or maybe this works
<a href="/path/to/image" download>
<img src="/path/to/image" />
</a>
refer to this link aswell
[1] http://www.w3schools.com/tags/att_a_download.asp
I have a classic message form, which does not need a function to sent a messages. She created only for analyzing all input fields on content, and if the input fields are clear - script must show the tooltips info for the customer.
The problem is when I click on the button with pre-written fields, content in the fields are gone.
var fromWho = document.querySelector('[name="from"]');
var pass = document.querySelector('[name="pass"]');
var repeatPass = document.querySelector('[name="repeatPass"]');
var message = document.querySelector('[name="message"]');
var button = document.querySelector('button');
function onClick(e) {
if (fromWho.value = '') {
var helpFrom = document.createElement('span');
helpFrom.innerHTML = 'Please, insert sender data!';
helpFrom.style.color = 'red';
};
if (pass.value = '') {
var helpPass = document.createElement('span');
helpPass.innerHTML = 'Please, insert password!';
helpPass.style.color = 'red';
};
if (repeatPass.value != pass.value) {
var helpRepeatPass = document.createElement('span');
helpRepeatPass.innerHTML = 'Passwords do not match!';
helpRepeatPass.style.color = 'red';
};
if (message.value = '') {
var helpMessage = document.createElement('span');
helpMessage.innerHTML = 'Wrie your message!';
helpMessage.style.color = 'red';
};
console.log(fromWho.value);
}
button.addEventListener( 'click', onClick );
body {
font-family: 'Arial', sans-serif;
font-size: 12px;
}
p {
display: inline-block;
margin: 0 0 5px 0;
}
input, select {
float: right;
}
input[type="button"] {
float: left;
}
textarea {
width: 288px;
height: 114px;
margin: 0px;
resize: vertical;
}
.message-wrap {
width: 294px;
height: auto;
}
.message-wrap__from {
margin-bottom: 5px;
height: 22px;
}
.message-wrap__password {
margin-bottom: 5px;
height: 22px;
}
.message-wrap__repeatPassword {
margin-bottom: 5px;
height: 22px;
}
.message-wrap__toWhom {
margin-bottom: 5px;
height: 22px;
}
.message-wrap__message {
margin-bottom: 5px;
}
.message-wrap__message > p {
display: block;
}
.toWhom__select {
width: 160.5px;
height: 22px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div class="message-wrap">
<div class="message-wrap__from">
<p>From</p>
<input type="text" name="from">
</div>
<div class="message-wrap__password">
<p>Your password</p>
<input type="password" name="pass">
</div>
<div class="message-wrap__repeatPassword">
<p>Repeate password</p>
<input type="password" name="repeatPass">
</div>
<div class="message-wrap__toWhom">
<p>To</p>
<select class="toWhom__select">
<option value="1">Logistic sector</option>
<option value="2">Financial sector</option>
<option value="3">Director</option>
</select>
</div>
<div class="message-wrap__message">
<p>Message:</p>
<textarea name="message" name="message"></textarea>
</div>
<button>Check</button>
</div>
<script>
</script>
</body>
</html>
if conditions need to be checked with a == or a ===. = will give a new value to the variable and this explains the behaviour.
if (fromWho.value == '') {
var helpFrom = document.createElement('span');
helpFrom.innerHTML = 'Please, insert sender data!';
helpFrom.style.color = 'red';
};
...
your example:
var fromWho = document.querySelector('[name="from"]');
var pass = document.querySelector('[name="pass"]');
var repeatPass = document.querySelector('[name="repeatPass"]');
var message = document.querySelector('[name="message"]');
var button = document.querySelector('button');
function onClick(e) {
if (fromWho.value == '') {
var helpFrom = document.createElement('span');
helpFrom.innerHTML = 'Please, insert sender data!';
helpFrom.style.color = 'red';
};
if (pass.value == '') {
var helpPass = document.createElement('span');
helpPass.innerHTML = 'Please, insert password!';
helpPass.style.color = 'red';
};
if (repeatPass.value != pass.value) {
var helpRepeatPass = document.createElement('span');
helpRepeatPass.innerHTML = 'Passwords do not match!';
helpRepeatPass.style.color = 'red';
};
if (message.value == '') {
var helpMessage = document.createElement('span');
helpMessage.innerHTML = 'Wrie your message!';
helpMessage.style.color = 'red';
};
console.log(fromWho.value);
}
button.addEventListener( 'click', onClick );
body {
font-family: 'Arial', sans-serif;
font-size: 12px;
}
p {
display: inline-block;
margin: 0 0 5px 0;
}
input, select {
float: right;
}
input[type="button"] {
float: left;
}
textarea {
width: 288px;
height: 114px;
margin: 0px;
resize: vertical;
}
.message-wrap {
width: 294px;
height: auto;
}
.message-wrap__from {
margin-bottom: 5px;
height: 22px;
}
.message-wrap__password {
margin-bottom: 5px;
height: 22px;
}
.message-wrap__repeatPassword {
margin-bottom: 5px;
height: 22px;
}
.message-wrap__toWhom {
margin-bottom: 5px;
height: 22px;
}
.message-wrap__message {
margin-bottom: 5px;
}
.message-wrap__message > p {
display: block;
}
.toWhom__select {
width: 160.5px;
height: 22px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div class="message-wrap">
<div class="message-wrap__from">
<p>From</p>
<input type="text" name="from">
</div>
<div class="message-wrap__password">
<p>Your password</p>
<input type="password" name="pass">
</div>
<div class="message-wrap__repeatPassword">
<p>Repeate password</p>
<input type="password" name="repeatPass">
</div>
<div class="message-wrap__toWhom">
<p>To</p>
<select class="toWhom__select">
<option value="1">Logistic sector</option>
<option value="2">Financial sector</option>
<option value="3">Director</option>
</select>
</div>
<div class="message-wrap__message">
<p>Message:</p>
<textarea name="message" name="message"></textarea>
</div>
<button>Check</button>
</div>
<script>
</script>
</body>
</html>
I am trying to make table that consist of columns and rows. User type how many rows and columns want and on button click and table is created. My problem is to get numbers sorteed in circular way, lowest in bottom right corner and highest in the middle?
This is what i created so far
$('.submit').click(function() {
var numVal = $('.num').val();
var otherVal = $('.num2').val();
var sum = eval(numVal * otherVal);
var numbers = [];
for (var i = 1; i <= sum; i++) {
numbers.push(i)
}
for (var i = 0; i < numbers.length; i++) {
$('ul').prepend('<li>' + numbers[i] + '</li>')
}
var containerWidth = $('.container').width(numVal * 46 + 'px')
$('.container').height(otherVal * 46 + 'px')
$('.wrapper').width(containerWidth + 250 + 'px')
var middle = numbers[Math.round(($('li').length - 1) / 2)];
});
$('.clear').click(function() {
$('ul').html('');
$('.num, .num2').val('').focus();
});
* {
margin: 0;
padding: 0;
}
.container {
max-width: 230px;
}
.container:after {
content: "";
display: block;
clear: both;
}
ul {} ul:after {
content: "";
display: block;
clear: both;
}
li {
list-style: none;
width: 40px;
line-height: 40px;
margin: 3px;
background: #ccc;
border-radius: 5px;
text-align: center;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="num" />
<input type="text" class="num2" />
<input type="submit" class="submit" value="Make Table" />
<input type="button" class="clear" value="clear" />
<div class="container">
<ul>
</ul>
</div>
I need to look like this
I have the following form for lyrics upload. I've changed the design of the form a little bit, and now facing a weird problem.
I've created a fake-datalist using JS. On input focus, a fake-datalist (an ul element) is appended next to the input element. Its position is set to absolute so it shouldn't disrupt the flow of the document when it appears. However, it does. I can't seem to identify the problem. Once the datalist appears, the div next to the table gets pushed down. Table width isn't changing when the datalist appears, so it's not squizing the div and pushing it down.
Code Pen
var artists = [{"artist":"3 Doors Down"},{"artist":"5 Seconds of Summer"},{"artist":"Adele"},{"artist":"Alicia Keys"},{"artist":"Amanda Abizaid"},{"artist":"Avril Lavigne"}];
var albums = [{"album":"The Better Life","year":"2000","cover":"3_doors_down_2000_the_better_life.jpg"},{"album":"Away from the Sun","year":"2002","cover":"3_doors_down_2002_away_from_the_sun.jpg"},{"album":"Seventeen Days","year":"2005","cover":"3_doors_down_2005_seventeen_days.jpg"},{"album":"3 Doors Down","year":"2008","cover":"3_doors_down_2008_3_doors_down.jpg"},{"album":"Time of My Life","year":"2011","cover":"3_doors_down_2011_time_of_my_life.jpg"}];
var songs = [{"song":"Kryptonite","track_no":"1"},{"song":"Duck and Run","track_no":"3"},{"song":"Be Like That","track_no":"5"},{"song":"So I Need You","track_no":"11"}];
function datalist(element) {
return new datalist.prototype.init(element);
}
datalist.prototype = {
init: function(element) {
if (!element) {
this.element = document.createElement("ul");
this.element.classList.add("datalist");;
this.hide();
} else {
this.element = element;
}
},
update: function(queryElement) {
this.clear();
var lookUpArray = queryElement.name + "s";
var results = this.search(window[lookUpArray], queryElement.value, queryElement.name);
for (var i = 0; i < results.length; i++) {
var li = document.createElement("li");
var value = results[i][queryElement.name];
switch (queryElement.name) {
case "album":
li.setAttribute("data-year", results[i].year);
break;
case "song":
li.setAttribute("data-track_no", results[i].track_no);
break;
}
if (queryElement.value != "") {
var re = new RegExp(queryElement.value, "gi");
value = value.replace(re, "<span class=\"highlight\">" + "$&" + "</span>");
}
li.innerHTML = value;
this.element.appendChild(li);
}
return results.length;
},
search: function(lookUpArray, string, queryType) {
var results = [];
for (var i = 0; i < lookUpArray.length; i++) {
if (lookUpArray[i][queryType].toLowerCase().search(string.toLowerCase()) != -1) {
results.push(lookUpArray[i]);
}
}
return results;
},
clear: function() {
this.element.innerHTML = "";
},
hide: function() {
this.element.style.display = "none";
},
show: function() {
this.element.style.display = "";
},
remove: function() {
this.element.parentElement.removeChild(this.element);
},
for: function(sibling) {
sibling.parentElement.appendChild(this.element);
this.hide();
},
};
datalist.prototype.init.prototype = datalist.prototype;
var lastVisitedInput = null;
$("#lyrics-form").on("focus", "input.datalist-input", function() {
if (this.parentElement.children.length == 1) {
this.parentElement.appendChild(datalist().element);
}
if (lastVisitedInput) {
datalist(lastVisitedInput.nextElementSibling).hide();
}
lastVisitedInput = this;
if (datalist(this.nextElementSibling).update(this)) {
datalist(this.nextElementSibling).show();
} else {
datalist(this.nextElementSibling).hide();
}
});
$(document).on("click", function(e) {
if (lastVisitedInput) {
var exceptions = getExceptions(lastVisitedInput);
if (!contains(exceptions, e.target)) {
datalist(lastVisitedInput.nextElementSibling).remove();
lastVisitedInput = null;
}
}
});
$("#lyrics-form").on("input", "input.datalist-input", function() {
if (datalist(this.nextElementSibling).update(this)) {
datalist(this.nextElementSibling).show();
} else {
datalist(this.nextElementSibling).hide();
}
});
$("#lyrics-form").on("click", "li", function() {
this.parentElement.previousElementSibling.value = this.innerText;
$(this.parentElement.previousElementSibling).trigger("input");
});
function getRecord(input) {
var lookUpArray = window[input.name + "s"];
for (var i = 0; i < lookUpArray.length; i++) {
if (input.value == lookUpArray[i][input.name]) {
return lookUpArray[i];
}
}
return false;
}
function getExceptions(input) {
var exceptions = [
input,
input.nextElementSibling,
];
for (var i = 0; i < input.nextElementSibling.children.length; i++) {
exceptions.push(input.nextElementSibling.children[i]);
}
return exceptions;
}
function contains(array, item) {
for (var i = 0; i < array.length; i++) {
if (array[i] === item) {
return true;
}
}
return false;
}
* { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } *, *:before, *:after { box-sizing: inherit; } body { line-height: 1.5; font-family: sans-serif; } input[type="button"], input[type="submit"] { cursor: pointer; } textarea, input[type="text"], input[type="search"], input[type="number"], input[type="password"] { border: 1px solid rgba(0,0,0,.2); padding: 4px; margin: 1px; } table { border-collapse: collapse; border-spacing: 0; }
body {
background-color: rgb(230, 230, 230);
font-family: Arial, sans-serif;
font-size: 14px;
color: rgba(0, 0, 0, .8);
box-sizing: border-box;
}
#main {
height: 500px;
background: white;
box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .1);
margin: 20px auto;
display: table;
padding: 20px;
}
#songInput {
overflow: auto;
}
#songTable td {
position: relative;
}
#songTable,
#coverDiv {
float: left;
}
#coverDiv {
margin-left: 20px;
}
#artist,
#album,
#song {
width: 250px;
}
#artist {
width: 300px;
width: 100%;
}
#year,
#track_no {
width: 70px;
}
#songTable td {
padding-bottom: 20px;
}
#songTable td:first-child {
padding-right: 10px;
}
#songTable .int-input {
padding-left: 20px;
padding-right: 10px;
}
#coverDiv > * {
display: block;
}
#coverDiv img {
width: 137px;
height: 137px;
border: 1px solid rgba(0, 0, 0, .2);
margin: 1px;
}
#coverUpload {
margin: 1px;
margin-top: 10px;
width: 250px;
}
#lyricsBox {
width: 100%;
height: 400px;
margin-top: 15px;
}
#submit {
width: 100%;
margin-top: 15px;
}
.datalist {
border: 1px solid silver;
box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
position: absolute;
top: 32px;
left: 1px;
background: white;
padding: 5px;
max-height: 195px;
width: 180px;
width: 100%;
overflow-y: scroll;
z-index: 1000;
}
.datalist li {
padding: 2px 5px;
cursor: default;
}
.datalist li:hover {
background: rgba(0, 0, 0, .05);
color: black;
}
.datalist .highlight {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<form action="addlyrics.php" id="lyrics-form" method="post" autocomplete="off" enctype="multipart/form-data">
<div id="songInput">
<table id="songTable">
<tr>
<td>Artist</td>
<td colspan="3">
<input type="search" name="artist" id="artist" class="datalist-input" placeholder="Artist" required />
</td>
</tr>
<tr>
<td>Album</td>
<td>
<input type="search" name="album" id="album" class="datalist-input" placeholder="Album" required />
</td>
<td class="int-input">Year</td>
<td>
<input type="number" name="year" id="year" class="input-num" placeholder="Year" required />
</td>
</tr>
<tr>
<td>Song</td>
<td>
<input type="search" name="song" id="song" class="datalist-input" placeholder="Name" required />
</td>
<td class="int-input">#</td>
<td>
<input type="number" name="track_no" id="track_no" class="input-num" placeholder="ID" required />
</td>
</tr>
</table>
<div id="coverDiv">
<img src="covers/blank.gif" id="cover" />
<input type="file" name="cover" id="coverUpload" accept="image/*" />
</div>
</div>
<textarea name="lyrics" placeholder="Lyrics" id="lyricsBox" /></textarea>
<input type="submit" id="submit" class="button" />
</form>
</div>
Removing overflow: auto; from #songInput, the parent element of the table and the div, solved the problem. Although, I don't understand why overflow: auto; on the parent would push the div down. Dynamically added ul.datalist's position is set to absolute, and when it appears, the only thing it might do is extend the height of the table, which shouldn't effect the div at the right.
I'd like to realize dynamic addition of a div block. That div block will be a square. When you click to add the horizontal will be adding a new square, and when you click on a vertical. But the question is, if I added a 5 squares horizontally, what would add the square of the vertical it must be filled with another 4 horizontally squares around.
Jsfiddle sample
Update: fiddle
function addCol() {
var rows = document.getElementsByClassName("row");
for (var i = 0; i < rows.length; i++) {
var square = rows[i].getElementsByClassName("square")[0];
var newSquare = square.cloneNode(true);
rows[i].appendChild(newSquare);
}
var delCol = document.getElementById("delCol");
var squares = rows[0].getElementsByClassName("square");
delCol.style.marginLeft = 4 + (squares.length * 52) + "px";
}
function addRow() {
var grid = document.getElementById("grid");
var rows = document.getElementsByClassName("row");
var newRow = rows[0].cloneNode(true);
grid.appendChild(newRow);
var delRow = document.getElementById("delRow");
delRow.style.marginTop = 2 + (rows.length-1) * 52 + "px";
}
function delCol() {
var rows = document.getElementsByClassName("row");
for (var i = 0; i < rows.length; i++) {
rows[i].removeChild(rows[i].lastChild);
}
var delCol = document.getElementById("delCol");
var marginLeft = parseInt(getComputedStyle(delCol).marginLeft, 10);
delCol.style.marginLeft = marginLeft - 52 + "px";
}
function delRow() {
var grid = document.getElementById("grid");
grid.removeChild(grid.lastChild);
var delRow = document.getElementById("delRow");
var marginTop = parseInt(getComputedStyle(delRow).marginTop, 10);
delRow.style.marginTop = marginTop - 52 + "px";
}
body {
margin: 0;
}
#container {
overflow: auto;
-webkit-user-select: none;
}
#delCol {
margin-left: 56px;
}
#delRow {
}
.delWrapper {
overflow: auto;
}
#delColContainer {
clear: both;
}
#delRowContainer {
display: table;
float: left;
}
#gridWrapper {
display: table;
float: left;
}
#grid {
float: left;
border: 1px solid #4dabe4;
}
.row {
overflow: auto;
}
.square {
float: left;
width: 50px;
height: 50px;
background: #4dabe4;
margin: 1px;
}
.controls {
width: 50px;
height: 50px;
margin: 2px;
cursor: pointer;
opacity: .75;
}
.controls:hover {
opacity: 1;
}
.controls.add {
background: #f1a417;
float: left;
}
.controls.del {
background: #b00100;
float: left;
}
.controls p {
color: #FFF;
font-size: 16px;
font-weight: bold;
text-align: center;
}
#addRow {
clear: both;
}
<div id="container">
<div class="delWrapper" id="delColContainer">
<div class="controls del" id="delCol" onclick="delCol()">
<p>-</p>
</div>
</div>
<div class="delWrapper" id="delRowContainer">
<div class="controls del" id="delRow" onclick="delRow()">
<p>-</p>
</div>
</div>
<div id="gridWrapper">
<div id="grid">
<div class="row">
<div class="square"> </div>
</div>
</div>
<div class="controls add" id="addCol" onclick="addCol()">
<p>+</p>
</div>
<div class="controls add" id="addRow" onclick="addRow()">
<p>+</p>
</div>
</div>
</div>
OLD (fiddle)
function addCol() {
var rows = document.getElementsByClassName("row");
for (var i = 0; i < rows.length; i++) {
var square = rows[i].getElementsByClassName("square")[0];
var copy = square.cloneNode(true);
rows[i].appendChild(copy);
}
}
function addRow() {
var main = document.getElementById("main");
var rows = document.getElementsByClassName("row");
var copy = rows[0].cloneNode(true);
main.appendChild(copy);
}
.index {
display: table;
}
#main {
float: left;
display: table;
border: 1px solid #4dabe4;
}
.square {
float: left;
width: 50px;
height: 50px;
background: #4dabe4;
margin: 1px;
}
.controls {
float: left;
width: 50px;
height: 50px;
background: #f1a417;
margin: 2px;
cursor: pointer;
opacity: .75;
}
.controls:hover {
opacity: 1;
}
.controls p {
color: #FFF;
font-size: 16px;
font-weight: bold;
text-align: center;
}
#addRow {
clear: both;
}
<div class="index">
<div id="main">
<div class="row">
<div class="square"> </div>
</div>
</div>
<div class="controls" id="addCol" onclick="addCol()">
<p>+</p>
</div>
<div class="controls" id="addRow" onclick="addRow()">
<p>+</p>
</div>
</div>