Unable to display the first image properly when using adaptiveHeight - javascript

I have a slick slider and I want the height to change based on the image that is currently being displayed.The images for my slider is not hard-coded.The images are taken from input file and then displayed into the slider.I added adaptiveHeight: true and it worked.My height will change automatically but when I upload the images and not touch anything else, the image is not displayed properly.Only when I click next or previous then will the images be properly displayed.
HTML:
<section name="canvas" class="canvas" id="canvas">
<div id="boxContain"></div>
<div class="imageContainer" id="imageContainer">
</div>
</section>
JavaScript:
const fileInput = document.getElementById('my_file');
const fileList = document.getElementById('imageContainer');
let slickSettings = {
infinite: true,
draggable: false,
arrows: true,
slidesToShow: 1,
slidesToScroll: 1,
swipe: false,
adaptiveHeight: true
};
let initSlickCarousel = (target, settings) => {
const $target = $(target);
switch (true) {
case $target.hasClass('slick-initialized'):
$target.slick('unslick');
$target.slick(settings);
break;
default:
$target.slick(settings);
}
};
const handleInputChange = (event) => {
console.log('We are handling it sir!');
const filesArray = Array.from(event.target.files);
if (filesArray.length > 20) {
alert("Please select 20 or less images!!");
} else {
filesArray.map((singleFile) => {
const outputImg = document.createElement('img');
const fileReader = new FileReader();
outputImg.className = 'img-thumbnail';
fileReader.readAsDataURL(singleFile);
fileReader.onload = (event) => {
outputImg.src = event.target.result;
document.getElementById("canvas").style.height = "auto";
document.getElementById("imageContainer").style.height = "auto";
document.getElementById("imageContainer").style.width = "auto";
document.getElementById("createBoxBtn").style.pointerEvents = ("auto");
document.getElementById("duplicateBox").style.pointerEvents = ("auto");
document.getElementById("deleteBox").style.pointerEvents = ("auto");
document.getElementById("save").style.pointerEvents = ("auto");
};
console.log(outputImg);
console.log(event.target.files);
fileList.appendChild(outputImg);
document.getElementById("openBtn").style.pointerEvents = "none";
});
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
$("#files").append('<div class="filename"><span name="fileNameList">' + files[i].name + '</span></div>');
}
initSlickCarousel(fileList, slickSettings);
}
};
CSS:
.canvas {
border: 1px solid black;
width: 600px;
height: 600px;
background: #D3D3D3;
position: absolute;
margin-left: 350px;
}
After I upload the images and not touch anything, the height will become so small that you can't see the full image.Only after I click next/prev then it will show the full image.It should show full image from the beginning and not need to click next/prev to adjust.So how do I fix this issue?

We use slick as our slider option a lot. My experience is that adaptive-height is not working very well with lazy loading images or when images are added after the slick is initialized.
In your case, the workaround is to set the adaptive-height property after the init but before the first change.
const fileInput = document.getElementById('my_file');
const fileList = document.getElementById('imageContainer');
let slickSettings = {
infinite: true,
draggable: false,
arrows: true,
slidesToShow: 1,
slidesToScroll: 1,
swipe: false,
/* adaptiveHeight: true */
};
let initSlickCarousel = (target, settings) => {
const $target = $(target);
$target.slick(settings);
};
const handleInputChange = (event) => {
console.log('We are handling it sir!');
const filesArray = Array.from(event.target.files);
if (filesArray.length > 20) {
alert("Please select 20 or less images!!");
} else {
filesArray.map((singleFile) => {
const outputImg = document.createElement('img');
const fileReader = new FileReader();
outputImg.className = 'img-thumbnail';
// Let's read it as data url - onload won't return a thing without it
fileReader.readAsDataURL(singleFile);
fileReader.onload = (event) => {
outputImg.src = event.target.result;
};
console.log(outputImg);
console.log(event.target.files);
fileList.appendChild(outputImg);
document.getElementById("openBtn").style.pointerEvents = "none";
});
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
$("#files").append('<div class="filename"><span name="fileNameList">' + files[i].name + '</span></div>');
}
initSlickCarousel(fileList, slickSettings);
if ($(".imageContainer").hasClass("slick-initialized")) {
console.log($(".imageContainer").slick('slickGetOption','adaptiveHeight'));
$('.imageContainer').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$(".imageContainer").slick('slickSetOption','adaptiveHeight', true, true);
});
}
}
};
if (window.File && window.FileReader && window.FileList) { // check if browser can handle this
console.log('We are good to go sir!');
fileInput.addEventListener('change', handleInputChange, false);
} else {
alert('File features are not fully supported. Please consider changing the browser (newest Chrome or Mozilla).');
}
#import url(//fonts.googleapis.com/css?family=Montserrat:300,400,600,700);
#{
margin: 0px;
padding: 0px;
}
html{
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(255,63,63, 1), rgba(244,21,122, 1));
}
ul {
list-style: none;
text-align: center;
}
li {
padding: 5px;
}
.nav {
width: 150px;
float: left;
text-align: center;
}
button {
background-color: white;
border-radius: 15px;
}
button:hover {
background-color: #D3D3D3;
}
#hiddenLink{
display: none;
}
.canvas {
border: 1px solid black;
max-width: 500px;
max-height: 500px;
min-width: 200px;
min-height: 200px;
background: #D3D3D3;
/* overflow: hidden;*/
position: absolute;
margin-left: 350px;
}
#imageContainer{
height: 100%;
}
.nav button {
width: 100px;
}
.openBtn, input[type=submit] {
width: 100px;
background-color: white;
border-radius: 15px;
}
.openBtn:hover, input[type=submit]:hover {
background-color: #D3D3D3;
}
img {
/*position:absolute;*/
/* float: left;*/
image-rendering: -webkit-optimize-contrast;
}
#boxContain{
position: absolute;
height: 100%;
width: 500px;
z-index: 900;
}
<!DOCTYPE html>
<html>
<head>
<title>Online Image Labelling Tool</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css">
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
</head>
<body>
<form name="imageLblForm" method="post" id="imageLblForm" enctype="multipart/form-data" runat="server" action="#">
<h4 id="errorMessage"></h4>
<section name="nav" class="nav">
<ul>
<li><input type="file" id="my_file" name="file1" onchange="" accept=".bmp,.jpg, .png, image/jpg, image/bmp, image/png" style="display:none" multiple /><input type="button" id="openBtn" class="openBtn" value="Open" onclick="document.getElementById('my_file').click();" /></li>
<li><input type="submit" value="Save" id="save" onclick="document.getElementById('hiddenLink').click(); return false; "><a id="hiddenLink">Save</a></li>
<li>
</ul>
</section>
<section name="canvas" class="canvas" id="canvas">
<div id="boxContain"></div>
<div class="imageContainer" id="imageContainer">
</div>
</section>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script>
<script src="https://wp.incredibbble.com/writsy-shop/wp-content/themes/writsy-shop/assets/vendor/jquery-zoom/jquery.zoom.min.js?ver=1.7.18" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>

Related

How to animate a part of an image

I am still trying to animate my slider when the next button clicks. I want to know how to select part of an image and then move it or fade it like here https://demo.ghozylab.com/plugins/easy-image-slider-plugin/image-slider-with-thumbnails-at-the-bottom/ (if you wait you will see the animations you want) I want to slowly fade out little squares of an image or move little squares away to show the new image
I probably need to know how to select a part of an image
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>homepage</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="/stylesheets/styles.css" />
<link rel="stylesheet" href="/stylesheets/slider.css" />
</head>
<body class="">
<div class="container2 container">
<div class="subcontainer2">
<div class="slider-wrappers">
<h2>client showcase</h2>
<br />
<div class="slider2">
<img class="change2" src="" alt="image slider 2" />
<img class="change3" src="" alt="image slider 3" />
<img
class="change"
src="Award2019-Final.jpg"
alt="image slider 1"
/>
<img class="change4 ninja" src="" alt="image slider 4" />
</div>
<br />
<div id="controller">
<div class="small">
ℹ there is a delay for performance issues
</div>
<button class="backward">
<img src="left.jpg" alt="previous client" />
</button>
<button class="forward">
<img src="right.jpg" alt="next client" />
</button>
</div>
</div>
</div>
</div>
</body>
</html>
css
.slider2 .change{
border-radius: 5px;
width: 500px;
height: 300px;
}
.small{
font-size: xx-small;
color: #a8a0a0;
}
.slider2 .change2{
border-radius: 5px;
width: 500px;
height: 300px;
}
.slider2 .change3{
border-radius: 5px;
width: 500px;
height: 300px;
}
.slider2 .change4{
border-radius: 5px;
width: 500px;
height: 300px;
}
.slider2{
position: relative;
top: 0;
left: 0;
position: relative;
width: 50%;
}
.change{
opacity: 1;
position: relative;
top: 0;
left: 0;
border: 1px solid #000000;
transition: 0.3s;
}
.change2{
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000000;
transition: opacity 0.3s;
}
.change3{
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000000;
}
.change4{
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000000;
}
.ninja{
opacity: 0;
}
.hidden{
opacity: 0;
}
.hide{
animation: move 400ms ;
}
.show{
opacity: 1;
}
.slided{
animation: slide 400ms;
}
#keyframes move{
from{opacity: 100%;}
to{opacity: 0%;}
}
#keyframes slide{
from{
transform: translateX(0px);
}
to{
transform: translateX(-500px);
}
}
js
const slider101 = document.querySelector(".change")
const slider202 = document.querySelector(".change2")
const slider303 = document.querySelector(".change3")
const slider404 = document.querySelector(".change4")
const front = document.querySelector(".forward");
const back = document.querySelector(".backward");
const collection = ["array of images"]
let clickable = true
let blured = false
let blur = false
let slide = false
let slideDown = false
let random = 0
function timer() {
setTimeout(() => {
clickable = true
starttime = false
clearInterval()
}, 500);
}
let noor = 0;
front.addEventListener("click", function(){
while(clickable ===true){
function rand(){
let random = Math.floor(Math.random() * 3 +1 )
console.log(random)
if(random === 1&& blured === false){
blur = true
}else if(random === 2){
slide = true
}
else if(random === 3){
slideDown = true
}else{
console.log(" WE sdid it :))))")
}
}
rand()
if(noor >= collection.length-1){
noor = 0;
} else {
noor++;
}
slider101.src = collection[noor];
slider202.src = collection[noor]
if(noor <= 0){
slider303.src = collection[collection.length -1]
slider404.src = collection[collection.length -1]
}else if(noor >= collection.length-1){
slider303.src = collection[noor-1]
slider404.src = collection[noor-1]
}
else{
slider303.src = collection[noor -1]
slider404.src = collection[noor -1]
}
if(blur === true ){
slider101.classList.add("hidden")
slider303.classList.add("hide")
setTimeout(() => {
slider303.classList.add("hidden")
clearTimeout()
}, 355);
// slider202.classList.add("show")
blur = false
blured = true
console.log("I DO")
}
if(slide === true){
console.log(`${noor} OPen tHe NOoR`)
slide = false
if (blured === true){
slider101.classList.remove("hidden")
slider303.classList.remove("hide")
slider303.classList.remove("hidden")
blured = false
}
}
if(slideDown === true){
slider404.classList.remove("ninja")
slider404.classList.add("slided")
slideDown = false
setTimeout(() => {
slider404.classList.add("ninja")
slider404.classList.remove("slided")
clearInterval()
}, 375);
}
clickable = false
let starttime = true
if(clickable === false && starttime === true){
timer()
}
}
})
back.addEventListener("click", function(){
while(clickable === true){
if(noor === 0){
noor = collection.length-1;
} else {
noor--;
}
slider101.src = collection[noor];
clickable = false
let starttime = true
if(clickable === false && starttime === true){
timer()
}
}
});
I have been trying for several days.
I have searched how to change parts of images using CSS and some other stuff but I have never found out where to even start.

How to select and manipulate the dynamically created html element with javascript?

I am pretty new to js, and I am building a color scheme generator as a solo project.
I am now stuck on select the html element that created from dynamically.
I tried to select both label and input element below, using document.getElementByClassName but it gives me 'undefined'
I wanna select both label and input elements and add an click eventListner so that they can copy the result color code from that elements.
<label for='${resultColor}' class='copy-label'>Click to copy!</label>
<input class='result-code' id='${resultColor}' type="text" value='${resultColor}'/>`
const colorPickerModes = [ 'monochrome', 'monochrome-dark', 'monochrome-light', 'analogic', 'complement', 'analogic-complement', 'triad quad']
const colorPickerForm = document.getElementById("colorPick-form");
const colorPickerInput = document.getElementById("colorPicker");
const colorPickerModeDropDown = document.getElementById("colorPick-mode");
const resultColorDiv = document.getElementById("result-color-div");
const resultColorCodeDiv = document.getElementById("result-code-div");
let colorPicked = "";
let modePicked = "";
let resultColorDivHtml =''
let resultCodeDivHtml=''
let colorSchemeSetStrings = [];
let resultColorSchemeSet = [];
fetchToRender()
renderDropDownList();
//listen when user change the color input and save that data in global variable
colorPickerInput.addEventListener(
"change",
(event) => {
//to remove # from the color hex code data we got from the user
colorPicked = event.target.value.slice(1, 7);
},
false
);
//listen when user change the scheme mode dropdownlist value and save that data in global variable
colorPickerModeDropDown.addEventListener('change', (event)=>{
modePicked =
colorPickerModeDropDown.options[colorPickerModeDropDown.selectedIndex].text;
})
//whe user click submit btn get data from user's input
colorPickerForm.addEventListener("submit", (event) => {
event.preventDefault();
// To get options in dropdown list
modePicked =
colorPickerModeDropDown.options[colorPickerModeDropDown.selectedIndex].text;
fetchToRender()
});
//when first load, and when user request a new set of color scheme
function fetchToRender(){
if (!colorPicked) {
//initialize the color and mode value if user is not selected anything
colorPicked = colorPickerInput.value.slice(1, 7);
modePicked = colorPickerModes[0]
}
fetch(
`https://www.thecolorapi.com/scheme?hex=${colorPicked}&mode=${modePicked}`
)
.then((res) => res.json())
.then((data) => {
let colorSchemeSetArray = data.colors;
for (let i = 0; i < 5; i++) {
colorSchemeSetStrings.push(colorSchemeSetArray[i]);
}
// to store each object's hex value
for (let i = 0; i < colorSchemeSetStrings.length; i++) {
resultColorSchemeSet.push(colorSchemeSetStrings[i].hex.value);
}
renderColor();
colorSchemeSetStrings = []
resultColorSchemeSet = [];
});
}
function renderColor(){
//to store result of color scheme set object
resultColorDivHtml = resultColorSchemeSet.map((resultColorItem) => {
return `<div class="result-color"
style="background-color: ${resultColorItem};"></div>`;
}).join('')
resultCodeDivHtml = resultColorSchemeSet
.map((resultColor) => {
return `
<label for='${resultColor}' class='copy-label'>
Click to copy!</label>
<input class='result-code' id='${resultColor}'
type="text" value='${resultColor}'/>`;
})
.join("");
resultColorDiv.innerHTML = resultColorDivHtml;
resultColorCodeDiv.innerHTML = resultCodeDivHtml;
}
function renderDropDownList() {
const colorPickerModeOptionsHtml = colorPickerModes
.map((colorPickerMode) => {
return `<option class='colorSchemeOptions' value="#">${colorPickerMode}</option>`;
})
.join("");
colorPickerModeDropDown.innerHTML = colorPickerModeOptionsHtml;
}
* {
box-sizing: border-box;
}
body {
font-size: 1.1rem;
font-family: "Ubuntu", sans-serif;
text-align: center;
margin: 0;
}
/*------Layout------*/
#container {
margin: 0 auto;
width: 80%;
}
#form-div {
width: 100%;
height:10vh;
margin: 0 auto;
}
#colorPick-form {
display: flex;
width: 100%;
height:6vh;
justify-content: space-between;
}
#colorPick-form > * {
margin: 1rem;
height: inherit;
border: 1px lightgray solid;
font-family: "Ubuntu", sans-serif;
}
#colorPick-form > #colorPicker {
width: 14%;
height: inherit;
}
#colorPick-form > #colorPick-mode {
width: 45%;
padding-left: 0.5rem;
}
#colorPick-form > #btn-getNewScheme {
width: 26%;
}
#main {
display: flex;
flex-direction:column;
width:100%;
margin: .8em auto 0;
height: 75vh;
border:lightgray 1px solid;
}
#result-color-div {
width:100%;
height:90%;
display:flex;
}
#result-color-div > *{
width:calc(100%/5);
}
#result-code-div {
width:100%;
height:10%;
display:flex;
}
.copy-label{
width:10%;
display:flex;
padding:0.5em;
font-size:0.8rem;
align-items: center;
cursor: pointer;
background-color: #4CAF50;
color: white;
}
#result-code-div .result-code{
width:calc(90%/5);
text-align: center;
border:none;
cursor: pointer;
}
.result-code:hover, .result-code:focus, .copy-label:hover, .copy-label:focus{
font-weight:700;
}
/*------Button------*/
#btn-getNewScheme {
background-image: linear-gradient(
to right,
#614385 0%,
#516395 51%,
#614385 100%
);
}
#btn-getNewScheme {
padding:0.8rem 1.5rem;
transition: 0.5s;
font-weight: 700;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 5px;
display: block;
cursor: pointer;
}
#btn-getNewScheme:hover,
#btn-getNewScheme:focus {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<title>Color Scheme Generator</title>
</head>
<body>
<div id="container">
<div>
<header><h1 class="site-title">🦎 Color Scheme Generator 🦎</h1></header>
</div>
<div id="form-div">
<form id="colorPick-form" method="get" >
<input id="colorPicker" type="color" />
<select name="colorPick-mode" id="colorPick-mode">
</select>
<button type='submit' id="btn-getNewScheme">Get Color Scheme</button>
</form>
</div>
<div id="main">
<div id="result-color-div">
</div>
<div id="result-code-div">
</div>
</div>
<script src="index.js" type="module"></script>
</body>
</html>
I think the problem is rendering timing. So you need to add event listener below the code where set innerHTML.
function renderColor() {
// to store result of color scheme set object
resultColorDivHtml = resultColorSchemeSet
.map((resultColorItem) => {
return `<div class="result-color" style="background-color: ${resultColorItem};"></div>`;
})
.join("");
resultCodeDivHtml = resultColorSchemeSet
.map((resultColor) => {
return `
<label for='${resultColor}' class='copy-label'>Click to copy!</label>
<input class='result-code' id='${resultColor}' type="text" value='${resultColor}'/>
`;
})
.join("");
resultColorDiv.innerHTML = resultColorDivHtml;
resultColorCodeDiv.innerHTML = resultCodeDivHtml;
// here! add event listener
const labels = document.getElementsByClassName("result-code");
Object.entries(labels).forEach(([key, label]) => {
label.addEventListener("click", (event) =>
alert(`copy color: ${event.target.value}`)
);
});
}
const resultColorCodeDiv=document.getElementById("resultColorCodeDiv")
const resultColorDiv=document.getElementById("resultColorDiv")
resultColorSchemeSet=[
{color:"red", code: "#ff0000"},
{color:"green", code: "#00ff00"},
{color:"blue", code: "#0000ff"}]
function renderColor(){
//to store result of color scheme set object
resultColorDivHtml = resultColorSchemeSet.map((resultColorItem) => {
return `<div class="result-color" style="background-color: ${resultColorItem.color};"></div>`
}).join('')
resultCodeDivHtml = resultColorSchemeSet
.map((resultColor) => {
return `
<label for='${resultColor.code}' class='copy-label'>Click to copy!</label>
<input class='result-code' id='${resultColor.code}' type="text" value='${resultColor.code}'/>`
})
.join("")
resultColorDiv.innerHTML = resultColorDivHtml
resultColorCodeDiv.innerHTML = resultCodeDivHtml
addListener(document.querySelectorAll(".result-color"))
addListener(document.querySelectorAll(".result-code"))
}
renderColor()
function addListener(elements){
for(const element of elements){
element.addEventListener("click" , ()=>{
// add copy logic here
console.log("hello")
})
}
}
<body>
<div id="resultColorDiv"></div>
<div id="resultColorCodeDiv"></div>
</body>

[JavaScript]Why for progress bar addeventlistener is not working?

With the help od basic javascript I am trying to make a custom video player, though all of the controls are working fine, progress bar is getting updated according to time-update event, but when Iam trying to add the functionality that when the user clicks on progress bar the video currentTime should go to that time and progress bar should show the progress accordingly but when I am trying to addeventlistener for click event on progress bar it's not working , I am simply using all bootstrap version 4 classes , and some basic CSS the code is as below ,why the addeventlistener is not working please see in the comments, I've marked the scrub(name of the function) function which is not called at all with the help of comments, I don't know why please help me on this.....if anyone knows how to add the functionality that I described above without changing the HTML
let videoelement = document.querySelector('.videos')
let pausebutton = document.querySelector('.fas');
let skipbutton = document.querySelector('.forward');
let backbutton = document.querySelector('.backward');
let speed = document.querySelector('#playbackspeed');
let vol = document.querySelector('#volume');
let controls = document.querySelector('.controlplayer')
let progress = document.querySelector('.progress-bar')
vol.addEventListener('change', setvol)
vol.addEventListener('mousedown', setvol)
function setvol(e) {
videoelement.volume = vol.value;
}
speed.addEventListener('change', rate)
speed.addEventListener('mousedown', rate)
function rate(e) {
// console.dir(speed);
videoelement.playbackRate = speed.value;
}
pausebutton.addEventListener('click', playing)
videoelement.addEventListener('mouseenter', function () {
controls.style.display = 'block';
})
videoelement.addEventListener('click', playing)
videoelement.addEventListener('play', updatebutton)
videoelement.addEventListener('pause', updatebutton)
videoelement.addEventListener('timeupdate', handleprogress)
function updatebutton() {
if (videoelement.paused) {
pausebutton.classList.remove('fa-pause')
pausebutton.classList.add('fa-play')
}
else {
pausebutton.classList.remove('fa-play')
pausebutton.classList.add('fa-pause')
}
}
function playing(e) {
console.dir(videoelement)
if (videoelement.paused) {
// console.log("pause hai ")
videoelement.play();
playing
videoelement.controls = null;
videoelement.firstChild.nodeValue = 'Play';
pausebutton.classList.remove('fa-play')
pausebutton.classList.add('fa-pause')
} else {
//console.log("play ho gya")
videoelement.pause();
videoelement.firstChild.nodeValue = 'Pause';
pausebutton.classList.remove('fa-pause')
pausebutton.classList.add('fa-play')
}
// this.preventDefault();
}
skipbutton.addEventListener('click', function (e) {
let t = videoelement.currentTime;
if ((t + 25) < videoelement.duration)
videoelement.currentTime = t + 25;
else
videoelement.currentTime = videoelement.duration;
})
backbutton.addEventListener('click', function (e) {
let t = videoelement.currentTime;
if ((t - 10) >= 0)
videoelement.currentTime = t - 10;
else
videoelement.currentTime = 0;
})
function handleprogress() {
let percent = (videoelement.currentTime / videoelement.duration) * 100;
progress.style.width = `${percent}%`;
}
progress.addEventListener('click', scrub)
progress.addEventListener('mousemove', scrub)
function scrub(e) {// this is the function which is not getting called at all
console.log('sigjeg')
// const scrubtime = (e.offsetX / progress.offsetWidth) * videoelement.duration;
// videoelement.currentTime = scrubtime
}
body
{
background-color: blueviolet
}
.videos
{
width: 50%;
margin-left:20%;
margin-right: 20%;
margin-top:10%;
}
.controlplayer
{
display:none;
width: 50%;
margin-left: 20%;
margin-right: 20%;
background-color: ;
}
#volume
{
width: 36%;
/* margin-left: 42%;
margin-right: 40%; */
margin-top: 0%;
position: relative;
display: inline;
}
#playbackspeed
{
width:36%;
/* margin-left:25%;
margin-right:40%;
margin-top:0; */
position: relative;
display: inline;
}
.r
{
background-color: Transparent;
border: none;
cursor:pointer;
width: 9%;
/* margin-left: 60%;
margin-right: 20%; */
position: relative;
display: inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="videplayercss.css">
</head>
<body>
<div class="videoplayer">
<video src="yourvideo.mp4" autoplay class="videos"> </video>
</div>
<div class="controlplayer">
<div class="progress">
<div class="progress-bar progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0"
aria-valuemax="100" style="width: 25%; margin-bottom:5%;"></div>
</div>
<i class="fas fa-play"></i>
<input type="range" min="0" max="1" value="1" step="0.01" id="volume">
<input type="range" min="0.1" max="3" value="1" step="0.01" id="playbackspeed">
<i class="fa fa-angle-double-left backward r">10s</i>
<i class="fa fa-angle-double-right forward r">25s</i>
</div>
<script src="videoplayerjs.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/eb0a94b8cf.js" crossorigin="anonymous"></script>
</body>
</html>
I've cleaned up your code and found that the event was being targeted on the wrong element (progress bar fill and not progress bar itself).
In addition to another answer I've just saw, there is no need to target both elements (bar and fill) because of how events propagation works (parent elements will receive all events bubbling from nested elements).
const videoElement = document.querySelector('.videos');
const pauseButton = document.querySelector('.fas');
const skipButton = document.querySelector('.forward');
const backButton = document.querySelector('.backward');
const speed = document.querySelector('#playbackSpeed');
const vol = document.querySelector('#volume');
const controls = document.querySelector('.control-player');
const progress = document.querySelector('.progress');
vol.addEventListener('change', setVol);
vol.addEventListener('mousedown', setVol);
function setVol() {
videoElement.volume = vol.value;
}
speed.addEventListener('change', rate);
speed.addEventListener('mousedown', rate);
function rate() {
videoElement.playbackRate = speed.value;
}
pauseButton.addEventListener('click', playing);
videoElement.addEventListener('click', playing);
videoElement.addEventListener('play', updateButton);
videoElement.addEventListener('pause', updateButton);
videoElement.addEventListener('timeupdate', handleProgress);
videoElement.addEventListener('mouseenter', () => {
controls.style.display = 'block';
});
function updateButton() {
if (videoElement.paused) {
pauseButton.classList.remove('fa-pause');
pauseButton.classList.add('fa-play');
} else {
pauseButton.classList.remove('fa-play');
pauseButton.classList.add('fa-pause');
}
}
function playing() {
if (videoElement.paused) {
videoElement.play();
videoElement.controls = null;
videoElement.firstChild.nodeValue = 'Play';
pauseButton.classList.remove('fa-play');
pauseButton.classList.add('fa-pause');
} else {
videoElement.pause();
videoElement.firstChild.nodeValue = 'Pause';
pauseButton.classList.remove('fa-pause');
pauseButton.classList.add('fa-play');
}
}
skipButton.addEventListener('click', function () {
const t = videoElement.currentTime;
if (t + 25 < videoElement.duration) {
videoElement.currentTime = t + 25;
} else {
videoElement.currentTime = videoElement.duration;
}
});
backButton.addEventListener('click', function () {
let t = videoElement.currentTime;
if (t - 10 >= 0) {
videoElement.currentTime = t - 10;
} else {
videoElement.currentTime = 0;
}
});
function handleProgress() {
const percent = (videoElement.currentTime / videoElement.duration) * 100;
progress.style.width = `${percent}%`;
}
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', scrub);
function scrub(e) {
if (e.type === 'click') {
console.log('click');
} else {
console.log('mousemove');
}
}
body {
background-color: #8a2be2;
}
.videos {
width: 50%;
margin-left: 20%;
margin-right: 20%;
margin-top: 10%;
}
.control-player {
display: none;
width: 50%;
margin-left: 20%;
margin-right: 20%;
}
#volume {
width: 36%;
margin-top: 0;
position: relative;
display: inline;
}
#playbackSpeed {
width: 36%;
position: relative;
display: inline;
}
.r {
background-color: transparent;
border: none;
cursor: pointer;
width: 9%;
position: relative;
display: inline;
}
.progress-bar {
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="video-player">
<video src="" autoplay class="videos"> </video>
</div>
<div class="control-player">
<div class="progress">
<div class="progress-bar progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100" style="width: 25%; margin-bottom: 5%;"></div>
</div>
<i class="fas fa-play"></i>
<input type="range" min="0" max="1" value="1" step="0.01" id="volume">
<input type="range" min="0.1" max="3" value="1" step="0.01" id="playbackSpeed">
<i class="fa fa-angle-double-left backward r">10s</i>
<i class="fa fa-angle-double-right forward r">25s</i>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/eb0a94b8cf.js" crossorigin="anonymous"></script></body>
</html>
The issue OP had was two fold.
First the actual progress bar did not have a height (so could never receive a click event or mousemove event), this was easily fixed with the addition of .progress-bar{height: 100%}.
The second (and the main cause of the issues with the event handler not firing) was that they were targeting the progress bar itself, not the container.
incorrect - see edit As the progress bar can be in front of the progress container we need to target both to capture all events.
incorrect - see edit By changing the selector to let progress = document.querySelector('.progress-bar, .progress') we can capture events on both easily.
Below is a working example, with comments in the CSS and JS to highlight the changes.
Edit
As pointed out in a comment by #ErnestoStifano I was sleeping on the job and didn't realise a simple mistake.
You only need target the parent element due to event propagation (and querySelector will only capture the first element it finds in the DOM, to target multiple elements you should use querySelectorAll), it only worked due to the fact the parent element contained the progress bar. Corrected below.
let videoelement = document.querySelector('.videos')
let pausebutton = document.querySelector('.fas');
let skipbutton = document.querySelector('.forward');
let backbutton = document.querySelector('.backward');
let speed = document.querySelector('#playbackspeed');
let vol = document.querySelector('#volume');
let controls = document.querySelector('.controlplayer')
//let progress = document.querySelector('.progress-bar') ----- changed this to include the container below
let progress = document.querySelector('.progress')
vol.addEventListener('change', setvol)
vol.addEventListener('mousedown', setvol)
function setvol(e) {
videoelement.volume = vol.value;
}
speed.addEventListener('change', rate)
speed.addEventListener('mousedown', rate)
function rate(e) {
// console.dir(speed);
videoelement.playbackRate = speed.value;
}
pausebutton.addEventListener('click', playing)
videoelement.addEventListener('mouseenter', function () {
controls.style.display = 'block';
})
videoelement.addEventListener('click', playing)
videoelement.addEventListener('play', updatebutton)
videoelement.addEventListener('pause', updatebutton)
videoelement.addEventListener('timeupdate', handleprogress)
function updatebutton() {
if (videoelement.paused) {
pausebutton.classList.remove('fa-pause')
pausebutton.classList.add('fa-play')
}
else {
pausebutton.classList.remove('fa-play')
pausebutton.classList.add('fa-pause')
}
}
function playing(e) {
console.dir(videoelement)
if (videoelement.paused) {
// console.log("pause hai ")
videoelement.play();
playing
videoelement.controls = null;
videoelement.firstChild.nodeValue = 'Play';
pausebutton.classList.remove('fa-play')
pausebutton.classList.add('fa-pause')
} else {
//console.log("play ho gya")
videoelement.pause();
videoelement.firstChild.nodeValue = 'Pause';
pausebutton.classList.remove('fa-pause')
pausebutton.classList.add('fa-play')
}
// this.preventDefault();
}
skipbutton.addEventListener('click', function (e) {
let t = videoelement.currentTime;
if ((t + 25) < videoelement.duration)
videoelement.currentTime = t + 25;
else
videoelement.currentTime = videoelement.duration;
})
backbutton.addEventListener('click', function (e) {
let t = videoelement.currentTime;
if ((t - 10) >= 0)
videoelement.currentTime = t - 10;
else
videoelement.currentTime = 0;
})
function handleprogress() {
let percent = (videoelement.currentTime / videoelement.duration) * 100;
progress.style.width = `${percent}%`;
}
progress.addEventListener('click', scrub)
progress.addEventListener('mousemove', scrub)
function scrub(e) {// this is the function which is not getting called at all
console.log(e.target);
console.log('sigjeg')
// const scrubtime = (e.offsetX / progress.offsetWidth) * videoelement.duration;
// videoelement.currentTime = scrubtime
}
body
{
background-color: blueviolet
}
.videos
{
width: 50%;
margin-left:20%;
margin-right: 20%;
margin-top:10%;
}
.controlplayer
{
display:none;
width: 50%;
margin-left: 20%;
margin-right: 20%;
background-color: ;
}
#volume
{
width: 36%;
/* margin-left: 42%;
margin-right: 40%; */
margin-top: 0%;
position: relative;
display: inline;
}
#playbackspeed
{
width:36%;
/* margin-left:25%;
margin-right:40%;
margin-top:0; */
position: relative;
display: inline;
}
.r
{
background-color: Transparent;
border: none;
cursor:pointer;
width: 9%;
/* margin-left: 60%;
margin-right: 20%; */
position: relative;
display: inline;
}
/******added a height to the progress bar itself so that it shows***********/
.progress-bar
{
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="videplayercss.css">
</head>
<body>
<div class="videoplayer">
<video src="yourvideo.mp4" autoplay class="videos"> </video>
</div>
<div class="controlplayer">
<div class="progress">
<div class="progress-bar progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0"
aria-valuemax="100" style="width: 25%; margin-bottom:5%;"></div>
</div>
<i class="fas fa-play"></i>
<input type="range" min="0" max="1" value="1" step="0.01" id="volume">
<input type="range" min="0.1" max="3" value="1" step="0.01" id="playbackspeed">
<i class="fa fa-angle-double-left backward r">10s</i>
<i class="fa fa-angle-double-right forward r">25s</i>
</div>
<script src="videoplayerjs.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/eb0a94b8cf.js" crossorigin="anonymous"></script>
</body>
</html>

Qr & Barcode Reader javascript documentation for html5

I want to make an input where it can be automatically filled in after scanning a QR or barcode scanner using a webcam or phone cam.
for the script I imagined something like this
<video autoplay = "true" id = "video-webcam">
</video>
<input type = "text" id = "scanresult">
<script>
external or internal script for scan qr or barcode. save result in variable = result
html DOM getElementById ('scanresult'). value (result);
</script>
I hope anyone can give me suggestions or feedback for my problem.
Thank you
Before it thank you for JaromandaX,
i have found script for barcode scanner on Html5 using webcam.
this is my index.html
<!DOCTYPE html>
<html>
<head>
<title>QR Code Scanner</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" href="style.css" />
<script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script>
</head>
<body>
<div id="container">
<h1>QR Code Scanner</h1>
<a id="btn-scan-qr">
<img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg">
<a/>
<canvas hidden="" id="qr-canvas"></canvas>
<div id="qr-result" hidden="">
<b>Data:</b> <span id="outputData"></span>
</div>
</div>
<script src="qrCodeScanner.js"></script>
</body>
</html>
qsCodeScanner.js
//const qrcode = window.qrcode;
const video = document.createElement("video");
const canvasElement = document.getElementById("qr-canvas");
const canvas = canvasElement.getContext("2d");
const qrResult = document.getElementById("qr-result");
const outputData = document.getElementById("outputData");
const btnScanQR = document.getElementById("btn-scan-qr");
let scanning = false;
qrcode.callback = res => {
if (res) {
outputData.innerText = res;
scanning = false;
video.srcObject.getTracks().forEach(track => {
track.stop();
});
qrResult.hidden = false;
canvasElement.hidden = true;
btnScanQR.hidden = false;
}
};
btnScanQR.onclick = () => {
navigator.mediaDevices
.getUserMedia({ video: { facingMode: "environment" } })
.then(function(stream) {
scanning = true;
qrResult.hidden = true;
btnScanQR.hidden = true;
canvasElement.hidden = false;
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
video.srcObject = stream;
video.play();
tick();
scan();
});
};
function tick() {
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
scanning && requestAnimationFrame(tick);
}
function scan() {
try {
qrcode.decode();
} catch (e) {
setTimeout(scan, 300);
}
}
style.css
html {
height: 100%;
}
body {
font-family: sans-serif;
padding: 0 10px;
height: 100%;
background: black;
margin: 0;
}
h1 {
color: white;
margin: 0;
padding: 15px;
}
#container {
text-align: center;
margin: 0;
}
#qr-canvas {
margin: auto;
width: calc(100% - 20px);
max-width: 400px;
}
#btn-scan-qr {
cursor: pointer;
}
#btn-scan-qr img {
height: 10em;
padding: 15px;
margin: 15px;
background: white;
}
#qr-result {
font-size: 1.2em;
margin: 20px auto;
padding: 20px;
max-width: 700px;
background-color: white;
}
There are lots of better libraries out there for doing this, but I'd personally recommend QrScanner because of its simplicity and intuitiveness.
Your live QrCode Scanner would be like this...
scanner.html
<div id="holder">
<h3>Scan QR Code from Camera</h3>
<div class="make">
<video id="scan"></video>
</div>
<div>
<input type = "text" id = "scanresult"><br>
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>
</div>
Then add a little CSS as:
style.css
#holder{
width: 30%;
margin:auto;
}
#holder .make {
width: 99%;
height: 30vh;
margin-bottom: 15px;
text-align: center;
}
video {
width: 99%;
margin:auto;
}
Then add your QrScanner code as:
<script type="module">
import QrScanner from "/path/to/qr-scanner.min.js";
QrScanner.WORKER_PATH = "/path/to/qr-scanner-worker.min.js";
// Scanner Object
const scanner = new QrScanner(
document.getElementById("scan"),
function(result){
document.getElementById("scanresult").value = result;
}
);
document.getElementById("start").onclick = e => scanner.start();
document.getElementById("stop").onclick = e => scanner.stop();
</script>
Then connect your camera and click start button...

Javascript a4 paper size

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

Categories