How can I swap the order of divs in HTML code? - javascript

I have two divs placed one after another in my html. I wan't to swap them.
<div class="1"></div>
<div class="2"></div>
I want to swap 1 and 2.

Use after() or insertAfter() method when you want to move the element after the current element or use before() or insertBefore() method when you want to move the element before the current element.
$('#a').before($('#b'));
// or
$('#b').insertBefore('#a');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">a</div>
<div id="b">b</div>

I think you want to change the positions of you div.
the code is simple but you need to import jQuery to your code.
<div class="www">
<div class="div1">first div</div>
<div class="div2">second dive</div>
</div>
create a js file and use this jQuery code
$('.div2').each(function () {
$(this).insertBefore($(this).prev('.div1'));
});
you cAN CHECK THIS CODEPEN link also
http://codepen.io/feizel/pen/egPBEz

You need to insert div 1 into a temp variable then remove it and insert after div 2.
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<div id='div_1'>this is div 1</div>
<div id='div_2'>this is div 2</div>
<script>
jQuery(document).ready(function(){
var temp = jQuery('#div_1');
jQuery('#div_1').remove();
jQuery('#div_2').after(temp);
})
</script>

You can use css flexbox to achieve this. wrap your divs in a parent container and apply flexbox to position them as you wish.
suppose you wrap your divs and then your html code is
<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
</div>
and your css code
.wrapper {
display: flex;
flex-direction: column;
}
#first_div {
height: 200px;
order: 2;
}
#second_div {
height: 300px;
order: 1;
}
though only disadvantage being you wont be able to use it in older IE browsers.

Flexbox will be your friend if you're okay with alienating anybody still using IE9 or older.
You'll only need two lines of code on the container/parent div.
display: flex;
flex-direction: column-reverse;
https://jsfiddle.net/PaulvdDool/Lzq7vpxn/

Related

What comes in between prepend() and append()?

I'll make to quick. I'm trying to position an element wrt my target. Normally we have prepend (before the target) and append (after the target). But is there smth along those lines that helps us place that element ON what we’re targeting, instead of putting it before (prepend) or after(append)?
If you want new HTML Elements add to target... I don't know if this is what you want.
$('.target-x').html('<div class="target-b">new elements</div>')
.target-x {background:#bbb;padding:10px;}
.target-b {background:#fff;color:#222;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="target-top">Elements</div>
<div class="target-x">New Elements Target</div>
<div class="target-bottom">Elements</div>
</body>
You can use position:absolute on a :before to place it ON the actual content.
HTML
<div class="example">This is an example div</div>
CSS
.example {
background-color: #5BC8F7;
}
.example::before {
position:absolute;
content: "Above!";
background-color: #FFBA10;
}

How to use CSS transition for elements without positioning

I have this code:
<button id="delete-row">delete</button>
<div id="a">
<div class="row" style="height:150px;">Some content</div>
<div class="row" style="height:150px;">Some content</div>
<div class="row" style="height:150px;">Some content</div>
</div>
The height of the a div depends on how many row divs are inside it. Now I remove the middle row with javascript and the a div changes automatically its height and the lower row moves up. What I wanna now is how to use Css transitions to make this change happening smoothly.
I tried:
#a{
transition-property: height;
transition-duration:0.5s;
}
And also I tried the code below, so I can make the lower row change the top property slowly but the case is that they are not positioned relative or absolute so they don't have any top property.
.row{
transition-property: top;
transition-duration:0.5s;
}
What property is here triggered when elements change their positions on page in case we don't use any positioning and the elements are positioned by the normal flow?
Unfortunately CSS alone cannot achieve what you require. The transition property only applies when a property of an element is directly changed. In your case you remove an element, so the height of the #a div is changed by proxy when the child is removed.
Instead, you can use jQuery's slideUp() method to animate the height transition before removing the .row. Try this:
$('#delete-row').click(function() {
$('.row:eq(1)').slideUp(function() {
$(this).remove();
})
})
#a { border: 1px solid #C00; }
.row { height: 150px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="delete-row">delete</button>
<div id="a">
<div class="row">Some content</div>
<div class="row">Some content</div>
<div class="row">Some content</div>
</div>

How to add style relevant to class name to element using jquery?

I'm ready to make a tool to improve my work. Please look at the code.
<div class="container width-200"></div>
<div class="container width-300"></div>
I want to set the first div width to 200px and second to 300px using jquery dynamicaly.
I don't know how to handle it in Javascript.
How can i do this work?
You need to find element has class width-* that * should be only digit. You can use .match() to check class name. If class name is right, add digit of class to width of element.
$("[class*=width-]").each(function(){
var match = $(this).attr("class").match(/width-([\d]+)/);
if (match)
$(this).css("width", match[1]);
});
div {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width-100">100</div>
<div class="width-200">200</div>
<div class="width-300">300</div>
Please use below in js:
$(document).ready(function(){
$('.width-300').css({'width':'300px','border':'1px solid #000' });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container width-300">
Width 300
</div>
.container
{
margin:0 auto;
}
.width-300
{
width: 300px;
}
I think you should use custom attributes.
HTML 5 explicitly allows custom attributes that begin with data. So, for example, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p> is valid. Since it's officially supported by a standard, I think this is the best option for custom attributes. And it doesn't require you to overload other attributes with hacks, so your HTML can stay semantic.
Source: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

Jquery effect works on only the first id

I am trying to apply a hide effect on all ID's with the same label, but it only works on the first one. I am having the same problem when I tried to add slideToggle too, but figured solving this will solve the others.
JQUERY
var allPanels = $('#accordionSlide');
allPanels.hide();
CSS
#accordion {
display: block;
width: 100%;
overflow: hidden;
}
#accordionBtn { display: block; }
#accordionSlide { display: block;}
HTML
<div id="accordion">
<div id="accordionBtn">
Solutions
</div>
<div id="accordionSlide">
Wireless Remote Monitoring
</div>
<div id="accordionBtn">
Solutions
</div>
<div id="accordionSlide">
Wireless Remote Monitoring
</div>
</div>
Use class attribute as id should be unique for every element. id represents only one element that's why it should be unique. So when you apply selector it only selects the first element that it founds on the page.
do like this:
<div class="accordionSlide">
Wireless Remote Monitoring
</div>
and jquery:
var allPanels = $('.accordionSlide');
allPanels.hide();
jQuery matches exactly one element when querying for an ID. An array of at most one Element object will be returned by $("#foo").get(). See the jQuery documentation for more information.
ID Selector (“#id”)-->Selects a single element with the given id attribute.
if you want to apply to all elements then use class in place of id
var allPanels = $('.accordionSlide');
allPanels.hide();
html
<div class="accordionSlide"></div>

Two scrollbar using the same css

I'm using custom scrollbar, add one scrollbar is very easy, but if I want to add second they twice use one mCustomScrollbar.css I don't know how to change that second div. I was looking on code on demo custom scrollbar but this just fail.
JQUERY
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
});
})(jQuery);
HTML
<link href="scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<div class="suwak"> content with first scrollbar </div>
<div class="suwak2"> content with second scrollbar </div>
Some simply CSS
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
Just add another class on div with class="suwak", this will run your scrollbar and your second class will help override your first class. In css you are saying, if something has both classes, use new style. In css your selector would be .suwak.suwak2, no space between classes in css.
<div class="suwak"> content with first scrollbar </div>
<div class="suwak suwak2"> content with second scrollbar </div>
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
.suwak.suwak2 {
/*new stile*/
}
Why don't you use second class as well? is it something that you don't know how many DIVs will be there to have same scrollbar?
If it is limited to 2 only, then try
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
$(".suwak2").mCustomScrollbar();
});
})(jQuery);
Or you can mention same class for second DIV as well. I have suggested this as per my observation of the code you posted.

Categories

Resources