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;
}
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();
})();
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 working on a project, and cant figure out how to hide my welcome2 and welcome2-0 html code, then once the button is pressed show that information. im new with jquery, and am really confused tried looking this stuff up and still have little idea on how to fix this issue. i appreciate any help or input guys, sorry if anything poorly formatted.
var name ;
var nameFormat=true;
function submission() {
var name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome "+name);
$("#name").fadeOut(1000);
$("#welcome").fadeOut(1000);
}
else{
nameFormat==false;
alert("Please enter the name again");
}
}
#welcome{
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
#name{
top:30px;
left: 500px;
color: antiquewhite;
background: blue;
border: 25px solid blue;
}
body {
background-color: lightblue;
}
#welcome2{
position: relative;
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
HTML
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="stylesheet" href="includes/styles1.css" type="text/css" media="screen" />
</head>
<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id ="name"><b>Name:</b>
<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()" >submit</button>
</p>
<div id="welcome2">Myanmar Trivia Quiz </div>
<div id="welcome2-0">Test your Demographic Knowledge<br>--------------------------------------------------------------------------------------</div>
</div>
</body>
<script src="includes/project.js"></script>
</html>
3 things:
Your HTML was malformed
You need to set display: none on the css
for what you want to be hidden at the start
You need to call fadeIn
(or show) on the element AFTER fadeOut (or hide) has finished, you
can do that using promises and the fadeIn callback function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
http://api.jquery.com/fadein/
var name ;
var nameFormat=true;
function submission() {
var name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome "+name);
fadeOutWelcome().then(() => fadeInWelcome());
}
else{
nameFormat==false;
alert("Please enter the name again");
}
}
const fadeOutWelcome = () => {
return new Promise((resolve, reject) => {
$("#name").fadeOut(1000, () => resolve());
$("#welcome").fadeOut(1000);
});
}
const fadeInWelcome = () => {
$("#welcome2").fadeIn(1000);
$("#welcome2-0").fadeIn(1000);
}
#welcome{
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
#name{
top:30px;
left: 500px;
color: antiquewhite;
background: blue;
border: 25px solid blue;
}
body {
background-color: lightblue;
}
#welcome2{
display: none;
position: relative;
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
HTML
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="stylesheet" href="includes/styles1.css" type="text/css" media="screen" />
</head>
<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id ="name"><b>Name:</b>
<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()" >submit</button>
</p>
</div>
<div id="welcome2">Myanmar Trivia Quiz
<div id="welcome2-0">Test your Demographic Knowledge<br>--------------------------------------------------------------------------------------</div>
</div>
</body>
<script src="includes/project.js"></script>
</html>
A few things:
Javascript is case-sensitive, so true is a reserved word, True is not. So instead of var nameFormat=True , you should do: var nameFormat= true .
Then, you're saying you want to hide welcome2 and welcome2-0 divs, but in your javascript code you're not doing this. If you want do this, do the following:
$("#welcome2").hide();
$("#welcome2-0").hide();
// or
$("#welcome2").fadeOut(100);
$("#welcome2-0").fadeOut(100);
There is another issue in your else block: you're doing nameFormat==false , which is just comparing if nameFormat is false. If you want to assign false to nameFormat variable, do this:
nameFormat = false;
Include the .hide() at the beginning of your javascript code (so that it executes at the very beginning) which would hide those 2 divs.
Then when the button is pressed, use .show() to show those 2 divs again.
Also, where you had nameFormat == false;, you need to change that to nameFormat = false;. == is the comparison operator, so it would look at that and say "Oh nameFormat is not false", and move on. If you wanted to make nameFormat be false (which I assume you did), you must use the assignment operator (which is =)
var name;
var nameFormat = true;
$("#welcome2").hide();
$("#welcome2-0").hide();
function submission() {
var name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome " + name);
$("#name").fadeOut(1000);
$("#welcome").fadeOut(1000);
$("#welcome2").show();
$("#welcome2-0").show();
} else {
nameFormat == false;
alert("Please enter the name again");
}
}
#welcome {
top: 30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
#name {
top: 30px;
left: 500px;
color: antiquewhite;
background: blue;
border: 25px solid blue;
}
body {
background-color: lightblue;
}
#welcome2 {
position: relative;
top: 30px;
left: 30px;
color: antiquewhite;
border: 2px solid blue;
background: blue;
padding: 25px;
}
HTML
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="stylesheet" href="includes/styles1.css" type="text/css" media="screen" />
</head>
<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id="name"><b>Name:</b>
<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()">submit</button>
</div>
<div id="welcome2">Myanmar Trivia Quiz </div>
<div id="welcome2-0">Test your Demographic Knowledge<br>--------------------------------------------------------------------------------------</div>
</div>
</body>
<script src="includes/project.js"></script>
</html>
To achieve what you are trying to do, it's simply as:
var name;
var nameFormat=true;
function submission() {
name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome "+name);
$("#name").fadeOut(1000);
$("#welcome").fadeOut(1000);
$("#welcome2").fadeIn(1000);
$("#welcome2-0").fadeIn(1000);
}
else{
nameFormat=false;
alert("Please enter the name again");
}
}
Since you showed up in your code fadeOut, I made my answer with that. Otherwise you can replace fadeIn with show.
About your CSS code, try to set display: none; for those elements that should be hidden when the page loads.
For more info look at:
http://api.jquery.com/show/
I am working on a Tablet-environment with draggable objects.
The drag & drop works, it is even possible to drag several objects at once, when implemented.
References are :
Reference 1 & Reference 2
This is how the current version of my code looks like:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta
name='viewport'
content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,'
/>
<!--
Refernces:
* https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Drag_and_Drop
* https://mobiforge.com/design-development/touch-friendly-drag-and-drop
-->
<style>
#container {
width: 200px;
height: 200px;
position: relative;
background: yellow;
top: 100px
}
main1 {
position: relative;
}
div1 {
position: absolute;
top: 0px;
left: 100px;
height: 72px;
width: 72px;
background: red;
border: 0px solid #666;
margin: 0;
padding: 0;
}
</style>
<title>Clean up</title>
</head>
<body>
<div id ="container">
</div>
<main1 id="main1">
<div1 class="draggable" id="d1-0""></div1>
</main1>
<script>
var nodeList = document.getElementsByClassName('draggable');
for(var i=0;i<nodeList.length;i++) {
var obj = nodeList[i];
obj.addEventListener('touchmove', function(event) {
var touch = event.targetTouches[0];
// Place element where the finger is
event.target.style.left = touch.pageX + 'px';
event.target.style.top = touch.pageY + 'px';
event.preventDefault();
}, false);
}
</script>
</body>
</html>
The idea is, that the red box (div1) can be moved, dragged and dropped everywhere on the screen. But it needs to be moved to its very initial starting position, when it enters the yellow canvas. (The idea is to "clean up" and "move objects back to where they came from".)
You should use jQuery UI's draggable and touch punch for mobile friendliness
Let me know if this is close to what you're looking for and we can adjust as needed
$(document).ready(function() {
$('#div1').draggable();
$('#container').droppable({
drop: function( event, ui ) {
alert("You dropped the red on the yellow");
}
});
$(document).on("click", "#animateBtn", function() {
//Simple animate w/ just specifying the offsets
//$('#div1').animate({top:"250px", left:"250px"});
//Other animate options
$('#div1').animate({
top:"15px",
left:"15px"
}, {
duration:555, //Animation time in pixels
easing:"easeOutQuart" //See https://api.jqueryui.com/easings/
});
});
});
#container {
width: 200px;
height: 200px;
position: relative;
background: yellow;
top: 100px
}
body {
position: relative;
}
#div1 {
position: absolute;
top: 0px;
left: 100px;
height: 72px;
width: 72px;
background: red;
border: 0px solid #666;
margin: 0;
padding: 0;
}
#animateBtn {
position:fixed;
right:10px;
bottom:10px;
display:inline-block;
padding:3px 5px;
background-color:green;
color:white;
border-radius:6px
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta
name='viewport'
content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,'
/>
<title>Drag and Drop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div id="container"></div>
<div class="draggable" id="div1"></div>
<div id="animateBtn">Animate</div>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta
name='viewport'
content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,'
/>
<title>Drag and Drop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
#container {
width: 200px;
height: 200px;
position: relative;
background: yellow;
top: 100px
}
body {
position: relative;
}
#div1 {
position: absolute;
top: 100px;
left: 100px;
height: 72px;
width: 72px;
background: red;
border: 0px solid #666;
margin: 0;
padding: 0;
}
</style>
<title>Clean up</title>
</head>
<body>
<div id="container"></div>
<div class="draggable" id="div1"></div>
<!--<div id="animateBtn">Animate</div>-->
<script>
$(document).ready(function() {
$('#div1').draggable();
$('#container').droppable({
drop: function() {
$('#div1').animate({top:"100px", left:"100px"});
}
});
});
</script>
</body>
</html>
I didn't see a mention of jQuery but w3schools has a working example that goes without. Could you some touchup though:
/**
* Make object draggable
* #param {Element} element
*/
const addDraggable = (element)=> {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
const dragMouseDown = e => {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
[pos3, pos4] = [e.clientX, e.clientY];
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
};
const elementDrag = e => {
console.log(e.clientX, e.clientY);
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
[pos1, pos2] = [pos3 - e.clientX, pos4 - e.clientY];
[pos3, pos4] = [e.clientX, e.clientY];
// set the element's new position:
[element.style.top, element.style.left] =
[(element.offsetTop - pos2) + "px", (element.offsetLeft - pos1) + "px"];
};
const closeDragElement = _ => {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
};
element.onmousedown = dragMouseDown;
}
document.addEventListener("DOMContentLoaded", event=> {
_('#logo-top').addEventListener('click', event=> {
event.stopPropagation();
_('#logo-top').classList.toggle('active');
_('nav').forEach( n=> n.classList.toggle('collapsed') );
_('main').classList.toggle('extended');
});
addDraggable( _('#help-text') );
_( '#help' ).addEventListener( 'click', ()=>{ _('#help-text').classList.toggle('active')} );
_( '#help-text-close' ).addEventListener( 'click', ()=>{_('#help-text').classList.toggle('active')} );
});
Another way would be to use the Drag Operations
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