WordPress.org

Forums

Twenty Eleven
[resolved] small-menu.js click doesn't work..? (17 posts)

  1. domdomdom
    Member
    Posted 1 year ago #

    Hello, I've been trying to add small-menu.js to my website. When the screen is smaller, the main menu disappears, words 'Main Menu' appear instead, which is the right way forward, but it doesn't click in order to open the menu and I can't manage to find the problem.
    The site is under construction, but I duplicated the menu problem here.

    Here is my small_menu.js script:

    /**
     * Handles toggling the main navigation menu for small screens.
     */
    jQuery( document ).ready( function( $ ) {
    	var $subsidiary = $( '#branding' ),
    	    timeout = false;
    
    	$.fn.smallMenu = function() {
    		$subsidiary.find( '#access' ).addClass( 'main-small-navigation' );
    		$subsidiary.find( '#access h3' ).removeClass( 'assistive-text' ).addClass( 'menu-label' );
    		$subsidiary.find( '#access .menu-handle' ).addClass( 'menu-toggle' );
    
    		$( '.menu-toggle' ).unbind( 'click' ).click( function() {
    			$subsidiary.find( '.menu' ).toggle();
    			$( this ).toggleClass( 'toggled-on' );
    		} );
    	};
    
    	// Check viewport width on first load.
    	if ( $( window ).width() < 800 )
    		$.fn.smallMenu();
    
    	// Check viewport width when user resizes the browser window.
    	$( window ).resize( function() {
    		var browserWidth = $( window ).width();
    
    		if ( false !== timeout )
    			clearTimeout( timeout );
    
    		timeout = setTimeout( function() {
    			if ( browserWidth < 800 ) {
    				$.fn.smallMenu();
    			} else {
    				$subsidiary.find( '#access' ).removeClass( 'main-small-navigation' );
    				$subsidiary.find( '#access h3' ).removeClass( 'menu-label' ).addClass( 'assistive-text' );
    				$subsidiary.find( '#access .menu-handle' ).removeClass( 'menu-toggle' );
    				$subsidiary.find( '.menu' ).removeAttr( 'style' );
    			}
    		}, 200 );
    	} );
    } );

    I added this to the functions.php to enqueue the script in the footer:

    wp_enqueue_script( 'small_menu', get_template_directory_uri() . '/js/small_menu.js', array( 'jquery' ), '20120206', true );

    Thanks

    [Moderator Note: No bumping. If it's that urgent, consider hiring someone.]

  2. domdomdom
    Member
    Posted 1 year ago #

    Hi, could anyone give me a helping hand with this problem above?.. thanks :}

  3. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    You don't have an element with the class of "menu-toggle", where did you get this JS from? Have you tried talking to the people who gave it to you?

  4. domdomdom
    Member
    Posted 1 year ago #

    Hi Andrew! Thanks a million for replying :)
    I found it online so didn't have anyone to speak about it to.. I first used Cazuela theme's small-menu.js and their jquery call (I worked with Cazuela before and liked small-menu), then searched other themes using this small-menu.js trying to find where I was failing, and in the end the code I've used last (and above) was from this support forum topic as the person said it had worked for him..
    Could you tell me where I should add "menu-toggle" class element?
    EDIT: do I add it to html header.php after navigation and call wp nav inside it?...

  5. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    I don't know where it should be, before the menu? It's up to you, but you really need to make sure you have the elements that the jQuery is trying to target.

  6. domdomdom
    Member
    Posted 1 year ago #

    Thanks, I'll try to work on it now that I know what I'm missing, you're a star, thanks again! :)

  7. domdomdom
    Member
    Posted 1 year ago #

    Hi Andrew,
    I've been looking into adding class element that jquery is targeting and am a bit lost- i looked at html & source code of cazuela theme demo, and this fiddle and it doesn't look like either of them have elements in their html that jquery is targeting.. (in jsfiddle there's no 'open' class in the html, only in javascript and css) Cazuela picks up the class when the screen is smaller, but doesn't address it in general html markup (or I can't find it). I thought that jquery adds the class and then I can shape & style class element in css.. or am i missing something big time?...

  8. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Is that fiddle page using different jQuery to the above?

  9. domdomdom
    Member
    Posted 1 year ago #

    Yea it is different, but I thought that 'addClass' and 'removeClass' would still work the same way, i.e. remove classes that are in the html code, and add the ones that aren't? Cazuela theme above uses small menu and I use their small-menu.js script and they don't seem to have small menu classes in their general html markup? Or am I getting it all completely wrong?

  10. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    I think you need to create your own version of this instead of using another theme's. You can use another theme for guidance but the JS shouldn't be exact.

    Can you set up a page like the one you linked in the first post but without this JS and link us that?

  11. domdomdom
    Member
    Posted 1 year ago #

    I did try changing the id's and class names but that was it.. Yup, here is the JS-less link. In the original site under construction menu is horizontal though and two items are on the left side of the logo, and two- on the right side, but just copying the style.css didn't move that over.. but hopefully that's not a problem for JS?

  12. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Try this:

    $ = jQuery;
    var $windowWidth = $( window ).width();
    
    $( document ).ready( function() {
    	mobileMenu();
    });
    
    $( window ).resize( function() {
    	$windowWidth = $( window ).width();
    	mobileMenu();
    });
    
    function mobileMenu() {
    
    	var $menu      = $( '#menu-menu-1' );
    	var $toggleBtn = $( '.toggle-menu' );
    
    	if ( $windowWidth <= 360 ) {
    
    		//Hide the menu
    		$menu.hide();
    
    		//Only add the toggle button if it doesn't exist
    		if ( $toggleBtn.length == 0 ) {
    			$menu.before( '<a href="#" class="toggle-menu">Toggle menu</a>' );
    		}
    
    		//On click of the toggle button
    		$toggleBtn.click( function() {
    			//Show or hide the menu
    			$menu.toggle();
    		});
    
    	}
            //If the window size is greater than your breakpoint
            else {
    
    		//Show the menu
    		$menu.show();
    
    		//Hide the toggle button
    		$toggleBtn.remove();
    
    	}
    
    }

    You can change the 360 value here to your breakpoint:

    if ( $windowWidth <= 360 ) {
  13. domdomdom
    Member
    Posted 1 year ago #

    thanks,
    i added toggle-menu class to header.php just after the assistive-text class:
    <div class="toggle-menu"><?php _e( 'Main menu', 'twentyeleven' ); ?></div>
    and pasted the code you gave me above into my small_menu.js file (is it okay to keep it under that name?- I just thought to keep the same name as I have already enqueued the script with that name)
    I tried it both on the site that's under construction and the duplicate site, but only "Main menu" is showing up.. did i add toggle-menu class element incorrectly?
    Really appreciate you helping me! :)

  14. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Try copying my code again - maybe you copied my code from within your email? It's corrupted at the moment.

    did i add toggle-menu class element incorrectly?

    With the code I suggested you don't need to create any other elements.

  15. domdomdom
    Member
    Posted 1 year ago #

    Hi Andrew, yes the toggle works! - I copied the code from here before but it had entity names instead of symbols.
    Toggle now works thanks so much! Just got to mess about with styling now- I'm working with media queries, is that the right way forward? :)
    Thanks again :)

  16. domdomdom
    Member
    Posted 1 year ago #

    Hi Andrew and other helpers! :)

    So I'm back, soon finishing the website and the problem is, that the menu toggle doesn't always work.. If you go here again, where I duplicated the menu and the problem, if you resize the window, or go on the phone, sometimes menu doesn't open at all if I click on the menu-toggle button.. Any chance you can check what is the problem with it? Would really appreciate it!

    I was also wondering if there's something to add to the script so that the children items open up right underneath the parent item if the parent item is clicked on, pushing the rest of the menu items down? Because now it opens up floating, and in my original website I can't click on any of the child menu items when visiting the site on the phone..?

    Thanks a lot,
    Dom

    Here's the mobile menu script I have that you gave me:

    $ = jQuery;
    var $windowWidth = $( window ).width();
    
    $( document ).ready( function() {
    	mobileMenu();
    });
    
    $( window ).resize( function() {
    	$windowWidth = $( window ).width();
    	mobileMenu();
    });
    
    function mobileMenu() {
    
    	var $menu      = $( '#menu-menu-1' );
    	var $toggleBtn = $( '.toggle-menu' );
    
    	if ( $windowWidth <=768 ) {
    
    		//Hide the menu
    		$menu.hide();
    
    		//Only add the toggle button if it doesn't exist
    		if ( $toggleBtn.length == 0 ) {
    			$menu.before( '<a href="#" class="toggle-menu"><span>☰</span></a>' );
    		}
    
    		//On click of the toggle button
    		$toggleBtn.click( function() {
    			//Show or hide the menu
    			$menu.toggle();
    		});
    
    	}
            //If the window size is greater than your breakpoint
            else {
    
    		//Show the menu
    		$menu.show();
    
    		//Hide the toggle button
    		$toggleBtn.remove();
    
    	}
    
    }

    And that's how I enqueued the script in functions.php:

    function wpb_adding_scripts() {
    wp_register_script('small_menu', get_template_directory_uri() . '/js/small_menu.js', array('jquery'),'20120206', true);
    wp_enqueue_script('small_menu');
    }
    
    add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
  17. domdomdom
    Member
    Posted 1 year ago #

    got it sorted differently with this tutorial- in case someone gets stuck like me! - http://bhoover.com/simple-jquery-mobile-menu/
    (didn't de and re-register the jquery though)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.