Creating the iPhone unlock screen using xHTML, CSS and jQuery http://www.marcofolio.net Sat, 21 Nov 2009 02:06:34 +0100 FeedCreator 1.7.2 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3708 found another issue or two. if you click at the right-most spot on the bar, the slider moves there but does not activate the unlock like it should. but more importantly, i suppose: the real iphone does not slide to whatever position you click. but i\'m sure you knew that. i don\'t know any jQuery, but i\'m wondering if it provides all that you\'d need to recreate the slider perfectly. for example, some simple mouseup and mousedown triggers would be useful, in the case that either (1) you lift your finger without completing the entire slide, or (2) you complete the slide without lifting your finger, in which case it should still unlock. Garrett W. Sat, 17 Jan 2009 11:17:05 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3709 Hi Garret, Thank you for your comment. The reason why the slider doesn\'t \"unlock\" when you click the right-most spot on the bar, is because the \"animate\" is set to \"true\". The \"stop\" variable (for a strange reason) get\'s triggered when clicked which means jQuery thinks that the left position is still zero, eventhough it\'s going to move. When \"animate\" is removed (changing it back to the default \"false\" ), clicking the right-most point will make it work. In this example, I wanted to use (and explain) the work of the UI Slider. To create a better unlock screen, you should actually work with the \"[url=http://docs.jquery.com/UI/Draggables]jQuery UI Draggables[/url]\", which provide you with more flexibility to actually [b]drag[/b] items around (which is what you want). In this example, I wanted to show how to actually [b]slide[/b] the slider. Maybe I\'ll refactor the code some day and make it more \"sliding\" like the actual phone ;) . Comments like yours support me to do so! Marco Sat, 17 Jan 2009 11:29:03 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3712 That is really really nice, :) Source download isn\'t working for me though, can\'t wait to get my hands on it! Sarah Sat, 17 Jan 2009 12:37:04 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3713 Hi Sarah, thank you for your compliment! Strange that you can\'t get the download working :( . Try visiting the \"[url=http://www.marcofolio.net/downloads/webdesign/the_iphone_unlock_screen/details.html]download details[/url]\" page for this download and try the download button there. If it still doesn\'t work, please contact me (use contact page) and I\'ll send you the source files myself :) . Marco Sat, 17 Jan 2009 12:39:16 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3719 Just wanted to day that is also works perfectly in Opera 9.6 ^^ Ole Sat, 17 Jan 2009 18:33:57 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3722 Hi Ole, thanks for letting me know! Hope you enjoyed it ;) . Greetings,,, Marco Sat, 17 Jan 2009 20:27:23 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3732 Hey mate, regarding your \"Can\'t slide back due to loop\" error, try an if like this; [quote] i f ( $( " # u n l o c k - h a n d l e " ) . p o s i t i o n ( ) . l e f t ! = 0 ) { // Slide back function } [/quote] Liam Best Mon, 19 Jan 2009 09:35:46 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3744 This works like a charm :cheer: [quote] if($(\"#unlock-handle\").position().left == 205) { unlock(); } else { $(\"#unlock-handle\").animate({left: 0}, 200 ); } [/quote] Martin Mon, 19 Jan 2009 15:08:13 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3745 Nice work, it does look pretty neat. It\'s be good to see it automatically swing back, shame that as you said, it seems to be looping something. Might also be worth adding a handle that when the slider is moved for the first time the text fades out. It\'s probably also possible to create a variable that fades it in and out depending on the distance moved, but I can imagine that being pretty memory intensive. Xander Mon, 19 Jan 2009 14:45:37 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3746 @Xander: I\'ve got the opacity and swing bang working now. ill post an demo on my site soon. if its OK with the original author? //Martin Martin Mon, 19 Jan 2009 14:57:13 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3748 Damn Martin, thanks for that! I was so blinded by the slider component and it\'s functionality that I didn\'t thought the simple jQuery \"animate\" function would do the trick too. I\'ve changed the demo / download package with the modified code and I\'ve added your credit :). Once again, thank you for helping me (and others) out here! Still learning every day ;) . Marco Mon, 19 Jan 2009 15:25:31 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3749 Nice one Marco. Good to see that everyone is helping you improve the source. Gaya Mon, 19 Jan 2009 16:39:17 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3752 It\'s also working in Opera 9.63 - Windows with one exception: after firstly sliding back (not going to the end - right) you need to click somewhere else to slide it again. Josh Mon, 19 Jan 2009 21:29:15 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3765 anyone know how to link to another page after you \"unlock the phone\"? can you set the code so the slide acts like clicking a link? travis Tue, 20 Jan 2009 22:41:07 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3766 Huh, thanks for idea and work, I didn\'t have any idea how to create something like this before, looks hot :) Dainis Graveris Tue, 20 Jan 2009 22:47:32 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3768 When you open up the \"/iphone-unlock.js\", you\'ll find the following code: [quote]{window.location=\"index.html\";});[/quote] Simply change the \"index.html\" to something else and you\'re ready to go :). Good luck! Marco Wed, 21 Jan 2009 09:42:56 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3770 Thanks, works perfectly. I must have skipped right over that Travis Wed, 21 Jan 2009 15:20:52 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3773 Hello guys .... Is it possible to make an i-frame within the iphone? if so , how? I wana link it to other sites etc. instead of after unlocking going to the page you want ... thanks Ryan Wed, 21 Jan 2009 16:41:44 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3774 How to centre align the iphone? Ryan Wed, 21 Jan 2009 16:46:05 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3780 You could remove all elements inside the \"iphone-scrollcontainer\" nodes which than leaves you with only the iPhone background. Place your iframe inside that container, give it a src & add the correct width & height and that should do the trick. Good luck! Marco Wed, 21 Jan 2009 17:53:47 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3781 Currently, the iPhone has been set on a fixed position. If you want to have it center-aligned, you should change the CSS file and make the \"margin-left\" and \"margin-right\" from the container set to \"auto\". I\'m not sure if everything will comply since some are set to a absolute position. Good luck! Marco Wed, 21 Jan 2009 17:54:54 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3795 really nice, good implemented and ispiring thanks for share this work in this tutorial dlv Thu, 22 Jan 2009 18:35:35 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc3899 Slider doesn\'t appear to work in IE7 today pearible Tue, 03 Feb 2009 20:49:29 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc4020 Unfortunately, it\'s not working under IE7 :( Cosmin Thu, 12 Feb 2009 10:35:22 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc4177 Is possible to load swf in side of iphone (screen) after unlock? Marko Sun, 22 Feb 2009 22:14:08 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc4544 Hello everybody, is there any idea how to fix it in ie7 ... still not working :( vaQ Tue, 03 Mar 2009 02:37:43 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc4578 Hi good work thanks sohbet cihat Wed, 04 Mar 2009 20:39:40 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc4632 can you link the slider to a html website as a index page and how do you do it kind lost :s kev Mon, 09 Mar 2009 10:34:42 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc6137 Great looking script. Doesn\'t work with latest versions of jQuery and UI though :( Almost Mon, 18 May 2009 20:19:25 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc8461 Got the same problem :( When i put the window.location part under the line where it was originally (-> line #40 i think), it redirects, but without waiting for fadeout effect done... Muhal Thu, 09 Jul 2009 15:20:15 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc8467 Cool implementation! But it is not working on the old IE6 too........oh and one thing..........on FireFox once I slided the unlock button to the right, the rainbow screen disappeared for about half a second, then the rainbow screen returned after I saw the black background under it for that amount of time.........how to make the rainbow screen disappear forever once I unlocked the iphone please? Don Cheng Thu, 09 Jul 2009 21:36:05 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc8722 :!: A fix for IE! In style.css, change z-index: 1; to z-index: 0; for the DIV #slide-to-unlock...........yet I don\'t know why the DIV #unlock-handle with z-index: 10; will be overlapped by the DIV #slide-to-unlock...................... :!: Don Cheng Wed, 15 Jul 2009 12:58:44 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc10170 Subject to very good, but thank you very much for help sohbet Thu, 13 Aug 2009 16:48:21 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc10310 Cool implementation! But it is not working on the old IE6 too........oh and one thing..........on FireFox once I slided the unlock button to the right, the rainbow screen disappeared for about half a second, then the rainbow screen returned after I saw the black background under it for that amount of time.........how to make the rainbow screen disappear forever once I unlocked the iphone please? ?? this Sohpet Tue, 18 Aug 2009 03:10:35 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc10311 thank you my admin Sohbet Tue, 18 Aug 2009 03:11:31 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc10389 Hello Marco, Well done. I just have one question. I can't find in the source, where you created the effect over the text ("slide to unlock"), that glows. I was thinking, making a transparent png of gif that you can place on top (because you can't change the opacity in a certain part of a div, right?), but how did you do it (or did I miss something)? Greetings, Fabian dotBrilliance web development Fabian Tue, 25 Aug 2009 19:27:39 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc10392 nice idea!!, very cool virdfel Tue, 25 Aug 2009 16:19:15 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc10395 First off: Thanks for the comment Fabian. I translated it into English so all the other readers can understand what you\'re saying. Anyway, the text is just an animated GIF created with Photoshop - I don\'t think there is any other way on how you can create such an effect. If you download the source, you\'ll be able to find the image somewhere there. Good luck! Marco Tue, 25 Aug 2009 19:30:53 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc10634 Does anyone know anything about customizing the slider arrow? I had a friend that did it but I can\'t seem to get in touch with them or figure it out on my own. Thanks in advance for any support/replies! Kyle Fri, 04 Sep 2009 07:18:30 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc11206 rainbow screen returned after I saw the black background under it for that amount of time.........how to make the rainbow screen disappear forever once I unlocked the iphone please gay chat Sat, 19 Sep 2009 04:05:00 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc11864 Nice Doc.... thanks... admin Cene Estetigi Thu, 08 Oct 2009 17:05:11 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc11897 Thnks lez sohbet Fri, 09 Oct 2009 21:02:49 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc12403 This demo doesn\'t work on a real iphone. You can\'t really slide : you will only get a click, and the carret will not follow your finger... PA Fri, 23 Oct 2009 11:49:31 +0100 http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_css_and_jquery.html#josc12838 Brilliant!!! I have been looking for this for ages! :cheer: Stranger Tue, 03 Nov 2009 12:29:04 +0100