CodeCharge Studio
search Register Login  

Web Reporting

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 Sliding Login(iPhone slide to unlock)

Print topic Send  topic

Author Message
smokingguns


Posts: 51
Posted: 10/21/2009, 10:32 PM

Hey all,
This tip shows how to get mimick the "iPhone slide to unlock" effect . We can do away with the usual Login button. It produces a neat effect. First off all, download the wonderful jquery UI package from http://jqueryui.com/download.
Then go to your Login record form and set the display property of the Login button to "none".
Include the following files in the head section of the HTML page.
jquery-1.3.2.min.js
ui.core.js
ui.slider.js
and the foll CSS file
ui.all.css

You should find all these files in the downloaded package..

Add a row above the Login button row and paste the following code in the td section.
  
<div class="demo">  
<div id="slider"></div>  
</div>  

Add the following in the head section
  
<style type="text/css">  
#demo-frame > div.demo { padding: 10px !important; };  
</style>  
  
Add the foll JS code-----------  
jQuery(function() {  
		jQuery("#slider").slider({  
		value:0,  
		min: 0,  
		max: 500,  
		step: 50,  
		slide: function(event, ui) {  
		             if(ui.value==500)  
                                       jQuery("#ID_of_the_Login_button").click();  
                                         }  
	        });  
	});  
  

Thats it. Now the user will enter the username/pwd and slide the slider(all the way to the end) which triggers the "on click" server event of the hidden Login Button. Yo can mess with the CSS to customise the slider.
View profile  Send private message
ckroon

Posts: 869
Posted: 10/23/2009, 12:35 PM

Hey Smokingguns.. would LOVE to try this out but I can't seem to get it to work.

Can you dbl check your instructions?
thanks!

_________________
Walter Kempees...you are dearly missed.
View profile  Send private message
smokingguns


Posts: 51
Posted: 10/24/2009, 12:11 AM

Hey ckroon,
Are you getting any errors related to jquery(like jQuery is undefined). Because the code I posted is the exact code that I tested and It works fine for me. It could be path problems. I have tested it on IE 8 and FF 3.5. Have you put the correct ID of the Login Button in this line of code?
jQuery("#ID_of_the_Login_button").click();  

View profile  Send private message
ckroon

Posts: 869
Posted: 10/24/2009, 9:47 AM

Yes I have and I had a js expert try to get it to work as well.. with no luck...
I though this part was suspect:

#demo-frame > div.demo { padding: 10px !important; };

But I am no expert :)


No errors.. just no slider showing up in the div.
checked all paths
I will keep playing with it.
_________________
Walter Kempees...you are dearly missed.
View profile  Send private message
smokingguns


Posts: 51
Posted: 10/24/2009, 12:48 PM

Have you tried removing this piece of code?
#demo-frame > div.demo { padding: 10px !important; };

I removed it and tested it. It still works for me..
I'm surprised really..
Try one more thing. instead of using the minified version(jquery-1.3.2.min.js) of jquery, use "jquery-1.3.2.js" and change the code to this:
  
$(function() {  
                $("#slider").slider({  
                        value:0,  
                        min: 0,  
                        max: 500,  
                        step: 50,  
                        slide: function(event, ui) {  
                            if(ui.value==500){			  
	       document.getElementById("ID_of_the_Login_button").click();  // $("#ID_of_the_Login_button").click(); shud also work  
				}  
                                                          
                        }  
                });  
				  
                
        });  
  
I will be posting demos online soon..
View profile  Send private message
Gena

Posts: 591
Posted: 10/24/2009, 1:30 PM

I think some thing wrong with this:

Quote :
Add a row above the Login button row and paste the following code in the td section.


<div class="demo">
<div id="slider"></div>
</div>

How this code will work with the button?
_________________
Gena
View profile  Send private message
ckroon

Posts: 869
Posted: 10/24/2009, 2:45 PM

Gena.. If I am reading the code right, the max value of the slider is 500, when it reaches that value (slid all the way to the right, it clicks the hidden Login button.
_________________
Walter Kempees...you are dearly missed.
View profile  Send private message
smokingguns


Posts: 51
Posted: 10/24/2009, 3:33 PM

I'm extremely sorry ckroon.The css file(ui.all.css) imports some other CSS files. So if you check the "development-bundle\themes\base" folder in the downloaded package, you should see all the CSS files and the images folder.
I had forgotten this very important instruction and should have realised it when you said that you couldn't see the slider.
In the html file you create, use the 4 files I mentioned earlier. The ui.all.css imports the other CSS files. Be sure to upload the images folder found in the "development-bundle\themes\base" folder. Hope it works now for you

Check the demo: http://samsecke.info/demos/sliding.html
This just shows how the login form will look. You can customise the CSS to make it look more pleasing
View profile  Send private message
ckroon

Posts: 869
Posted: 10/24/2009, 9:54 PM

Sweet!
Works great now.
Thanks!

_________________
Walter Kempees...you are dearly missed.
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

PHP Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright © 2003-2004 by UltraApps.com  and YesSoftware, Inc.