Jquery Sliding login panel

Joomla! Extensions (Components, Modules, Plugins)

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Jquery Sliding login panel

Δημοσίευση από Insurer » 30 Απρ 2013 12:25

Καλησπέρα και χρόνια πολλά,
έψαχνα το JED και βρήκα ένα πολύ όμορφο login module το οποίο όμως είναι επί πληρωμή (15$). Δείτε demo εδώ http://www.sphereworldlogic.com/joomla- ... nel-slider , id: demo pass: demo.
Με ένα πρόχειρο ψάξιμο είδα πως το όλο project είναι κλεμμένο από εδώ : http://web-kreation.com/all/nice-clean- ... th-jquery/ . Έτσι μπήκα στην διαδικασία να το εγκαταστήσω βάση των αρχείων που δίνει ο αρχικός δημιουργός. Κατάφερα να περάσω το module βάζοντας τον κώδικα μέσα στο index του template αλλά το θέμα είναι τώρα πως θα μπορούσα να ορίσω μέσω κώδικα να εμφανίζετε το mod_login ή οποιοδήποτε άλλο module εντός του panel. Επίσης πως θα μπορούσα να το επεκτείνω (όπως στο πρώτο demo) ώστε να βγάζει το username αφού κάποιος κάνει login δλδ αντί για Hello Guest!| Log In | Register, Hi %user | You are logged in.

Ελπίζω να μπορέσει κάποιος γερόλυκος να μας βοηθήσει να το τελειοποιήσουμε.

Ευχαριστώ

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Jquery Sliding login panel

Δημοσίευση από alou » 30 Απρ 2013 12:59

Το να φτιάξεις αυτή τη λειτουργεία, είναι σε γενικές γραμμές εξαιρετικά απλό. Η λογική είναι ότι φτιάχνεις ότι container κλάσεις χρειάζεται το sliding panel και μέσα σε αυτή την html βάζεις ότι χρειάζεται η δική σου html υλοποίηση, μέσα στην οποία καλείς τα module positions. Στη συγκεκριμένη περίπτωση μόνο χρειάζεσαι και το user object για να δεις αν είναι logged in και να προβάλεις αντίστοιχο μήνυμα στο tab.

Ένα παρόμοιο jquery plugin αν θυμάμαι καλά είχει δημοσιεύσει πρόσφατα ο korgr, αν βρω το link θα σου πω.

Κάνε ένα paste το σχετικό κομμάτι του index.php του template σου και θα σου πω ακριβώς τι να κάνεις.

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Jquery Sliding login panel

Δημοσίευση από Insurer » 30 Απρ 2013 13:27

Ο κώδικας που βάζω είναι ο παρακάτω
στο head

Κώδικας: Επιλογή όλων

	<!-- stylesheets -->
  	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  	<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />
	
  	<!-- PNG FIX for IE6 -->
  	<!-- http&#58;//24ways.org/2007/supersleight-transparent-png-in-ie6 -->
	<!--&#91;if lte IE 6&#93;>
		<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
	<!&#91;endif&#93;-->
	 
    <!-- jQuery - the core -->
	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
	<!-- Sliding effect -->
	<script src="js/slide.js" type="text/javascript"></script>
Στο body

Κώδικας: Επιλογή όλων

<!-- Panel -->
<div id="toppanel">
	<div id="panel">
		<div class="content clearfix">
			<div class="left">
				<h1>Welcome to Web-Kreation</h1>
				<h2>Sliding login panel Demo with jQuery</h2>		
				<p class="grey">You can put anything you want in this sliding panel&#58; videos, audio, images, forms... The only limit is your imagination!</p>
				<h2>Download</h2>
				<p class="grey">To download this script go back to <a href="http&#58;//web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article &raquo;</a></p>
			</div>
			<div class="left">
				<!-- Login Form -->
				<form class="clearfix" action="#" method="post">
					<h1>Member Login</h1>
					<label class="grey" for="log">Username&#58;</label>
					<input class="field" type="text" name="log" id="log" value="" size="23" />
					<label class="grey" for="pwd">Password&#58;</label>
					<input class="field" type="password" name="pwd" id="pwd" size="23" />
	            	<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> &nbsp;Remember me</label>
        			<div class="clear"></div>
					<input type="submit" name="submit" value="Login" class="bt_login" />
					<a class="lost-pwd" href="#">Lost your password?</a>
				</form>
			</div>
			<div class="left right">			
				<!-- Register Form -->
				<form action="#" method="post">
					<h1>Not a member yet? Sign Up!</h1>				
					<label class="grey" for="signup">Username&#58;</label>
					<input class="field" type="text" name="signup" id="signup" value="" size="23" />
					<label class="grey" for="email">Email&#58;</label>
					<input class="field" type="text" name="email" id="email" size="23" />
					<label>A password will be e-mailed to you.</label>
					<input type="submit" name="submit" value="Register" class="bt_register" />
				</form>
			</div>
		</div>
</div> <!-- /login -->	

	<!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
			<li class="left">&nbsp;</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&#58; none;" class="close" href="#">Close Panel</a>			
			</li>
			<li class="right">&nbsp;</li>
		</ul> 
	</div> <!-- / top -->
	
</div> <!--panel -->

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Jquery Sliding login panel

Δημοσίευση από alou » 30 Απρ 2013 17:08

Υποθέτοντας ότι θα καλέσεις στο login module στη θέση userlogin (αν δεν υπάρχει, την προσθέτεις στο templatedetails.xml του template σου) ή ονομάζοντάς την όπως θες, δοκίμασε το παρακάτω:

Κώδικας: Επιλογή όλων

<div id="toppanel">
	<div id="panel">
		<div class="content clearfix">
			<div class="left">
				<h1>Welcome to neverland!</h1>
				<h2>Login - register bla bla</h2>		
				<p class="grey">kai an 8es bale edw ena keimeno</p>
			</div>
			<div class="left">
				<jdoc&#58;include type="modules" name="userlogin" style="xhtml" />
			</div>
			<div class="left right">
                        <?php $user = JFactory&#58;&#58;getUser&#40;&#41;;
            	                  if &#40;$user->guest&#41; &#123;	?>		
					<form action="index.php?option=com_users&task=registration.register" method="post" name="register" id="registration" >
               		<label for="jform&#91;name&#93;">Είσαι ο&#58;</label>
                    <input type="text" name="jform&#91;name&#93;" id="jform_name" value="" class="inputbox required" />
                    
                    <label for="jform&#91;username&#93;">Username&#58;</label>
                    <input type="text" id="jform_username" name="jform&#91;username&#93;" value="" class="inputbox validate-username required"  />
                    
                    
                    <label for="jform&#91;password1&#93;">Password</label>
                    <input class="inputbox validate-password required" type="password" id="jform_password1" name="jform&#91;password1&#93;" value=""  />
                    
                    <label for="jform&#91;password2&#93;">Επιβεβαίωση Password</label>
                    <input class="inputbox validate-password required" type="password" id="jform_password2" name="jform&#91;password2&#93;" value=""  />
                    
                    <label for="jform&#91;email1&#93;">Email</label>
                    <input type="text" id="jform_email1" name="jform&#91;email1&#93;" value="" class="inputbox validate-email required" />
                    
                    <label for="jform&#91;email2&#93;">Επιβεβαίωση Email</label>
                    <input type="text" id="jform_email2" name="jform&#91;email2&#93;" value="" class="inputbox validate-email required" />
                    
                    
                    
                   	<input type="hidden" value="com_users" name="option">
					<input type="hidden" value="registration.register" name="task">
					<input type="hidden" value="1" name="adf3f0a374d112893c41c9de2abd5c54">
			
					<?php echo JHTML&#58;&#58;_&#40;'form.token'&#41;; ?>
                    
                    <input type="submit"  name="Submit" class="button validate" value="Γράψου" />
                    <ul>
                        <li>
                            <a href="index.php?option=com_users&view=reset">Reset</a>
                        </li>
                        <li>
                            <a href="index.php?option=com_users&view=remind">Ξέχασες ποιος είσαι;</a>
                        </li>
                
                    </ul>
                    <input type="submit" name="Submit" class="button" value="Στείλτο" />
                </form>
              <?php &#125; else &#123; echo "Είσαι ήδη γραμμένος χρήστης"; &#125; ?>
			</div>
		</div>
</div> <!-- /login -->	

	<!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
			<li class="left">&nbsp;</li>
			<?php 
            	if &#40;!$user->guest&#41; &#123;
             ?>
             <li>Καλώστον <?php echo $user->username; ?></li>
			<li class="sep">|</li>
			<li id="toggle">
				<a id="open" class="open" href="#">Log out</a>
             <?php
                &#125; else &#123;
            ?>
            <li>Hello Guest!</li>
			<li class="sep">|</li>
			<li id="toggle">
				<a id="open" class="open" href="#">Log In | Register</a>
           <?php &#125; ?>
				<a id="close" style="display&#58; none;" class="close" href="#">Close Panel</a>			
			</li>
			<li class="right">&nbsp;</li>
		</ul> 
	</div> <!-- / top -->
	
</div> <!--panel -->
Για το registration, η φόρμα παίζει να μη δουλέψει σωστά, αν ζοριστείς πέτα το κομμάτι αυτό και βρες ένα module που κάνει και login και registration για αυτή τη θέση.

Αν θες δώσε και ένα link για να σου πω παραπάνω σχόλια.

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Jquery Sliding login panel

Δημοσίευση από Insurer » 30 Απρ 2013 19:44

Δυστυχώς το δοκιμάζω σε local, θα το δοκιμάσω και θα σου πω,
ευχαριστώ πάρα πολύ!

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Jquery Sliding login panel

Δημοσίευση από Insurer » 10 Μάιος 2013 14:32

Λοιπόν λειτουργεί πολύ καλά βάση του κώδικά σου, με αναγνωρίζει και όταν κάνω login και αναγράφει το username μου. Το πρόβλημά μου τώρα είναι πως οταν το panel ανοίγει μπερδεύεται με το dropmenu του template μου (topmenu) και το εμφανίζει στο background. Επίσης θα ήθελα να μην συμπεριλάβω registration form παρα αλλά κείμενο αριστερά, στην μέση Register text/link και δεξιά login form και κάπου να μπει και ένα logout button.

Ευχαριστώ

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Jquery Sliding login panel

Δημοσίευση από alou » 10 Μάιος 2013 15:35

Μεγαλύτερο z-index στο toppanel ή στο αντίστοιχο id που περιλαμβάνει όλο το panel, στο css σου:

Κώδικας: Επιλογή όλων

#toppanel &#123;position&#58;relative;z-index&#58;9999;&#125;

Κώδικας: Επιλογή όλων

<?php $user = JFactory&#58;&#58;getUser&#40;&#41;; ?>  
<div id="toppanel">
   <div id="panel">
      <div class="content clearfix">
         <div class="left">
            <h1>Welcome to neverland!</h1>
            <h2>have a good time</h2>      
            <p class="grey">kai an 8es bale edw ena keimeno</p>
         </div>
         <div class="left">
            <jdoc&#58;include type="modules" name="userlogin" style="xhtml" />
         </div>
         <div class="left right">
                     /////////\\\\\\\\///////\\\\\\\
               εδω θα βαλεις οτι κειμενο θες να μπει       
                    \\\\\\\\/////////\\\\\\\////////
         </div>
      </div>
</div> <!-- /login -->   

   <!-- The tab on top -->   
   <div class="tab">
      <ul class="login">
         <li class="left">&nbsp;</li>
         <?php
               if &#40;!$user->guest&#41; &#123;
             ?>
             <li>Καλώστον <?php echo $user->username; ?></li>
         <li class="sep">|</li>
         <li id="toggle">
            <a id="open" class="open" href="#">Log out</a>
             <?php
                &#125; else &#123;
            ?>
            <li>Hello Guest!</li>
         <li class="sep">|</li>
         <li id="toggle">
            <a id="open" class="open" href="#">Log In | Register</a>
           <?php &#125; ?>
            <a id="close" style="display&#58; none;" class="close" href="#">Close Panel</a>         
         </li>
         <li class="right">&nbsp;</li>
      </ul>
   </div> <!-- / top -->
   
</div> <!--panel --> 

Αν καλείς login module στη θέση userlogin, θα σου βγάλει logout button όταν έχεις συνδεθεί.
Με τα κείμενα βάζεις ότι θες στα ανάλογα σημεία.

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Jquery Sliding login panel

Δημοσίευση από Insurer » 10 Μάιος 2013 19:48

It' s alive !!!
Με πολύ κόπο και φυσικά με την άμεση και αμέριστη βοήθεια του alou τα κατάφερα.
Στο toppanel έβαλα absolute αντι για relative γιατί πάλι μου έκανε το ίδιο πρόβλημα.

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Jquery Sliding login panel

Δημοσίευση από Insurer » 10 Μάιος 2013 19:50

Επεδή δεν μπορώ να κάνω edit το πρώτο μου post παρακαλώ σημειώστε το ως Solved και διαγράψτε το doublepost

Απάντηση

Επιστροφή στο “Joomla! Extensions (Components, Modules, Plugins)”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης