How can I add margin-top based on the tab that is clicked? Specifically, when TAB 4 is selected, I want the content to remain in the same position from the top.
How can I add margin-top based on the tab that is clicked? Specifically, when TAB 4 is selected, I want the content to remain in the same position from the top.
First, you need to determine the position of the tab that was clicked. Once you have this information, you can customize the style of the content accordingly. To find the position of the tab, utilize the Element.getBoundingClientRect() method, which provides details such as left, top, right, bottom, x, y, width, and height properties.
One important thing to note is that all properties, except for width and height, are relative to the top-left corner of the viewport.
Properties other than width and height are relative to the top-left of the viewport.
Considering this, it's essential to consider the scroll position when calculating the element's location. You can access the scroll position using Window.scrollY.
To determine the vertical distance from the top of the page to the element, use the following formula:
element.getBoundingClientRect().top + window.scrollYWith this data in hand, you can apply a specific style by following these steps:
var tabTopOffset = myTabElement.getBoundingClientRect().top + window.scrollY;
// var myContent = document.getElementById('#my-tab');
var myContent = document.querySelector('.my-tab');
myContontent.style.top = tabTopOffset + 'px';
This solution is working flawlessly
$(document).ready(function(){
// Iterate through each 'tabs' container element to synchronize the elements
$('.tabs').each(function(){
$('.tab', this).click(function(){
var fromTop = $(this).offset().top;
var href = $(this).children('a').attr('href');
var newhref = href.substring(1);
$('#'+ newhref).css('margin-top', fromTop);
});
});
});
I am currently working on customizing a DatePicker component in Antd and my goal is to display only the calendar body. Initially, I attempted to use styled components to specifically target the header and footer of the calendar and apply display: none; st ...
I am currently working on a website that includes different section titles such as About, Projects, Contact, and more. To make these titles stand out against the background image, I have decided to fill them with white. The text color of the titles is dar ...
I developed a unique app that utilizes marked.js to convert markdown files into HTML and then showcases the converted content on a webpage. In the following code snippet, I go through text nodes to extract all raw text values that are displayed and store t ...
I've been trying to wrap my head around the vue virtual scroller. I couldn't help but notice in the demo that it utilizes a few HTML attributes... <virtual-scroller v-if="scopedSlots" class="scroller" :item-height="itemHeight" :items="items" ...
Here is the custom layout I created: export const metadata = { title: "Web App", description: "First Project in Next.js", }; export default function CustomLayout({ children }) { return ( <html lang="en"> ...
try: main = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "main")) ) articles = main.find_elements_by_tag_name("article") for article in articles: header = article.find_element_c ...
After researching the benefits of ES6 export, I made the decision to implement it in a NodeJS/Express project instead of using module exports. The MDN documentation explained that export is used as shown below: export function draw(ctx, length, x, y, color ...
Looking to incorporate the Vue Flipbook component into my project, which requires an array of image URLs for the "pages" prop. I am fetching post responses from the WordPress REST API. My goal is to extract the "image" property from the response array and ...
On my webpage, when a user clicks on a navigation link, instead of changing to a new page, the content from the linked pages loads into a div on the main page using JQuery and .load function. Both tests worked perfectly with this implementation. Now, I wa ...
I've been trying to save an image on my local website, but most of the code examples I find are for C# and Java, which I am struggling to convert to JavaScript. Many of the examples I come across use libraries like Point and IO that are not available ...
I am facing an issue with multiple children inside a parent container that has the CSS properties display: flex and flex-direction: column. There is a toggle button on the webpage which removes one of the children when clicked. The problem I need to solv ...
I am facing an issue with my express code where it is not rendering the data properly. Can someone please assist me in resolving this error? Your help will be greatly appreciated! let express=require('express'); let app=express(); ...
I am currently working on integrating a JSON file into my project, which will eventually be accessed through an API from a server. Right now, I am pulling data directly from an object. My goal is to build an HTML file that features a table with navigation ...
I am in the process of creating a website that is designed to run everything within the same file, but I am unsure about how to locate study materials for this project. For example: In a typical website scenario -> If I am on index.php and I click on the ...
I am currently developing a project for a fictional library database and website interface. I am facing an issue where only 2 out of the 4 new loan form inputs are being passed to the req.body. Even though all items have a name attribute, it seems like onl ...
Is there a way to completely remove the elevation of a v-dialog so that it has no shadow at all? The elevation property in the v-dialog itself and using the class as Class = "elevation-0" have not worked for me. Here is the link to the component ...
I'm trying to achieve a functionality where the data entered in one form can be submitted to another form within an iframe. The idea is to allow visitors to preview their selected car in the iframe, and if satisfied, simply press save on the first for ...
Has anyone been able to successfully render a function call in express using EJS? Here's what I've tried so far: res.render("page", { test: test() }); Can someone confirm if this is possible, or provide guidance on how to call a function fr ...
My goal is to inject javascript code into the head of an iframe using jquery with the code provided below. var snippets_js='<?php echo $snippets_javascript;?>'; var scriptjs = document.createElement("script"); scriptjs.type = "text/j ...
On my single page, I have several file upload forms that are generated in a loop. The issue is that the first file upload control works fine, but the others do not. <div> <form action="/docs/1046/UploadDocument?Id=1046&propertyTypeId ...