Results 1 to 2 of 2

Thread: How do I position a dynamically created element on a web page using Javascript?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    How do I position a dynamically created element on a web page using Javascript?

    I've created a simple contact page and want to add a little flair to it. I've created a dynamic element but I don't know what properties of a DOM object to use for element placement. The image below is my Contact form. All I want to do is when I click within one of the input fields is move the text that is already in their to just above and the textbox. I would like to do it with animation also but that I could probably figure out.

    ThanksName:  ContactForm.jpg
Views: 154
Size:  17.9 KB
    Blake

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,491

    Re: How do I position a dynamically created element on a web page using Javascript?

    The keyword you're looking for is "floating label". Can you provide me with the CSS that you're using to style your current inputs/labels?

    Update - Here is an example without knowing your current style rules:
    HTML Code:
    <div class="form-group">
      <input type="text" id="username" class="form-control" required placeholder="Username">
      <label for="username" class="floating-label">Username</label>
    </div>
    <div class="form-group">
      <input type="password" id="password" class="form-control" required placeholder="Password">
      <label for="password" class="floating-label">Password</label>
    </div>
    Code:
    .form-group {
        position: relative;
        margin: 20px;
    }
    
    .form-control {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        outline: none;
    }
    
    .floating-label {
        position: absolute;
        left: 10px;
        top: 10px;
        transform: translateY(0);
        transition: all 0.3s ease;
        pointer-events: none;
        color: #333;
    }
    
    .form-control::placeholder {
        color: transparent;
    }
    
    .form-control:not(:placeholder-shown) + .floating-label,
    .form-control:focus + .floating-label {
        top: -20px;
        transform: translateY(0);
        font-size: 12px;
        color: #333;
    }
    Fiddle: https://jsfiddle.net/g9vtc2bq/
    Last edited by dday9; Sep 11th, 2023 at 09:39 AM.
    "Code is like humor. When you have to explain it, itís bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width