Register in pop-up box?

Zhaan

Hiya! I'm just wondering.. is it possible to use a pop-up box for registrations instead of a separate page? I'd like it to function just like the login button does. Any input appreciated.

PS: I'm using 2.1 atm.

x00

or...

jQuery(document).ready(function($){$('.ApplyButton').popup();});

vrijvlinder

yea that works for sure, x00 you rule !!

vrijvlinder

try this code for style adjust colors as needed:

body.Profile #Form_Invitation ul li label, body.Profile #Form_User ul li label, div.Popup form ul li label {
color:#fff;
display: block;
font-size: 14px;
font-weight: bold;
margin: 10px 0 0;
}
div.Popup a {
color: #ccc;
}
div.Popup h1, div.Popup h2 {
color: #000;
font-size:16px;
background:red
border:1px solid #222;
}
div.Popup .Body {
background: #222;
width: 320px;
}
div.Popup .Legal, div.Popup .Content form {
max-height: 640px;
overflow: auto;
padding: 0 10px 10px;
}

vrijvlinder

The pop up are controlled by jQuery popup. not sure how this will work but you could try it...

You could possibly add some function like this in your theme:

< script type="text/javascript" >
 
$(document).ready(function(){
//open popup
$("#pop").click(function(){
$("#Form_User_Register").fadeIn(1000);
positionPopup();
});
 
//close popup
$("#close").click(function(){
$("#Form_User_Register").fadeOut(500);
});
});
 
//position the popup at the center of the page
function positionPopup(){
if(!$("#Form_User_Register").is(':visible')){
return;
}
$("#Form_User_Register").css({
left: ($(window).width() - $('#Form_User_Register').width()) / 2,
top: ($(window).width() - $('#Form_User_Register').width()) / 7,
position:'absolute'
});
}
 
//maintain the popup at center of the page when browser resized

$(window).bind('resize',positionPopup);
 
< /script >

Then style it if it has no style

#Form_User_Register{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}

then add this to the theme:

< a href="/forum/entry/register?Target=discussions" class="Button ApplyButton" id="pop" >PopUpRegister< /a >
< br />
< form id="Form_User_Register" style="display:none" >
< h2> Register..< /h2>
< label >Username: < /label>< br />< br />
< label >Password: < /label>< br />< br />
< input type="button" value="Login" />
< a href="#" id="close" >Close< /a>
< /form >

Make sure you remove the spaces between the < > , I put them in so the code would show...

x00

or...

jQuery(document).ready(function($){$('.ApplyButton').popup();});

vrijvlinder

yea that works for sure, x00 you rule !!

Zhaan

Thanks for the input, both of you!

@x00 and where exactly should I place that code?

vrijvlinder

in your theme like this but remove the spaces between the < > :

< script type="text/javascript" > jQuery(document).ready(function($){$('.ApplyButton').popup();}); < /script > tags

I just tested it in another forum and it works but you will need to style the width and height of the new pop up.

vrijvlinder

try this code for style adjust colors as needed:

body.Profile #Form_Invitation ul li label, body.Profile #Form_User ul li label, div.Popup form ul li label {
color:#fff;
display: block;
font-size: 14px;
font-weight: bold;
margin: 10px 0 0;
}
div.Popup a {
color: #ccc;
}
div.Popup h1, div.Popup h2 {
color: #000;
font-size:16px;
background:red
border:1px solid #222;
}
div.Popup .Body {
background: #222;
width: 320px;
}
div.Popup .Legal, div.Popup .Content form {
max-height: 640px;
overflow: auto;
padding: 0 10px 10px;
}

vrijvlinder

I noticed that the pop up does not render the captcha on the form, I wonder if it also need to be added to the pop function to show. in the source it has the li table as if it was showing. I tried making the form longer but that did not do it

Srggamer

Have to say I fail, when tried this.

Inserted everything into CUSTOM.CSS

vrijvlinder

You need to insert the script function in the theme default.master.php somewhere after the last div at the bottom end. The css goes into the custom.css to adjust the size of the pop up. Remember I added spaces between the < > so they would show here. You need to take them out if you copy pasted .

Srggamer

@vrijvlinder said:
You need to insert the script function in the theme default.master.php somewhere after the last div at the bottom end. The css goes into the custom.css to adjust the size of the pop up. Remember I added spaces between the < > so they would show here. You need to take them out if you copy pasted .

Ok till then, im working on my master.php

Vanillaplus

please tell me how to add it to my forum... http://edupluslanka.org