Develop Reference

jQuery UI sortable prevent drop into connected sortable if item has already some childs

I need your help. I'm currently trying to make a sortable list of items. Each item can also be a child item of another one:
(function ( $ ) {
$( document ).ready( function () {
$( '#import-sort-wrapper' ).sortable( {
placeholder: 'sortable-placeholder',
connectWith: '.import-sort-item-variations',
start: function ( e, ui ) {
ui.placeholder.height( ui.item.height() );
},
beforeStop: function ( e, ui ) {
console.log( 'before stop' );
// Check if product has already variations
if (ui.item.find( '.import-sort-item-variations:first li' ).length > 0) {
$( ui.sender ).sortable( 'cancel' );
}
},
stop: function ( e, ui ) {
let itemVariations = ui.item.find( '.import-sort-item-variations:first' );
// Check if item is variable product and display / hide variations list
if (ui.item.closest( '.import-sort-item-variations' ).length === 1) {
// itemVariations.empty();
itemVariations.hide();
} else {
itemVariations.show();
}
}
} );
$( '.import-sort-item-variations' ).sortable( {
placeholder: 'sortable-placeholder',
connectWith: '#import-sort-wrapper',
start: function ( e, ui ) {
ui.placeholder.height( ui.item.height() );
},
stop: function ( e, ui ) {
let itemVariations = ui.item.find( '.import-sort-item-variations:first' );
// Show variation option again in case item is moved out of variation list
if (ui.item.closest( '.import-sort-item-variations' ).length === 0) {
itemVariations.show();
}
}
} );
} );
});
#import-sort-wrapper {
text-align: left;
display: flex;
flex-direction: column;
list-style-type: none;
margin: 0;
padding: 0;
}
#import-sort-wrapper li {
font-size: 14px;
line-height: 1.5;
position: relative;
padding: 10px 15px;
margin: 9px 0 0;
cursor: move;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
}
#import-sort-wrapper li.import-sort-item {
background: #f6f7f7;
border: 1px solid #dcdcde;
}
#import-sort-wrapper li.import-sort-item .import-sort-item-header .sort-item-header-id {
font-weight: 600;
}
#import-sort-wrapper li.import-sort-item .import-sort-item-header .sort-item-header-type {
color: #50575e;
font-style: italic;
font-weight: 400;
margin-left: 4px;
font-size: 13px;
}
#import-sort-wrapper li.import-sort-item .import-sort-item-variations {
border: 1px solid #dcdcde;
min-height: 30px;
background: #ffffff;
margin-top: 10px;
}
#import-sort-wrapper li.import-sort-item .import-sort-item-variations li {
margin: 10px;
}
#import-sort-wrapper li.ui-sortable-placeholder {
border: 1px dashed #c3c4c7;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="import-sort-wrapper">
<li class="import-sort-item">
<span class="import-sort-item-header">
<span class="sort-item-header-id">30:</span>
<span class="sort-item-header-name">Testprodukt</span>
<span class="sort-item-header-type">Variables Produkt</span>
</span>
<ul class="import-sort-item-variations">
</ul>
</li>
<li class="import-sort-item">
<span class="import-sort-item-header">
<span class="sort-item-header-id">28:</span>
<span class="sort-item-header-name">Erdbeeren</span>
<span class="sort-item-header-type">Variables Produkt</span>
</span>
<ul class="import-sort-item-variations">
</ul>
</li>
<li class="import-sort-item">
<span class="import-sort-item-header">
<span class="sort-item-header-id">29:</span>
<span class="sort-item-header-name">Variables Produkt</span>
<span class="sort-item-header-type">Variables Produkt</span>
</span>
<ul class="import-sort-item-variations">
</ul>
</li>
</ul>
Now I somehow want to prevent any drag-n-drop of an element which already has some childs into another main element. It should only be possible if the element which should be dragged has no childs! I've tried checking some things inside the beforeStop callback, but somehow I don't get this thing working correctly. Any ideas? Maybe I'm on the wrong way and this is not possible...

if you change your code
beforeStop: function ( e, ui ) {
console.log( 'before stop' );
// Check if product has already variations
if (ui.item.find( '.import-sort-item-variations:first li' ).length > 0) {
$( ui.sender ).sortable( 'cancel' );
}
},
To :
beforeStop: function ( e, ui ) {
console.log( 'before stop' );
// Check if product has already variations
if (ui.item.find( '.import-sort-item-variations:first li' ).length > 0) {
$( '#import-sort-wrapper' ).sortable('cancel')
}
},
Is that what you want? ?

I've found the solution. Thanks to Funky for the hint. Also I've moved the function to the child sortable and used a different callback received since sortable('cancel') causes some JS errors when used in beforeStop:
receive: function ( e, ui ) {
console.log( ui.sender );
// Check if product has already variations
if (ui.item.find( '.import-sort-item-variations:first li' ).length > 0) {
$( '#product-import-sort-wrapper' ).sortable( 'cancel' );
}
}

Toggled menu in WordPress Underscores makes a jump

I am trying to make a toggle menu for my site, but when I open the menu everything jumps some pixels to the left. I have played with some settings, but nothing worked. I made some small changes to the original CSS for the navigation, to make the button and the ul to align. The menu should be opening the list straight down, not affecting the button's and menu's position.
Is there a better way to set up the js function or can it be fixed in CSS? I used the built-in navigation function from WordPress starter theme Underscores.
( function() {
const siteNavigation = document.getElementById( 'site-navigation' );
// Return early if the navigation don't exist.
if ( ! siteNavigation ) {
return;
}
const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ];
// Return early if the button don't exist.
if ( 'undefined' === typeof button ) {
return;
}
const menu = siteNavigation.getElementsByTagName( 'ul' )[ 0 ];
// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}
if ( ! menu.classList.contains( 'nav-menu' ) ) {
menu.classList.add( 'nav-menu' );
}
// Toggle the .toggled class and the aria-expanded value each time the button is clicked.
button.addEventListener( 'click', function() {
siteNavigation.classList.toggle( 'toggled' );
if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
button.setAttribute( 'aria-expanded', 'false' );
} else {
button.setAttribute( 'aria-expanded', 'true' );
}
} );
// Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
document.addEventListener( 'click', function( event ) {
const isClickInside = siteNavigation.contains( event.target );
if ( ! isClickInside ) {
siteNavigation.classList.remove( 'toggled' );
button.setAttribute( 'aria-expanded', 'false' );
}
} );
// Get all the link elements within the menu.
const links = menu.getElementsByTagName( 'a' );
// Get all the link elements with children within the menu.
const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
// Toggle focus each time a menu link is focused or blurred.
for ( const link of links ) {
link.addEventListener( 'focus', toggleFocus, true );
link.addEventListener( 'blur', toggleFocus, true );
}
// Toggle focus each time a menu link with children receive a touch event.
for ( const link of linksWithChildren ) {
link.addEventListener( 'touchstart', toggleFocus, false );
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocus() {
if ( event.type === 'focus' || event.type === 'blur' ) {
let self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( ! self.classList.contains( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
self.classList.toggle( 'focus' );
}
self = self.parentNode;
}
}
if ( event.type === 'touchstart' ) {
const menuItem = this.parentNode;
event.preventDefault();
for ( const link of menuItem.parentNode.children ) {
if ( menuItem !== link ) {
link.classList.remove( 'focus' );
}
}
menuItem.classList.toggle( 'focus' );
}
}
}() );
.main-navigation {
display: block;
width: 100%;
padding-right: 0;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
text-align: right;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation li {
position: relative;
top: 10px;
left: -40px;
}
.main-navigation a {
display: block;
text-decoration: none;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}
.main-navigation.toggled{
height: 170px;
}
/* CUSTOM HEADER STYLES */
.site-header {
display: block;
margin: 0 30px;
padding: 50px 0;
}
.site-branding p {
float: left;
font-family: 'Merriweather Sans', sans-serif;
font-size: 1.5em;
margin: 0;
}
.site-branding p a {
text-decoration: none;
}
/* Navigation */
nav.main-navigation {
width: auto;
float: right;
<header id="masthead" class="site-header">
<div class="site-branding">
<?php
the_custom_logo();
if ( is_front_page() && is_home() ) :
?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php
else :
?>
<p class="site-title"><?php bloginfo( 'name' ); ?></p>
<?php
endif; ?>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( '☰', 'ab-portfolio' ); ?></button>
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
Closed menu
Open menu

This is because the content of your <ul> is bigger than the button itself and it always tries to align on the left.
You can simply fix it adding a float: right; to the button.
.menu-toggle {
float: right;
}
Alternatively you can try add some margin-left and margin-right to the button, like this:
.menu-toggle {
margin: 0 8px;
}
In this last case you can skip the float: right;.
Here's a working Codepen: https://codepen.io/alezuc/pen/QWyKZLX
Hope this helps!

Change tooltip text on toggle switch

How to change the tooltip text on the toggle switch.
1) Firstly by default, I have to give some tooltip
2) Also, whenever I click on toggle switch I have to change the tooltip
But the below code is not working properly
Problem
1) The tooltip which I am getting is not correct. It is not coming from the foundation. Can anyone tell me how we can make this tooltip beautify or just add a class of foundation
Can anyone guide me where I am doing wrong
I am using
Foundation 5
<ul class="header-info details collapse ch_en_switch">
<li class="switch small" onclick="chn_tooltip" id="chinese_toggle_tooltip" aria-haspopup="true" title="click to see player name in chinese">
<span class="switch_text">EN</span>
<input id="chn_eng_toggle" onclick="chinese_toggle" type="checkbox">
<label for="chn_eng_toggle"></label>
<span class="switch_text">CH</span>
</li>
</ul>
function open_tooltip(){
$(this).click(function(e){
if ( $( '#chn_eng_toggle' ).is(':checked') ){
$( '#chinese_toggle_tooltip' ).attr( 'title', '' )
$( '#chinese_toggle_tooltip' ).attr( 'title', 'click to see player name in english' ).foundation('toggle')
}
else{
$( '#chinese_toggle_tooltip' ).attr( 'title', '' )
$( '#chinese_toggle_tooltip' ).attr( 'title', 'click to see player name in chinese' ).foundation('toggle')
}
});
}

try this https://jsfiddle.net/pnnvqj6g/
<ul class="header-info details collapse ch_en_switch">
<li class="switch small" data-tooltip-class="aniket" id="chinese_toggle_tooltip" data-tooltip aria-haspopup="true" title="">
<span class="switch_text">EN</span>
<input id="chn_eng_toggle" type="checkbox" onclick="open_tooltip()">
<label for="chn_eng_toggle"></label>
<span class="switch_text">CH</span>
</li>
</ul>
function open_tooltip(){
if ($("#chn_eng_toggle").is(":checked")) {
$('#chinese_toggle_tooltip').attr('title', 'aniket');
} else {
$('#chinese_toggle_tooltip').attr('title', 'shivam');
}
}

In your JavaScript code snippet, $( this ) returns an undefined elements. Change it to:
if( $ ( '#chn_eng_toggle' ).is( ':checked' ) )
function open_tooltip () {
if ( $( '#chn_eng_toggle' ).is( ':checked' ) )
$( '#chinese_toggle_tooltip' ).attr( 'title', 'aniket' )
else
$( '#chinese_toggle_tooltip' ).attr( 'title', 'shivam' )
}
</script>
label {
position: relative;
display: inline-block;
width: 40px;
height: 12px
}
label input {
display:none
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s
}
.slider:before {
position: absolute;
content: "";
height: 8px;
width: 18px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s
}
input:checked + .slider {
background-color: #2196F3
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3
}
input:checked + .slider:before {
-webkit-transform: translateX(18px);
-ms-transform: translateX(18px);
transform: translateX(18px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header-info details collapse ch_en_switch">
<li class="switch small" onclick="open_tooltip( event )" data-tooltip-class="aniket" id="chinese_toggle_tooltip" aria-haspopup="true" title="shivam">
<span class="switch_text">EN</span>
<label for="chn_eng_toggle">
<input id="chn_eng_toggle" type="checkbox">
<span class="slider"></span>
</label>
<span class="switch_text">CH</span>
</li>
</ul>

How do I align text/class with the button in the <style> tag when it won't center in css or style tag?

I put margin-auto in the toggle class on my site. It sort of went it the middle but it didn't align with the button. Do I need to do something in CSS or JavaScript and what should I place there?
<style>
.toggler { width: 500px; height: 200px; position: relative; margin-top:0; margin-right:auto; margin-bottom:0;
}
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
.kiri{text-align:center;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 50 };
} else if ( selectedEffect === "transfer" ) {
options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// Run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// Callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
return false;
});
} );
</script>
</head>
<body>
<nav>
<ul>
<li>Contact</li>
<li>JQUERY TIPS</li>
<li>JS TIPS</li>
<li>Info</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<h2>Jquery Tips</h2>
<p id="js">JavaScript/jQuery is a programming language that you can use to add interactivity to your web page.</p>
<p id="poo"> if you put your mouse over the sentence above there will be a light blue highlight the lightgray background that was made using the <span class="pink">onmouse event.</span>
<div class="footer">
<span class="flatorange">#2016-20XX &#8226 Nia Daniels &#8226 FINAL EXAM &#8226 CIST1520 </span><br>
<span class="flatblue">Scripting Technologies</span><br>
<span class="flatgreen">Mr.Cash</span><br>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">2 Jquery Effects</h3>
<p id="hmm">eres una mujer o hombre? soy una mujer. quiero una pizza. queires una pizza o no?</p>
</div>
</div>
<div class="kiri">
<select name="effects" id="effectTypes">
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
</select></div>
<div class="kiri">
<button id="button" class="ui-state-default ui-corner-all">Run Le Effect</button></div>
<script>

Add margin: 0 auto; to both .toggler and #effect and it should do the trick. Since you set a width on #effect you'll need the auto margin to handle the centering for you.

Trying to impletment a Slide-In Menu

im new to front end development and currently trying to implement a Slide in Sidebar-snippet into my layout.
I think there is something wrong with the JS, since I have no clue about JS its hard to tell though. I know that its a lot to ask for but id appreciate some guidance.
HTML:
<div class="st-container">
<nav class="st-menu st-effect-1" id="menu-1"> <!-- Sidebar Menu -->
<ul>
<li><a class="icon icon-data" href="#">Data Management</a></li>
<li><a class="icon icon-location" href="#">Location</a></li>
<li><a class="icon icon-study" href="#">Study</a></li>
<li><a class="icon icon-photo" href="#">Collections</a></li>
<li><a class="icon icon-wallet" href="#">Credits</a></li>
</ul>
</nav> <!-- End of Sidebar Menü -->
<div class="navigation"> <!--Navigation-->
<div id="st-trigger-effects" class="section">
<button data-effect="st-effect-1"><i class="fa fa-bars"></button></i></li> <!-- Hamburger Button -->
</div>
<div class="nav-content section">
<div class="nav-logo">Blogger</div>
<div class="nav-btn"><button class="wrt-btn">Schreib' einen Artikel</button></div>
</div>
<div class="nav-right section">
<ul>
<li>Log In</li>
<li>Register</li>
</ul>
</div>
</div><!--End of Navigation / Header-->
CSS:
.navigation {
width: 100%;
border-bottom: solid 1px #eee;
position: fixed;
font-size: 14px;
box-sizing: border-box;
font-weight: 400;
font-style: normal;
line-height: 1.6;
min-height: 65px;
padding-top: 10px;
background-color: #fff;
z-index: 500;
}
.section, li, .nav-logo, .nav-btn {
display:inline-block;
}
#st-trigger-effects, .nav-right {
width: 21%;
}
.nav-content {
width: 55%;
}
.nav-btn {
text-align: right;
}
.nav-right {
text-align: right;
}
.nav-logo, .nav-btn {
width: 49.3%;
padding: 0;
margin: 0;
}
#st-trigger-effects button {
margin-left: 35px;
}
/******************************************
Slide in Bar
*******************************************/
.st-menu {
position: absolute;
top: 0;
left: 0;
z-index: 100;
visibility: hidden;
width: 300px;
height: 100%;
background: #48a770;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.st-menu::after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.st-menu-open .st-menu::after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
/* content style of sidebar */
.fa.fa-bars {
font-size: 1.5em;
}
.st-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.st-menu h2 {
margin: 0;
padding: 1em;
color: rgba(0,0,0,0.4);
text-shadow: 0 0 1px rgba(0,0,0,0.1);
font-weight: 300;
font-size: 2em;
}
.st-menu ul li a {
display: block;
padding: 1em 1em 1em 1.2em;
outline: none;
box-shadow: inset 0 -1px rgba(0,0,0,0.2);
color: #f3efe0;
text-transform: uppercase;
text-shadow: 0 0 1px rgba(255,255,255,0.1);
letter-spacing: 1px;
font-weight: 400;
-webkit-transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
}
.st-menu ul li:first-child a {
box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}
.st-menu ul li a:hover {
background: rgba(0,0,0,0.2);
box-shadow: inset 0 -1px rgba(0,0,0,0);
color: #fff;
}
/* Effect 1: Slide in on top */
.st-effect-1.st-menu {
visibility: visible;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-1.st-menu-open .st-effect-1.st-menu {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.st-effect-1.st-menu::after {
display: none;
}
Classie.js
*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
Modernizer.Custom.js
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("#media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
SidebarEffects.js
var SidebarMenuEffects = (function() {
function hasParentClass( e, classname ) {
if(e === document) return false;
if( classie.has( e, classname ) ) {
return true;
}
return e.parentNode && hasParentClass( e.parentNode, classname );
}
// http://coveroverflow.com/a/11381730/989439
function mobilecheck() {
var check = false;
(function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
function init() {
var container = document.getElementById( 'st-container' ),
buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ) ),
// event type (if mobile use touch events)
eventtype = mobilecheck() ? 'touchstart' : 'click',
resetMenu = function() {
classie.remove( container, 'st-menu-open' );
},
bodyClickFn = function(evt) {
if( !hasParentClass( evt.target, 'st-menu' ) ) {
resetMenu();
document.removeEventListener( eventtype, bodyClickFn );
}
};
buttons.forEach( function( el, i ) {
var effect = el.getAttribute( 'data-effect' );
el.addEventListener( eventtype, function( ev ) {
ev.stopPropagation();
ev.preventDefault();
container.className = 'st-container'; // clear
classie.add( container, effect );
setTimeout( function() {
classie.add( container, 'st-menu-open' );
}, 25 );
document.addEventListener( eventtype, bodyClickFn );
});
} );
}
init();
})();
The JS files have been called in the HTML. Again, help would be appreciated.

Okay firstly,
you are trying to get an id of an element which doesn't have an id called st-container
Change this:
<div class="st-container">
var container = document.getElementById( 'st-container' )
Into this:
<div id="st-container" class="st-container">
var container = document.getElementById( 'st-container' )
You can now use the button to make the side bar appear, this will make it appear under all your content at the moment.
JSFiddle for example
Update to come:
Updated JSfiddle to show menu above content