We Keep Coding

javascript global variable good practice

I have a few variables pertaining to the height of elements an want to update them using $(window).on('resize'[...]), as well as calculate them when first loading the page so naturally I would rather make a function for doing that, instead of repeating the code.
Is it bad practice to make these variables global so that I can update them with a function, or is there any other way to do this?
var hSum = 0
for (var i = 0; i < content.length; i++) {
var contentH = $(content[i]).height()
hSum += contentH
}
var windowHeight = $(window).height(),
footerHeight = footer.height(),
heightDocument = windowHeight + hSum + footer.height() - 20;
This is the entirety of the script
function scrollFooter(scrollY, footerHeight) {
if (scrollY >= footerHeight) {
$('footer').css({
'bottom': '0px'
});
} else {
$('footer').css({
'bottom': '-' + footerHeight + 'px'
});
}
}
$(document).ready(function() {
var content = $('.content'),
header = $('header'),
footer = $('footer'),
headerContainer = header.find('.container'),
headerBackground = header.find('.background'),
nav = $('.navbar')
var hSum = 0
for (var i = 0; i < content.length; i++) {
var contentH = $(content[i]).height()
hSum += contentH
}
var windowHeight = $(window).height(),
footerHeight = footer.height(),
documentHeight = windowHeight + hSum + footer.height() - 20;
$('#scroll-animate, #scroll-animate-main').css({
'height': documentHeight + 'px'
})
$('header').css({
'height': windowHeight + 'px'
})
$('.wrapper-parallax').css({
'margin-top': windowHeight + 'px'
})
scrollFooter(window.scrollY, footerHeight);
setTimeout(function fadeHeaderIn() {
headerContainer.css('opacity', '1')
headerBackground.css('transform', 'scale(1.25, 1.25)')
}, 300)
$(window).on('scroll', function() {
scroll = window.scrollY
$('#scroll-animate-main').css({
'top': '-' + scroll + 'px'
});
scrollFooter(scroll, footerHeight);
nav.toggleClass('hidden', scroll < windowHeight)
})
nav.on("mouseenter", function() {
nav.removeClass('minimized')
})
nav.on("mouseleave", function() {
nav.addClass('minimized')
})
$('.navbutton').on('click', function(event) {
if ($(this).attr('href') == "#contact")
$('html, body').stop().animate({ scrollTop: documentHeight }, 300, 'swing')
else $('html, body').stop().animate({ scrollTop: $($(this).attr('href')).offset().top }, 300, 'swing')
event.preventDefault()
})
})

The best thing to do is to create a class to handle all the element functions.
for example, let's assume that you have a div or a canvas that you want to check for it's size.
function divHandler(divID){
this.div = document.getElementById(divID);
//Add all global variables here
this.boundingRect = this.div.getBoundingClientRect()
}
//After that access the variables by other functions
divHandler.prototype.displayData = function(){
console.log(this.boundingRect);
}
const d = new divHandler('someDiv');
d.displayData();
#someDiv{
min-width: 100px;
min-height: 100px;
border: 1px solid black;
}
<div id="someDiv">
</div>
Now you have a class that controls all divs by id and you can use it again and again for all other divs in the code.
Update 1:
You can also add an event listener like this
function divHandler(divID){
this.div = document.getElementById(divID);
//Add all global variables here
this.boundingRect = this.div.getBoundingClientRect()
}
divHandler.prototype.listen = function (event, cb, ...args){
this.div.addEventListener(event,cb.bind(this, ...args));
}
const d = new divHandler('someDiv');
d.listen('click', function(e){
console.log(e.type);
this.div.style.backgroundColor = "blue"
});
#someDiv{
min-width: 100px;
min-height: 100px;
border: 1px solid black;
}
<div id="someDiv"></div>

Reactjs - Inlinestyle "top" and "left"

I'm trying to align different circles around the perimeter of a larger circle, and in order to do that I must adjust top: and left: for each div.
I'm trying to do this inline in the following way:
for(var i = 0; i < n_circles; i++){
var posx = divHeigth/2 + Math.round(radius * (Math.cos(theta[i]))) + "px";
var posy = divHeigth/2 - Math.round(radius * (Math.sin(theta[i]))) + "px";
console.log("X: " + posx + " Y: " + posy)
var scope = {
position: "absolute",
top: "300px",
left: {posx},
backgroundColor: "white"
}
var circle = <div className="circles" style={{scope}}></div>
circles.push(circle)
}
However if I replace {top} with hard coded text like "300px" it works fine.
As you can see I log posx and posy and their values look fine(300px, 200px etc..) But if I use the variables, it doesnt even get registered in Developers tool?
How can I style top and left inline in Reactjs?

for(var i = 0; i < n_circles; i++){
var posx = divHeigth/2 + Math.round(radius * (Math.cos(theta[i]))) + "px";
var posy = divHeigth/2 - Math.round(radius * (Math.sin(theta[i]))) + "px";
console.log("X: " + posx + " Y: " + posy)
var scope = {
position: "absolute",
top: "300px",
left: {posx}, <---- this is wrong, should simply be "left: posx,"
backgroundColor: "white"
}
var circle = <div className="circles" style={{scope}}></div>
circles.push(circle)
}
You do not need the curly brackets around your variable as you are applying it to JS portion of your your code (not HTML/JSX).

Svg Draw flickering happening in Chrome browser

I need to allow user to draw a shape and I have used svg for same.
In other browser the code is working perfectly fine, but in case of chrome Version 52.0.2743.116 m it is flickering. When I created it it was working fine. But as chrome was updated the issue started happening
Issue is not replicable in chrome Version 49.0.2623.110 m
https://jsfiddle.net/2svxmgwu/1/
Try to drag and drop in yellow area from left top side to right bottom you will see barcode
Refer the attached image
The flickering does not happen if direction of creating shape is other then from top left to lower bottom.
Code
Html
<div class="thisComp">
<div class="svgElementDiv">
</div>
</div>
Js
var svgShape = $('<svg viewBox="0 0 640 480" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title> <rect stroke="#5B9BD5" id="svg_11" height="473.99998" width="635.99997" y="3" x="3" stroke-linecap="null" stroke-linejoin="null" preserveAspectRatio="none" vector-effect="non-scaling-stroke" stroke-dasharray="null" stroke-width="3" fill="#5B9BD5"/> </g></svg>');
var self = this;
//Added for chrome browser as without this flickering is very high
svgShape.find('[vector-effect="non-scaling-stroke"]').removeAttr('vector-effect');
var $ShapeWrapper = $(".svgElementDiv");
var $thisComp = $(".thisComp");
svgShape.css({
position: "absolute",
left: "0",
top: "0",
width: "100%",
height: "100%",
opacity: "0.5"
});
$ShapeWrapper.css({
position: "fixed"
});
$thisComp.mousedown(function (event) {
if ($ShapeWrapper.length > 0) {
$ShapeWrapper.html(svgShape);
$ShapeWrapper.css("left", event.clientX);
$ShapeWrapper.css("top", event.clientY);
self._selectorLeftPos = event.clientX;
self._selectorTopPos = event.clientY;
$ShapeWrapper.css({
width: "0",
height: "0"
});
self._dragged = false;
event.preventDefault();
}
});
var removeShape = function (event) {
if ($ShapeWrapper.find(svgShape).length > 0 && !(event.type=="mouseleave" && $(event.relatedTarget).closest('.guideWrapper').length>0)) {
var startX = (($ShapeWrapper.offset().left - $thisComp.offset().left) / self._transformRatio) / self._conversionFactor;
var startY = (($ShapeWrapper.offset().top - $thisComp.offset().top) / self._transformRatio) / self._conversionFactor;
var selectWidth = ($ShapeWrapper.width() / self._transformRatio) / self._conversionFactor;
var selectHeight = ($ShapeWrapper.height() / self._transformRatio) / self._conversionFactor;
self._shapeData = '{"left":"' + startX + '","top":"' + startY + '","height":"' + selectHeight + '","width":"' + selectWidth + '"}';
svgShape.remove();
}
}
$thisComp.mousemove(function (event) {
if ($ShapeWrapper.length > 0) {
var width = 0;
var height = 0;
if (event.clientX <= self._selectorLeftPos) {
width = $ShapeWrapper.offset().left - event.clientX + $ShapeWrapper.width();
$ShapeWrapper.css("left", event.clientX);
}
else {
width = event.clientX - $ShapeWrapper.offset().left;
}
if (event.clientY <= self._selectorTopPos) {
height = $ShapeWrapper.offset().top - event.clientY + $ShapeWrapper.height();
$ShapeWrapper.css("top", event.clientY);
}
else {
height = event.clientY - $ShapeWrapper.offset().top;
}
$ShapeWrapper.css("width", width);
$ShapeWrapper.css("height", height);
if (width > 3 || height > 3) {
self._dragged = true;
}
}
});
$thisComp.bind("mouseup", removeShape);
$thisComp.bind("mouseleave", removeShape);
Css
.thisComp{
height:400px;
width:400px;
background-color:yellow;
}

Make words pulsate jQuery

http://codepen.io/anon/pen/ZGBEyo
I have a difficult task as you saw in the title of the question.
I'm doing a plugin that makes the words move in the screen, increase in size with a sharpen effect, and decrease in size with a blur effect, and the most difficult — one respect other if they have the same name, you may ask: what do you mean?
They have this totally random behavior to grow and stay focus, get smaller and become blurred, however I need make two words with the same name never become clear at same time.
My plugin works like this:
<span class="word" data-float="true" data-range-x="100" data-range-y="100" data-top="500" data-left="50" data-size="25">Love</span>
If data-float is true, the word is authorised to use the plugin
data-range-x = the maximum x range that can move
data-range-y = the maximum y range that can move
data-top = the top initial position
data-left = the left initial position
data-size = the size of the word
So, is possible to make them respect each other, if they have the same name?
Working plugin it three love words:
+ function($) {
var Float = function(element) {
this.element = element;
this.wrapper;
this.settings = {
rangeX : element.data('range-x') || 100,
rangeY : element.data('range-y') || 100,
speed : element.data('speed') || 5000,
top : element.data('top') || 0,
left : element.data('left') || 0,
size : element.data('size') || 20
};
};
Float.prototype.init = function() {
this.setPosition();
this.setSize();
this.setWrapper();
this.andWalk();
};
Float.prototype.setPosition = function() {
this.element
.css('top', this.settings.top)
.css('left', this.settings.left);
};
Float.prototype.setSize = function() {
this.element.css('font-size', this.settings.size + 'px');
if (this.settings.size <= 20) this.setShadow();
};
Float.prototype.setShadow = function() {
console.log('test');
this.element.css('color', 'transparent');
};
Float.prototype.setWrapper = function() {
this.wrapper = $('<div/>').css({
'width': this.element.outerWidth(true),
'height': this.element.outerHeight(true),
'z-index': this.element.css('zIndex')
});
this.wrapper.css({
'position': this.element.css('position'),
'top': this.element.position().top,
'left': this.element.position().left,
'float': this.element.css('position') === 'absolute' ? 'none' : 'left'
});
this.element.wrap(this.wrapper).css({
'position': 'absolute',
'top': 0,
'left': 0
});
};
Float.prototype.andWalk = function() {
var self = this;
var newX = Math.floor(Math.random() * this.settings.rangeX) - this.settings.rangeX / 2;
var newY = Math.floor(Math.random() * this.settings.rangeY) - this.settings.rangeY / 2 - 0;
var newS = Math.floor(Math.random() * this.settings.speed) + this.settings.speed / 2;
var newF;
if (this.settings.size > 40) { newF = Math.floor(Math.random() * (70 - 15 + 1) + 15); }
else if (this.settings.size <= 25) { newF = Math.floor(Math.random() * (25 - 15 + 1) + 15); }
else { newF = Math.floor(Math.random() * (40 - 15 + 1) + 15); }
this.element.animate({
'fontSize': newF,
'color': newF >= 25 ? '#FFFFFF' : 'transparent',
'top': newY,
'left': newX
}, newS, function() {
self.andWalk();
});
};
$(window).on('load', function() {
$('[data-float]').each(function() {
var element = $(this).data('float') || false;
if (element) {
var float = new Float($(this));
float.init();
}
});
});
}(jQuery);
body {
background: black;
color: white;
}
.word {
position: absolute;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
}
<span class="word" data-float="true" data-index="1" data-range-x="100" data-range-y="100" data-top="500" data-left="50" data-size="25">Love</span>
<span class="word" data-float="true" data-index="2" data-range-x="100" data-range-y="100" data-top="90" data-left="290" data-size="40">Love</span>
<span class="word" data-float="true" data-index="3" data-range-x="100" data-range-y="100" data-top="500" data-left="290" data-size="70">Love</span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

You may want to leverage the animate.css library as it uses CSS3 transitions to animate elements with pulse, flip, zoom, rotate, roll, fade and other effects. Then you could use jquery or pure javascript to call these effects.
Here is a jsfiddle I made to demonstrate how you can call the effects from this library with jQuery http://jsfiddle.net/ashk3l/qxfj8L2d/
Essentially your HTML could look something like this:
<h1 class="your-element">Hello!</h1>
And your jQuery call could look something like this:
$(document).ready(function () {
$('.your-element').addClass('animated pulse');
});

Drag and Drop -JQuery

Im creating myself a drag functions just for my personal use so I can drag elements around. I'm having a problem. At the moment trying to make the drag so one you pick up the element you can drag it but once you drop it, it goes back to the original position. This is not working as you can see here. When I let go of #drag2 or #drag3 then it goes to the position of #drag1.
My Function:
function drag(el) {
var position = $(el).position();
var ptop = position.top;
var pleft = position.left;
var down = false;
$(el).mousedown(function(event) {
down = true;
$(this).css({
cursor: 'crosshair',
});
$(this).mousemove(function(event) {
if (down == true) {
$(this).css({
cursor: 'crosshair',
});
var w = $(this).width();
var h = $(this).height();
var left3 = (w / 2) + 7;
var top3 = (h / 2) + 7;
$(this).css({
cursor: 'crosshair',
left: (event.clientX) + (3 * 3) - left3,
top: (event.clientY) + (3 * 3) - top3
});
}
}).mouseup(function() {
down = false;
$(this).css({
cursor: 'default',
});
$(this).animate({
top: ptop,
left: pleft
}, 300);
});
});
}
I have to get the old position:
var position = $(el).position();
var ptop = position.top;
var pleft = position.left;
So should it not get the position of all of them and bring them self back to where they were? Any help will be appreciated.
EDIT: I DO NOT WANT TO USE ANY PLUGIN OR JQUERY UI, THANKS ANYWAYS

The solution is very simple
See this fiddle: http://jsfiddle.net/BggPn/4/
you define 1 var for left and 1 for top. All 3 the elements use the same variables. If you loop through the elements then you make a new scope where each element has it's own vars.
Working code:
$(document).ready(function() {
drag('#drag, #drag2, #drag3')
});
function drag(el) {
$(el).each(function(){
var position = $(this).position();
var ptop = position.top;
var pleft = position.left;
var down = false;
$(this).mousedown(function(event) {
down = true;
$(this).css({
cursor: 'crosshair',
});
$(this).mousemove(function(event) {
if (down == true) {
$(this).css({
cursor: 'crosshair',
});
var w = $(this).width();
var h = $(this).height();
var left3 = (w / 2) + 7;
var top3 = (h / 2) + 7;
$(this).css({
cursor: 'crosshair',
left: (event.clientX) + (3 * 3) - left3,
top: (event.clientY) + (3 * 3) - top3
});
}
}).mouseup(function() {
down = false;
$(this).css({
cursor: 'default',
});
$(this).animate({
top: ptop,
left: pleft
}, 300);
});
});
});
}
Make it a plugin:
$.fn.drag = function drag(){
return this.each(function(){
var position = $(this).position();
var ptop = position.top;
var pleft = position.left;
var down = false;
$(this).mousedown(function(event) {
down = true;
$(this).css({
cursor: 'crosshair',
});
$(this).mousemove(function(event) {
if (down == true) {
$(this).css({
cursor: 'crosshair',
});
var w = $(this).width();
var h = $(this).height();
var left3 = (w / 2) + 7;
var top3 = (h / 2) + 7;
$(this).css({
cursor: 'crosshair',
left: (event.clientX) + (3 * 3) - left3,
top: (event.clientY) + (3 * 3) - top3
});
}
}).mouseup(function() {
down = false;
$(this).css({
cursor: 'default',
});
$(this).animate({
top: ptop,
left: pleft
}, 300);
});
});
});
}
Now you can call it by:
$("#drag1, #drag2").drag();

2 thoughts:
1.) Why don't you use jQuery UI (draggable)?
2.) The idea of giving a selector in stead of an element is wrong, a selector can lead to multiple elements, and that's the first reason why it's failing. If you start with
function drag(selector) {
$(selector).each(function() {
var el = $(this);
//rest of code
}
}
it would be better. But I think you'll run into a few other problems eventually

The problem is whenever you're sending in the list of selectors '#drag, #drag2. #drag3' and your position variable only cares about the first one (try changing the order and you'll see they snap to the first in the list). If you want to go about it this way then you'll want to perform an each iteration over them to get the right values.

get the current position of div after drag and set via this
.mouseup(function() {
var position = $(this).position();
down = false;
$(this).css({
cursor: 'default',
});
$(this).animate({
top: position.top,
left: position.left
}, 300);
DEMO
why don't you use drag and drop plugin. see this article
http://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html
or this one
http://plugins.jquery.com/project/dragndrop