Download: Enkidu Slide and Bounce Login Box

[Enkidu]

File Name: Enkidu Slide and Bounce Login Box
File Submitter: Enkidu
File Submitted: 01 Sep 2011
File Category: IP.Content Blocks

A login box for you to use in your IP.Content pages/template without IPB wrapper. The box uses a slide and bounce animation effect much like the one you see implemented in XenForo.
The code was inspired/based on the sliding login panel by Jeremie Tisseau

Click here to download this file

[FxG Biohazard]

http://www.fortifiedgaming360.com/FxG_Forums/index.php?app=ccs&module=pages&section=pages&folder=&id=10


this is a test page I am trying to get this working on and then update my homepage... i am using Internet Explorer and the login test is pushed toward the left side overtop of the links... also when i open it to login in there is not register button for new users...thanx for any help...

[FxG Biohazard]

also i tried it in FIREFOX and it looks right

[FxG Biohazard]

got the register button to appear but the sign in or register button is still over top of the links, but only in IE9, looks good in firefox...

[Enkidu]

Hiya

i see no issue in IE9. maybe you have compatibility view turned on?

[FxG Biohazard]

oohh... alright... i will check :)... i know it works fine in FIREFOX so i thought maybe it was something stupid im missing...

[FxG Biohazard]

Still seems to be messed up for me with compatibliy mode on or off... IDK what else to do if you can't reproduce it...HMMM

[Enkidu]

a snapshot of the page will be helpfull :)

[FxG Biohazard]

sorry should have posted this originally :)



this is what i see in IE9 but in firefox it displays right...

[FxG Biohazard]

I guess i should also mention that it was doing this before i modified the color scheme

[Enkidu]

Ok

try the following, inside the block, find:

.tab ul.login {

display: block;

position: relative;

   float: right;

   clear: right;

   height: 42px;

width: auto;

   font-weight: bold;

line-height: 42px;

margin: 0;

right: 150px;

   color: white;

   font-size: 80%;

text-align: center;

}

remove the line: right: 150px; find

.tab ul.login li {

  text-align: left;

   padding: 0 6px;

display: block;

float: left;

height: 42px;


}

change float: left; to float: right; change text-align: left; to text-align: right; find

) no-repeat left 0;} .tab a.close {background: url( ) no-repeat left 0;}

.tab a.open {background: url(		

change the two occurrences of left to right find

.tab a.open, .tab a.close {

height: 20px;

line-height: 20px !important;

padding-left: 30px !important;

cursor: pointer;

display: block;

position: relative;

top: 11px;

}

change padding-left: 30px !important; to padding-right: 30px !important;


that should do it :)

[FxG Biohazard]

everything you did worked great except for one thing



it looks great when it is just there but once you hover over the name the blue circle with the X in it apprears by the links on the left side....

[Enkidu]

sorry for that

find

) no-repeat left -19px;} .tab a:hover.close {background: url( ) no-repeat left -19px;}

.tab a:hover.open {background: url(		

again change the two left to right :)

[FxG Biohazard]

looks great...thanx again for the support..:)

[Enkidu]

you are welcome :)

[bwyatt]

Hi Enkidu

I had a question about the slider, how can i make the background transparent http://forums.vpyro.com/_index.html# as to show the bg image through it!

[Enkidu]

remove the background property of both the panel and toppanel css :)

[bwyatt]

I am actually looking to use a transparent background image,

[Enkidu]

I am actually looking to use a transparent background image,

same. add it to the background property of the above css classes

[Viper V2]

is this compatible with 3.3?

[Enkidu]

is this compatible with 3.3?

haven't tried it but I would surprised if it didn't

[Steph40]

Yep it works fine on 3.3

I only have 1 issue and it's not due to 3.3

I can't get the icons to show, I followed all the steps but still no icons. I'm sure it is just me not doing it right. can you explain again step by step.

Thank you

steph40

[Enkidu]

can you show me a test page so I can debug the issue please?

[Steph40]

can you show me a test page so I can debug the issue please?

Not sure want you want me to do? How do I show you a test page? You can check out my site :
http://www.enseignercpartager.org

[Enkidu]

the block is corrupted. The css for the close/open icons read:

.tab a.open {background: url(<script type='text/javascript'>  var weLoaded = false;

(function(){

  if( typeof(_ccsLoadedAssets) == 'undefined' || !_ccsLoadedAssets )

  {

   if( !window.jQuery )

   {

    document.write("<"+"script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></"+"script>");

    weLoaded = true;

   }

  }

})();

</script>

where did that JavaScript come from? it shouldn't be there.