Is there a simple CSS3 or jQuery method to position a red div next to a centered orange div? I want the red div to always be near the orange div and have its top position fixed, rather than relative to the orange div.
Is there a simple CSS3 or jQuery method to position a red div next to a centered orange div? I want the red div to always be near the orange div and have its top position fixed, rather than relative to the orange div.
No need for CSS3 in this scenario. If you are aware of the dimensions of the red div, you can achieve the desired result by following these steps (as demonstrated in this JSBin):
.orange {
background-color: orange;
margin: 0 auto;
width: 200px;
height: 200px;
position: relative;
}
.red {
background-color: red;
position: absolute;
top: 0;
left: -50px;
width: 50px;
height: 50px;
}
If you don't have prior knowledge of the element's dimensions, managing the situation becomes more complex as the child element cannot exceed its parent's size, resulting in a dimension always being at maximum equal to the red div size. In such cases, adjustments to the CSS along with some jQuery magic become necessary, as illustrated in this alternative JSBin.
.orange {
background-color: orange;
margin: 0 auto;
width: 200px;
height: 200px;
position: static;
}
.red {
background-color: red;
position: relative;
jQuery(document).ready(function($){
var redWidth = $('.red').width();
$('.red').css('left', -redWidth);
});
Considering the updates made to your question, a corresponding update to the answer is necessary. One possible solution that comes to mind involves implementing the following approach (functional viewable here):
$(window).scroll(function(){
$('.red').css('top', window.pageYOffset);
});
However, it is plausible that there exists a superior CSS-exclusive solution.
An enhanced and more graceful CSS-only solution has been discovered, applicable if you possess knowledge of the centered container's width. Here's how it works (demonstrated live in action):
.red {
background-color: red;
margin-left: -150px; // Refer to note (1)
position: fixed;
top: 0;
left: 50%;
width: 50px;
height: 50px;
}
(1) The margin calculation involves halving the width of the orange element and adjusting for the additional width of the red one. In instances where the red one's width is unknown, apply the workaround elaborated under the Javascript section.
Knowing the measurements of the red block allows you to insert it into the orange block and position it absolutely width pixels to the left:
Take a look at this demonstration
CSS:
.container {
position: relative;
background-color: #FFCE6B;
width: 700px;
height: 300px;
}
.orangeblock {
position: relative;
margin: 0 auto;
background-color: orange;
width: 300px;
height: 200px;
}
.redblock {
position: absolute;
left: -100px;
background-color: red;
width: 100px;
height: 100px;
}
Markup:
<div class="container">
<div class="orangeblock">
<div class="redblock"></div>
</div>
</div>
If you are unsure about the dimensions of the red block, you can still place it inside the orange block and adjust the positioning using jQuery:
$(document).ready(function() {
$(".redblock").css({position: "absolute", left: -$(".redblock").outerWidth()})
});
When I generate links using $_GET [Array] to display in a box, I aim to have 5-10 links per line without any of them appearing on two lines. While I currently use {text-align:justify;} for consistent border spacing, I am seeking a method to prevent the lin ...
Using RMarkdown to create html documents is advantageous, especially for including figures generated in R and video links. Here's an example of how videos can be added directly through HTML: <video controls width="1000" height="600" poster="linkt ...
Here is my custom HTML: <div class="box"> <ul class="fourcol first"> <li class="feature-item">Description: <span>0</span></li> <li class="feature-item">Description: <span>0</span></ ...
I am facing an issue while loading an HTML file from the SD card to a webview. The problem is that the CSS, images, and videos are not loading properly in the webview. Compatible with Android 4.4 KitKat and Chrome version Not compatible with versions belo ...
I am encountering an issue with my kendo window while using the bootstrap multiselect dropdownlist inside it. When I try to select something from the dropdown list, the dropdown-menu is getting clipped under the window and I cannot see all the options. Ev ...
I'm having an issue uploading images from a form and displaying them on another template because the images in media are not being found. Model Definition class Upload(models.Model): image = models.ImageField(upload_to='images/') View ...
My jQuery project was progressing smoothly until I hit a roadblock while trying to parse XML with namespaces. I've been using jQuery 1.4.2 and have experimented with various methods: $(xml).find('[nodeName=ns:blah]')... $(xml).find('ns ...
Struggling to incorporate a variable into a CSS module class name in Next.js. Finding it challenging to determine the correct syntax. The variable is fetched from the API: const type = red Here's how I'm attempting to achieve it: <div clas ...
I am attempting to have jQuery delete an element after it has gone through a series of other functions, however the following code executes the remove() command before the for loop runs any iterations. function waves(){ for(i=0;i<=10;i++){ ...
I've developed a game feature that allows users to chat. Each message is displayed as an absolute positioned element in the body with user x position set as the "left" CSS property. These messages are animated to move to the top of the screen. I want ...
I have a gallery with an album-card component inside, and within that is a carousel. I noticed that when I add a list-group and set one of the items as active, it remains unblurred. Can anyone help me understand why? Here is the HTML for the gallery com ...
My Instagram API call is set up to retrieve images with the CrookedSpaces tag. Once the images come back, I filter the data to only show images from a specific user identified by their userID. Here is the code snippet: $(function() { $.ajax({ type: "G ...
I am encountering an issue with the spacing between the <header> and <nav> in my HTML5 code. Despite trying to adjust the padding, there remains approximately 5 pixels of empty space that I cannot seem to remove. If anyone could provide insigh ...
I am attempting to utilize multiple models in a single cshtml file. Below is the code I have: @model CostumeContest.Models.VoteModel @{ ViewBag.Title = "Vote"; } <h2 style="color: #B45F04">Vote Receipt</h2> <b>Your Name:</b> ...
I'm attempting to use Selenium to click on a button, but encountering an error in the process. The specific error message is shown below: https://i.stack.imgur.com/NQjnh.png This snippet of code represents the accessed HTML page: https://i.stack.i ...
While attempting to display a loading screen during an ajax request that retrieves records from a database, I encountered issues with both jquery show() and hide() functions as well as using javascript element.style.display="Block". function AdvanceSearc ...
Chrome desktop is displaying a warning message on the console regarding the deprecation and end of support for using a manifest appcache: [Deprecation] Application Cache API manifest selection is deprecated and scheduled for removal in M82, approximat ...
Greetings all! I am a beginner with CSS and currently working on my website. You can check it out at this link. I am facing an issue where the image on my site is not fitting properly and it keeps repeating. Can anyone guide me on how to fix this using CS ...
Currently, I'm utilizing AJAX to execute a server call, and I've noticed that the behavior of my function varies depending on its origin. Below is an excerpt of the code that's causing confusion: <html> <body> <script> ...
Currently, I am working on customizing my file upload input to enhance its appearance. Everything is going smoothly so far, but I am facing difficulty in finding a suitable jQuery script that can meet my specific requirements. My objective is to have the ...