We Keep Coding

Re-order Divs without access to html

I'm customising a wordpress theme and have come up against a frustrating blocker.
I would like to position the header (header.non-sticky-nav) after the fullscreen cover (.fullscreen-cover) and before the content (.content).
<header class="non-sticky-nav">
<div id="navbar"></div>
</header>
<div id="wrapper">
<div id="content">
<div class="fullscreen-cover"></div>
<div class="content"></div>
</div>
</div>
current-result_vs_desired-result
I tried repositioning the nav bar by using a "top: xpx" value but obviously that doesn't work as the .fullscreen-cover is not a fixed height.
Here is the test page I am using for the issue: http://samburrough.design/test/
The theme allows page specific or global css code injections, and as theme is regularly updated, I would like to try and stick to using this feature rather than delve into the theme files and have the changes overwritten every time I want to update.
Any help would be hugely appreciated!

Could you not create a child theme and modify the DOM that way?
At least this way the changes won't be over-written every time an update to the parent theme is released?
This would (should) actually be the preferred option.
Smashing Magazine; Create and Customise Wordpress Child Theme

Unfortunately, if the theme does not include block positioning, you need to edit the DOM. While you could probably use some wonky absolute positioning on the bar and the hero, positioning them absolutely is likely to cause you a cascade of problems - starting with the responsive nav.

There is a javascript function/method that lets nodes swap places in the dom.
you could try and look into that Node.replaceChild()
The example below is from the documentation and creates a new element but you can also select an existing node.
// create an empty element node
// without an ID, any attributes, or any content
var sp1 = document.createElement("span");
// give it an id attribute called 'newSpan'
sp1.id = "newSpan";
// create some content for the new element.
var sp1_content = document.createTextNode("new replacement span element.");
// apply that content to the new element
sp1.appendChild(sp1_content);
// build a reference to the existing node to be replaced
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// replace existing node sp2 with the new span element sp1
parentDiv.replaceChild(sp1, sp2);

You could try using order with flexbox. For example:
.container {
display: flex;
flex-wrap: wrap;
}
.one,
.two {
width: 100%;
}
.one {
order: 2;
background: red;
}
.two {
order: 1;
background: blue;
}
<div class="container">
<div class="one">
1
</div>
<div class="two">
2
</div>
</div>
Might be a bit problematic, depending on what your markup looks like. And won't work on older browsers.

How to get a div to indicate, that another div is being toggled(displayed in slideshow)?

I am looking for a way to show that a div is being toggled, with a separate div indicator ".bars"
I have tried if statements and added classes to the indicator ".bars" to change its properties...
The indicator ".bars" has three children divs each representing a toggled div in
a slideshow...
if($(".one")).show(){
$(".bars div").css(change it here);
}
//what I am confused about is that I can change other html elements this way
like the parent div which is indicator ".bar" but I cant seem to change its children...
<div class="bars">
<div></div>
<div></div>
<div></div>
</div>
Here is my codepen link to show where I am having difficulty
http://codepen.io/gebrutommy/pen/ZpGZRv?editors=0010

If I understand what you're trying to do correctly... I added a bit of code to you focusNextDiv function to add a class for highlighting:
JS:
function focusNextDiv() {
$(".gallery").hide();
divs[index].toggle();
// Added JS
var bars = $('.bars div').removeClass('current');
$(bars.get(index)).addClass('current');
// End of Added JS
index++;
if (index === divs.length) {
index = 0;
}
}
CSS:
.bars div.current {
background-color: red;
}
HTML:
<div class="bars flex row">
<div class="current"></div>
<div></div>
<div></div>
</div>
This can be cleaned up, but I just wanted to make sure I understood the problem correctly. Is this closer to what you're looking for?
This code uses your index variable and looks in the .bars div for a child with the same index, then just adds a .current class to it. I manually added the same .current class to your markup so on page load, the first .bar div is shown as selected.
Working Codepen

Prevent divs from wrapping, but do not add default scroll

Alright, so I'm a little puzzled about this: as you can see on the site for the Polymer Project, they have tabs that are horizontally scrollable if there are too many. I'd like to replicate this effect, but I can't figure out how to both prevent the <div> elements for tabs from wrapping as well as scrolling. Obviously, JS will need to be used here. Unless it's possible to get a custom scrollbar?
How can I do the above? A non-jQuery solution would be very much preferable.

Should be able to use plain JavaScript or jQuery to compare the calculated width of the inner div to the set width of the outer div. If #inner is wider than #outer, add a class to one of the divs to change how they're displayed. If not, remove the class.
The markup:
<div id="outer">
<div id="inner">
<div class="scroll-button"></div>
<!-- your tabs here -->
<div class="scroll-button"></div>
</div>
</div>
The styling:
#outer{
width:500px;
overflow-x:hidden;
}
#outer .scroll-buttons{
display:none;
}
#outer.has-scroll-buttons .scroll-button{
display:block;
}

Give the divs a fixed height and dynamic length. Where the length property of the div is made by counting the number of columns you want in a div.
Why the aversion to jquery?

Display div while parent is display None

I have div that is like this
<div style: "display:none;">
<div class="displayMe">
</div>
</div>
I need to how to make the div displayMe show while keeping the parent Div hidden

you can use this:
//this class for parent div
.hide {visibility: hidden;}
//this class to the child div
.reshow {visibility: visible;}

It's not totally clear, where exactly you want to show the visible part of the hidden parent. Here's a pure CSS solution, which more or less replaces the parent with a child on screen.
As you can see, there's a drawback in this solution concerning the rest of the content on the page. However, setting display:none removes the hidden element taken space from the textflow, hence this is probably exactly what would happen, if it was possible to show elements inside none-displayed elements.
#wrapper {
position: relative;
height: 0px;
visibility: hidden;
}
#content {
position: absolute;
top: 0px;
visibility: visible;
}
<div id="wrapper">
Text in the wrapper<br/>
more text ...<br/>
... and one more line.
<div id="content">Some visible content</div>
This text is below the visible
</div>
<div>This is outside of invisible</div>

No, this is not possible. You could instead move/clone the child element and insert it somewhere else in the markup (e.g. via JavaScript).
var element = jQuery('.Inner-Div').clone();
and then append to any visible element that be appropriate.
element.appendTo('some element');
Example http://jsfiddle.net/xmo9bpot/
EDIT
Another clever way would be to hide all siblings of the chosen child element and in fact leave the parent visible
DEMO http://jsfiddle.net/xmo9bpot/1/
$(".child").siblings().hide();

No this is not possible, as container should be visible when you want to display its child,
explain your scenario so much relevant solution can be provided, or you can try following
If you have multiple divs inside parent div, and you want to display any one child div at a time using jquery/javscript, then you can arrange your divs as
<div>
<div id="div1" style="display:none;">
</div>
<div id="divq" style="display:none;>
</div>
<div id="div3" style="display:none;>
</div>
</div>
then write your javascript / jquery code as
if (YourCondition == 1)
{
$('#div1').show();
}
else if (YourCondition == 2)
{
$('#div2').show();
}
if (YourCondition == 3)
{
$('#div3').show();
}
Cheers !

.displayMe{display:block !important}

javascript function executing on second click

I have a need to collapse/expand the width of a div (rather that hide/show), and for some reason this code that I wrote only seems to start working with the second click. If it put an alert in to check the variable it seems that the variable is not picking up the style initially. Any thoughts? Here is a js fiddle:
http://jsfiddle.net/JKxHw/4/
Here is my css, html, and script
#left_nav {width:200px; border: 1px solid red; height: 300px;}
<div id="left_nav_collapser">
collapse width of left nav
</div>
<div id="left_nav">
<div id="left_nav_navlinks">
<ul><li>Apples<ul><li>Macintosh</li><li>Styrofoam</li></ul>
</li><li>Oranges</li><li>Bananas</li></ul>
</div>
</div>
<script>
function hideNav(){
var myLayer = document.getElementById('left_nav').style.width;
//alert(myLayer);
if(myLayer=="200px"){
document.getElementById('left_nav').style.width="0px";
document.getElementById('left_nav_navlinks').style.display="none";
} else {
document.getElementById('left_nav').style.width="200px";
document.getElementById('left_nav_navlinks').style.display="block";
};
}
</script>
More info: as much as I would love to I can not use jQuery for this.

.style only gets information from the style attribute rather than computed styles. You could use window.getComputedStyle instead, but it seems inflexible to me. Instead you should just have a variable that keeps track of the visibility state that the element is in.
You can even use .dataset (assuming you don't need to support IE) on the element itself, although any variable would do.
http://jsfiddle.net/JKxHw/6/