logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
Move Element To Another Position Using jquery

Move Element To Another Position Using jquery

September 30, 2016 No comments Article SEO Website Designing

Move Element To Another Position Using jquery: Hi Friends, Today I will tell you about how to move element from one position to another position using jquery. You can change position in li, div, p and in all the tags according to your requirement.

Some of design and development need some position change when you click on an item or element in the particular area.

Today i am using panel and tabs to show, when you click on any list item it change its position from the last list item in the unordered list. I have one more list in which selecting and animating of an element is there.

Move Element To Another Position Using jquery Live Demo:

You can see the live demo of sliding div and download the code from below

SEO Website Designing Live Demo      SEO Website Designing Download

Move Element To Another Position Using jquery:

For moving and changing the position of an element or item using jquery, you can paste some code in the webpage. These code are

Bootstrap HTML Code:

In the html code I take one container and use panel, nav tabs, ul and li to show you tab functionality as well as position change design on click.

    <div class="container-fluid">
         <div class="row">
            <div class="col-md-12">
               <div class="panel with-nav-tabs panel-primary">
                  <div class="panel-heading">
                     <ul class="nav nav-tabs simple">
                        <li class="active"><a href="#tab1primary" data-toggle="tab">Primary 1</a></li>
                        <li><a href="#tab2primary" data-toggle="tab">Primary 2</a></li>
                        <li><a href="#tab3primary" data-toggle="tab">Primary 3</a></li>
                        <li><a href="#tab4primary" data-toggle="tab">Primary 4</a></li>
                        <li><a href="#tab5primary" data-toggle="tab">Primary 5</a></li>
                        <li><a href="#tab6primary" data-toggle="tab">Primary 6</a></li>
                        <li><a href="#tab7primary" data-toggle="tab">Primary 7</a></li>
                        <li><a href="#tab8primary" data-toggle="tab">Primary 8</a></li>
                        <li><a href="#tab9primary" data-toggle="tab">Primary 9</a></li>
                        <li><a href="#tab10primary" data-toggle="tab">Primary 10</a></li>
                        <li><a href="#tab11primary" data-toggle="tab">Primary 11</a></li>
                        <li><a href="#tab12primary" data-toggle="tab">Primary 12</a></li>
                        <li><a href="#tab13primary" data-toggle="tab">Primary 13</a></li>
                        <li><a href="#tab14primary" data-toggle="tab">Primary 14</a></li>
                        <li><a href="#tab15primary" data-toggle="tab">Primary 15</a></li>
                        <li><a href="#tab16primary" data-toggle="tab">Primary 16</a></li>
                        <li><a href="#tab17primary" data-toggle="tab">Primary 17</a></li>
                     </ul>
                  </div>
                  <div class="panel-body">
                     <div class="tab-content">
                        <div class="tab-pane fade in active" id="tab1primary">Primary 1</div>
                        <div class="tab-pane fade" id="tab2primary">Primary 2</div>
                        <div class="tab-pane fade" id="tab3primary">Primary 3</div>
                        <div class="tab-pane fade" id="tab4primary">Primary 4</div>
                        <div class="tab-pane fade" id="tab5primary">Primary 5</div>
                        <div class="tab-pane fade" id="tab6primary">Primary 6</div>
                        <div class="tab-pane fade" id="tab7primary">Primary 7</div>
                        <div class="tab-pane fade" id="tab8primary">Primary 8</div>
                        <div class="tab-pane fade" id="tab9primary">Primary 9</div>
                        <div class="tab-pane fade" id="tab10primary">Primary 10</div>
                        <div class="tab-pane fade" id="tab11primary">Primary 11</div>
                        <div class="tab-pane fade" id="tab12primary">Primary 12</div>
                        <div class="tab-pane fade" id="tab13primary">Primary 13</div>
                        <div class="tab-pane fade" id="tab14primary">Primary 14</div>
                        <div class="tab-pane fade" id="tab15primary">Primary 15</div>
                        <div class="tab-pane fade" id="tab16primary">Primary 16</div>
                        <div class="tab-pane fade" id="tab17primary">Primary 17</div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

<div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="panel with-nav-tabs panel-primary"> <div class="panel-heading"> <ul class="nav nav-tabs simple"> <li class="active"><a href="#tab1primary" data-toggle="tab">Primary 1</a></li> <li><a href="#tab2primary" data-toggle="tab">Primary 2</a></li> <li><a href="#tab3primary" data-toggle="tab">Primary 3</a></li> <li><a href="#tab4primary" data-toggle="tab">Primary 4</a></li> <li><a href="#tab5primary" data-toggle="tab">Primary 5</a></li> <li><a href="#tab6primary" data-toggle="tab">Primary 6</a></li> <li><a href="#tab7primary" data-toggle="tab">Primary 7</a></li> <li><a href="#tab8primary" data-toggle="tab">Primary 8</a></li> <li><a href="#tab9primary" data-toggle="tab">Primary 9</a></li> <li><a href="#tab10primary" data-toggle="tab">Primary 10</a></li> <li><a href="#tab11primary" data-toggle="tab">Primary 11</a></li> <li><a href="#tab12primary" data-toggle="tab">Primary 12</a></li> <li><a href="#tab13primary" data-toggle="tab">Primary 13</a></li> <li><a href="#tab14primary" data-toggle="tab">Primary 14</a></li> <li><a href="#tab15primary" data-toggle="tab">Primary 15</a></li> <li><a href="#tab16primary" data-toggle="tab">Primary 16</a></li> <li><a href="#tab17primary" data-toggle="tab">Primary 17</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1primary">Primary 1</div> <div class="tab-pane fade" id="tab2primary">Primary 2</div> <div class="tab-pane fade" id="tab3primary">Primary 3</div> <div class="tab-pane fade" id="tab4primary">Primary 4</div> <div class="tab-pane fade" id="tab5primary">Primary 5</div> <div class="tab-pane fade" id="tab6primary">Primary 6</div> <div class="tab-pane fade" id="tab7primary">Primary 7</div> <div class="tab-pane fade" id="tab8primary">Primary 8</div> <div class="tab-pane fade" id="tab9primary">Primary 9</div> <div class="tab-pane fade" id="tab10primary">Primary 10</div> <div class="tab-pane fade" id="tab11primary">Primary 11</div> <div class="tab-pane fade" id="tab12primary">Primary 12</div> <div class="tab-pane fade" id="tab13primary">Primary 13</div> <div class="tab-pane fade" id="tab14primary">Primary 14</div> <div class="tab-pane fade" id="tab15primary">Primary 15</div> <div class="tab-pane fade" id="tab16primary">Primary 16</div> <div class="tab-pane fade" id="tab17primary">Primary 17</div> </div> </div> </div> </div> </div> </div>




CSS Code:

It helps to see the design more perfectly in the user eye. It manages design of the panel and list item of tabs.

.panel.with-nav-tabs .panel-heading {
    padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs {
    border-bottom: none;
}
.with-nav-tabs .nav-tabs > li > a {
    color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
    color: #fff;
    background-color: #3071a9;
    border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
    color: #428bca;
    background-color: #fff;
    border-color: #428bca;
    border-bottom-color: transparent;
}

.panel.with-nav-tabs .panel-heading { padding: 5px 5px 0 5px; } .panel.with-nav-tabs .nav-tabs { border-bottom: none; } .with-nav-tabs .nav-tabs > li > a { color: #fff; } .with-nav-tabs.panel-primary .nav-tabs > li > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li > a:focus { color: #fff; background-color: #3071a9; border-color: transparent; } .with-nav-tabs.panel-primary .nav-tabs > li.active > a, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus { color: #428bca; background-color: #fff; border-color: #428bca; border-bottom-color: transparent; }

Jquery Code:

I have made two types of jquery code for changinga and moving the element from one place to another on click. As per your requirement you can choose  and paste the code of any of them. These are

  1. Simple
  2. Animated

1) For Simple – Move Element To Another Position Using jquery Without Animation:

<script>
         $('.simple li').click(function() {
             var $this = $(this);
             $this.insertAfter($this.c(':last'));
         });
</script>

<script> $('.simple li').click(function() { var $this = $(this); $this.insertAfter($this.c(':last')); }); </script>



2) Animated – Move Element To Another Position Using jquery With Animation

<script>
$('.animated li').click(function() {
             var $this = $(this),
                 callback = function() {
                     $this.insertAfter($this.siblings(':last'));
                 };
             $this.fadeOut(500, callback).fadeIn(500);
         });
</script>

<script> $('.animated li').click(function() { var $this = $(this), callback = function() { $this.insertAfter($this.siblings(':last')); }; $this.fadeOut(500, callback).fadeIn(500); }); </script>

Important Note:

  • Don’t forget to add bootstrap and jquery library.
  • Add simple class for simple changing position on click
  • Add animated class for fade in, fade out animated changing position on user click.
  • You can change the position to replace the selector for example :last, eq(0), -nth-last-child(2) etc.

For any problem you can see the live demo and download the code from below.

SEO Website Designing Live Demo      SEO Website Designing Download

Now you know about Move Element To Another Position Using jquery.

Read About Other Interesting Things about jquery below.

  • Sliding Div When Scroll Down Page Using Jquery
  • Disable Mouse Right Click Using Jquery
  • Responsive Jquery Read More Feature Without Plugin
  • Marquee Animation Without Marquee tag
  • Add 3D Menu Effects To Your Website Using Jquery
  • Rumbles, Vibrates, Shakes, And Rotates Any Element Using Jquery Plugin
  • Fancy Effects To Input Fields Using Jquery Plugin
  • Add Diwali Fireworks Using Jquery In Your Website
  • Zoom Image On Hover Using CSS Without Jquery
  • Pure HTML CSS Slider Without JavaScript or Jquery
  • Create Country State And City Dropdown Using Jquery
  • Learn JQUERY Code Step By Step For Beginners
  • Create Expand Collapse Sliding Menu Using jQuery
  • Jquery Me Simple Slider Kaise Bnate Hai
  • Add CKEditor in Html Form using Jquery
  • Avoid Spammers With Motion CAPTCHA Using JQuery
  • Stop Double Form Submission Using Jquery and Ajax
  • Simple Text Slider Using Jquery Slide Function

I hope you will like Move Element To Another Position Using jquery. If You found it useful please subscribe my blog.

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Tags: Bootstrap, How to move an element into another element?, jquery, jquery move element position animate, jquery move element to last child position, Move Element To Another Position Using jquery

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,504 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.