Utilizing jQuery's CSS function to adjust the "left" margin of multiple div elements

I am working on creating a menu bar that will be displayed at the top of my page. Each section of the menu will be a link to a different part of the 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 am trying to position each div at a specific distance from the left edge of the browser window to evenly spread out the menu items. My goal is to create a tab-like interface where users can click on different tabs to navigate through pages.

However, when I implement the code, the divs end up overlapping each other instead of being positioned as intended. I want some divs to appear further to the right than others, but it's not working as expected.

What could be causing this issue?

All the div elements are enclosed within a parent div. The parent div has its position set to relative, while the child divs have absolute positioning.

I also tried setting the display property to inline-block without success.

javascriptjqueryhtmlcss

Answer №1

(Even though I do not have access to your exact HTML or CSS code, I was able to enhance your syntax for correctness. However, I cannot verify if it achieves the intended functionality as requested.)

Important Points:

  • It is adequate to check only innerWidth and innerHeight; there is no necessity to resort to other properties.

  • The jQuery#css method accepts a key-value map, hence multiple function calls are not required to set more than one CSS property.

  • The usage of variable | 0 is a common practice to convert any value into an integer, serving as a replacement for using parseInt.

  • Remember to enclose strings in quotation marks (either single or double), such as 'Hello' or 'px', before concatenating numbers with them using +.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Absence of Callback Function Detected

function handleRequest(req, res) { if (req.body.widget_name) { console.log(req.body.widget_name); } var fs = require('fs'); var data = fs.readdir("corpdashboard/dashboards", 'UTF-8', function (err, files) { ...

javascriptnode.js

How can I duplicate a container using jQuery?

I'm working with HTML structure that looks like this: <div id="mydiv" class="some" onclick="alert('Hello!')" style="background:red" > <div>aa</div> <div style="background:green" >bb</div> </div> H ...

javascriptjquerydom

What is the best way to extract data from a JSON object in JavaScript?

let result = JSON.parse(data.d); The current code doesn't seem to be working.. Here is the structure of my JSON object: [{"ItemId":1,"ItemName":"Sizzler"},{"ItemId":2,"ItemName":"Starter"},{"ItemId":3,"ItemName":"Salad"}] Any suggestions on how I ...

javascriptjson

JavaScript's functionality is limited to using alert() and Debug mode

There seems to be an issue with Chrome autofill fields where the 'autocomplete="false|off|others"' attribute is being ignored. I've attempted various solutions such as using hidden fake fields, this, this, and others, but they don't app ...

javascriptjquerygoogle-chromeonloadautofill

What is the best way to invoke a Javascript function within the same file using PHP?

I am facing an issue with my PHP file named "PhpCallJavascript". I am attempting to call the function CreateSVG() from within the PHP code. However, it seems that it is not working. Do I need to incorporate AJAX here? Or perhaps there is another solutio ...

phpjavascriptjquery

evt.target consistently returns the initial input within the list of inputs

My React file uploader allows users to attach multiple file attachments. Each time a user clicks on an input, I retrieve the data-index to identify the input position. renderFileUploader() { let file_attachment = this.state.file_attachment.map(fun ...

javascriptjqueryreactjsattachment

Mastering the art of connecting multiple input fields in both parent and child components with the Vue3 composition API

Currently, I am delving into learning Vue 3 with the composition API, but I have encountered some roadblocks. Specifically, I am working on a parent page that looks like this: <template> <q-page class="flex flex-center bg-dark row"> ...

javascriptvue.jsquasar-framework

What is the best way to make a div expand to the full width of the screen while still being contained within its parent div?

I am facing an issue with the black bar at the bottom of the slider not stretching full-width on the screen. While it works fine on the left, the right side is cut off at the container edge. I am using Master Slider if that's relevant information. Can ...

htmlcsswordpress

Implementing multiple functions with the onClick property of a button to validate user input

In a dialog modal, there is a text field where you can enter a title. When you click the 'create' button, it should add an item to a table and close the dialog modal. <Button onClick={createProjectButtonHandler} variant="contained"&g ...

javascriptreactjsreact-hooksmaterial-ui

Incorporating additional information into the database

When I run the code, I see a table and a button. After entering data in the prompts as instructed, the table does not get updated. I'm unsure why this is happening. Can someone please explain? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

javascripthtmlhtml-table

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...

javascripthtmlcssshow-hide

Angular2-starter configuration setup with environment-based variables (such as .env or .conf) for testing and production settings

Frameworks like PHP Laravel often include files for local configuration, separate from dev, test, and production environments. How can a configuration file be provided for an angular-starter project that contains all local environment variable values (su ...

javascriptangulartypescriptenvironment-variablesconfig

Is it possible to continuously generate webpages using AJAX?

Is there a way to achieve an infinite scrolling effect in all directions using ajax requests without the need for flash or silverlight? If anyone has an example of this, I would love to see it! Thank you for your time. ...

javascriptjqueryhtmlcss

What methods can I use to prevent jquery.address from modifying the URL in specific scenarios?

I am utilizing a plugin called jquery.address to manage browser history states on my ajax-heavy website. However, there is a specific scenario where I need to prevent the $.address.change() function from being triggered by a certain link. For instance, in ...

jqueryajaxjquery-address

What is the best way to download the entire NPM repository to maximize offline development pleasure?

During a recent vacation, I faced the frustrating challenge of limited internet access while developing an application in node.js. The need for certain NPM packages caused a major setback in my progress as I had to wait until I could go online to download ...

javascriptnode.jsnpmoffline

Exploring the concept behind the Javascript ternary statement code snippet

Recently, I stumbled upon this code snippet and I'm trying to grasp its purpose. I do understand that it involves using a ternary operator to add an active class on menu click, but a more detailed explanation would be greatly appreciated. navClick: f ...

javascriptcode-snippets

Sorting nested JSON by property with NodeJS

If we consider a directory structure like the following: root |_ .git |_ .sass-cache |_ css | |_ scss | | |_ modules | | | |_ a-module.scss | | | |_ ... | | |_ partials | | | |_ a-partial.scss | | | |_ ... | | |_ main.scss | |_ main.cs ...

javascriptjsonnode.js

Looking for assistance in arranging 3 divs next to each other

I'm looking to align three divs side by side, but I can't seem to get them to line up correctly. I've tried using simple CSS, but it's not working as expected. Any help would be greatly appreciated. Additionally, I want these divs to a ...

csshtmlcss-floatwidth

CSS tip: Keep the bottom of the screen always visible in an overflow window

My webpage has a continuously updating element where new data is added to the bottom. I currently have 'overflow: scroll' enabled for users to manually scroll down and view this new information. However, I am looking for a way to display these up ...

cssscrolloverflow

How about checking the memory usage in Javascript?

Similar Question: Looking for a Javascript memory profiler I am curious about determining the memory consumption of variables in JavaScript. Could it be done at all? ...

javascriptmemorymonitor