Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

forms : jquery not changing at 300px but 768px, can I get help to change at 300px

on

I am using jQuery to change form style from default vertical to horizontal, but the changing happens at 768px instead of 300px that is given in jQuery code. How can I get jQuery or any other option to change at 300px, instead of 768? @media can do, but I do not know how to manipulate the necessary classes. I think this changing make forms more adaptive to screensize.

   <!DOCTYPE html><!--beginning of html document -->
       <html lang="en">
       <head><!--start head -->
        <title>Bootstrap Example</title><!--title -->
         <meta charset="utf-8"><!--meta tags -->
         <meta name="viewport" content="width=device-width, 
         initial-scale=1">
       <!--links -->
         <link rel="stylesheet" href="[https://maxcdn.bootstrapcdn.com           /bootstrap`/3.3.7/cs>s/bootstrap.min.css][1]">`
         <script src="[https://ajax.googleapis.com/ajax/libs/jquery3.3.1
        /jquery.min.js][1]"></script>
         <script src="[https://maxcdn.bootstrapcdn.com/bootstrap/
         3.3.7/js/bootstrap.min.js][1]"></script>
         <script><!--script start -->    <!--resize window -->
            $(window).resize(function(){
            var winwidth =$(window).width();
             // $("div").text( winwidth);
<!--check if are there not removed classes -->
           if(($(window).width() < 300) && 
              ($("form").hasClass("form-horizontal") == >true)) 
            {$("form").removeClass("form->horizontal");
                       $("label").removeClass("col-sm-2");
                      $(".group").removeClass("col-sm-10");}    <!--if condition to check size of window --> 
<!--if the width bigger than 300px adds classes to make form >horisontal -->     <!--othewise removes classes to make it vertical, default >-->             
               if ( $(window).width() > 300) {<!--add classes >-->
                $("form").addClass("form-horizontal");
                   $("label").addClass("col-sm-2");
                   $(".group").addClass("col-sm-10");
                $(".test").text( winwidth);
                  <!--.test:writing window size in a div -->
              }
               else {
               <!--removing classes -->
                 // if ($("form").hasClass("form-horizontal") >== true){
                  $("form").removeClass("form->horizontal");
                       $("label").removeClass("col-sm-2");
                       $(".group").removeClass("col-sm-10");
                    //$("div").text( winwidth);
                  }
          });
         </script><!--script end -->
<!--class to override in <style> -->
         <style><!--start style -->
         .group{
         color:red;
         };
         </style><!--end style -->
       </head><!--end head -->    <!--body-->
       <body>
       <!--container for form -->
       <div class="container">
       <!--document title -->

Vertical (basic) form to alter

         <div>
         </div>
         <form action="/action_page.php">
         <div class="form-group">
         <div class="test">
         </div>
         </div>
           <div class="form-group">

             <label for="email">Email:</label><!--email section >-->
             <div class="group"><!--just a class to override it >-->
                <input type="email" class="form-control" >id="email" placeholder="Enter email" name="email">
             </div>
           </div>
           <div class="form-group"><!--password section -->
             <label for="pwd">Password:</label>
             <div class="group"><!--just a class to override it >-->
                <input type="password" class="form-control" >id="pwd" placeholder="Enter password" name="pwd">
             </div>  
           </div>
           <div class="checkbox">
             <label><input type="checkbox" name="remember"> >Remember me</label><!-- checkbox part of the formal form -->
           </div>
   <button type="submit" class="btn btn-default">   >Submit</button><!--submit button -->
         </form><!--end form -->
       </div><!--end container -->

       </body><!--end body -->
       </html><!--end html page -->

Comments

Post a Comment