Push-slide sidebar

JavaScript
1

Hi all am having some issues w/creating a push-slide sidebar and created a code pen.
so far i can’t even get the sidebar to console.log a click

http://codepen.io/pdxSherpa/pen/KwqYdJ

could i get some advice?
thx
d

2

have been trying to simply and been working over my code. with some online search tried this


$(".sideToggle").toggle(function() 
{
        $('#secondary').removeClass(".widget-area").addClass(".widget-area-open");

}, function() {
        $('#secondary').removeClass(".widget-area-open").addClass(".widget-area"); 

});

but even then i get

Uncaught ReferenceError: $ is not defined
(anonymous function)

Any advice please?
thx
D

3

It seems that you haven’t loaded the jQuery library.

Put jquery somewhere close to your page, such as in a js folder and load it from a script tag.

<script src="js/jquery-1.11.2.min.js"></script>

Get that side of things sorted out and you can move on from there.

4

Hey Paul. thx but that shouldn’t be the issue.
using wp. it comes w/jquery and also tested placing the code straight in the footer.
Did not work either.
D

5

Maybe it shouldn’t be, but if $ is not defined it’s a safe bet either jQuery isn’t getting loaded before it’s needed or it’s not in “no conflict” mode and another library is over-riding $

Maybe try adding
var $ = window.jQuery;

6

howdy mittiniague, i tried your suggestion added that bit of code at the top of the code i have
and also just to check added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
to the header. so now i have

$('#sideToggle').toggle(function() 
{
        $('#secondary').removeClass('.widget-area').addClass('.widget-area-open');
		console.log("dog gone it");
}, function() {
        $('#secondary').removeClass('.widget-area-open').addClass('.widget-area'); 

});

weird but now the toggle just dissapears to the left on page loading. w/out any other action on my part.
D

EDIT
This post has been reformatted by enclosing the inline code with backticks
`
before and after the code.

7

& think it should be an onclick event actually so:

$('#sideToggle').click(function() 
{
        $('#secondary').removeClass('.widget-area').addClass('.widget-area-open');

}, function() {
        $('#secondary').removeClass('.widget-area-open').addClass('.widget-area'); 

});
8

If it helps, .toggle() method was removed in jQuery 1.9 in favour for using .toggleClass() instead.

9

will give it a shot thx Paul
D

10

ok pretty beffuldeled.
i enqued the jquery & js in the functions.php

wp_enqueue_script( 'my-jquery', get_template_directory_uri() . '/js/jquery-1.11.2.min.js','20130115', false );
wp_enqueue_script( 'my-sidebar-script', get_template_directory_uri() . '/js/sidebar.js','20150126',true);

i have this code in the sidebar.js

jQuery(document).ready(function($){
	$('#sideToggle').click(function(){
		$("#content").removeClass( ".site-content" ).addClass( ".site-content-open" );
		alert("damit");
	});
});

the alert works. but the class is not replaced, it is added so now i see

class="site-content site-content-open"

but i see no error in the code. & the console gives no errors either.
D

11

never mind.
removed the “.” now it kinda works

.removeClass( "site-content" ).addClass( "site-content-open" );
12

ok finally got it even closer to working with this:

jQuery(document).ready(function($){

	$('#sideToggle').click(function(){
		$("#secondary").animate({
			left: "+=275",
		  }, 50, function() {});
		$("#primary").css({
			"padding":"0px 0px 0px 275px"
		  }); 
		  
	});
	
	$('#secondary').click(function(){
		$("#secondary").animate({
			left: "-=250",
		  }, 50, function() {});
		  $("#primary").css({
			"padding":"0px 0px 0px 50px"
		  }); 
	});
});

however now my prob is if the user clicks a second time on the #secondary div it vanishes entirely.
I did try a .classToggle instead of click but that of course didn’t work as am not switching classes but animating.
how could i fix this please?
thx
D

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.