Moving a div to a new spot

Looking to move a div - the expandable panel labeled 'Why Bother', to display at the bottom where it is currently seen. More specifically, I want it to be positioned at the top among the 8 panels in the HTML structure.

(These panels are arranged vertically on the right-hand side of the content area. This adjustment is being made to maintain the website's SEO performance, which is crucial for the site owner's revenue).

Attempting to use bottom:0; did not yield results with the expandable panels. Are there any CSS or JS solutions available for achieving this placement?

javascripthtmlcss

Answer №1

In order to optimize for SEO, it is important to place certain content at the top of your HTML code. This can be achieved by reordering elements within the DOM structure before the page loads fully. Moving content around after the DOM has loaded will not impact its SEO value, as search engine spiders read the initial HTML layout.

After positioning the content at the top, you can then use JavaScript to move it back to a different location, such as the bottom of the page.

If the target element is the first <div class="contentLeft" with the class dropdownPanel, you can utilize jQuery to relocate it:

$(document).ready(function(){
    $('div.dropdownPanel:first').appendTo('#content div.contentLeft');
});

For a practical demonstration, you can view this example:

http://jsbin.com/abovex/1/edit

Note that if the shorthand dollar sign $ for jQuery is disabled on your website, make sure to replace it with jQuery:

jQuery('div.dropdownPanel:first').appendTo('#content div.contentLeft');

Answer №2

To achieve your desired layout, consider using absolute positioning. While there may be potential issues with dropdown functionality, it's worth experimenting with.

Include the following code snippet in your existing contentLeft CSS rules:

.contentLeft {
    padding-bottom: 90px;
    position: relative;
}

Additionally, add this code to the "special" div:

.specialdropdownPanel {
    bottom: 20px;
    position: absolute;
}

Answer №3

To achieve this, utilize jQuery prior to executing the following code snippet View example on JSFiddle

$(".mainContent .menuDropdown").eq(0).before($(".mainContent .menuDropdown").eq(7));​​​​

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

I'm curious to know how preg_match functions when working with HTML utilizing simple_html_dom.php

Here is an example of some HTML code I have: <div class="address adr"> <span class="street-address"><span class="no_ds> CONTENT1</span> <span class="postal-code">CONTENT2</span> <span class="local ...

phphtml

What is the process for mapping a texture or shape to a particular section of a mesh in Three.js?

Is there a way to project a texture or shape onto a specific part of a mesh, such as a transparent ring or circle? I want to achieve a similar effect to what we see in games when selecting an enemy or NPC, where a circle appears under the character to indi ...

javascriptthree.jsmesh

MongoDB failing to enforce unique constraints on partial indexes

I have a set of data that looks like this: { name: "Acme co." add4: "", nationalNumber: "+13412768376" }, { name: "Acme Inc.", add4: "6345", nationalNumber: "" } My goal is to insert these records into a collection, but only if they are uni ...

javascriptmongodb

Tips for assigning a postgres query to a variable when working with node.js, integrating Discord bot with postgres

My friend and I have been brainstorming a business idea that involves using Discord as our platform. While I am somewhat new to coding, I do have some knowledge in Discord.js, Java, and HTML. Here’s the plan: We will have a website where users can purch ...

javascriptpostgresqlnpmdiscorddiscord.js

Error Encountered in .then Method with Vue.js

I am working on a GET request that determines whether the user is an Admin or not. The challenge I am facing is that I need to show a button using the v-if directive to verify if the value is true or false. By default, the value is set to false. Informati ...

javascriptvue.jsvuejs2vue-componenttypeerror

What is causing my webpage to load items, flash, and then suddenly vanish?

I have written this code to fetch data from an API and display it on the screen. Interestingly, when I access localhost:3000, I can see all the information, but it disappears quickly afterwards. There are some warnings appearing in the console that say th ...

javascriptreactjsnext.js

What is the best method for packaging a React component library?

Currently, I am working on developing a React component library that I aim to distribute via npm to reach a wide audience. In my development process, I utilize webpack and babel for packaging and code processing. However, as a newcomer to webpack, I am uns ...

javascriptreactjsnpmwebpackbabeljs

Utilizing ion-slide-box within an ion-content container that allows for scrolling

I've created an Ionic view with the following structure: <ion-content scroll="true"> <ion-list> ... some ion items... <ion-item> <ion-slide-box> <ion-slide ng-repeat="image i ...

javascriptangularjsslideshowionic-framework

JavaScript regular expression to find words, excluding words enclosed by forward slashes

I have a regular expression that is functional in PHP: (?<![\/?$])\bfoo\b Now, I am trying to adapt it for use in JavaScript. Specifically, I want it to match the following patterns: foo - need this <div>foo</div&g ...

javascriptregex

Enhancing the appearance of your website by incorporating external stylesheets and utilizing multiple class names through

Is it possible to use external CSS frameworks like Bootstrap, Semantic UI, or Foundation and still generate base64 class names? This could be achieved if there was a way to apply multiple class names. Currently, you can only assign one class name like thi ...

cssreactjswebpack

Retrieving data from the database using getStaticProps in Next.js

As I was following a tutorial on Next.js, the instructor did something that deviated from what I had learned in school and left me pondering. Here is what he did: interface FaqProps { faq: FaqModel[]; } export default function Faq({ faq }: FaqProps) { ...

javascriptreactjsnext.js

What is the best way to send an imported component as a prop?

Is it possible to pass a component as a prop from the parent to a child component without directly importing it into the child? Parent Component: <template> <ChildComponent :component="componentName"> </template> <script> impo ...

javascriptvue.jsvue-component

How can I successfully submit a page without refreshing using OTP?

When I fill in the information and try to send the OTP, the website reloads. Here is the link to the website: If you fill in the information and click on "Request verification code," you will understand what I mean. What I attempted was: $(function () { ...

javascriptjqueryajaxtampermonkey

Tips for perfectly centering a light box and concealing a scrollbar

Hello, I'm a web designer and facing an issue with the alignment of my lightbox. The lightbox is not center aligned on any resolution, which is causing some trouble. I have also added a black overlay for transparency in the background, but it's s ...

jqueryhtmlcss

What can be done to address the narrowing of the left div element as the right div's child elements grow in size?

Utilizing the power of flexbox, I have organized the UI into left and right panels. The child elements within the right panel are stacked vertically by utilizing the white-space: nowrap; CSS property. However, there seems to be an issue where increasing t ...

htmlcssuser-interfaceflexbox

Positioning divs next to each other in CSS and setting the width of the second

I am attempting to position two divs next to each other. The initial one is 200x200 pixels and the second one should be positioned 10 pixels to the right of the first one. The second div has a height of 200 pixels, and its width needs to extend all the way ...

css

Creating a user-friendly interface for the admin to easily upload photos by implementing a php/bootstrap/js code within the panel

I'm currently in the process of creating an online website as part of my thesis project. I've been researching this specific code, but unfortunately, I haven't been able to find a solution. In the admin section of the site, I need to enable ...

javascriptphphtmlmysql

What is the method to fetch CSS properties in relative units like percentages and ems using the .css() function with the selector "$("selector")"?

Using jQuery to retrieve HTML element's css properties hasn't been as effective as desired. To test this issue, the following experiment was conducted: var div = document.createElement("DIV"); div.id = "testdiv"; var testZero = $(div).css("w ...

javascriptjquerycss

Combining variable declarations in a single line with Angular 2 and TypeScript

Transitioning from a Java background to delving into Angular 2 with TypeScript opens up numerous possibilities for comparison. In Angular 2 / TypeScript, we have the ability to declare variables with specific types such as name : string inside a class. B ...

javascriptangularjsangulartypescript

Tips for choosing a week on a calendar with JavaScript

Here is the code for my calendar: <script> $(document).ready(function() { var events = <?php echo json_encode($data) ?>; $('#calendar').fullCalendar({ header: { left: 'prev,next', center: &apos ...

javascriptjqueryfullcalendarfullcalendar-3