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.
|
|
|
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. |
|
|
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();
|
|
|
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. |
|
|
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..
|
|
|
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 |
|
|
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. |
|
|
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
|
|
|
ckroon
Posts: 869
|
Posted: 10/24/2009, 9:54 PM |
|
Sweet!
Works great now.
Thanks!
_________________
Walter Kempees...you are dearly missed. |
|
|