top


sgeorge
Sliding JQuery Login Panel - Sat Jan 15, 2011 6:52 pm Author: sgeorge

Hello to all again !! I found that → http://web-kreation.com/demos/Sliding_login_panel_jquery/# but I do not know how to add it... Could you please help me ? Thank you,sgeorge.

phpbb2 forum

Johnson5756
Re: Sliding JQuery Login Panel - Sat Jan 15, 2011 7:33 pm Author: Johnson5756

Have read it's tutorials?
If you already did that...

Just add the HTML right after your <body> tag.
Add the CSS given into your stylesheet.
And then add the jQuery in your <head>.

You shouldn't have any problem doing that.
And remember to host the images yourself, unless you know how to get the image address from that website.

sgeorge
Re: Sliding JQuery Login Panel - Sat Jan 15, 2011 7:42 pm Author: sgeorge

I want to use the default login panel in jQuey panel... Like this http://pcf-criminology.forumotions.net/forum site...

Thanks

Johnson5756
Re: Sliding JQuery Login Panel - Sat Jan 15, 2011 7:50 pm Author: Johnson5756

http://help.forumotion.com/t52770-log-in-command-under-each-forum
Here you go.

Remember to edit the style of it.

sgeorge
Re: Sliding JQuery Login Panel - Sat Jan 15, 2011 10:52 pm Author: sgeorge

I created that →

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html  xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="en" xml:lang="en"  ><head><!--
 stylesheets --><link rel="stylesheet" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/style.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/slide.css" type="text/css" media="screen" /><!--
 PNG FIX for IE6 --><!--
 http://24ways.org/2007/supersleight-transparent-png-in-ie6 --><!--[if lte IE 6]><script type="text/javascript" src="http://alig.mezoka.com/slider/js/pngfix/supersleight-min.js"></script><![endif]--><!--
 jQuery - the core --><script src="http://alig.mezoka.com/slider/js/jquery-1.3.2.min.js" type="text/javascript"></script><!--
 Sliding effect --><script src="http://alig.mezoka.com/slider/js/slide.js" type="text/javascript"></script><!--
 Panel --><div id="toppanel"><div id="panel"><div class="content clearfix"><div class="left"><!--
 Register Form --><h2>Καλώς Ήρθατε στο Radio Sound All</h2>      <p class="info">Παρακαλώ ελέγξτε τους <a href="http://radiosoundall.forumotion.com/t6-topic">κανόνες</a> ώστε να είστε πλήρως ενημερωμένοι.</p><h2>Χρειάζεστε Βοήθεια;</h2>  <p class="info">Μπορείτε εαν θέλετε πριν ξεκινήσετε να χρισιμοποιείτε την ιστοσελίδα μας να ελέγξετε το <a href="http://radiosoundall.forumotion.com/faq">FAQ (Συχνές Ερωτήσεις)</a> to learn the basics of the game.</p><h2>Μπορείτε ακόμα να χρισημοποιήσετε το Chatbox!</h2><br><p class="info">Πατήστε <a href="javascript: void(0)"onclick="window.open('http://radiosoundall.forumotion.com/chatbox/chatbox.forum?','windowname1','width=771, height=561');return false;">Εδώ</a> για να ανοίξετε το Chatbox και να επικοινωνίσετε με άλλα μέλη</p></div><div class="left right"><!--
 Login Form --><form action="http://radiosoundall.forumotion.com/login.forum" method="post"><table cellspacing="1" cellpadding="3" border="0"><tbody><tr><td width="45%" align="right"> Username:</td><td><input type="text" name="username" size="25" maxlength="40" /></td></tr><tr><td align="right">Password:</td><td><input type="password" name="password" size="25" maxlength="32" /></td></tr><tr align="center"><td colspan="2">Stay logged in: <input type="checkbox" name="autologin" checked="true" /></td></tr><tr align="center"><td colspan="2"><input type="submit" class="mainoption" name="login" value="Log in" /><input type="button" class="mainoption" value="Register" onclick="parent.location='/register';" /><br/><br/><a href="http://radiosoundall.forumotion.com//profile.forum?mode=sendpassword">Lost your password?</a></td></tr></tbody></table></form>      </div><div class="right"><!--
 Login Form --><form action="http://radiosoundall.forumotion.com/login.forum" method="post"><table cellspacing="1" cellpadding="3" border="0"><tbody><tr><td width="45%" align="right"> Username:</td><td><input type="text" name="username" size="25" maxlength="40" /></td></tr><tr><td align="right">Password:</td><td><input type="password" name="password" size="25" maxlength="32" /></td></tr><tr align="center"><td colspan="2">Stay logged in: <input type="checkbox" name="autologin" checked="true" /></td></tr><tr align="center"><td colspan="2"><input type="submit" class="mainoption" name="login" value="Log in" /><input type="button" class="mainoption" value="Register" onclick="parent.location='/register';" /><br/><br/><a href="http://radiosoundall.forumotion.com//profile.forum?mode=sendpassword">Lost your password?</a></td></tr></tbody></table></form>      </div></div></div><!--
 /login --><!--
 The tab on top --> <div class="tab"><ul class="login"><li class="left"> </li><li>Hello guest !</li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#">Log In | Register</a><a id="close" style="display: none;" class="close" href="#">Close Panel</a>      </li><li class="right"> </li></ul></div><!--
 / top --></div><!--
panel --></body></html>



but how can I make it change after the log in of the member ? I mean not to say log in|Register but to say Logout ...

Sorry for the language used...

thank you

Japorized
Re: Sliding JQuery Login Panel - Sat Jan 15, 2011 10:55 pm Author: Japorized

http://help.forumotion.com/t84649-how#546211

sgeorge
Re: Sliding JQuery Login Panel - Sat Jan 15, 2011 11:01 pm Author: sgeorge



Hm... I don't think that I want that... xD

Japorized
Re: Sliding JQuery Login Panel - Sat Jan 15, 2011 11:06 pm Author: Japorized

lol, yes its.. :

Code:
<div id="log-in-info">

<span id="log-in-info-cont">
<!-- BEGIN switch_user_logged_out -->
Hello, Guest | <a href="/register">Register</a> | <a href="/login">Login</a>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
{LOGGED_AS} <a href="/profile.forum?mode=editprofile">Account</a> | <a href="/login?logout">Log out</a>
<!-- END switch_user_logged_in -->
</span>

</div>

sgeorge
Re: Sliding JQuery Login Panel - Sat Jan 15, 2011 11:46 pm Author: sgeorge

Sorry... I don't get it... could you say me Gangstar what should I add on the whole ? I mean the full codes..

Thank you !

Japorized
Re: Sliding JQuery Login Panel - Sun Jan 16, 2011 12:41 am Author: Japorized

http://help.forumotion.com/t78982-sliding-log-in-panelneed-help

sgeorge
Re: Sliding JQuery Login Panel - Sun Jan 16, 2011 1:16 am Author: sgeorge

Well If I add this →



Code:
<!-- stylesheets -->
    <link rel="stylesheet" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/slide.css" type="text/css" media="screen" />
 
    <!-- PNG FIX for IE6 -->
    <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
  <!--[if lte IE 6]>
      <script type="text/javascript" src="http://alig.mezoka.com/slider/js/pngfix/supersleight-min.js"></script>
  <![endif]-->
   
    <!-- jQuery - the core -->
  <script src="http://alig.mezoka.com/slider/js/jquery-1.3.2.min.js" type="text/javascript"></script>
  <!-- Sliding effect -->
  <script src="http://alig.mezoka.com/slider/js/slide.js" type="text/javascript"></script>

My forum colors and the font size are not as I want them.. The text is black and the font size is bigger...

Japorized
Re: Sliding JQuery Login Panel - Sun Jan 16, 2011 1:20 am Author: Japorized

I didn't said u should add this. but read the others posts and you will find how to change them from Guests view to members view.

sgeorge
Re: Sliding JQuery Login Panel - Sun Jan 16, 2011 1:30 am Author: sgeorge

Gangstar15 wrote:I didn't said u should add this. but read the others posts and you will find how to change them from Guests view to members view.

I did it !!! From yesterday I am trying to do something but there it is nothing clear ! wow! Everyone is talking for his forum... Why the cannot wait for an answer and not spamming ? Thank you... I am trying to find something but I cannot understand anything... Sad

Japorized
Re: Sliding JQuery Login Panel - Sun Jan 16, 2011 1:40 am Author: Japorized

u need only to read my posts Razz

Code:
<!-- BEGIN switch_user_logged_out -->
<!-- Panel -->
<div id="toppanel">
  <div id="panel">
      <div class="content clearfix">
        <div class="left">
            <!-- Register Form -->
        <h2>Welcome to To My site</h2>     
              <p class="info">
              YOU TEXT HERE!
              </p>
             
        </div>


        <div class="left right">

<!-- Login Form -->
            <form action="http://test-liqued-coding.forumotion.com/login.forum?connexion" method="post"><table cellspacing="1" cellpadding="3" border="0"><tbody><tr><td width="45%" align="right"> Username:</td><td><input type="text" name="username" size="25" maxlength="40" /></td></tr><tr><td align="right">Password:</td><td><input type="password" name="password" size="25" maxlength="32" /></td></tr><tr align="center"><td colspan="2">Stay logged in: <input type="checkbox" name="autologin" checked="true" /></td></tr><tr align="center"><td colspan="2">
<input type="submit" class="mainoption" name="login" value="Log in" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<br/><br/><a href="http://test-liqued-coding.forumotion.com/profile.forum?mode=sendpassword">Lost your password?</a>
</td></tr></tbody></table></form>       

     
        </div>
      </div>
</div> <!-- /login --> 


  <!-- The tab on top --> 
  <div class="tab">
      <ul class="login">
        <li class="left"> </li>
        <li>Hello Guest</li>
        <li class="sep">|</li>
        <li id="toggle">
            <a id="open" class="open" href="#">Log In | Register</a>
            <a id="close" style="display: none;" class="close" href="#">Close Panel</a>       
        </li>
        <li class="right"> </li>
      </ul>
  </div>



 <!-- / top -->

</div>

<!--panel -->
<!-- END switch_user_logged_out -->


<!-- BEGIN switch_user_logged_in -->
<!-- Panel -->
<div id="toppanel">
  <div id="panel">
      <div class="content clearfix">
        <div class="left">
          <!-- Register Form -->
              <h2>Music Playlist!</h2>
              <img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyODgzODA2NjA1MTUmcHQ9MTI4ODM4MDY2NzA5MyZwPTE4MDMxJmQ9Jmc9MSZvPTljYzIxNGVjZmUyMDQ3YmNiYWVh/MjFmYzMyZDAzYWZm.gif" /><embed src="http://assets.mixpod.com/swf/mp3/mff-mpodmin.swf?myid=70657282&path=2010/10/29" quality="high" wmode="transparent" flashvars="mycolor=222222&mycolor2=77ADD1&mycolor3=FFFFFF&autoplay=false&rand=0&f=4&vol=100&pat=0&grad=false" width="158" height="208" name="myflashfetish" salign="TL" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" style="visibility:visible;width:158px;height:208px;" />
        </div>


        <div class="left right">

<!-- Login Form -->
            TEXT HERE!  TEXT HERE!  TEXT HERE!  TEXT HERE!
        </div>
      </div>
</div> <!-- /login --> 

  <!-- The tab on top --> 
  <div class="tab">
      <ul class="login">
        <li class="left"> </li>
        <li>{LOGGED_AS} </li>
        <li class="sep">|</li>
        <li> <a href="/profile.forum?mode=editprofile" title="Edit your profile">Profile</a></li>
        <li class="sep">|</li>
        <li><a href="/msg.forum?folder=inbox">Inbox</a> </li>
        <li class="sep">|</li>
        <li><a href="/search.forum">Search</a> </li>
        <li class="sep">|</li>
        <li id="toggle">
            <a id="open" class="open" href="#">Open Panel</a>
            <a id="close" style="display: none;" class="close" href="#">Close Panel</a>
        </li>
        <li class="right"> </li>
      </ul>
  </div> <!-- / top -->
 
</div> <!--panel -->
<!-- END switch_user_logged_in -->

sgeorge
Re: Sliding JQuery Login Panel - Sun Jan 16, 2011 2:01 am Author: sgeorge

http://rsa-tranning-forum.board-directory.net That's what I get... Sad Oh I will never have it :(

Japorized
Re: Sliding JQuery Login Panel - Sun Jan 16, 2011 2:03 am Author: Japorized

now replace the CSS and javascript links with these:

Code:
<!-- stylesheets -->
    <link rel="stylesheet" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/slide.css" type="text/css" media="screen" />
 
    <!-- PNG FIX for IE6 -->
    <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
  <!--[if lte IE 6]>
      <script type="text/javascript" src="http://alig.mezoka.com/slider/js/pngfix/supersleight-min.js"></script>
  <![endif]-->
   
    <!-- jQuery - the core -->
  <script src="http://alig.mezoka.com/slider/js/jquery-1.3.2.min.js" type="text/javascript"></script>
  <!-- Sliding effect -->
  <script src="http://alig.mezoka.com/slider/js/slide.js" type="text/javascript"></script>

sgeorge
Re: Sliding JQuery Login Panel - Sun Jan 16, 2011 2:23 am Author: sgeorge

Sorry Gangstar, I don't get you... I cannot find what you want me to replace... Really sorry... So do you want me to paste that code on my overall HEader and after that to use the code you gave me above ?


Code:
<!-- BEGIN switch_user_logged_out -->
<!-- Panel -->
<div id="toppanel">
  <div id="panel">
      <div class="content clearfix">
        <div class="left">
            <!-- Register Form -->
        <h2>Welcome to To My site</h2>     
              <p class="info">
              YOU TEXT HERE!
              </p>
             
        </div>


        <div class="left right">

<!-- Login Form -->
            <form action="http://test-liqued-coding.forumotion.com/login.forum?connexion" method="post"><table cellspacing="1" cellpadding="3" border="0"><tbody><tr><td width="45%" align="right"> Username:</td><td><input type="text" name="username" size="25" maxlength="40" /></td></tr><tr><td align="right">Password:</td><td><input type="password" name="password" size="25" maxlength="32" /></td></tr><tr align="center"><td colspan="2">Stay logged in: <input type="checkbox" name="autologin" checked="true" /></td></tr><tr align="center"><td colspan="2">
<input type="submit" class="mainoption" name="login" value="Log in" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<br/><br/><a href="http://test-liqued-coding.forumotion.com/profile.forum?mode=sendpassword">Lost your password?</a>
</td></tr></tbody></table></form>       

     
        </div>
      </div>
</div> <!-- /login --> 


  <!-- The tab on top --> 
  <div class="tab">
      <ul class="login">
        <li class="left"> </li>
        <li>Hello Guest</li>
        <li class="sep">|</li>
        <li id="toggle">
            <a id="open" class="open" href="#">Log In | Register</a>
            <a id="close" style="display: none;" class="close" href="#">Close Panel</a>       
        </li>
        <li class="right"> </li>
      </ul>
  </div>



 <!-- / top -->

</div>

<!--panel -->
<!-- END switch_user_logged_out -->


<!-- BEGIN switch_user_logged_in -->
<!-- Panel -->
<div id="toppanel">
  <div id="panel">
      <div class="content clearfix">
        <div class="left">
          <!-- Register Form -->
              <h2>Music Playlist!</h2>
              <img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyODgzODA2NjA1MTUmcHQ9MTI4ODM4MDY2NzA5MyZwPTE4MDMxJmQ9Jmc9MSZvPTljYzIxNGVjZmUyMDQ3YmNiYWVh/MjFmYzMyZDAzYWZm.gif" /><embed src="http://assets.mixpod.com/swf/mp3/mff-mpodmin.swf?myid=70657282&path=2010/10/29" quality="high" wmode="transparent" flashvars="mycolor=222222&mycolor2=77ADD1&mycolor3=FFFFFF&autoplay=false&rand=0&f=4&vol=100&pat=0&grad=false" width="158" height="208" name="myflashfetish" salign="TL" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" style="visibility:visible;width:158px;height:208px;" />
        </div>


        <div class="left right">

<!-- Login Form -->
            TEXT HERE!  TEXT HERE!  TEXT HERE!  TEXT HERE!
        </div>
      </div>
</div> <!-- /login --> 

  <!-- The tab on top --> 
  <div class="tab">
      <ul class="login">
        <li class="left"> </li>
        <li>{LOGGED_AS} </li>
        <li class="sep">|</li>
        <li> <a href="/profile.forum?mode=editprofile" title="Edit your profile">Profile</a></li>
        <li class="sep">|</li>
        <li><a href="/msg.forum?folder=inbox">Inbox</a> </li>
        <li class="sep">|</li>
        <li><a href="/search.forum">Search</a> </li>
        <li class="sep">|</li>
        <li id="toggle">
            <a id="open" class="open" href="#">Open Panel</a>
            <a id="close" style="display: none;" class="close" href="#">Close Panel</a>
        </li>
        <li class="right"> </li>
      </ul>
  </div> <!-- / top -->
 
</div> <!--panel -->
<!-- END switch_user_logged_in -->

Johnson5756
Re: Sliding JQuery Login Panel - Sun Jan 16, 2011 3:09 am Author: Johnson5756

Gosh... that was a blur...
Let's clear things up...

To show your content only to members

Code:
<!-- BEGIN switch_user_logged_in -->
This content can only be seen by members
<!-- END switch_user_logged_in -->

To show your content only to guests
Code:
<!-- BEGIN switch_user_logged_out -->
This content is readable by only guests
<!-- END switch_user_logged_out -->

So use some creativity and mathematical reasoning, optimise these built-in tags in your panel. Many of you really need to learn how to be independent in stuff like this.

I'm very sorry if my words are harsh.

sgeorge
Re: Sliding JQuery Login Panel - Sun Jan 16, 2011 3:48 am Author: sgeorge

well I said... I don't know how to code... Look If I add that CSS Style,the text is bigger... Can't I edit the CSS file ?

sgeorge
Re: Sliding JQuery Login Panel - Mon Jan 17, 2011 1:54 am Author: sgeorge

I need some help to finish the code... Here is what I have complete to end it

Code:
<!--
 The tab on top --> <div class="tab"><ul class="login"><li class="left"> </li><li><!-- BEGIN switch_user_logged_out -->Hello !<!-- END switch_user_logged_out --><!-- BEGIN switch_user_logged_in -->{USERNAME}<!-- END switch_user_logged_in --></li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#"><!-- BEGIN switch_user_logged_out -->Σύνδεση<!-- END switch_user_logged_out --><!-- BEGIN switch_user_logged_in -->ANOIGMA<!-- END switch_user_logged_in --></a><a id="close" style="display: none;" class="close" href="#">Κλείσιμο</a>      </li><li class="right"> </li></ul></div><!--
 / top -->

I want to make say for guests "Hello !" and for members to say their name so I used the
Code:
{USERNAME}
command.

Thank you !

Johnson5756
Re: Sliding JQuery Login Panel - Mon Jan 17, 2011 2:08 am Author: Johnson5756

I'll answer the second question first. That would be.

Code:
Hello {USERNAME}!

Ok, back to the main one.
Just go into the CSS file, copy the whole code, paste it in your own CSS stylesheet, then edit the font and anything else.

Your HTML code should have any problem except that... where's your <div class="panel"> and <div class="toppanel">? Your CSS have those things and yet you had threw them away from your code? Without those, your panel would be like fail.
And jQuery wouldn't work without those two div tags.

sgeorge
Re: Sliding JQuery Login Panel - Mon Jan 17, 2011 9:08 am Author: sgeorge

OK I DID IT !!!! THANK YOU ALL deeeeeeeeeeeeeeeply !!!!

sgeorge
Re: Sliding JQuery Login Panel - Mon Jan 17, 2011 4:53 pm Author: sgeorge

Hello again... The CSS of the slider makes my site font bigger... How can I make it smaller ? I tried to copy the slider's CSS in my CSS StyleSheet and edit the font values but Nothing worked... The slider works if I add it on the footer and add the on top and the other code " ....." after all codes... But If I add it on the overall footer, it does not load fast enough... What do you recommend ?

Johnson5756
Re: Sliding JQuery Login Panel - Mon Jan 17, 2011 8:16 pm Author: Johnson5756

You've got no choice cause it really is a great load for any websites that have many contents, particularly Flash. Can you show me the CSS? I mean the ones you copied and pasted.

sgeorge
Re: Sliding JQuery Login Panel - Tue Jan 18, 2011 1:09 am Author: sgeorge

Ok here...

This HTML makes the style is in the overall footer before the panel code...

Code:

<!-- stylesheets -->
    <link rel="stylesheet" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://web-kreation.com/demos/Sliding_login_panel_jquery/css/slide.css" type="text/css" media="screen" />
 
    <!-- PNG FIX for IE6 -->
    <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
  <!--[if lte IE 6]>
      <script type="text/javascript" src="http://alig.mezoka.com/slider/js/pngfix/supersleight-min.js"></script>
  <![endif]-->
   
    <!-- jQuery - the core -->
  <script src="http://alig.mezoka.com/slider/js/jquery-1.3.2.min.js" type="text/javascript"></script>
  <!-- Sliding effect -->
  <script src="http://alig.mezoka.com/slider/js/slide.js" type="text/javascript"></script>

and now the CSS...

the one code is here:

http://web-kreation.com/demos/Sliding_login_panel_jquery/css/style.css

and the other here
http://web-kreation.com/demos/Sliding_login_panel_jquery/css/slide.css

those are in the html code I posted above... THANK YOU...

Re: Sliding JQuery Login Panel - Author: Sponsored content

Go to page : 1, 2  Next