CODEWITHSUNDEEP
javascripthtmlcss
art
art

Reputation: 306

Adding scroll feature to the form

The problem here I face is that my form remains static on the window.But what I want is that the form_1 should jump to the top of the window as the user writes his query in the "Enter your starting" city text box.

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
    img.bg {
        min-height: 100%;
        min-width: 1024px;

        width: 100%;
        height: auto;

        position: fixed;
        top: 0;
        left: 0;
    }

    @media screen and (max-width: 1024px){
        img.bg {
            left: 50%;
            margin-left: -512px; }
        #form_1 {
            width: 20%;
        }
    }

    #form_1 {     
        position: relative;
        border-radius: 15px;

        width: 80%;
        margin: 15% auto; 
        padding: 20px;
        background: white;
        -moz-box-shadow: 0 0 20px black;
        -webkit-box-shadow: 0 0 20px black; 
        box-shadow: 0 0 20px black;
        display: table;
        border :solid 2px  black;
        padding: 15px;
    }

    .row {
        display:table-row;
    }

    .row label {
        text-align: right;
    }
</style>
</head>
<body>

<div id="yt" >
    <img src="bg.jpg" class="bg">
    <form id="form_1" tabindex="0">
    <label>Enter Starting City</label>
    <div class="row">
    <input type="text" name="s_city"></br>
</div>
<div class="row">
    <label>Wait While The Cities Appear
    </label></br>
    <textarea rows="10" cols="30"></textarea></br>
    <div class="row">
</form>
</div>

</body>
</html>

Upvotes: 0

Views: 62

Answers (1)

pradeep1991singh
pradeep1991singh

Reputation: 8375

I noticed some wrong tag and wrong close tags, Fix those, see if this works.

<html>
  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      img.bg {
        min-height: 100%;
        min-width: 1024px;

        width: 100%;
        height: auto;

        position: fixed;
        top: 0;
        left: 0;
      }

      @media screen and (max-width: 1024px){
        img.bg {
          left: 50%;
          margin-left: -512px; }
        #form_1 {
          width: 20%;
        }
      }

      #form_1 {     
        position: relative;
        border-radius: 15px;

        width: 80%;
        margin: 15% auto; 
        padding: 20px;
        background: white;
        -moz-box-shadow: 0 0 20px black;
        -webkit-box-shadow: 0 0 20px black; 
        box-shadow: 0 0 20px black;
        display: table;
        border :solid 2px  black;
        padding: 15px;
      }

      .row {
        display:table-row;
      }

      .row label {
        text-align: right;
      }
    </style>
  </head>
  <body>

    <div id="yt" >
      <img src="bg.jpg" class="bg" />
      <form id="form_1" tabindex="0">
        <label>Enter Starting City</label>
        <div class="row">
          <input type="text" name="s_city"><br/>
        </div>
        <div class="row">
          <label>Wait While The Cities Appear</label><br/>
          <textarea rows="10" cols="30"></textarea><br/>
        </div>
      </form>
    </div>

  </body>
</html>

Upvotes: 1

Related Questions