Im trying to change my nav when a user scrolls 50px down on the page. In my consol log i can see that it detects the scroll, but it only shows 0, and not the new new amount.. What am i doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title>Scroll Test</title>
<script type="text/javascript">
window.onload = oppstart;
function oppstart() {
document.getElementById("doc").onscroll = scroll;
}
function scroll() {
var element = document.getElementById("doc");
var y = element.scrollTop;
console.log(y);
document.getElementById("utskrift").innerHTML = y + " px";
if (y === 50) {
document.getElementById("navigation").style.backgroundColor = "red";
}
}
</script>
<style type="text/css">
body {
overflow: auto;
}
#navigation {
height: 30vh;
background-color: black;
overflow: auto;
}
#main {
height: 200vh;
}
</style>
</head>
<body id="doc">
<nav id="navigation"></nav>
<div id="main">
<p id="utskrift"></p>
</div>
</body>
</html>
just change
element.scrollTop;
to
window.scrollY
<!DOCTYPE html>
<html>
<head>
<title>Scroll Test</title>
<script type="text/javascript">
window.onload = oppstart;
function oppstart() {
document.getElementById("doc").onscroll = scroll;
}
function scroll() {
var y = window.scrollY;
console.log(y);
document.getElementById("utskrift").innerHTML = y + " px";
if (y === 50) {
document.getElementById("navigation").style.backgroundColor = "red";
}
}
</script>
<style type="text/css">
body {
overflow: auto;
}
#navigation {
height: 30vh;
background-color: black;
overflow: auto;
}
#main {
height: 200vh;
}
</style>
</head>
<body id="doc">
<nav id="navigation"></nav>
<div id="main">
<p id="utskrift"></p>
</div>
</body>
</html>
Related
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 trying to have multiple scripts run in my html sheet, and it seems to not be working. All the other scripts work except for the script for the blinking function. I don't see what the problem is. Can you find the issue with my code? Thanks in advance!
Here is my code below:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
});
</script>
<script>
//blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
</div>
<div class="text2">
-- : --
</div>
<button class="btn1">online</button>
</body>
</html>
The second script must be inside a JQuery function.
$(document).ready(function(){
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
});
The second script's contents should be in the document ready handler otherwise the code attempts to locate and work with the .text2 element before that element has been parsed into memory.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
} else {
element.show();
}
shown = !shown;
}
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<div class="text2">-- : --</div>
<button class="btn1">online</button>
</body>
</html>
I am trying to create a simple line, but it does not register s.line as a function, and i cannot see what i am doing wrong here. My code is posted below. Thanks!
<html>
<head>
<style type="text/css">
#svg{
width: 700px;
height: 700px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="svg"></div>
<script src="snap.svg-min.js"></script>
<script>
var s = Snap("#svg");
var metric = 24;
var ground = s.line(50,350,650,350);
</script>
</body>
You have to draw on a <svg> element, not a <div>
<html>
<head>
<style type="text/css">
#svg{
width: 700px;
height: 700px;
background-color: #ccc;
}
</style>
</head>
<body>
<svg id="svg"></svg>
<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<script>
var s = Snap("#svg");
var metric = 24;
var ground = s.line(50,50,650,50);
ground.attr({
stroke: "red",
strokeWidth: 10
});
</script>
</body>
to move red box over yellow container - onmouseover-> move right , onmouseout-> move left
I tried pos=document.getElementById("animate").style.left;
then by setinterval, I tried to move it using pos++ and pos--. but it didn't work. Please Help.
here's the code.
var id_l, id_r;
function right() {
clearInterval(id_l);
var box = document.getElementById("animate");
var pos=box.style.left;
id_r=setInterval(move,5);
function move() {
if(pos==900) {
clearInterval(id_r);
}
else {
pos++;
box.style.left = pos + "px";
}
}
}
function left() {
clearInterval(id_r);
var box = document.getElementById("animate");
var pos=box.style.left;
id_l=setInterval(move,5);
function move() {
if(pos==0) {
clearInterval(id_l);
}
else {
pos--;
box.style.left = pos + "px";
}
}
}
#container {
position: relative;
width: 1000px;
height: 100px;
background-color: yellow;
}
#animate {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: "200px";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div id="container" onmouseover="right()" onmouseout="left()">
<div id="animate">
</div>
</div>
<script src="scripts/javascript.js"></script>
</body>
</html>
You were doing it wrong. When you get the position, it gives you in format 100px etc. You have to trim px and then do your computation
var id_l, id_r;
function right() {
clearInterval(id_l);
var box = document.getElementById("animate");
var pos=box.style.left;
pos = pos.toString().substr(0, pos.length-2); // do not read `px`
id_r=setInterval(move,5);
function move() {
if(pos==900) {
clearInterval(id_r);
}
else {
pos++;
box.style.left = pos + "px";
}
}
}
function left() {
clearInterval(id_r);
var box = document.getElementById("animate");
var pos=box.style.left;
pos = pos.toString().substr(0, pos.length-2); // do not read px
id_l=setInterval(left,5);
function left() {
if(pos==0) {
clearInterval(id_l);
}
else {
pos--;
box.style.left = pos+"px";
}
}
}
#container {
position: relative;
width: 1000px;
height: 100px;
background-color: yellow;
}
#animate {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: "200px";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div id="container" onmouseover="right()" onmouseout="left()">
<div id="animate">
</div>
</div>
<script src="scripts/javascript.js"></script>
</body>
</html>
You can do correct by adding parseInt in both move() because it's get a string!
element.style.left is only work in inline style ! so use getComputedStyle is better
var pos = window.getComputedStyle(box).getPropertyValue('left');
function move() {
pos = parseInt(pos);
if(pos==900) {
clearInterval(id_r);
}
else {
pos++;
box.style.left = pos + "px";
}
}
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