We Keep Coding

Using the CSS function in jQuery to Set the "left" margin of several divs

I want to make a menu type bar at the top of the page. I want each mini section of the menu (an individual div) to be a link to a different part of my page.
$(document).ready(function() {
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
$("#divone").css("width", (parseInt(w) / 6)px);
$("#divone").css("left", 0px);
$("#divtwo").css("width", (parseInt(w) / 6)px);
$("#divtwo").css("left", (parseInt(w) / 6)px);
$("#divthree").css("width", (parseInt(w) / 6)px);
$("#divthree").css("left", ((2 * parseInt(w)) / 6)px);
$("#divfour").css("width", (parseInt(w) / 6)px);
$("#divfour").css("left", ((3 * parseInt(w)) / 6)px);
$("#news").css("width", (parseInt(w) / 6)px);
$("#news").css("left", ((4 * parseInt(w)) / 6)px);
$("#sen").css("width", (parseInt(w) / 6)px);
$("#sen").css("left", ((5 * parseInt(w)) / 6)px);
});
I want to make each individual div to be a certain distance apart from the left edge of the browser window, so that the menu gets spread out evenly. Basically, imagine a bunch of tabs open, and you being able to click on a tab to switch pages. I want to do something like that.
But when I run the code, all the divs overlap each other. The intention of the design is to have some divs further to the right than others, but it does not work.
What am I doing wrong?
All of those divs are contained within a parent div. The parent div's position is set to relative, and the children to absolute.
I tried setting display to inline-block as well. Did not work.

(Without your HTML or CSS code available, I was able to make your syntax more correct but not able to check whether or not this does what you intended.)
Notes:
Checking innerWidth and innerHeight is sufficient; no need to fall back to any of those other properties.
jQuery#css takes a map of key-value pairs, so you don't have to use multiple function calls to set more than one CSS property
variable | 0 is a common pattern to convert any value into an integer, and it can replace the use of parseInt.
You have to put quotation marks (either single or double) around strings, like 'Hello' or 'px', before you can attach numbers to them with +.
$(document).ready(function () {
var w = window.innerWidth | 0
var h = window.innerHeight | 0
$("#divone") .css({ width: (w/6 + 'px'), left: '0px' })
$("#divtwo") .css({ width: (w/6 + 'px'), left: ( w/6 + 'px') })
$("#divthree").css({ width: (w/6 + 'px'), left: (2*w/6 + 'px') })
$("#divfour") .css({ width: (w/6 + 'px'), left: (4*w/6 + 'px') })
$("#news") .css({ width: (w/6) + 'px', left: (4*w/6) + 'px' })
$("#sen") .css({ width: (w/6) + 'px', left: (5*w/6) + 'px' })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Fullscreen background video aspect ratio on resize

I have the following code to set a video as fullscreen background. It gets the browser dimensions and set the aspect ratio, so there should not be any black bars. Instead, either the top/bottom or sides overflow while still keeping the video centred.
The problem I have is if the the browser is resized. It kind of works, but I have a feeling that if the resize happens to fast, the script does not keep up, resulting in a white space along one of the edges.
Code below, jsfiddle here:
https://jsfiddle.net/RobertCS/r50ktjoh/2/
<div class="bgvideo">
<iframe src="https://player.vimeo.com/video/75542539?background=1&loop=1&title=0&byline=0&portrait=0&autoplay=1&badge=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0"></iframe>
</div>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.bgvideo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.bgvideo iframe {
position: absolute;
}
function videoIframe() {
//Get the browser dimensions and calculate aspect ratio
var browswerWidth = $(window).width();
var browswerHeight = $(window).height();
var aspectRatio = browswerHeight / browswerWidth;
if (aspectRatio < 0.5625) {
//Video too tall for viewport.
//Set the video width to the browser width
//Set height according to aspect ratio.
//Finally, offset top/bottom to keep video centred.
var newHeight = 0.5625 * browswerWidth;
$('.bgvideo iframe').css({
'width': browswerWidth + 'px'
});
$('.bgvideo iframe').css({
'height': newHeight + 'px'
});
$('.bgvideo iframe').css({
'bottom': -((newHeight - browswerHeight) / 2) + 'px'
});
} else {
//Video too wide for viewport.
//Set the video height to the browser height
//Set width according to aspect ratio.
//Finally, offset left/right to keep video centred.
var newWidth = browswerHeight / 0.5625;
$('.bgvideo iframe').css({
'width': newWidth + 'px'
});
$('.bgvideo iframe').css({
'height': browswerHeight + 'px'
});
$('.bgvideo iframe').css({
'left': -((newWidth - browswerWidth) / 2) + 'px'
});
};
};
$(window).resize(videoIframe);
$(document).ready(videoIframe);

just do it with a setTime function.
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
videoIframe();
}, 250);
});

popup dialog is offset by too many pixels

I am doing some modal popups but the dialog renders 200px to the left, and about 100px top of where it should.
updated jquery
DevicesRightClickActionsMenuController.prototype.showActionsMenu = function(event) {
rightClicActionskMenuElement.css({
top : $('.printer-context-node').offset().top + $('.printer-context-node').height() - $('.devices-right-click-menu-item').height() * 4 + 'px',
left : $('.printer-context-node').offset().left + $('.printer-context-node').width() + 'px',
position : 'absolute',
zIndex : 1000
});
DevicesRightClickMenuController.prototype.showRightClickMenu = function (xPosition, yPosition, theSerialNumber) {
serialNumber = theSerialNumber;
rightClickMenuElement.css({
position: 'absolute',
top: yPosition,
left: xPosition,
zIndex: 1000,
});

It could be that you're using the wrong properties of the event to display the box, such as pageX/pageY instead of clientX/clientY. If you post some more code it will help narrow this down.

Optimizing how my jQuery code is written

I have just currently started learning jQuery and I seem to be able to get it work how I want but I feel that the way that I am writting it is not very efficient. Could anyone assist me in this example below:
$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
$(window).resize(function() {
$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
});
So here I am positioning a div in the center of the screen. And then it also does it again on window resize as its contents width properties are percentage values. It works perfectly but I can't help but feel that there must be a better way to write this. Any help would be greatly appreciated. Thank you

You can cache the object and trigger the resize event, this way the resize handler is executed on DOM Ready.
$(window).resize(function() {
var $elem = $('.tiles-wrapper');
$elem.css({
top: '50%',
left: '50%',
margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
});
}).resize()

var $tilesWrapper = $('.tiles-wrapper');
function setWrapperStyle () {
var halfWidth = $tilesWrapper.width() * 0.5;
var halfHeight = $tilesWrapper.height() * 0.5;
$tilesWrapper.css({
top: '50%',
left: '50%',
margin: '-' + halfHeight + 'px 0 0 -' + halfWidth + 'px'
});
}
setWrapperStyle();
$(window).on('resize', setWrapperStyle);

You should make a fonction with your first line :
function center(){
$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
}
and then you call it a first time and you call it when you resize your window:
center();
$(window).resize(center);

Do you really need jquery here ?
You can use directly css
.tiles-wrapper{
top:50% ;
left:50% ;
width: //what u given
height: //what u given
margin-left: //tiles width/2
margin-right: //tiles height/2
position: //absolute or float
}
if you want to calculate height and width dynamically
just write this on document ready
var $elem = $('.tiles-wrapper');
$elem.css({
top: '50%',
left: '50%',
margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
});
In re-size it will automatically on center position.

fullscreen & centred background image script

I have made a simple function that adapts the size of an image according to the size of the window. I can't determine when exactly, but sometimes the img does not fill the width of the screen, but continues to stick to the height. Any idea why this could be?
If i console log (iRatio <= wRatio) anything seems to fit, but the shown result is incorrect.
The img is set as postion: absolute; with: 100%; top:0; left:0; in the css.
$win contains $(window) and $img the background image
function autoImageSize($img, $win){
var wHeight = $win.height(),
wWidth = $win.width(),
iHeight = $img.height(),
iWidth = $img.width(),
iRatio = iWidth / iHeight,
wRatio = wWidth / wHeight;
if(iRatio <= wRatio){
$img.css({
width: "100%",
height: "auto",
top: "-" + ((iHeight - wHeight)/2) + "px",
left: 0
});
}else{
$img.css({
width: "auto",
height: "100%",
top: 0,
left: "-" + ((iWidth - wWidth)/2) + "px"
});
}
return [$img.width(), $img.height()];
};

the problem was:
left: "-" + ((iWidth - wWidth)/2) + "px"
and
top: "-" + ((iHeight - wHeight)/2) + "px"
this is a stupid way to do a negation, sometimes the result was --somenumber px. i fixed the problem by doing this operation only wen the iHeight is smaller then the wHeight oder the iWidth is smaller then wWidth and by calculating the negation with a multiplication by -1.

When you are setting the image's width to 100% it will fill up to its parent's width. As is the case with the height of 100%, but there the parent also needs a fixed height in pixels (as far as I know).
Instead of setting the height to 100% you should calculate the width matching the height of the window using the image's ratio:
var toWidth = $win.height() * iRatio;
$img.width(toWidth);