CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Joseph Manstein
Joseph Manstein

Reputation: 1

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.

Upvotes: 0

Views: 45

Answers (1)

gyre
gyre

Reputation: 16777

(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>

Upvotes: 1

Related Questions