Repositioning / moving divs with jQuery - javascript

I'm starting out with divs arranged the following way. Two divs, main-top and main-bottom start out hidden and I want them to appear after they've been moved into the right spot. I want to move main-top to appear after header, and move main-bottom to appear before footer, and after they're moved, show the divs. How do you move these divs with jQuery? The final order should be header, main-top, main-bottom, footer
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
<style>
#main-top {display: none;}
#main-bottom {display: none;}
<style>
<script>
//*Move 'main-top' to appear after 'header'*
$('#main-top').show(); // Show div after it's moved
//*Move 'main-bottom' to appear before 'footer'*
$('#main-bottom').show(); // Show div after it's moved
</script>

You can use insertBefore and insertAfter funstions
$('#main-top').insertAfter('#header').show();
$('#main-bottom').insertBefore('#footer').show();
#main-top {display: none;}
#main-bottom {display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>

This problem can be solved in a couple of ways, one way – with caveats – using CSS (with either CSS flex-box or Grid layouts) and another with JavaScript/jQuery.
First, with CSS flexbox:
/* we use flexbox layout on the element which
contains the elements you wish to rearrange,
which causes them to become flex-items, and
this allows us to use the 'order' property
to visually arrange them: */
#main {
display: flex;
flex-direction: column;
}
/* here we select the elements and use the
'order' property with a numerical value
to place them in the correct order within
their parent element: */
#header {
order: 1;
}
#main-top {
order: 2;
}
#main-bottom {
order: 3;
}
#footer {
order: 4;
}
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
and, with CSS Grid:
/* we use grid layout on the element which
contains the elements you wish to rearrange,
which causes them to become grid-items, and
this allows us to use the 'order' property
to visually arrange them: */
#main {
display: grid;
grid-auto-flow: row;
}
/* here we select the elements and use the
'order' property with a numerical value
to place them in the correct order within
their parent element: */
#header {
order: 1;
}
#main-top {
order: 2;
}
#main-bottom {
order: 3;
}
#footer {
order: 4;
}
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
There's a third CSS approach, again using CSS Grid layout, but taking advantage of the grid-template-areas and grid-area properties:
/* we use flexbox layout on the element which
contains the elements you wish to rearrange,
which causes them to become flex-items, and
this allows us to use the 'order' property
to visually arrange them: */
#main {
display: grid;
/* here we name several grid areas; each quoted string
names the areas in that row, here we have four named
rows and each row has only one column: */
grid-template-areas:
"header"
"main-top"
"main-bottom"
"footer";
}
/* here we select the elements and use the
'grid-area' property to place them each
in the correct grid-area: */
#header {
grid-area: header;
}
#main-top {
grid-area: main-top;
}
#main-bottom {
grid-area: main-bottom;
}
#footer {
grid-area: footer;
}
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
The caveat of these approaches is that they affect only the visual presentation; the DOM is untouched and the positioned elements – whether using order or grid-area – remain in their original order for those users using alternative means of consumption (such as screen-readers).
Using native JavaScript, which does modify the DOM order:
// we retrieve, and cache, the <div id="header"> element,
// and then its parentNode:
const header = document.getElementById('header'),
parent = header.parentNode;
// here we use the parentNode.insertBefore() method to
// place the 'header' before the 'parent' Node's
// first-child:
parent.insertBefore(header, parent.firstChild);
#main-top,
#main-bottom {
display: none;
}
#header+#main-top,
#header+#main-top+#main-bottom {
display: block;
}
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
This is functionally equivalent to your request, however your question specifically asks about:
moving the #main-top element after the #header element, and
moving the #main-bottom element before the #footer element.
With this in mind, if you really wish to move two elements instead of just the one, then the following should address your need in relation to the elements you wish to position alongside:
// retrieving and caching all elements using destructuring assigment:
const [parent, mainTop, mainBottom, header, footer] = document.querySelectorAll('div');
parent.insertBefore(mainTop, header.nextSibling);
parent.insertBefore(mainBottom, footer);
#main-top,
#main-bottom {
display: none;
}
#header+#main-top,
#header+#main-top+#main-bottom {
display: block;
}
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>
Finally, of course, using jQuery if you wish to do so:
$('#header').after($('#main-top'));
$('#footer').before($('#footer'));
#main-top,
#main-bottom {
display: none;
}
#header+#main-top,
#header+#main-top+#main-bottom {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main'>
<div id='main-top'>Main Top</div>
<div id='main-bottom'>Main Bottom</div>
<div id='header'>Header</div>
<div id='footer'>Footer</div>
</div>

Related

Is it possible to select a element to hover it and it is not it's child with CSS only?

I have an <aside> and <header> and the header has child called container and cont. has some children one of them is called burger bar so what I want here is when I :hover the burger bar the <aside> will be visible so I wonder how to do that or if it is impossible I tried to do this header .container .burger_bar:hover + aside but the aside is not element beside the burger_bar so it's not going to work.
more explain...
<div class='header'>
<div class='container'>
<div class='burger_bar'>...</div>
</div>
</div>
<aside>...</aside> /* <---when hovering the burger bar this will be
transform: translate(0%) right after being transform: translate(-100%) */
If trigger and target are on the same level, you can use .trigger:hover ~ .target to target your .target element while .trigger is being hovered.
.trigger:hover ~ .target {
color: green;
}
<div class="trigger">Hover Me</div>
<div class="target">Target</div>
If your trigger and target are not on the same level, it's better to use some javascript to add a class to your target.
const trigger = document.querySelector('.trigger');
const target = document.querySelector('.target');
trigger.addEventListener('mouseover', () => {
target.classList.add('active');
});
trigger.addEventListener('mouseleave', () => {
target.classList.remove('active');
});
.target.active {
color: green;
}
<div class="parent1">
<div class="trigger">Hover Me</div>
</div>
<div class="parent2">
<div class="target">Target</div>
</div>
Or you could use :has() pseudo class but be aware if its poor coverage (only works in Safari right now)
.parent1:has(.trigger:hover) ~ .parent2 .target {
color: green;
}
<div class="parent1">
<div class="trigger">Hover Me</div>
</div>
<div class="parent2">
<div class="target">Target</div>
</div>

Hiding/unhiding an element in HTML with internal page references

Would it be possible to have the internal page reference hide/unhide an element.
<div class="hidden">
<div id="thanks">
<h1>Thank you!</h1>
<p></p>
</div>
</div>
So you would visit "http://www.website.com/#thanks" and the div "hidden" would be hidden / vice versa
Yes, using the :target pseudo class.
#main {
display: none;
}
#main:target {
display: block;
}
main
<div id="main">
main section
</div>
Alternatively, you can nest hidden content inside of the :target like this.
.hidden {
display: none;
}
:target .hidden {
display: block;
}
main
<div id="main">
<div class="hidden">
main section
</div>
</div>
You can use the following JavaScript to get the value after hash (#) from a URL.
var hash = location.hash.substr(1);
You can then hide/unhide based on the results.

Bootstrap row causes FullPageJS to have wrong width and height

I have the following snippet directly inside the body tag:
<div id="container">
<div class="section profile">
<div class="row">
<div class="col-sm-6">
A
</div>
<div class="col-sm-6">
B
</div>
</div>
</div>
<div class="section technical">
</div>
</div>
My CSS file if it is neccessary:
body {
background-color: #808080;
}
.section {
}
.section.profile {
background-color: #2980b9;
}
.section.technical {
background-color: #bdc3c7
}
However, when I use FullPageJS, the result is like this:
(note: their are thin lines at the left and right)
The problem only happens if I use row div. It also happen if I wrap the row by another div. Also, the problem disappear if I resize the browser window.
This is how I call the script, just like the documentation:
<script>
$(document).ready(function () {
$("#container").fullpage();
});
</script>
I'm not pretty sure what are you expecting to happen, but check this:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
The container must be a class, not an id, but this also will add some padding to the sides.
Also, you should move the .row class to the upper level id and delete the current one with the .row class in it, the row <div> can have both classes without any problem.

positioning 3 divs in a div

i'm facing to css problem.basically i have main div tag and 3 div s class named pic_con,body_con and msg_con .
div msg_con length and height depend on the text of it.if text is too long it should have morethan one line to display all.look at the picture.first one with small text,second one with big text ..div msg_con have minimem width and maximum width.
i want to position this 3 div look like in the picture.
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hey this is multiline text</div>
</div>
</div>
my css
.pic_con {
float:left;
background-color:#096;
}
.back_con {
float:left;
background-color:#3CC;
border:5px solid red;
width:150;
}
.body_con {
/*float:left;*/
margin:0 auto 0 auto;
background-color:#C39;
border:5px solid red;
}
i set flote left but it's not work.
As far as I understood you want to align them one after another.
You can manage this, as you tried, by using float: left. Furthermore, you should set the parent div to clear: both.
Another thing that I saw is that you didn't close the pic-con DIVs. Try with this:
HTML
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">pic</div>
<div class="body_con">small icon</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con"></div>
<div class="body_con">small icon"</div>
<div class="msg_con"> hey this is multiline text</div>
</div>
</div>
CSS
.msg_w_1 {
clear: both;
}
.msg_w_1 div {
float: left;
}
Edit: I didn't see the updated post containing CSS when I posted this. Try removing the float: left and width from your CSS classes before trying this
use display:table style.
.msg_con {
display : table
}
this makes .msg_con behave like a table element, it will re-size according to its content's length ( both height and width ).

Show hide div inside parent div

There are couple of child divs in a parent div. I want to show/hide a particular child.
<div id="parent">
<div id="child0">Text here</div>
<div id="child1">Text here</div>
</div>
I want on mouse over div id="parent" to show hide div id=child0, everything else in parent div stays the same (visible).
You can do it all with CSS. Assuming this HTML:
<div id="parent">
<div id="child0">Child0 Text here</div>
<div id="child1">Child1 Text here</div>
</div>
You can add something like this CSS:
#child0 {
display: none;
}
#parent:hover #child0 {
display: block;
}
See it in action here: http://jsfiddle.net/QjeUq/
Try this:
CSS:
.outer_wrapper_class .inner_wrapper_class {
display: none;
}
.outer_wrapper_class:hover .inner_wrapper_class {
display: block;
}
HTML:
<div class='outer_wrapper_class'>
<!-- HOVERABLE CONTENT HERE -->
<div class='inner_wrapper_class'>
<!-- HIDE/SHOW CONTENT HERE -->
</div>
<!-- HOVERABLE CONTENT CAN ALSO BE HERE -->
</div>

Categories