Develop Reference

toggleClass does't work, but addClass does

I have imported jQuery and Bootstrap in my HTML page already.
Anyhoo, I wanted to toggle a dropdown menu once I click on the little menu image.
Here's how I hide my menu dropdown:
.menu {
height:150px;
width:155px;
background-color:black;
border-radius:5px;
position:absolute;
top:-10px;
left:100%;
padding-left:0;
}
.menu-active {
position:absolute;
top:35px;
left:60%;
}
To make it responsive, I first tried addClass (menuBtn is the button image and I got):
$('.menuBtn').click(function(){
$('.menu').addClass('menu-active');
})
Which works pretty smooth, though it's always ignored if I added time like addClass('menu-active', 1000), but this is a minor problem! I want to make it toggle, so I tried to change it to toggleClass:
$('.menuBtn').click(function(){
$('.menu').toggleClass('menu-active');
})
Even when I intended to bypass toggle and just use if like:
function menuDropdown(){
$('.menuBtn').on('click', function(){
if($('.menu').hasClass('menu-active')){
$('.menu').removeClass('menu-active');
}else{
$('.menu').addClass('menu-active');
});
}
Both of these don't work, the website just ignored them thoroughly.
I know bootstrap does have a simpler way to do this, I just wanna see what can I write on my own.

Here is one way to solve the problem. Create an ID and use that to refer to your menu instead of trying to use the menu class:
HTML:
<div id="toggler" class="menu">Menu Example</div>
<button type="button" class="menuBtn">Click me</button>
JQuery:
$('.menuBtn').click(function () {
$('#toggler').toggleClass('.menu-active menu');
});
Notice how the above toggles both the .menu-active and the .menu class based off of the #toggler ID.
A working example: http://jsfiddle.net/gratiafide/vubsv2pt/12/

Trying to create notification box when clicking a button

I have been having some trouble in creating a simple notification box. Basically the objective here when I click the submit button input type=button it will display a simple notification box like this.
http://i255.photobucket.com/albums/hh140/testament1234/onclick_zps124dc641.png
I have been told a plugin is not necessary for this kind of thing. I'm still in the process of learning Javascript and would like to ask for some advice on how i can obtain this kind of result.
I have tried using alert but it seems it cannot be styled and I need to use jquery instead.

you can use jquery ui dialog, if you're planing to use jquery. Have look: http://jqueryui.com/dialog/

This will give you a decent walkthrough as well as the code to do what you are looking for without using plugins. These are often called "modal dialogs".
http://javascript.about.com/library/blmodald2.htm

You need to create the box using css and show/hide it using jquery. Once you have the css for the box applied to say a class named .box
.box {
width: 200px;
border:2px solid red;
padding:10px;
}
.box .title {
float:left;
}
.box .close {
float:right;
cursor:pointer;
}
.box .content {
margin-top:10px;
}
.clear {
clear:both;
}
#dialog {
display:none;
}
So now you have the box with the following :
<div class="box" id="dialog">
<div class="title">Almost there</div>
<div class="close">X</div>
<div class="clear"></div>
<div class="content">Thank you for subscribing....</div>
</div>
<button id="showdialog">Show</button> <!--This is trigger for the dialog-->
Now let's keep the box hidden on load
#dialog{
display:none;
}
So we trigger the dialog to be shown when the button is clicked
$("#showdialog").click(function () {
$(".box").show();
});
$(".box .close").click(function () {
$(this).parent().hide(); //When the x button is clicked, the dialog is hidden
})
This will show/hide the dialog in place. If you want to center it, or something, use static positioning
#dialog {
display:none;
position:fixed;
left:20%;
top:20%;
}
JSFiddle demo here: http://jsfiddle.net/zbaNe/
Or you can use a premade dialog plugin like jquery ui dialog(or bootstrap alerts)
Try noty.js , I highly recommend it

Menubar like Wordpress admin menu

I'm trying to find a javascript library (better if can be done usiny jquery) to replicate more or less the functionality of the top menubar of wordpress once you are logged. You can add images/links on the left, on the right, or both sides.
The most javascript menus libraries that I've found are not as nice as this one, some of them only add buttons/link on one side or centered ...
See the attached image.
thanks

EDIT:
Bootstrap provides this functionality out of the box. Even if you don't need the entire Bootstrap framework, it's easy to separate what you need from the rest.
For a quick and simple sticky navigation bar (with none of the more involved extras, such as drop-down menus, etc.), you can use the following CSS:
#bar {
position:fixed;
top:0;
left:0;
right:0;
height:36px;
background: black;
}
... and then add whatever you need to it, e.g.
<div id=bar>
<img class=bar-left src=logo.png />
<div class=bar-right>Login button!</div>
</div>
and the CSS:
.bar-left {
float:left;
}
.bar-right {
float:right;
}
This works well enough. As for jQuery, you could use it to dynamically add elements to the navbar with its .append() and .prepend() methods.

Watermark mootools help

I'm a mootools beginner. I know a lot of html and css but javascript is not for me (at least now that I'm starting to learn it)...
I saw this post: http://davidwalsh.name/mootools-watermark
This post features this "watermark - Go To Top" button.
html:
Top of Page
css:
#gototop { display:none; position:fixed; right:5px; bottom:5px; }
javascript:
<script type="text/javascript">
window.addEvent('domready',function() {
new SmoothScroll({duration:500});
var go = $('gototop');
go.set('opacity','0').setStyle('display','block');
window.addEvent('scroll',function(e) {
go.fade((window.getScroll().y > 300) ? 'in' : 'out')
});
});
</script>
What I pretend is that the link don't be as display:none; in the css because if the user doesn't have javascript turned on then the user will not see the button.
So, what I want is to hidde it and show it only after the scroll being bigger than 300px. If the user doesn't have javascript turned On in his browser, then he can see the button showed all the time...
So, for this html and css, which javascirpt should I use as a toggle on/off in the display of oppacity:
Top of Page
#gototop { display:block; position:fixed; right:5px; bottom:5px; }
Can anybody help me???
Thanks, Matt

window.addEvent('domready', function() {
$('gototop').setStyle('display','none');
((window.getScrollSize().y + 300 )> window.getSize().y) ? $('gototop').fade(1) : $('gototop').fade(0)
});

Can't get JQuery show to work

I'm a beginner with javascript and I just can't seem to figure something out.
I'm trying to show an overlay div using jquery. Here's what I have
$("#loginbutton").click(function() {
alert('Ola');
$('#overlay').show();
return false;
});
The accompanying css for the overlay
#overlay {
z-index:1000;
position:fixed;
top:0;
bottom:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
visibility:hidden;
}
Pressing the login button will show the alert but not the div. Has anyone got a clue why this is not working?
Thanks

Change visibility:hidden to display:none
I believe the $.show() function is shorthand for the display:block attribute which would replace your display:none
However, if you have visibility:hidden then it will remain hidden

You could try:
display:none;
instead of
visibility:hidden;

display:none should work fine

you may but this calling for click event when document is completely loaded
so try
$(document).ready(function(){
$("#loginbutton").click(function() {
alert('Ola');
$('#overlay').show();
return false;
});
)};