Develop Reference

Prevent block from touching the containers borders

I have this little block that I move around using javascript code. It works all good except if I keep moving it, it can easily get out of the box where it is supposed to be.
Can I prevent this somehow? So no matter how far I want to move it, it will stay stuck inside of the container/box ?
Here's my snippet code:
/// store key codes and currently pressed ones
var keys = {};
keys.UP = 38;
keys.LEFT = 37;
keys.RIGHT = 39;
keys.DOWN = 40;
/// store reference to character's position and element
var character = {
x: 100,
y: 100,
speedMultiplier: 2,
element: document.getElementById("character")
};
var is_colliding = function(div1, div2) {
var d1_height = div1.offsetHeight;
var d1_width = div1.offsetWidth;
var d1_distance_from_top = div1.offsetTop + d1_height;
var d1_distance_from_left = div1.offsetLeft + d1_width;
var d2_height = div2.offsetHeight;
var d2_width = div2.offsetWidth;
var d2_distance_from_top = div2.offsetTop + d2_height;
var d2_distance_from_left = div2.offsetLeft + d2_width;
var not_colliding =
d1_distance_from_top <= div2.offsetTop ||
div1.offsetTop >= d2_distance_from_top ||
d1_distance_from_left <= div2.offsetTop ||
div1.offsetLeft >= d2_distance_from_left;
return !not_colliding;
};
/// key detection (better to use addEventListener, but this will do)
document.body.onkeyup =
document.body.onkeydown = function(e){
if (e.preventDefault) {
e.preventDefault();
}
else {
e.returnValue = false;
}
var kc = e.keyCode || e.which;
keys[kc] = e.type == 'keydown';
};
/// character movement update
var moveCharacter = function(dx, dy){
character.x += (dx||0) * character.speedMultiplier;
character.y += (dy||0) * character.speedMultiplier;
character.element.style.left = character.x + 'px';
character.element.style.top = character.y + 'px';
};
/// character control
var detectCharacterMovement = function(){
if ( keys[keys.LEFT] ) {
moveCharacter(-5, 0);
}
if ( keys[keys.RIGHT] ) {
moveCharacter(5, 0);
}
if ( keys[keys.UP] ) {
moveCharacter(0, -5);
}
if ( keys[keys.DOWN] ) {
moveCharacter(0, 5);
}
};
/// update current position on screen
moveCharacter();
/// game loop
setInterval(function(){
detectCharacterMovement();
}, 1000/24);
body{
display: flex;
justify-content: center;
align-items: center;
}
#character {
position: absolute;
width: 42px;
height: 42px;
background: red;
z-index:99;
}
#container{
width: 400px;
height: 400px;
background: transparent;
border:5px solid rgb(0, 0, 0);
position: relative;
overflow: hidden;
}
<div id="container">
<div id="character"></div>
</div>
PS: You can move the box using keyboard arrows.

Get the container width and height into variable and set a condition on your move
var moveCharacter = function(dx, dy){
let div_width = document.getElementById('container').clientWidth;
let div_height = document.getElementById('container').clientHeight;
if((div_width - character.x) < 50 ){ // 50 = width of character and padding
character.x = div_width - 50;
}
if(character.x < 10){ // Padding
character.x = 11;
}
if((div_height - character.y) < 50 ){
character.y = div_height - 50;
}
if(character.y < 10){
character.y = 11;
}

Found a good ticker on JQuery but how do I make it loop infinitely?

I added in a ticker my teacher recommended me from jQuery and it works great but when the text is done, it doesn't loop immediately. The text stops coming from the right, just goes of the screen on the left and when it's completely gone the whole thing starts over. I was hoping someone knows what I have to add/change to the code to make it loop directly when the first round of text in done.
(function ($) {
$.fn.newsTicker = function(options) {
if($(this).length < 1) return this;
var opt = $.extend(true,{
base : {
width : 2100,
time : 40000
},
itemWidth : "auto",
ticker : ".ti_news",
tickerClone : "ti_clone",
wrapper : ".ti_wrapper",
slide : ".ti_slide",
content : ".ti_content",
callbacks : {
beforeLoad : function($Ticker){},
onLoad : function($current,$Ticker){},
beforeAnimation : function($old,$current){},
completeAnimation : function($old,$current){},
isPaused : function($current,$Ticker){},
isResumed : function($current,$Ticker){}
},
core : {
_getTime : function(w){
baseMargin=(typeof $contentTickers === "undefined") ? 0 : $contentTickers.first().css("margin-left");
baseMargin=(baseMargin<0)?baseMargin:0;
return opt.base.time * (w / (baseMargin + opt.base.width));
},
_contentWidth : function($tickers){
var w = 0;
if(opt.itemWidth !== "auto" && opt.itemWidth !== 0){
w = $tickers.length * opt.itemWidth;
$tickers.width(opt.itemWidth);
}else{
$tickers.each(function(){w = w + $(this).width()});
}
return Math.ceil(w+2);
}
}
},options);
$(this).each(function(){
var $Ticker = $(this);
$Ticker.data("ticker",{
stop:true,
animation:null
});
opt.callbacks.beforeLoad($(this));
var $notizieTicker = $Ticker.find(opt.ticker),
$wrapperTicker = $Ticker.find(opt.wrapper),
$ti_slide = $Ticker.find(opt.slide),
$contentTicker = $Ticker.find(opt.content);
var width_content = opt.core._contentWidth($notizieTicker),
wrapper_width = $wrapperTicker.width(),
$current,
$old = $();
if(width_content < wrapper_width){
var x = Math.ceil(wrapper_width/width_content),
$clone = $contentTicker.children().clone();
for (var i = 1; i <= x; i++) {
$contentTicker.append($clone.clone());
}
if(!opt.itemWidth || opt.itemWidth == "auto"){
width_content = width_content*i;
}else{
width_content = ($contentTicker.children().length * opt.itemWidth);
}
}
if(width_content * 3 > $ti_slide.width()) $ti_slide.width((width_content*3)+100);
$ti_slide.append($contentTicker.clone().addClass(opt.tickerClone));
$ti_slide.append($contentTicker.clone().addClass(opt.tickerClone));
var $contentTickers = $Ticker.find(opt.content);
$contentTickers.width(width_content);
$current = $contentTickers.first();
opt.callbacks.onLoad($current,$(this));
var animateTicker = function(m){
$ti_slide.append($old);
var m = (typeof m == "undefined") ? 0 : m ;
$old.css("margin-left",m);
opt.callbacks.beforeAnimation($old,$current);
$Ticker.data("stop",false);
var tickerAnimation = $current.animate({
"margin-left" : -width_content,
},{
easing : "linear",
duration : opt.core._getTime(width_content),
complete : function(){
$old = $current;
$current = $current.next();
opt.callbacks.completeAnimation($old,$current);
animateTicker.call($Ticker);
}
});
$Ticker.data("animation",tickerAnimation);
}
animateTicker.call(this);
$Ticker[0].pauseTicker = function(){
$Ticker.each(function(){
var _anim = $Ticker.data("animation"),
_stop = $Ticker.data("stop");
if(!!_stop || !_anim) return;
_anim.stop();
$Ticker.data("stop",true);
opt.callbacks.isPaused();
});
}
$Ticker[0].startTicker = function(){
$Ticker.each(function(){
if(!$Ticker.data("stop")) return;
animateTicker($Ticker);
$Ticker.data("stop",false);
opt.callbacks.isResumed();
});
}
});
return this;
};
$.fn.newsTickerPause = function(){
$(this).each(function(){
if("pauseTicker" in $(this)[0]) $(this)[0].pauseTicker();
});
}
$.fn.newsTickerResume = function(){
$(this).each(function(){
if("startTicker" in $(this)[0]) $(this)[0].startTicker();
});
}
}( jQuery ));
.TickerNews {
width: 100%;
height: 50px;
line-height: 50px;
}
.ti_wrapper {
width: 100%;
position: relative;
overflow: hidden;
height: 50px;
}
.ti_slide {
width: 30000px;
position: relative;
left: 0;
top: 0;
}
.ti_content {
width: 8000px;
position: relative;
float: left;
}
.ti_news { float: left; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upcoming">
<div class="TickerNews" id="T3">
<div class="ti_wrapper">
<div class="ti_slide">
<div class="ti_content">
<div class="ti_news">
text
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
_Ticker = $(".TickerNews").newsTicker();
});
</script>

Javascript - Run once per session

I would like the code below to execute only once when the website first loads.
I tried it with cookies and sessionstorage. But I have never found the right solution. Maybe it was wrong. Does anyone have an idea how I can solve that with session storage? I've never done anything with it. maybe something like this? :
if (!sessionStorage.alreadyClicked) {
$('#my_div');
sessionStorage.alreadyClicked = 1;
}
Any help will be appreciated. Thank You.
var my_div;
topIgnore = 100; // (in pixel units) used for function ignoreTop
window.onload = function() {
my_div = document.getElementById('my_div');
var my_div_style = window.getComputedStyle(my_div);
var width_div = parseInt(my_div_style.width, 10); // remove 'px' from string
var height_div = parseInt(my_div_style.height, 10);
// make sure the property exists, else you can get a NaN
my_div.style.left = 0;
my_div.style.top = 0;
// event
window.onmousemove = function(e) {
// my_div.innerHTML = e.pageX +' - '+ (leftBorder + width_div) +' - '+ width_div;
cursorIsInsideDiv(e);
}
// TO DO: feel free to make similar functions for left/right/bottom
// removes the first 100px
function ignoreTop(top) {
if(top < topIgnore) {
return topIgnore;
}
return top;
}
function cursorIsInsideDiv(e) {
var leftBorder = parseInt(my_div.style.left, 10); // remove 'px' from string
var topBorder = parseInt(my_div.style.top, 10);
// move left
if( e.pageX < leftBorder ) {
my_div.style.left = e.pageX + 'px';
}
// move right
else if( e.pageX > (leftBorder + width_div)) {
my_div.style.left = (e.pageX - width_div ) + 'px';
}
// move up
if( e.pageY < topBorder ) {
var top = e.pageY ;
top = ignoreTop(top);
my_div.style.top = top + 'px';
}
// move down
else if( e.pageY > (topBorder + height_div)) {
my_div.style.top = (e.pageY - height_div ) + 'px';
}
}
}
#my_div {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#my_div {
width: 300px;
height: 150px;
background: #ff0000;
position: absolute;
}
<div id="my_div">
<h2>Newsletter</h2>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email"><br>
</div>

Use JS to set a cookie:
document.cookie = "alreadyClicked=1; expires=Fri, 13 Jan 2017 20:00:00 UTC";
Then, you can check if it exists by defining a function to find the value (from http://www.w3schools.com/js/js_cookies.asp):
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
if (getCookie("alreadyClicked") == "1") {
// do stuff if already clicked
} else {
// prompt for click?
}

I just inserted the code between. It worked. Corrected if that is wrong.
if (!sessionStorage.alreadyClicked) {
$('#my_div');
sessionStorage.alreadyClicked = 1;
}

Compare two element position (offset)

I need to compare two elements offset positions to find whether one element is placed above on other element.
here i need to check the me is placed on the screen or not by using offset positions.
HTML Code
<div id="screen" style="background-color: olive; height: 120px; width:120px;"></div>
<span id="me" style="position: absolute; left: 44px; top: 86px;">me</span></div>
JavaScript
var a = document.getElementById('screen')
var b = document.getElementById('me');
aOffsetLeft=a.offsetLeft;
aOffsetTop=a.offsetTop;
bOffsetLeft=b.offsetLeft;
bOffsetTop=b.offsetTop;
//Here need to check whether b within a
Please help me

Above code is in jquery, below is javascript code :
https://jsfiddle.net/7xudznea/11/
var a = document.getElementById('screen')
var b = document.getElementById('me');
var c = document.getElementById('abc');
aOffsetLeft = a.offsetLeft;
aOffsetTop = a.offsetTop;
aoffsetHeight = a.offsetHeight;
aoffsetoffsetWidth = a.offsetoffsetWidth;
bOffsetLeft = b.offsetLeft;
bOffsetTop = b.offsetTop;
if ((aoffsetHeight + aOffsetTop >= bOffsetTop) || (aoffsetoffsetWidth + aOffsetLeft >= bOffsetLeft)) {
document.getElementById('abc').innerHTML = 'true';
} else {
document.getElementById('abc').innerHTML = 'false';
}

var $screen = $('#screen');
var $me = $('#me');
if ((($screen.height() + $screen.offset().top) >= $me.offset().top) || ($screen.width() + $screen.offset().left >= $me.offset().left)) {
return true;
} else {
return false;
}
Demo: https://jsfiddle.net/7xudznea/6/

How to make smooth elements dragging by mouse if their position set in percents?

I doing elements dragging possibility in my page.
User should drag any element with % or px set position.
The dragging of px positioned elements works good, but the dragging of % positioned elements is too fast and element runs away from mouse.
Which way I can fix this? I think I probably need to do some calculations, so the element will not move until mouse has run some distance, but I don't understand what exactly calculations I should make. This probably should be dependent from how much pixels in 1%.
<html style="height: 100%;">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>test export</title>
<script type='text/javascript'>
var curr_moving_elem;
var last_x, last_y;
function getIndexOfFirstNonDigitSymbolInString(str) {
if (!str)
return -1;
var index = -1;
for (var i = 0; i < str.length; i++)
if (str[i] != '-' && (str[i] < '0' || str[i] > '9')) {
index = i;
break;
}
return index;
}
function getIntegerFromAnyHTMLValue(str_val) {
int_val = 0;
var first_non_digit = getIndexOfFirstNonDigitSymbolInString(str_val);
if (first_non_digit < 0)
return NaN;
var digits_only = str_val.substring(0, first_non_digit);
return Number(digits_only);
}
function getStrSuffixFromAnyHTMLValue(str_val, suffix) {
suffix = "";
var first_non_digit = getIndexOfFirstNonDigitSymbolInString(str_val);
if (first_non_digit < 0)
return "";
return str_val.substring(first_non_digit);
}
function handleMouseDown(e) {
if (e.button == 0) {
var main_elem_under_mouse = getMainElemUnderMouseClickOrDownOrMoveOrUp(e);
if (main_elem_under_mouse && (main_elem_under_mouse.style.position.toLowerCase() == "absolute" || main_elem_under_mouse.style.position.toLowerCase() == "relative" || main_elem_under_mouse.style.position.toLowerCase() == "fixed")) {
curr_moving_elem = main_elem_under_mouse;
last_x = e.x;
last_y = e.y;
}
}
}
function handleMouseMove(e) {
if (curr_moving_elem && e.button == 0) {
var curr_top = curr_moving_elem.style.top;
var curr_left = curr_moving_elem.style.left;
var int_top = getIntegerFromAnyHTMLValue(curr_top);
var top_suffix = getStrSuffixFromAnyHTMLValue(curr_top);
var int_left = getIntegerFromAnyHTMLValue(curr_left);
var left_suffix = getStrSuffixFromAnyHTMLValue(curr_left);
var new_top = (int_top + (e.y - last_y)) + top_suffix;
curr_moving_elem.style.top = new_top;
var new_left = (int_left + (e.x - last_x)) + left_suffix;
curr_moving_elem.style.left = new_left;
last_x = e.x;
last_y = e.y;
}
}
function handleMouseUp(e) {
//if (e.button == 0)
//{
curr_moving_elem = null;
last_x = null;
last_y = null;
//}
}
function getMainElemUnderMouseClickOrDownOrMoveOrUp(e) {
var elem;
var evt = e || window.event;
if (!evt)
return null;
if (evt.target)
elem = evt.target;
else if (evt.srcElement)
elem = evt.srcElement;
if (elem && elem.nodeType == 3) // defeat Safari bug
elem = elem.parentNode;
if (elem)
if (elem.getAttribute('data-mainElem'))
return elem;
else {
var parent = elem.parentElement;
while (parent && !parent.getAttribute('data-mainElem'))
parent = parent.parentElement;
if (parent && parent.getAttribute('data-mainElem'))
return parent;
}
}
</script>
</head>
<body style="height: 100%; margin: 0px;" onmousedown="handleMouseDown(event);" onmousemove="handleMouseMove(event);"
onmouseup="handleMouseUp(event);">
<div data-mainelem='true' id='Div_107' style="position: ABSOLUTE; height: 20%; width: 35%;
top: 10px; left: 5px; background-color: #800000; background-position: left top;
background-repeat: repeat;">
</div>
<div data-mainelem='true' id='Div_108' style="position: ABSOLUTE; height: 40%; width: 25%;
top: 10%; left: 5%; background-color: #00FF00; background-position: left top;
background-repeat: repeat;">
</div>
</body>
</html>

I think your problem is here: e.x - last_x. This will return distance of mouse in pixel, but you need it in percentage. What you would need to to is set this to percentage of screen. Something like:
var percent_x = ((e.x - last.x)/window.innerWidth)*100
But then you'll have to differentiate between percentage or pixel.