How can I place a div dynamically under another element?

I am attempting to utilize jQuery in order to detect the position of a div with the class name of .field_slide-produit. My goal is to use this position information to place another div (.slider-content) directly below it on the bottom left, and I also need this new div to be dynamically adjusted when the window is resized.

After implementing the following code, I realized that it is not functioning as expected. Can anyone provide insight into why this might be?

var offset = $('.field_slide-produit').offset();
var height = $('.field_slide-produit').height();
var width = $('.field_slide-produit').width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";

$('.slider-content').css( {
'position': 'absolute',
'right': right,
'top': top
});

// Listen for window changes and adjust the position of the newdiv
$(window).resize(function(){ slider-content(); });

You can view this code in action on Codepen here: http://codepen.io/Laurentfrom47/pen/wJEKVb

Thank you!

javascriptjqueryhtmlcss

Answer №1

Did you remember to add the jquery file in that location?

Furthermore, it seems like the slider-content() function is being called on window resizing, but it hasn't been defined anywhere.

function slider-content(){
$('.slider-content').css( {
'position': 'absolute',
'right': right,
'top': top
});
}

Make sure to address these issues and you should see the expected outcome.

Answer №2

If you want to style your elements using only CSS, it is certainly possible.

Just include the "moveit" class and set its position to absolute for proper resizing capabilities.

<head>
  <title></title>
</head>
<style type="text/css">
.field_slide-produit {
  width: 800px;
  height: 300px;
  background-color: blue;
}

.slider-content {
  width: 200px;
  height: 200px;
  background-color: red;
}
.main_container{
    position: relative;
}
.moveit{
      position: absolute;
  bottom: 10px;
  left: 10px;
}
</style>

<body>
<div class="main_container">
  <div class="field_slide-produit">
  </div>
  <div class="slider-content moveit">
  </div>

</div>
</body>

</html>

Answer №3

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <title></title>
  <style type="text/css">
  .field_slide-produit {
    width: 800px;
    height: 300px;
    background-color: blue;
  }

  .slider-content {
    width: 200px;
    height: 200px;
    background-color: red;
  }
  </style>
</head>

<body>
  <div class="field_slide-produit"></div>
  <div class="slider-content">
  </div>
  <script>
  var position = $('.field_slide-produit').position();
  var h = $('.field_slide-produit').height();
  var w = $('.field_slide-produit').width();

  var sh = $('.slider-content').height();
  var sw = $('.slider-content').width();

  var t = Number(h - (position.top + sh) ) + "px";
  var l = (position.left + position.left) + "px";
  function slide() {
    $('.slider-content').css({
      'position': 'absolute',
      'left': l,
      'top': t
    });
  }
  slide();
  // listen to window changes and adjust the slider-content div position
  $(window).resize(function() {
    slide();
  });
  </script>
</body>

</html>

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

HTML & CSS: Modify background rectangle behind text to limit its size within the webpage dimensions

I'm experiencing a unique issue with the current code present in my HTML index file. <div class="titleMessage"> <div class="heading"> <p class="main">NAME HERE</p> <p class="sub">Software Engineer& ...

htmlcsstextbackgroundelement

Fixing Cross-Browser Issues with the OnScroll Function

window.onscroll = function() { if( window.XMLHttpRequest ) { var bodyId=document.getElementById('bodymain'); if (bodyId.scrollTop > 187) { //make some div's position fixed } else { //mak ...

javascripthtmlcross-browser

What is the best way to include both left and right borders in HTML/CSS

I'm looking to add left and right borders to a specific cell within my table. Utilizing Bootstrap 4 beta, I attempted the following code snippet: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="style ...

htmlcssbootstrap-4

Issues with utilizing destructuring on props within React JS storybooks

I seem to be encountering an issue with destructuring my props in the context of writing a storybook for a story. It feels like there may be a mistake in my approach to destructuring. Below is the code snippet for my component: export function WrapTitle({ ...

javascriptreactjstypescriptecmascript-6

Creating an XML file in Sharepoint using JavaScript

I designed a website in Visual Studio and saved structural data in an XML file using C# code behind. I now need to transfer this project to SharePoint, but as a newcomer to SharePoint, I am unsure how to write the XML file and save it back to the server. C ...

javascriptjqueryasp.netxmlsharepoint-2010

Troubleshooting: Form submission not triggering AJAX using JQuery

I'm attempting to implement some AJAX rendering when the form is submitted, but for some reason it's not functioning correctly. Upon submitting the form, I am redirected to the submit page. Here is my JavaScript code: $('#knappen').cl ...

javascriptjquery

Switch the class between two elements using a link

Here is the HTML code I am working with: <a href="javascript:"> <img class="remove" src="images/remove.png" /> </a> <div class="content"> <h2>About</h2> <p>We are Sydney Wedding Photographers and have ...

javascriptjqueryhtmlcss

JSON returning issue with date formatting

After converting a date to a string using ToString("d") in C# and then serializing it into JSON for the client, I'm encountering an issue where instead of displaying the formatted date on the page, I see the following literal text: /Date(-62135575200 ...

c#javascriptjson

The Bootstrap grid seems to be unresponsive on mobile devices, however, it does resize correctly when I input a specific width manually

While working on an HTML page, I encountered an issue when loading it on my phone as the scaling was not proper. Interestingly, when using the F12 tool in my browser, everything seemed fine. Upon further investigation with the F12 debug tool, I made a cur ...

htmlspringthymeleafbootstrap-5

I'm curious as to why the id property does not override the selector in the $(selector).html function within this code

As a newcomer to the programming world, I find myself facing challenges that are not as straightforward as they seem. My goal is to display various data sources in different divs, but the solutions I have come across so far have been too advanced for my cu ...

jqueryajaxpost

Extracting the content within HTML tags using regular expressions

There is a specific string structure that needs to be processed: <div class="myClass"> Some Text. </div> <div class="otherClass"> Some Text. </div> The task at hand involves parsing the div with myClass and replacing certa ...

javascriptregex

Is it possible to incorporate this design in a way that is responsive?

Can you share your insights on the best approach to implement this design in a responsive manner? I have a mockup ready for reference, featuring a lovely blue square. Here's the "mobile" version of the design. When the width is reduced to a point whe ...

htmlcssresponsive-design

Is there a method by which I can access information from a linked document in Firebase?

I am relatively new to firebase and I am attempting to retrieve data from a referenced document in another collection to display. Link 1 Link 2 This is how I add a student and the parent's ID: const newStudent = { name: req.body.name, grade: ...

javascriptnode.jsfirebasegoogle-cloud-firestore

Inject a list of titles into a pipe and randomize the items

I have a list of recipes on my website, with a "view more" button to redirect users to the full recipes page: <div class="recipes_list"> <ul> <li>Recipe 1</li> <li>Recipe 2</li> <li>Recipe 3</li> ...

htmlrandomhtml-listslistitem

Make TextField with type number forcibly show dot as decimal separator

I am currently utilizing the material-ui library to display a TextField component in my react application. Strangely, all instances of <TextField type="number /> are displaying decimal separators as commas (,) instead of dots (.), causing confusion f ...

javascriptreactjstypescriptmaterial-uihtml-input

Exploring Three.js raycasting in a non-full screen scenario

I've encountered some challenges with raycasting in three.js recently. The div element I'm using is not fullscreen, which I believe is causing issues with the raycast positioning that I'm struggling to resolve. let mouseVector = new THR ...

javascriptnode.jsthree.jsraycasting

Having difficulty setting up page titles in AngularJS

Using AngularJS, I am developing a web app that is not a single page application but all the code is contained in one file- index.ejs. The setup for my index.ejs file looks roughly like this: <head> <title> Main Page </title> </he ...

htmlangularjsuiviewsingle-page-applicationangularjs-ng-template

Utilizing AngularJS for Converting Date Formats from JSON and HTML Elements

So I have this controller set up. function TestCtrl($scope) { var contentFromJson = 'Hi! this is <b>Bold</b> and <i>Italic</i>'; var dateFromJson = '/Date(1394526738123)/'; $scope.Date = dateFromJso ...

javascriptjqueryhtmljsonangularjs

When do Angular.js memory leaks become a cause for concern?

My application is quite large, built on angular with nested states, directives, and data tables. We recently decided to switch to a full single-page setup, which raised some performance concerns. While Chrome seems unaffected visually, Firefox appears to s ...

javascriptjqueryangularjsmemory-leaks

What is the process of overriding methods in a function-based component in React?

Overriding in a parent component works when it is a class-based component // Parent Button Class class Button extends React.Component { createLabel = () => { return <span>{this.props.label}</span>; }; render() { return <butt ...

javascriptreactjs