3.8.x Login Slider (jQuery)

cornishman

New Member
h@ck3r said:
Problem fixed.

Just delete style.css

That file is not needed.

I've also removed a load of code from slide.css that wasn't needed (May be more im not sure).

Here's the updated file
View attachment 15446
Thanks for that.

But I still have the same problem with the bar being away over to the right (OFF THE PAGE), especially in Internet Explorer.

Any fix please?
I did test it with both FF and IE(7&8) but only on the themes I have installed. I imagine you are having problems when using fixed width themes? If thats the case I'll try and get the problem fixed.
Check back later this morning please.
 

h@ck3r

New Member
Cheers bud.

The overflow width problem is terrible on fixed width styles, yet on the wide styles it's only a few pixels out.

But... in IE7- a couple of members posted screenshots and the login tab wasn't even visible as it was so far off the page- And they never seen the overflow bar at the bottom of the browser, so were stumped for logging in. Luckily a member phoned me to let me know of the problem.

Anyway.. been farting about with this for the last couple of hours and here's what I've come up with.

I replaced the login_slide template with the following code:

HTML:
		<!-- jQuery - the core -->
<script type="text/javascript" src="$vboptions[bburl]/clientscript/jquery-1.3.2.min.js"></script>
<!-- Sliding effect -->
<script type="text/javascript" src="$vboptions[bburl]/clientscript/slide.js"></script>
<link rel="stylesheet" href="$vboptions[bburl]/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="$vboptions[bburl]/css/slide.css" type="text/css" media="screen" />
<if condition="$bbuserinfo['userid'] == 0">
<!-- Panel -->
<div id="toppanel">
	<div id="panel">
		<div class="content clearfix">
			<div class="left">
				<h1>Welcome to PUT YOUR SITE NAME HERE</h1>
				<p>&nbsp;</p>
				<p class="grey">You need to <a href="register.php$session[sessionurl_q]" rel="nofollow">REGISTER &raquo;</a> or login if you would like to post in our forums.</p>
			</div>

			<div class="left">
				<!-- Login Form -->
						<!-- login form -->
		<form class="clearfix" action="login.php?do=login" method="post" onSubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
		<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
		<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
		<tr>
			<td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">$vbphrase[username]</label></td>
			<td>
				<input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onFocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
			<td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" checked="checked" />$vbphrase[remember_me]</label></td>
		</tr>
		<tr>
			<td class="smallfont"><label for="navbar_password">$vbphrase[password]</label></td>
			<td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
			<td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
		</tr>
		</table>
		<input type="hidden" name="s" value="$session[sessionhash]" />
		<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
		<input type="hidden" name="do" value="login" />
		<input type="hidden" name="vb_login_md5password" />
		<input type="hidden" name="vb_login_md5password_utf" />
		</form>
		<!-- / login form -->
        <!-- fbconnect -->
<center>
			</div>
		</div>
	</div> <!-- /login -->	

    <!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
	    	<li class="left">&nbsp;</li>
			<li id="toggle">
				<a id="open" class="open" href="#">Log In</a>
				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>			
			</li>
	    	<li class="right">&nbsp;</li>
		</ul> 
	</div> <!-- / top -->
	
</div> <!--panel -->
</if>

And I only uploaded the slide.css file in the css folder. There's no need for the other CSS file.. all it done was mess up user profiles.

Here's the latest version of the slide.css file that I'm using now (Removed things that were not needed):

View attachment 15447

http://www.vbteam.info/attachment.php?attachmentid=15447&stc=1&d=1245386655

This seems fine, but I can only test it in Firefox (3.0.11) because Intershit explorer won't work on my PC for some strange reason, despite me updating it.

I've tested on Bluefox fixed, and bluefox fluid.

Here's some screens of it...

Fixed:

View attachment 15448

View attachment 15449

Fluid:


View attachment 15451

View attachment 15450


As you can see.. it looks great in the fluid style, but in the fixed width, it needs a fix. Still.. seems better for me at the moment.. but until I find someone to test it in IE- I can't be too certain.
 

cornishman

New Member
Thanks for all the input h@ck3r.
I been playing for an hour this morning also, but seem only to have gotten as far as you :)

The only problems I found were that when I altered the #toppanel to relative, this actually moves the rest of the page content below the panel downwards, instead of overlaying it.
Also on some heavily altered fixed width header templates the #toppanel takes it's left point from the style, causing the whole panel to shift 'off-page' (which is what I guess your members are seeing in IE)
I've tried it in about three fixed width templates (pro-web, devcafe and grunged) and got three different results :(

What I have been trying to get the #toppanel to do is to take it's width from the themes own body width, without much success at the moment, but you'll be the first to know when it does happen.

Another thing I tried was to alter the position of the str_replace from '<!-- content table -->' to '<!-- logo -->' which most certainly helped on some of the fixed-width templates, but I found that very few custom themes leave the '<!-- logo -->' in place! so back to square one.

Gotta go to work now, so I'm afraid it'll be this evening before I get another chance.
 

zoop

New Member
First of all, thanks a lot for this wonderful add-on.....

But, i already have "flash banner" in my home page.....

Just wondering if there are aqny chances to move the MOD from right to center or left.....ifsomeone know, please tell me

If not, thx anyway :D

Here is a screenshot:
 

h@ck3r

New Member
Many thanks Cornishman.

I'm not sure what I done in the CSS to move it, but the CSS I provided- Moved the top panel from the very top of the page, to below the navbar.

I alkso edited the toppanel so that the login slider would push down the content beneath, rather that overlap (This was to suit my taste), and as you know- from the CSS itself- it explains how to make it overlap if that's what people prefer.

I'm going to download your latest version from post 1 and try it out, but I will save mine just in case things don't suit my styles.

Thanks for the hard work mate.

zoop said:
First of all, thanks a lot for this wonderful add-on.....

But, i already have "flash banner" in my home page.....

Just wondering if there are aqny chances to move the MOD from right to center or left.....ifsomeone know, please tell me

If not, thx anyway :D

Here is a screenshot:

Try using MY CSS file from here.

It moves it to below the navbar (Only tested on Bluefox/ Greenfox).
 

cornishman

New Member
h@ck3r said:
I alkso edited the toppanel so that the login slider would push down the content beneath, rather that overlap (This was to suit my taste), and as you know- from the CSS itself- it explains how to make it overlap if that's what people prefer.
I played with that idea for the fixed width styles, and tried out doing the str_replace to 'body' which did fit it all to the total width of the style.
To cut a long story short, the various configurations are endless, and not being a coder it's gonna take me a little longer than most to get to that sweet point!
 

h@ck3r

New Member
cornishman said:
I played with that idea for the fixed width styles, and tried out doing the str_replace to 'body' which did fit it all to the total width of the style.
To cut a long story short, the various configurations are endless, and not being a coder it's gonna take me a little longer than most to get to that sweet point!

Main reason I done this was- My members are all so used of the login area where it was.. moving this toppanel to the absolute top of the page- many were confused and never saw a way to login.

Having it where it is now- they see the login tab more or less where the login form used to be. :D

Plus the fact- I have a small flash banner at the top right of my header, so the toppanel was hidden behind it when expanded.

-----------------

Another thought of mine...

I wonder if there's a way to show this login panel to logged out users, and when they login, show the panel still- but with different things inside it- Eg: Links to Control panel, who's online, memberslist, etc etc..

Maybe just using conditionals would work?
 

KillaStaff

New Member
h@ck3r said:
Main reason I done this was- My members are all so used of the login area where it was.. moving this toppanel to the absolute top of the page- many were confused and never saw a way to login.

Having it where it is now- they see the login tab more or less where the login form used to be. :D

Plus the fact- I have a small flash banner at the top right of my header, so the toppanel was hidden behind it when expanded.

-----------------

Another thought of mine...

I wonder if there's a way to show this login panel to logged out users, and when they login, show the panel still- but with different things inside it- Eg: Links to Control panel, who's online, memberslist, etc etc..

Maybe just using conditionals would work?

yes just by conditional it work, like

Code:
<if condition="$bbuserinfo[userid]">...your code...</if>
 

cornishman

New Member
h@ck3r said:
I wonder if there's a way to show this login panel to logged out users, and when they login, show the panel still- but with different things inside it- Eg: Links to Control panel, who's online, memberslist, etc etc..
Maybe just using conditionals would work?
Great idea, the slide box should be able to contain any content, and yes conditionals should work a treat.
I suppose one idea could be to create a set of options from within the AdminCP where an admin can select alternative content.
Something for us to play with, I'm sure
01.gif
 
Hmm.. I'm having this error, using H@cker's css file. Same error with the default css.

2ihvukg.jpg


EDIT: Ok, I managed to get it working. But when I click the "login" button, it doesn't do anything.

EDIT2: It works now, after crewing a bit around with login_slide.
 
Top