Develop Reference

Toggle menu with Jquery not working

I want to make a toggle menu with jquery in this page: http://propertymanagementoh.com/new-short-header-page/ .There is a menu in the right top. I want to make it toggle when someone will click on the "Menu ☰" button then the menu will appear and again when click on the button then that will disappear(like this: http://www.titleonemanagement.com/ ). I have written the following code but it is not working:
<script>
$(document).ready(function(){
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
});
});
</script>
Also used the following css:
#block-38 .menu{
position:fixed;
top:0;
right:0;
width:250px;
overflow:hidden;
z-index:999999;
}

There were two jquery scripts being used, meaning that the jQuery.noConflict(true) was causing an issue with the second set of jquery instructions.
Advised user to combine scripts and it worked!
:)
Additional help as per comment:
A few things need to be done to assist with this.
1) In your css add this:
#block38 .nav-vertical.active {
rgba(0,0,0,.5);
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100%;
}
#whitewrap.notactive {
margin-left:-235px;
}
2) Change your jquery from
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
});
to:
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
$("#block38 .nav-vertical").toggleClass("active");
$("#whitewrap").toggleClass("notactive");
});
You need to add in another button once the menu is open so that the user can close it.
To do the cross:
Make an image or div and give it the class of "closeNav".
Then change your jquery:
$("#block-37, .closeNav").click(function(){
$("#block-38 .menu").toggle();
$("#block38 .nav-vertical").toggleClass("active");
$("#whitewrap").toggleClass("notactive");
});

Using jQuery to add a fixed position to a div

I am trying to achieve the effect of an div scrolling until it reaches the top and just stays there.
I have achieved this with:
HTML
<div id="nav">this is nav</div>
<div id="mooey">
<div id="theFixed" style="position:fixed; background-color:red">SOMETHING</div>
</div>
CSS
#mooey {
background: green;
min-height:250px;
margin-top:300px;
}
#nav {
background:#000000;
position:fixed;
top:0;
width:100%;
height:100px;
}
JavaScript
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(100, 300 - $(this).scrollTop()));
});
What I want to do, Instead of stating that the div theFixed is fixed in the style in the HTML. I was wondering if there was a way of applying this using the code.
Reason being is that if the script isn't enables or fails for whatever reason - I want the theFixed div to scroll along with the mooey div rather than be stuck in the middle of the page.
You can see what I have done here:
http://jsfiddle.net/susannalarsen/4J5aj/7/
Any ideas for this?

Use $('#theFixed').css('position','fixed'); to pin it down.

<script>
$(document).ready(function(){
$("#FixedElement").css("position","fixed");
});
</script>

Un-hide div when window is scrolled down using jQuery and CSS

I'm trying to display a small 'back to top' div when I scroll down on my site.
Here is the code for my div (the style is inline whilst in development until I go through and move it all to a base.css file later on).
<div id="backToTop" style="position:fixed; right:10px; top: 200px; width: 50px; height:50px; color:#ffffff; background-color:#000000; visibility:hidden">Back to Top</div>
Fairly straightforward as you can see. I'm then trying to use jQuery to detect when the window has been scrolled down slightly to then show the div:
$(window).scroll(function(){
if($document).scrollTop() > 0){
$('#backToTop').show();
}else{
$('#backToTop').hide();
}
});
My problem is that the script doesn't appear to be triggered. When I scroll down the page, the div does not appear.
I have additional jQUery on my page for form validation so I have tried including this alongside that function within:
$().ready(function(){ /* Code goes here */ }
I've also tried including it outside of this but I've had no joy. I'm using Twitter bootstrap for the remainder of my page.
If anyone could point me in the direction of why this perfectly valid code isn't working, that would be great.
Cheers,
J

You have a typo in your code:
if($document).scrollTop() > 0){
There's a missing (:
if( $(document).scrollTop() > 0 ) {
^
Here's a working example: http://jsfiddle.net/U7scm/
Edit
I also noticed that you're setting visibility: hidden. jQuery's .show() and .hide() functions will toggle the display property, so use display: none instead of visibility: hidden

How can I "hide" a website using jQuery or javascript AND require a password?

So I'm creating a wedding website for a family member and want a very simple way for people to enter a password before it reveals the site. It doesn't need to be secure.
I was thinking I could have a white "layer" above the website with a simple password form on it (the website will load underneath it). Then, when the password is entered, the white layer disappears and the website appears.
Can someone help me?

Here is a working example.
HTML
<div class="page">
HERE IS MY PAGE
</div>
<div class="cover">
HERE IS THE COVER
</div>
JavaScript (jQuery)
$('.cover').click(function(){
$(this).fadeOut(1000, function(){
$(this).remove();
});
});
CSS
.page{
background-color:green;
height:200px;
}
.cover{
background-color:yellow;
height:200px;
z-index:200;
position:fixed;
top:0;
left:0;
float:left;
width:100%;
}
See it on JSFiddle.

Uh.. since you've said it doesn't need to be secure (shudders), you'll be able to get away with......
Wrapping everything that pertains to your website in some container, let's say a div, throw a class on it 'main-content'. You have several options as to how you would like to hide it:
CSS display:none;
inline style: display:none;
height:0px;
In addition to your 'main-content', create a div on a similar level and give it an identifier, i.e. class of 'login-content'. Leave this untouched (i.e. visible).
When the DOM loads your login-content should be visible, whereas the main-content won't be.
When the user has 'successfully logged in', revert the styles. i.e. main-content -> display:block;, height:100%, whatever..

With the help of js you can do this:
var password;
var pass1="1234567";
password=prompt('Enter your password',' ');
if (password==pass1) {
$('body').show();
} else {
$('body').hide();
}
This is the source if you want more information:
http://www.pageresource.com/jscript/jpass.htm

Click doesn't always trigger toggle-event

I have sort of an imagemap, which is basically a lot of absolutely positioned divs, which, when clicked, will show or hide a tooltip. Looks pretty great, apart from the fact, that it doesn't always "work". It sounds silly, but some times I will have to click a couple of times to trigger the event. Maybe I'm just not clicking hard enough? ;)
Markup
<div class="container">
<img src="img.png" />
<div class="trigger"
<div class="tooltip">
Awesome tooltip is awesome!
</div>
</div>
</div>
Style
.container {
width:100px;
height:100px;
position:relative; }
img {
position:relative; }
.trigger {
width:50px;
height:50px;
position:absolute;
top:50px;
left:50px; }
.tooltip {
width:100px;
height:20px;
position:absolute;
top:35px;
left:35px;
display:none; }
Javascript
$(".trigger").toggle(function () {
$(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
}, function () {
$(this).children(".tooltip").fadeOut(200);
});
The markup and CSS is simplified, but imagine I have several tooltips over the image. When I open one tooltip, all others should be closed. I'm guessing this is where things go wrong, but I can't see the error.
In a similar function on the same site, I've semi-dynamically added some IDs, and hide all that is :not(ID), but I just can't believe that should be necessary.
EDIT:
Behold, a Fiddle: http://jsfiddle.net/CfYRv/

change your javascript to something like
$(".trigger").click(function () {
$(".tooltip").fadeOut();
$(this).children(".tooltip").fadeIn();
});

Gah! Need to finish my homework, but long answer short: toggle doesn't work here because you toggle a submenu but then click another. this hides the first submenu, but it's still considered open (it was only hidden). Thus you need to click it twice to open it... I hacked together an alternative but it's not the best code. It'll at least give you an idea what needs done:
http://jsfiddle.net/uj2A4/
$(".trigger").click(function () {
if($(this).hasClass("active"))
$(".tooltip",this).fadeOut(200);
else {
$(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
}
$(this).toggleClass("active");
$(this).siblings(".trigger").removeClass("active");
});

Rather than toggle, let's use click: http://jsfiddle.net/CfYRv/3/
This assigns the "active" tooltip a css class "ttactive". Clicking on "some trigger" will fade out every active tooltip, and activate the one you just clicked. If the one you just clicked was the active one, all it does is fade that one out.

You could probably still use toggle this way:
$(".trigger").click(function () {
$(this).children(".tooltip").stop(true, true).toggle();
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
});