Develop Reference

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

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.

Change button background-color on clicking itself

Let's say I have #button with a given background-image:url(images/some_background) and I want to change it to another background when I click it, let's say url(images/other_background).
HTML
<a id="button" ></a>
CSS
display: block;
height:100px;
width:100px;
background-image:url(images/other_background.png)
I tried this, but it doesnt work :
$(document).ready(function(){
$('#button').click(function(){
$('#button').css('backgroundImage', 'url(images/other_background.png)');
});
});

This works for me
CSS
#button{display: block; height:100px; width:100px;
background-image:url(http://cheeptalk.files.wordpress.com/
2009/05/smurfs-hefty-smurf-100x100.png?w=96&h=96); border:1px solid red;}
border to see easier only
code
$('#button').click(function(){
$(this).css('backgroundImage','url(http://images.mirror.co.uk/upl/m4/\
feb2010/9/3/mr-t-100x100-938742195.jpg)');
});
http://jsfiddle.net/jasongennaro/Lvnmw/
Obviously, you will need to switch out the images for your own.
If you are having trouble, check
That you are calling the jQuery script first, before this script.
That the path to your images is correct.

alittle off-topic, but you should consider using sprites instead of 2 completely seperate images.
Why? Becuase for slower connections and on certain browsers, the click event will cause a 'flicker' as the new image is being downloaded then loaded. Sprites will gaurentee the image is already loaded and so you just need to change the background-position to 'load' the new image.

Try this:
$("#button").css("background-image", "url(/images/otherbackground.png)");
OR
$(this).css("background-image", "url(/images/otherbackground.png)");

how to do css div pop up scrollable using only javascript?

I want to display some text in a inline popup window with ok/close button.
I implemented and bit modified Custom Alert but sometimes the text has too many lines so I need the window scrollable.
I want to use only javascript. No framework nor libraries.

you should be able to accomplish that with css
With the default style it would be like this:
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
overflow:auto;
}
Example on jsfiddle.
Also as Casablanca points out, if you want to assign a specific class you can modify the javascript to use
msg.className = 'messageBox';
and then your own css
.messageBox{
overflow:auto;
}

How can I center the loading div before load() with jQuery?

I have this code:
$("#result").html('<div class="loading">Loading results...</div>');
$("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + $.cookie('nw-query'));
It shows the loading div until the load is done. What I want to do here, I want the loading div exactly in the center of the page/document?
That's extra but could be nice - can I also fade the document until the load is done so that the loading div stands out?
Any jquery/css suggestions are welcome.
Thank you :)

If understand you question correctly: You need to figure out how to center the loading div both horizontally and vertically? If so, I would take a look at the answers to this question: Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7.

Have you looked at jQueryUI? You could use a modal dialog for this. jQueryUi automatically centers the modal dialog and you can make the dialog disappear after it's finished loading. There is a way to remove the title bar from the dialog:
http://www.comanswer.com/question/jquery-ui-dialog-how-to-initialize-without-a-title-bar
I don't know if this is what you're looking for, but it might avoid some headaches for you later down the road (and it's pretty and you can have custom themes).

you could put a center div around your loading...
$("#result").html('<div align="center" style="width:100%"><div class="loading">Loading results...</div></div>');

.loading {
width:200px;
height:50px;
background:#CCC;
position:absolute;
top:50%;
left:50%;
margin:-25px 0 0 -100px; /* Half of height and width */
}
If you don't know width/height or it is dynamic, you can use .width() and .height() functions to get values, which should be divided by 2.

This might be a bit over-kill but the jQuery UI dialog plugin could achieve those effects (you would just not be using it for a dialog...). Check out the modal option and example. If you are using jQuery ui already, might be worth it...