2

I have a form, when textbox is focused (onfocus), it triggers a marquee tag (in this case 'name') from left of textbox using javascript. But after the modal is opened, the marquee tag disappears and when the text field is focused again(onfocus), the marquee text does not come to display.

NOTE - marquee functionality for my code only worked for Mozilla firefox. So please try the code in firefox.

Steps -

  1. Click the text box.
  2. 'Name' flows out using marquee.
  3. Click 'Open modal'.
  4. 'Name' disappears (as soon as modal opens).
  5. Close the modal.
  6. Click the text box again, the marquee text doesn't trigger. 

<!DOCTYPE html5>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
      #vpass{
        display:none;
      }
    </style>

    <script>
      function anim(field) {
        document.getElementById(field).style.display = "block";
      }
    </script>

  </head>
  <body>
    <a href="#" data-toggle="modal" data-target="#modall">Open Modal</a>
    <div class="modal fade" role="dialog" id="modall">
      <div class="modal-dialog">
        <div class = "modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">MODAL</h4>
          </div>
        </div>
      </div>
    </div>
    </br></br></br></br>
    <table>
      <tr>   
        <td width="90px"><label id="vpass"><marquee direction="left" behavior="slide">name</marquee></label></td>
        <td>
          <div class="form-group">
            <input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

Thank you

ghost_dad
  • 1,308
  • 2
  • 12
  • 21
Arunav Ghosh
  • 23
  • 3

3 Answers3

1

Please notice that <marquee> is an obsolete HTML5 element and its usage has been discouraged by W3C Standards:

The <marquee> element is a non-standard element. HTML5 classifies it as a non-conforming feature.

The reason that you shouldn't use <marquee> its because you can't assure support by the browsers. This advice is also encouraged by Can I Use.

You'd better animate your text with CSS3 animations or JavaScript. This question has some good sources about how you can emulate <marquee> behaviour.

Community
  • 1
  • 1
Cezar Augusto
  • 8,794
  • 5
  • 31
  • 36
0

Try replacing the following anim function with the existing function

function anim(field) {
    document.getElementById(field).style.display = "none";
    $('#vpass').html('<marquee behavior="slide" direction="left" scrollamount="10">name</marquee>').show();
}

If this solution helps, don't forget to accept this answer

dinesh
  • 342
  • 2
  • 13
0

I refactored the code a bit to use CSS transitions instead, as they provide better performance. That way, the moving label is no longer affected by the modal window, at all. Take a look at the updated snippet below:

<!DOCTYPE html5>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
      td {
        position: relative;
      }
      #vpass {
        position: relative;
        left: 100%;
        transition: left 0.8s ease-in-out;
      }
      #vpass.active {
        left: 0%;
      }
    </style>

    <script>
      function anim(field) {
        document.getElementById(field).className = "active";
      }
      $(document).ready(function() {
        $('#name').on('blur', function() {
          $('#vpass').removeClass('active');
        });
      });
    </script>

  </head>
  <body>
    <a href="#" data-toggle="modal" data-target="#modall">Open Modal</a>
    <div class="modal fade" role="dialog" id="modall">
      <div class="modal-dialog">
        <div class = "modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">MODAL</h4>
          </div>
        </div>
      </div>
    </div>
    </br></br></br></br>
    <table>
      <tr>   
        <td width="90px"><label id="vpass">name</label></td>
        <td>
          <div class="form-group">
            <input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

I also added functionality to deactivate the element class on blur. Let me know if you have any questions!

ghost_dad
  • 1,308
  • 2
  • 12
  • 21
  • I like it better than how i wanted it to be. Thanks a ton ! :) – Arunav Ghosh Jun 03 '16 at 12:46
  • Can you please explain me the script briefly, i have come across editing the css through this way first time. @ghost_dad – Arunav Ghosh Jun 03 '16 at 15:00
  • Sure thing! So there's two parts to the setup. The first and more important part is the CSS. This provides better performance than animating with JavaScript. In the styles, I've added an `.active` class that will be added / removed. The `transition` is what makes the element move back and forth smoothly - affecting the `left` property. Then all we need to do is add / remove the class based on user input. You already had the `anim` function, so I added the `active` class there. Then with jQuery, I removed the class when the user clicks outside the input. Reference: http://api.jquery.com/on/ – ghost_dad Jun 03 '16 at 15:10
  • Thanks, didn't know jquery.. that's why couldn't figure it out. Explanation helped and thanks again :) – Arunav Ghosh Jun 03 '16 at 15:21