jQuery - load HTML fragments?

[Perad]

Hello, could someone help me out here.

 

I have a login button which takes the user to the login page. Now... this to me seems like a slow way of logging in. I would like users who have javascript enabled to click the login button. Instead of them being forwarded to the login page, I want the login form to magically pop up on top of the web page.

 

I can do this, I can creative a div, add the html and probably with a bit of trying - get the user to login.

 

However I have a question. For maintainability, I want to have create a separate HTML file, how would I insert this into my page using Javascript?

 

Furthermore speed is crucial, is there a way to have this fragment load in the background on every page? I am not sure what would be best, i just don't want a second or two wait when the button is pressed.

 

Basically - in short - how to I load this file fragment? What is the fastest way to do this?

[seventheyejosh]

preLoad:

 

<div id="loginHolder" style="display:none;">
</div>

<div id="loginButton">
<noscript><a href="/login/">Login</a></noscript>
</div>

<script (js)>

$(document).ready(function(){

$("#loginHolder").load('loginpage.html');
$("#loginButtom").html('<a href="#" onclick="toggleLogin();">Login</a>');

});

function toggleLogin(){

if($("#loginHolder").css("display")=="none"){

$("#loginHolder").css("display","block");

}else{

$("#loginHolder").css("display","none");

}//end if

}

</script>

 

popup

 

 

<div id="loginHolder" style="display:none;">
</div>

<div id="loginButton">
<a href="#" onclick="$("#loginHolder").load('loginpage.html');">Login</a>
<noscript><a href="/login/">Login</a></noscript>
</div>


});

</script>

 

Of course this is untested for syntax errors, etc, and it is reliant on jquery...

 

I'd say there really shouldnt be a difference in preloading an html file or ajaxing it, as long as your users have normal connection speed