How to Add and subtract var in Jquery? - javascript

I'm a completely nooby on Jquery.
I'm trying to calculate and obviously didn't work.
$(document).ready(function() {
var x = $('.a').height();
var y = $('.b').height();
$('.c').height(y - x + x);
});
I'm close to make it work? :))
https://jsfiddle.net/kav5y0vf/

Instead of:
var x = $('.a').height();
Use
var x = $('.a').outerHeight();
height() returns height of element with no padding, whereas outerHeight() does.
jsfiddle below:
https://jsfiddle.net/kav5y0vf/2/

Change this line
$('ul.logad li.o').height(y - x + x);
To
$('ul.logad li.o').css('height', (y - x + x) + 'px');
Don't know why you need this but y-x+x = y

Related

Get cursor position at frequent interval

I'm trying to get mouse cursor current position at frequent interval.
function checkMousePos(ev){
alert(true);
var x = ev.clientX,
y = ev.clientY;
alert('' + x + ' ' + y);
}
setInterval(checkMousePos, 500);
This code alerts true, but never x and y.
What am I not doing right ?
When debugging something you far better using something like console.log(myVariable) and then viewing it in the console. In your case ev not being pass by your interval and there for it's undefined. What seems like this:
var x;
var y;
document.addEventListener('mousemove', function(event){
x = event.pageX;
y = event.pageY;
})
function checkMousePos(){
console.log("Cursor at: " + x + ", " + y);
}
setInterval(checkMousePos, 500);
Although it's usually not the best solution.

SVG rotation issue with JavaScript variables

Is there a way to use a variable inside the rotation function in JavaScript? The script below does not work (x and y will not assigned).
var x = 20;
var y = 20;
object.children[0].setAttribute('transform','rotate(-20, x, y)');
As setAttribute takes as string you can either use string concatenation or template literals (as shown below).
var x = 20;
var y = 20;
object.children[0].setAttribute('transform',`rotate(-20, ${x}, ${y})`);
As commented this is ES6 syntax. Below is using string concatenation.
var x = 20;
var y = 20;
object.children[0].setAttribute('transform','rotate(-20, ' + x + ', ' + y + ')');
While building the string in place with literals or concat is fine, if you are planning on doing this more than once, I would suggest creating a string builder function for rotate. For example:
function rotateStr(a, x, y) {
return `rotate(${a}, ${x}, ${y})`
// return 'rotate(' + x + ',' + y + ',' + z + ')' if you can't use templates
}
var x = 20;
var y = 20;
object.children[0].setAttribute('transform', rotateStr(-20, x, y))

How do I get the original position of "ui.draggable" in the "drop" event?

I drag a "draggable" object to a "droppable" object. I want to know if something is already there in the position. I have already done that (without jQuery UI).
Can I do it somehow with jQuery UI?
If there is an object already present, the dragged object must revert to the original position. How can I get the original position of ui.draggable inside the "drop" event?
Thanks.
You can find answer from previous post Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)
Demo is here http://jsfiddle.net/htWV3/1/
Look at the following, this may help
$(document).ready(function() {
var x;
var y;
$("#div1").mousedown(function(e) {
var pos = $(this).offset();
x = e.pageX - pos.left;
y = e.pageY - pos.top;
//alert(x + "," + y);
$("#drag").show().css({
top: y,
left: x
});
$("#drag").draggable();
});
$("#div1").mouseup(function(e) {
var pos = $(this).offset();
var a = e.pageX - pos.left;
var b = e.pageY - pos.top;
alert("Start-Top:" + y + "Start-Left" + x + "End-Top" + b + "End-Left" + a);
});
});​

How to center a div vertically between two div's? jQuery?

I would say that I'm great with HTML and CSS, it's when I start to touch JavaScript that I struggle; I can understand some of it but I couldn't write it for my life! I'm trying to learn though, any ways; I've put together this jQuery script with the goal to vertically center a div between a relative positioned top div, and an absolute positioned bottom div. It's not working out for me, lol.
Because I'm trying to learn how to work with jQuery and create my own scripts, I'd like to try and get this working. However, if there is a better way to accomplish my goal, I would greatly appreciate your input in that way as well!
<script type="text/javascript">
$(document).ready(function() {
$(window).ready(function(){
vertical_height()
});
$(window).resize(function(){
vertical_height()
});
function vertical_height(){
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
var mid_height = $(".midcontent").height();
var foot_height = $(".footer").height();
var pos_height = Math.round(head_height+foot_height);
var neg_height = Math.round((head_height-foot_height)/2);
var fin_height = Math.round(doc_height-(pos_height-neg_height));
$('.midcontent').css({
"marginTop","-"+fin_height+"px",
"marginBottom","-"+fin_height+"px"
}
}
});
</script>
.headcontent is the top div.
.midcontent is the middle div that I'd like to center.
.footer is the bottom div.
Here's your code, tidied into something that will run :
$(function() {
function vertical_height() {
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
//var mid_height = $(".midcontent").height();//not used
var foot_height = $(".footer").height();
var pos_height = head_height + foot_height;
var neg_height = (head_height - foot_height) / 2;
var fin_height = doc_height - (pos_height - neg_height);
$('.midcontent').css({
"marginTop": "-" + fin_height + "px",
"marginBottom": "-" + fin_height + "px"
});
}
$(window).resize(vertical_height).trigger('resize');
});
Now you can concentrate on getting the algorithm right.
As it stands, combining and simplifying expressions, I get :
var fin_height = doc_height - head_height*3/2 - foot_height*3/2;
which doesn't look right to me but I could be wrong.
EDIT
To avoid overlap, try this version :
var $$ = {}; //jQuery object cache.
$$.w = $(window);
$$.h = $(".headcontent");
$$.m = $(".midcontent");
$$.f = $(".footer");
function vertical_height() {
var w = $$.w.height(),
h = $$.h.outerHeight(true),
m = $$.m.outerHeight(),
f = $$.f.outerHeight(true),
fin_height = Math.max(0, (w - h - m - f) / 2);
$$.m.css('marginTop', Math.floor(fin_height)).css('marginBottom', Math.ceil(fin_height));
$$.h.text(fin_height);
};
$(window).on('resize', vertical_height).trigger('resize');
DEMO
Notes
position:absolute removed from the footer's CSS
jQuery objects now cached in $$ to give the resize handler less work to do.
Calculation now based on window height not document height.
The three divs now measured with .outerHeight(false) to include vertical padding and borders.
Overlap is prevented by Math.max(0, ...), which ensures fin-height can't go negative.
The statement $$.h.text(fin_height); is for debugging and can be removed.
EDIT 2
The following code will "debounce" the resize event.
Replace :
$(window).on('resize', vertical_height).trigger('resize');
with :
var do_resize;
$(window).on('resize', function(){
clearTimeout(do_resize);
do_resize = setTimeout(vertical_height, 100);
}).trigger('resize');
Just a little tip when calculating something, never round until you get to your final number.
h = Header Height
f = Footer Height
m = Middle Height
d = Document Height
s = Height of the space above or below the div
Here we assume the height of the document is equal to that of all the other elements combined. Since there is a space above and below the middle div that is equal we have two spaces.
d = h + f + m + 2s
d - h - m -f = 2s
(d - h - m - f) / 2 = s
Let's put this into some javascript
$(document).ready(function() {
$(window).resize(vertical_height());
function vertical_height() {
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
var mid_height = $(".midcontent").height();
var foot_height = $(".footer").height();
var fin_height = Math.round((doc_height - head_height - mid_height - foot_height) / 2);
$('.midcontent').css("margin-top", fin_height)
}
});
For the css we only need to add a top margin as this will push it away from the header because I am assuming the absolutely positioned footer will be stuck to the bottom.
Here is a working fiddle: http://jsfiddle.net/nBUnt/14/

Make div height of two other divs

i have a div, div1 with a height according to the text, div2 is the same. Now i need div3 to be: div1 + div2
I have this code, but it ain't workin.
var lengthnews1 = ((document.getElementById("div1").offsetHeight)+"px");
var lengthnews2 = ((document.getElementById("div2").offsetHeight)+"px");
var x = document.getElementById("div3");
x.height = (lengthnews1 + lengthnews2);
you are trying to add two strings, not numbers. Fetch both heights, add them and then add the "px" :
var lengthnews1 = ((document.getElementById("div1").offsetHeight));
var lengthnews2 = ((document.getElementById("div2").offsetHeight));
var x = document.getElementById("div3");
x.height = (lengthnews1 + lengthnews2) + "px";
You can verify the working code at this fiddle
You need to remove the "px" from lengthnews1 and lengthnews2 variables so you can add the two values together for var x, once added you can then add the "px".
You need to set the height using x.style.height
Also you need to concat with "px" only once, ie (lengthnews1 + lengthnews2) + "px"

Categories