Change position of an element using CSS/JS only

Question

I am using Uikit 2 (https://getuikit.com/v2) - and I need to solve a problem.

I got this markup: https://codepen.io/anon/pen/jZwNeB

Now I need to do the following. This part:

<div class="toc uk-panel uk-panel-box-primary sticky-toc" style="margin: 0px;"> ...</div>

Should be shown on the left side - right under the time datetime part. But - and this is important: I can not change the source itself. I can only add a class to toc uk-panel uk-panel-box-primary sticky-toc and add custom CSS and custom JS. Any idea how to solve this?

What do you mean? The codepen-site? It works on all of my browsers... — SPQRInc, Feb 12 '18 at 14:22
only `toc uk-panel uk-panel-box-primary sticky-toc` or begin from `uk-width-large-3-4`? — plonknimbuzz, Feb 12 '18 at 14:32
Hi. I can only edit the class of the `toc uk-panel uk-panel-box-primary sticky-toc ` element. I can add or delete classes and add custom JS or custom CSS to the page. I can not edit the grid. — SPQRInc, Feb 12 '18 at 14:35
Absolutely positioning the element would probably be the easiest way to achieve this ... — CBroe, Feb 12 '18 at 14:46
[Cut paste](https://stackoverflow.com/questions/16951185/cut-a-div-and-html-inside-it-and-paste-it-into-a-different-div-with-jquery) the DOM element `toc uk-panel uk-panel-box-primary sticky-toc` ,to `uk-width-large-1-4`. it will be more precise if you give ID to both elements. — Sunny Soni, Feb 12 '18 at 14:47

JDoe · Accepted Answer · 2018-02-12T14:40:38.040

2

var obj = document.getElementById("node");
var parent = document.getElementById("parent");
parent.appendChild(obj);

Here, node is the "toc uk-panel uk-panel-box-primary sticky-toc" element. parent is the "uk-width-large-1-4" element

You can obviously use any other DOM method than the one I have used. So, if you want to select the DOM of the entity using its class name class, you have to use getElementsByClassName("big long class name")[0] to correctly reference that entity

I just wanted to highlight the appendChild method

edited Feb 12 '18 at 14:40

answered Feb 12 '18 at 14:36

JDoe

96
2
10

Hi... That would be a possibility - but the elements do not have an ID. Edit: Just saw your edit. – SPQRInc Feb 12 '18 at 14:40

score 0 · Answer 2 · edited Mar 09 '18 at 23:00

I believe the best answer is using CSS, but because I don't know about getukit and I don't know how to solve this using CSS only.

Here you can try with jQuery. Tell me if you want do this using pure JS.

<link href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css' rel='stylesheet'>

<div class="uk-grid">
 <div class="uk-width-large-1-4">
  <p class="uk-article-meta tm-article-date uk-margin-small selectionShareable">
   <time datetime="2018-02-12T12:00:58+00:00">12.02.18</time>
  </p>
 </div>
 <div class="uk-width-large-3-4">
  <h1 class="uk-article-title">Test Content</h1>
  <div class="uk-margin">
   <div class="uk-sticky-placeholder" style="height: 52px; margin: 0px;">
    <div class="toc uk-panel uk-panel-box-primary sticky-toc" style="margin: 0px;">
     <ol class="toc-list ">
      <li class="toc-list-item">
       <a href="#" class="toc-link node-name--H1  is-active-link">Testa</a>
       <ol class="toc-list  is-collapsible">
        <li class="toc-list-item"><a href="#test" class="toc-link node-name--H2 ">Test 2</a></li>
       </ol>
      </li>
     </ol>
    </div>
   </div>
   <p class="selectionShareable">Test Content.</p>
  </div>
 </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
 function recreate(){
  let newElem = $('.sticky-toc').clone();
  $('.sticky-toc').remove();
  $('.tm-article-date').after(newElem);
 }
 recreate();
})
</script>

Change position of an element using CSS/JS only

2 Answers2