Saturday, December 20, 2014

Make jQuery Mobile form submit using the 'Go' button in the keyboard


Some tiring problemo i got

Since i'm soo into making hybrid apps for android, i always ended up in corners like this where the native and hybrid features donot exactly match

one such place is getting that tiny 'Go' button you get in the keyboard in a form to carry out the form submission as in a native app

like this one


here's how, you just need to specify ALL you inputs in a form and make your submit button of type 'submit'

1
2
3
4
5
<form action="#" onsubmit="formStuff()">
    <input type="text" id="txtUser" placeholder="username" />
    <input type="password" id="txtPwd" placeholder="password" />
    <input type="submit" value="Login" />
</form>

DONE ! :D


Monday, July 14, 2014

jQuery Scroll to Slide plugin (As in Nexus 5 website)

Heyy people,

So today morning we had a little network jam at workplace, which means free time :D And I was asked to make this certain plugin for so long, that i thought i would do it today. If you dont know what this is already, check Official Nexus 5 Site. You'll find a slider under the 'photography' section. It behaves like this,

Slider Features

  1. Slides images up/down when you scroll with the mouse pointer inside the slider container (Phone in the above case)
  2. If it's the last image or the first image of the slider, the normal sliding of the site happens.
Well, it's extremely easy to replicate this behavior, with around 15 minutes of work
We have a css file, JS file and a html file in my demo

Download Source : https://github.com/ManZzup/scroll-to-slide

Logic

What we need is to scroll a set of images up and down. Easiest way to achieve this is to position all the images one under the other, and then move the whole set of images by the amount of height of its container

scrollToSlide.css

  1. .scrollslider{
  2.         position:relative;
  3.         overflow:hidden;
  4. }
  5. .scrollslider img{
  6.         width:100%;
  7.         height:100%;
  8. }
  9. .scrollslider ul{
  10.         padding:0px;
  11.         margin:0px;
  12.         position:relative;
  13. }
  14. .scrollslider li{
  15.         list-style-type:none;
  16.         display:inline-block;
  17. }



scrollToSlide.js

  1. function ScrollSlider(ele,height,speed){
  2.         var curIndex = 0;
  3.         var maxIndex = 0;
  4.         var scrollHeight = height;
  5.        
  6.         var slider = $('#container ul').eq(0);
  7.         maxIndex = $(slider).find("li").length - 1;
  8.         $('#container').on('DOMMouseScroll mousewheel', function (e) {
  9.           if(!$(slider).is(":animated")){
  10.                   if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {               
  11.                         if(curIndex < maxIndex){
  12.                                 $(slider).animate({ top:'-=' + scrollHeight + 'px' },speed);
  13.                                 curIndex++;
  14.                         }else{
  15.                                 return true;
  16.                         }
  17.                   } else {
  18.                         if(curIndex > 0){
  19.                                 $(slider).animate({ top:'+=' + scrollHeight + 'px' },speed);
  20.                                 curIndex--;
  21.                         }else{
  22.                                 return true;
  23.                         }      
  24.                   }      
  25.           }
  26.          
  27.           return false;
  28.          
  29.         });
  30. }


index.html

  1. <html>
  2. <head>
  3. <title>Scroller</title>
  4. <style>
  5. html,body{
  6.         margin:0px;
  7.         padding:0px;
  8. }
  9. #container{
  10.         width:600px;
  11.         height:300px;
  12.         border:1px solid #000;
  13.         top:100px;
  14.         margin:0 auto; 
  15. }
  16. </style>
  17. <link href="scrollToSlide.css" rel="stylesheet">
  18. <script src="jquery.js"></script>
  19. <script src="scrollToSlide.js"></script>
  20. <script>
  21. $(document).ready(function(){
  22.         ScrollSlider("container",300,500);     
  23. });
  24. </script>
  25. </head>
  26. <body>
  27. <div id="container" class="scrollslider">
  28.         <ul>
  29.                 <li><img src="imgs/1.png" /></li>
  30.                 <li><img src="imgs/2.png" /></li>
  31.                 <li><img src="imgs/3.png" /></li>
  32.                 <li><img src="imgs/4.png" /></li>
  33.         </ul>
  34. </div>
  35. </body>
  36. </html>



Isn't much of a tutorial, but I thought would help someone. Ill be adding this to ma git repos soon, so you can always catch the latest release there :)

Cyah folks