Getting the ID of a button

Hi Everyone,

I am using a simple jQuery script to make my website mobile friendly. However I need it to be able to differentiate between which menu it should open when each button is clicked. I thought the easiest way to do so would be to simply have each button have a different ID and when it was clicked, jQuery would find that button's ID and add it to the body element. Then I would use simple CSS to open the corresponding menu with the same ID. Here is the code I wrote to work:

window.onload =  function(){

    var body = document.body,
        mask = document.createElement("div"),
        wrapper = document.querySelector( ".wrapper" ),
        menuToggle = document.querySelector( ".menu-toggle" ),
        activeNav
    ;
    mask.className = "mask";

    /* slide menu left */
    menuToggle.addEventListener( "click", function(){
        classie.add( body, menuToggle.attr('id') );
        wrapper.appendChild(mask);
        activeNav = menuToggle.attr('id');

    } );

    /* hide active menu if mask is clicked */
    mask.addEventListener( "click", function(){
        classie.remove( body, activeNav );
        activeNav = "";
        wrapper.removeChild(mask);
    } );
};

Code (JavaScript):

However it keeps pulling an error for this bit of it:

menuToggle.attr('id')

Code (JavaScript):

Any ideas on what I would use instead to find the ID of the button?

 

Why aren't you using jQuery functions and code, if you're using jQuery? Why don't you just add a class to each menu element, when clicked, find the id, and use that for whatever? The code would be something like this:

$('.menu').click(function() {
var thisID = $(this)attr('id');
// do stuff with id
})

Code (markup):

 

Thanks for the quick response! That is effectively what I am trying to do. Here is the code I am using now:

window.onload =  function(){

    var body = document.body,
        mask = document.createElement("div"),
        wrapper = document.querySelector( ".wrapper" ),
        activeID
    ;
    mask.className = "mask";

    /* slide menu left */
    jQuery('button.menu-toggle').addEventListener( "click", function(){
        activeID = jQuery(this).attr('id');
        classie.add( body, activeID );
        wrapper.appendChild(mask);
    } );

    /* hide active menu if mask is clicked */
    mask.addEventListener( "click", function(){
        classie.remove( body, activeID );
        activeID = "";
        wrapper.removeChild(mask);
    } );
};

Code (JavaScript):

But everytime my page loads I am not getting an "undefined is not a function" error on this line:

    jQuery('button.menu-toggle').addEventListener( "click", function(){

Code (JavaScript):

Any ideas on why that is or what I should change that to?

 

I just dont understand why you're doing it so complicated, creating elements, appending them, etc, instead of just show/hide or class-swap whatever it is you want to hide/ show. And whats with the addeventlistener and so on? They're not needed.

 

Thanks for the help. I managed to solve it. The reason I did it that way is because I have multiple fly out menus that do different things so I need to use variables for the script itself.

Thanks so much again!

 

Hi. I suddenly figured out you probably looked at this: http://callmenick.com/post/slide-and-push-menus-with-css3-transitions - the code there is a dead ringer for the code you posted - however, the code in that example is pure javascript, and have nothing to do with jQuery - hence why I was a bit confused. Using jQuery, you could do this a lot simpler, even with multiple menus. Glad you figured it out, though.

 

Mistake #1 : jQuery
Mistake #2 : JavaScript to make a site mobile friendly.

Just ... trash it now.

Though you don't actually seem to be using jQuery in your example code... if you want the ID of the element returned by a click event, modify your script thusly:

	menuToggle.addEventListener( "click", function(e) {
		e = e || window.event;
		var origin = e.target || e.srcElement;

Code (markup):

Origin should now be the element that triggered the click event, so origin.id should be the ID of said button.

Though since this seems to be a menu open/close I'm wondering why you're wasting scripttardery on it now that CSS3 is here, and screwing around swapping a class on BODY... but to weigh in more on that I'd have to actually see the whole page.

But generally speaking, scripttardery for navigation does NOT make a website more mobile friendly; quite the opposite in fact!

 

Thanks for the input. The menu is used so that we can hide our main navigation on a mobile device and make the website as mobile friendly as possible in terms of layout.

The reason that we used JavaScript instead of CSS3 is simply because we were able to alter several aspects of the website based on when the menu is open. For example when the menu is open, the hamburger menu button turns into an X underneath the mask for useability.

I hope that made sense. It was actually your advice that got us started on our new design. We completely scraped our old layout and are redesigning from an absolute base boilerplate. Its been about 2 months now and we are 90% to completion now I would guess.

We will keep you updated for sure though.

 

You don't need scripting for that...

Or that either actually. No joke...

<div id="mainMenu">
	<a href="#mainMenu" class="showMenu"></a>
	<a href="#" class="hideMenu"></a>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">etc, etc</a></li>
	</ul>
<!-- #mainMenu --></div>

Code (markup):

When you go mobile in your queries, just:

.showMenu {
	display:block;
}

.showMenu:before {
	content:"Show Menu";
}

.hideMenu:before {
	content:"Hide Menu"; 
}

#mainMenu .hideMenu,
#mainMenu:target .showMenu,
#mainMenu ul {
	display:none;
}

#mainMenu:target .hideMenu,
#mainMenu:target ul {
	display:block;
}

Code (markup):

Just change the generated content or appearance of .showMenu / .hideMenu as desired in the generated content. No scripttardery, no abuse of things like button or input, no class swapping -- and it will even scroll the page to the top of the menu when you open it. YES, it's just that simple.

Admittedly, doesn't work in IE8/earlier, but neither does responsive layout so who cares?

I hate the uselessly vague "hamburger icon" garbage -- much more a fan of actual TEXT with a up or down triangle as appropriate; usually easier too since most every font supports utf-8 geometric shapes... usually it's far more useful anyways as it lets you make for a larger target.

If ANYONE tells you that using JavaScript is going to make something easier to use on mobile, they don't know enough about mobile users to be flapping their gums on the topic!