I am using CkEditor.So I set up a4 size for textarea.
CKEDITOR.editorConfig = function( config ) {
config.height = '842px';
config.width = '595px';
};
HTML:
<textarea name="Editor" class="ckeditor" id="aboutme"></textarea>
Javascript:
var editor = CKEDITOR.instances.aboutme;
var edata = editor.getData();
var replaced_text = edata.replace(/(\[##.+?##\])/g, '<span style="background-color:yellow"><strong>$1</strong></span>');
editor.setData(replaced_text);
My question:
If textarea has 2 a4 paper, I want to add red underline between first and second a4 paper in textarea.
I tried to replace to do this however I don't have any idea about a4 paper for ckeditor in javascript .
I want to put red underline after 842px(a4 paper size)
How can I put red underline after 842px in javascript ?
Any help will be appreciated.
Thank you.
Try this example using ckeditor + sharedspace + fake paper with A4 Size.:
http://jsbin.com/nokalosuwi/edit?html,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-loading-bar.css"
rel="stylesheet">
<style>
.body {
background: rgb(204, 204, 204);
}
.maindiv {
/*
the content is hidden by default,
and will be shown only after
completed page load and
finalized ckeditor startup
*/
display: none;
}
.content-section {
margin-bottom: 100px;
}
article {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
padding: 30px;
font-size: 11pt;
line-height: 22pt;
}
article form {
height: 100%;
}
#media print {
body, article[size="A4"] {
margin: 0;
box-shadow: 0;
background: transparent;
}
.cke_pagebreak {
display: block;
page-break-before: always;
}
.content-section {
margin-bottom: 0;
padding-top: 0;
}
.no-print {
display: none;
}
}
</style>
</head>
<body class="body">
<div class="maindiv">
<div id="top-bar" class="navbar-fixed-top no-print">
<div id="top-ck-toolbar">
<!-- ckeditor top toolbar is rendered here -->
</div>
</div>
<div id="content-section" class="content-section">
<article>
<form id="myform" method="post">
<textarea id="mytextarea1" data-ckenable="true"></textarea>
<textarea id="mytextarea2" data-ckenable="true"></textarea>
<textarea id="mytextarea3" data-ckenable="true"></textarea>
</form>
</article>
</div>
<div id="bottom-bar" class="navbar-fixed-bottom no-print">
<div id="bottom-ck-toolbar">
<!-- ckeditor bottom toolbar is rendered here -->
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.2/full-all/ckeditor.js"></script>
<script>
//get the id's of elements that contains "data-ckenable" attribute
function get_ckenable_element_ids() {
return $("[data-ckenable]").map(function () {
return this.id;
}).get();
}
var ckenable_element_ids_list = get_ckenable_element_ids();
var ckeditor_config = {
extraPlugins: [
"sharedspace",
].join(),
sharedSpaces: {
top: "top-ck-toolbar",
bottom: "bottom-ck-toolbar"
}
};
//start ckeditor
ckenable_element_ids_list.map(function (id_element) {
CKEDITOR.replace(id_element, ckeditor_config);
});
function fix_content_padding() {
var top_menu = $('#top-ck-toolbar');
var content_div = $('#content-section');
var current_top_menu_height = parseInt(top_menu.css('height').replace(/[^-\d\.]/g, ''));
var new_padding_value_to_content = "".concat(current_top_menu_height + 130).concat("px");
content_div.css('padding-top', new_padding_value_to_content);
console.log("fixxxx: ", new_padding_value_to_content);
}
window.addEventListener('resize.fix_content_padding', fix_content_padding, false);
var paceOptions = {
"ajax": false,
"restartOnRequestAfter": false,
"document": false
};
window.paceOptions = paceOptions;
Pace.on('hide', function () {
$(".maindiv").fadeIn("fast");
fix_content_padding();
});
</script>
</body>
</html>
source: https://gist.github.com/luzfcb/bab605975396bccd4aa3
Related
I have created some javascript div, a, img elements.
Making my website easier to read instead of spamming the same stuff over and over again.
My problem right now is -->
I need to use href and src links from my array ("src") and add them to my created imgages and links.
So far i have found only one working way to do it with Math...() but i don't want to show the images in random order i want them to be in the order that i have putted them in the array.
This is my code down below i will be happy if anyone helps me out!
I think this can be solved with forEach but i can't figure it out...
var src = ["https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80" ,
"https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"];
(function () {
function createDiv() {
var boardDiv = document.createElement("div");
var link = document.createElement("a");
var img = document.createElement("img");
boardDiv.className = "col-md-6 col-lg-4 item";
boardDiv.appendChild(link);
link.className = "lightbox"
link.appendChild(img);
link.href = src[0];
img.className ="img-fluid image scale-on-hover"
img.src = src[Math.floor(Math.random() * src.length)];
return boardDiv;
}
function createAndModifyDivs() {
var board = document.getElementById("image-builder"),
myDivs = [],
i = 0,
numOfDivs = src.length;
for (i; i < numOfDivs; i += 1) {
myDivs.push(createDiv());
board.appendChild(myDivs[i]);
}
}
createAndModifyDivs();
}());
.gallery-block.grid-gallery{
padding-bottom: 60px;
padding-top: 60px;
}
.gallery-block.grid-gallery .heading{
margin-bottom: 50px;
text-align: center;
}
.gallery-block.grid-gallery .heading h2{
font-weight: bold;
font-size: 1.4rem;
text-transform: uppercase;
}
.gallery-block.grid-gallery a:hover{
opacity: 0.8;
}
.gallery-block.grid-gallery .item img{
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
transition: 0.4s;
}
.gallery-block.grid-gallery .item{
margin-bottom: 20px;
}
#media (min-width: 576px) {
.gallery-block.grid-gallery .scale-on-hover:hover{
transform: scale(1.05);
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15) !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid Gallery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />
</head>
<body>
<section class="gallery-block grid-gallery">
<div class="container">
<div class="heading">
<h3>Alexis</h3>
</div>
<div class="row" id="image-builder">
</div>
</div>
</section>
<div id="board">
</div>
</div>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.grid-gallery', { animation: 'slideIn' });
</script>
</body>
</html>
You can change your createDiv() function to take in the img src as a parameter and then set it in your for loop. Your code could be cleaned up a bit and I can help with that if you leave a comment but for now I just wanted to answer your initial question.
var src = ["https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80" ,
"https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80"];
(function () {
// Take the image link as a parameter called imgSrc
function createDiv(imgSrc) {
var boardDiv = document.createElement("div");
var link = document.createElement("a");
var img = document.createElement("img");
boardDiv.className = "col-md-6 col-lg-4 item";
boardDiv.appendChild(link);
link.className = "lightbox"
img.className ="img-fluid image scale-on-hover"
link.appendChild(img);
// Assuming here you want to link to the image
link.href = imgSrc;
// Set the img src
img.src = imgSrc;
return boardDiv;
}
function createAndModifyDivs(elmId) {
const board = document.getElementById(elmId);
for (const imgSrc of src) {
board.appendChild(createDiv(imgSrc));
}
}
const galleries = ['image-builder', 'image-builder-2'];
for(const gallery of galleries) {
createAndModifyDivs(gallery);
baguetteBox.run(`#${gallery}`);
}
}());
.gallery-block.grid-gallery{
padding-bottom: 60px;
padding-top: 60px;
}
.gallery-block.grid-gallery .heading{
margin-bottom: 50px;
text-align: center;
}
.gallery-block.grid-gallery .heading h2{
font-weight: bold;
font-size: 1.4rem;
text-transform: uppercase;
}
.gallery-block.grid-gallery a:hover{
opacity: 0.8;
}
.gallery-block.grid-gallery .item img{
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
transition: 0.4s;
}
.gallery-block.grid-gallery .item{
margin-bottom: 20px;
}
#media (min-width: 576px) {
.gallery-block.grid-gallery .scale-on-hover:hover{
transform: scale(1.05);
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15) !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid Gallery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />
</head>
<body>
<section class="gallery-block grid-gallery">
<div class="container">
<div class="heading">
<h3>Alexis</h3>
</div>
<div class="gallery" id="image-builder">
</div>
</div>
</section>
<section class="gallery-block grid-gallery">
<div class="container">
<div class="heading">
<h3>Other</h3>
</div>
<div class="gallery" id="image-builder-2">
</div>
</div>
</section>
<div id="board">
</div>
</div>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
</script>
</body>
</html>
You only have to make these two changes, now you will pass the src as a parameter of createDiv() (look for the comments)
In App.js
var src = [
"https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80",
"https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
];
(function () {
//ADD A PARAMETER TO THE FUNCTION HERE
function createDiv(img_src) {
var boardDiv = document.createElement("div");
var link = document.createElement("a");
var img = document.createElement("img");
boardDiv.className = "col-md-6 col-lg-4 item";
boardDiv.appendChild(link);
link.className = "lightbox";
link.appendChild(img);
link.href = src[0];
img.className = "img-fluid image scale-on-hover";
img.src = img_src;
return boardDiv;
}
function createAndModifyDivs() {
var board = document.getElementById("image-builder"),
myDivs = [],
i = 0,
numOfDivs = src.length;
for (i; i < numOfDivs; i += 1) {
//PASS THE SRC OF THE DIRECT IMAGE AS PARAMETER HERE
myDivs.push(createDiv(src[i]));
board.appendChild(myDivs[i]);
}
}
createAndModifyDivs();
})();
I am trying to create a code that works when you put it on the google search bar, that is a must and i created a div you can edit, also i created a reset button that replaces the content on the div with the default text, but when I try to press ctrl + z it does not go back, and i don't know how to make it work
-I cannot get rid of the: data:text/html, part because it wouldn't work in the search bar for google
-i do have to have all the code types in just one document, because i have to copy paste it all on the google search bar
function reset() {
div_1.innerHTML = '<p> Default text<p>';
}
.div_1 {
display: block;
background-color: rgba(255, 0, 0, 0.5);
height: 80%;
position: relative;
width: 60%;
position-left: 100px;
}
<div contenteditable="true" class="div_1" id="div_1">
<p> Default text<p>
</div>
<button onclick="reset()">reset</button>
function reset() {
div_1.innerHTML = ''; //set the inner HTML to empty string
}
.div_1 {
display: block;
background-color: rgba(255, 0, 0, 0.5);
height: 80%;
position: relative;
width: 60%;
position-left: 100px;
}
<div contenteditable="true" class="div_1" id="div_1">
<p> Default text<p>
</div>
<button onclick="reset()">reset</button>
I think you are trying to make the form empty when you press reset button.
So you have to change the inner HTML to an empty string in order to do that.
I hope it helped
i was able to find an option with the memento pattern and creating an event for the ctrl + z input on the keyboard
function copy(){
inp1.select();
navigator.clipboard.writeText(inp1.value);
ctn.innerHTML = inp1.value;
}
var mementos = [];
function reset() {
mementos.push(document.getElementById('div_1').innerHTML);
div_1.innerHTML= '<p>caller name: </p><p>reason for the call:</p><p>CTN: <div class="ctn" id="ctn"></p><p><br></p><p></p>';
}
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'z') {
var lastMemento = mementos.pop();
div_1.innerHTML = lastMemento;
}
});
function undo() {
var lastMemento = mementos.pop();
div_1.innerHTML = lastMemento;
}
input{
width:200px;
height: 100%;
}
.div_1{
display: block;
background-color:rgba(255, 0, 0, 0.5);
height:400px;
position: relative;
width: 400px;
padding-left: 2px;
}
button{
position: relative;
}
.ctn {
display: inline;
background-color: red;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notes</title>
</head>
<body>
<link rel="stylesheet" href="syles.css">
<input placeholder="(000)-000-0000" maxlength="10" id="inp1">
<button onclick="reset()">reset</button>
<button onclick="copy()">copy</button>
<button onclick="undo()">Undo</button>
<div contenteditable="true"class="div_1" id="div_1">
<p>caller name: </p><p>reason for the call:</p><p>CTN: <div class="ctn" id="ctn"></p><p><br></p><p></p>
</div>
</body>
</html>
I am trying to get something like this, but with my html divs containing sentences instead of css squares. I am trying to make the sentences start at a random position and move randomly on the page. I tried calling my html divs instead of creating new ones in javascript; I don't know if it is the correct way.. Is it possible ?
I am not used to javascript, I am starting using it.
My html code:
<html>
<head>
<title>Niveau 1</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class='d1'>
<p>quoi maintenant ?</p>
</div>
<div class='d2'>
<p>quand maintenant ?</p>
</div>
<div class='d3'>
<p>qui maintenant ?</p>
</div>
<div class='d4'>
<p>où maintenant ?</p>
</div>
<div class='d5'>
<p>aller de l'avant, appeler ça aller, appeler ça de l'avant</p>
</div>
<div class='d6'>
<p>longuement, brièvement, c'est égal</p>
</div>
<div class='d7'>
<p>quelle liberté</p>
</div>
<div class='d8'>
<p>quelque fois je me dis toi, si c'est moi qui parle</p>
</div>
</body>
</html>
My javascript code:
$(document).ready(function(){
animateDiv('.d1');
animateDiv('.d2');
animateDiv('.d3');
animateDiv('.d4');
animateDiv('.d5');
animateDiv('.d6');
animateDiv('.d7');
animateDiv('.d8');
});
function makeNewPosition(){
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(myclass){
var newq = makeNewPosition();
$(myclass).animate({ top: newq[1], left: newq[0] }, 15000, function(){
animateDiv(myclass);
});
};
}
My css code:
height: 100%;
width: 100%;
margin: none;
padding: none;
background-color: black;
}
* {
cursor: none;
}
div.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8 {
position:fixed;
font-size: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
cursor: none;
color: transparent;
text-shadow: 0px 0px 5px #ffffff;
}
a {
text-decoration: none;
color: transparent;
}
a:visited {
text-decoration: none; color: transparent;
}
a:hover {
color: none;
text-decoration:none;
cursor:crosshair;
text-shadow: 0px 0px 3px #ffffff
}
To put text in random positions at the start you can use $.css() instead of $.animate() to instantly move the element:
function moveDiv(myclass) {
var newq = makeNewPosition();
$(myclass).css({ top: newq[1], left: newq[0] });
}
And update the document.ready function to call moveDiv() for all the elements
$(document).ready(function () {
moveDiv('.d1');
moveDiv('.d2');
moveDiv('.d3');
moveDiv('.d4');
moveDiv('.d5');
moveDiv('.d6');
moveDiv('.d7');
moveDiv('.d8');
animateDiv('.d1');
animateDiv('.d2');
animateDiv('.d3');
animateDiv('.d4');
animateDiv('.d5');
animateDiv('.d6');
animateDiv('.d7');
animateDiv('.d8');
});
P.S.
I had to apply some fixes to make your code work:
I had to remove extra } at the end of JavaScript
function animateDiv(myclass){
var newq = makeNewPosition();
$(myclass).animate({ top: newq[1], left: newq[0] }, 15000, function(){
animateDiv(myclass);
});
};
// } <- remove
And your CSS seemed truncated at the beginning so I've added html { at the top:
html {
height: 100%;
width: 100%;
margin: none;
padding: none;
background-color: black;
}
How to change Page color Smoothly on Scroll like this
Amanda Braga Portfolio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dpk</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.6.1/dist/locomotive-scroll.min.css">
</head>
<body>
<div data-scroll-container>
<section data-scroll-section>
<div class="container Blue"></div>
<div class="container Red"></div>
<div class="container Black"></div>
</section>
</div>
Here we can add Methods for changing Pagecolor
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.6.1/dist/locomotive-scroll.min.js"></script>
<script>
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
</script>
</body>
</html>
You need to give each section an "id" or you can still use a class. Use locomotives scroll event trigger to detect when that section is in-view and give it the colour.
DEMO using jquery.
const scroller = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
})
scroller.on('scroll', () => {
sectionBgChange();
})
function sectionBgChange() {
let firstSection = $('#yellow').offset().top;
let secondSection = $('#blue').offset().top;
let thirdSection = $('#red').offset().top;
var scrollPos = $(document).scrollTop();
if (scrollPos >= firstSection && scrollPos < secondSection) {
$('#yellow').css('background-color', 'yellow');
} else if (scrollPos >= secondSection && scrollPos < thirdSection) {
$('#blue').css('background-color', 'blue');
} else if (scrollPos >= thirdSection) {
$('#red').css('background-color', 'red');
} else {
$('section').css('background-color', 'white');
}
}
main {
padding: 20px;
background: #f2f2f2;
}
section {
padding: 100px;
margin: 10px 0;
height: 50vh;
z-index: 1;
border: 1px solid #eaeaea;
display: grid;
place-content: center;
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
background-color: white;
box-shadow: 0 2px 12px 0px rgba(0, 0, 0, 0.25);
position: relative;
border-radius: .5rem;
}
section::before {
content: attr(data-section);
}
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main data-scroll-container>
<section data-section="Yellow" data-scroll-section id="yellow"></section>
<section data-section="Blue" data-scroll-section id="blue"></section>
<section data-section="Red" data-scroll-section id="red"></section>
</main>
Finally, I Found a Better way to achieve this
Here is Code in case someone need
HTML -
<div class="vh-100">
<span data-scroll data-scroll-repeat data-scroll-call="pageColor"
data-scroll-id="blue"> ____________blue </span>
</div>
<div class="vh-100">
<span data-scroll data-scroll-repeat data-scroll-call="pageColor"
data-scroll-id="green"> ____________green </span>
</div>
<div class="vh-100">
<span data-scroll data-scroll-repeat data-scroll-call="pageColor"
data-scroll-id="#ff0000"> ____________red </span>
</div>
CSS - (for Smooth Transitions)
body{
transition: background-color 1s ease;
}
.vh-100{
height:100vh;
}
JS - (GET ColorCode or Color name from data-scroll-id attribute from html element and assign it to body background color)
setTimeout(() => {
scroll.on('call', (value, way, obj) => {
if (way === 'enter') {
switch (value) {
case "pageColor":
// get color code from data-scroll-id assigned to body by obj.id
document.querySelector('body').style.backgroundColor = obj.id;
break;
}
}
});
}, 800);
I am attempting to make it so that when a user uploads the image file it is automatically used as the background image in the puzzle. I have tried looking up how I would do that and I feel like it would be that hard but I'm just having a brain fart. I am also looking to start a timer once the image gets uploaded but I feel like that is something I ould probably be able to figure out myself but any tips would certainly be appreciated.
html:
<!DOCTYPE html>
<html>
<head>
<script src="functions.js"></script>
<link rel="stylesheet" href="design.css" type="text/css">
<meta charset="UTF-8">
<title>Puzzle</title>
</head>
<body>
<div class="file-upload">
<input class="file-upload__input" type="file" name="picture" id="picture" accept="image/*">
<button class="file-upload__button" type="button">Choose a Photo</button>
<span class="file-upload__label"></span>
</div>
<!--button formating-->
<script>
Array.prototype.forEach.call(document.querySelectorAll(".file-upload__button"), function(button) {
const hiddenInput = button.parentElement.querySelector(".file-upload__input");
const label = button.parentElement.querySelector(".file-upload__label");
const defaultLabelText = "No file(s) selected";
// Set default text for label
label.textContent = defaultLabelText;
label.title = defaultLabelText;
button.addEventListener('click', function(){
hiddenInput.click();
});
hiddenInput.addEventListener('change', function(){
const filenameList = Array.prototype.map.call(hiddenInput.files, function (file){
return file.name;
});
label.textContent = filenameList.join(', ') || defaultLabelText;
label.title = label.textContent;
});
});
</script>
<!--Puzzle-->
<center><div id="table" style="display: table;">
<div id="row1" style="display: table-row;">
<div id="cell11" class="tile1" onClick="clickTile(1,1);"></div>
<div id="cell12" class="tile2" onClick="clickTile(1,2);"></div>
<div id="cell13" class="tile3" onClick="clickTile(1,3);"></div>
</div>
<div id="row2" style="display: table-row;">
<div id="cell21" class="tile4" onClick="clickTile(2,1);"></div>
<div id="cell22" class="tile5" onClick="clickTile(2,2);"></div>
<div id="cell23" class="tile6" onClick="clickTile(2,3);"></div>
</div>
<div id="row3" style="display: table-row;">
<div id="cell31" class="tile7" onClick="clickTile(3,1);"></div>
<div id="cell32" class="tile8" onClick="clickTile(3,2);"></div>
<div id="cell33" class="tile9" onClick="clickTile(3,3);"></div>
</div>
</div>
<button onClick="shuffle();">New Game</button>
</center>
</body>
</html>
CSS:
body {
background: #002a3f;
}
.file-upload {
display: inline-flex;
align-items: center;
font-size: 20px;
}
.file-upload__input {
display: none;
}
.file-upload__button {
-webkit-appearance: none;
background: #009879;
border: 2px solid #00745d;
border-radius: 4px;
outline: none;
padding: 0.5em 0.8em;
margin-right: 15px;
color: white;
font-size: 1em;
font-family: sans-serif;
font-weight: bold;
cursor: pointer;
}
.file-upload__button:active{
background: #00745d;
}
.file-upload__label{
max-width: 250px;
font-size: 0.95em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.tile1, .tile2, .tile3, .tile4, .tile5, .tile6, .tile7, .tile8, .tile9 {
display: table-cell;
width: 120px;
height: 120px;
border: 1px solid rgb(100, 100, 100);
background: url();
cursor: pointer;
}
.tile1 {background-position: left top;}
.tile2 {background-position: center top;}
.tile3 {background-position: right top;}
.tile4 {background-position: left center;}
.tile5 {background-position: center center;}
.tile6 {background-position: right center;}
.tile7 {background-position: left bottom;}
.tile8 {background-position: center bottom;}
.tile9 {background: rgb(58, 58, 58); cursor: default;}
JS:
function swapTiles(cell1,cell2) {
var temp = document.getElementById(cell1).className;
document.getElementById(cell1).className = document.getElementById(cell2).className;
document.getElementById(cell2).className = temp;
}
function shuffle() {
//Use nested loops to access each cell of the 3x3 grid
for (var row=1;row<=3;row++) { //For each row of the 3x3 grid
for (var column=1;column<=3;column++) { //For each column in this row
var row2=Math.floor(Math.random()*3 + 1); //Pick a random row from 1 to 3
var column2=Math.floor(Math.random()*3 + 1); //Pick a random column from 1 to 3
swapTiles("cell"+row+column,"cell"+row2+column2); //Swap the look & feel of both cells
}
}
}
function clickTile(row,column) {
var cell = document.getElementById("cell"+row+column);
var tile = cell.className;
if (tile!="tile9") {
//Checking if white tile on the right
if (column<3) {
if ( document.getElementById("cell"+row+(column+1)).className=="tile9") {
swapTiles("cell"+row+column,"cell"+row+(column+1));
return;
}
}
//Checking if white tile on the left
if (column>1) {
if ( document.getElementById("cell"+row+(column-1)).className=="tile9") {
swapTiles("cell"+row+column,"cell"+row+(column-1));
return;
}
}
//Checking if white tile is above
if (row>1) {
if ( document.getElementById("cell"+(row-1)+column).className=="tile9") {
swapTiles("cell"+row+column,"cell"+(row-1)+column);
return;
}
}
//Checking if white tile is below
if (row<3) {
if ( document.getElementById("cell"+(row+1)+column).className=="tile9") {
swapTiles("cell"+row+column,"cell"+(row+1)+column);
return;
}
}
}
}
You can use client's image without ever uploading it. The way to do that is to use FileReader API. Check out Mozilla's tutorial of FileReader.readAsDataURL().