Как заставить мой lo go и курсор реагировать? - PullRequest
Новая
       3

Как заставить мой lo go и курсор реагировать?

0 голосов
/ 25 марта 2020

Мне нужна помощь, пожалуйста, с этой страницей. Он работает на ноутбуке и настольном компьютере, а также на мобильной версии, но когда я переключаюсь на окна разных размеров, на все размеры между мобильной и настольной версиями, мой lo go и мой курсор не останутся на месте. в той же позиции, и они оба перемещаются вправо по всему окну! Я опубликую ссылку на видео, чтобы вы могли точно понять, что я имею в виду. Я знаю, что с моим кодом что-то не так, но не могу понять, как это исправить. Как вы увидите по ссылке на видео, а также по ссылке JSFiddle, при изменении размера окна lo go перемещается вправо, оно находится где-то на правой стороне страницы, и курсор не находится под слово «PRESS», но оно находится под словом «ENTER» и перемещается вправо, пока я изменяю размер окна. Lo go и курсор останутся неподвижными, только когда я нахожусь в мобильном режиме и в настольном режиме. Заранее спасибо !!

Ссылка на видео

Ссылка JSFiddle

Это мои JS и CSS а под ними мой HTML. 

<script>
          $(function() {
        var cursor;
        $('#cmd').click(function() {
          $('input').focus();
          cursor = window.setInterval(function() {
            if ($('#cursor').css('visibility') === 'visible') {
              $('#cursor').css({
                visibility: 'hidden'
              });
            } else {
              $('#cursor').css({
                visibility: 'visible'
              });
            }
          }, 500);

        });

        $('input').keyup(function() {
          $('#cmd span').text($(this).val());
        });

        $('input').blur(function() {
          clearInterval(cursor);
          $('#cursor').css({
            visibility: 'visible'
          });
        });
      });



      $( document ).ready(function() {
        $( "#cmd").trigger( "click" );
      });


    </script>
/*My Index */

#MyBackground {
    
    opacity: 0.6;
 
    /* Pacific Dream */
    background: #34e89e; 
    background: -webkit-linear-gradient(to right, #0f3443, #34e89e);  
    background: linear-gradient(to right, #0f3443, #34e89e);  
}

/* Aurora Logo */
.OurLogo {
    width: 10%;
    margin-left: 75em;
    margin-top: 11em;
}
    

html{
  height: 100%;
  width: 100%;
 }
 
 body{
  width: 100%;
  height: 100%;
 } 


.containersearchfunction{
  
  position: absolute;
  
 
}

/* The Main Text */
.EnterAText {
    color: rgb(144, 144, 160);
    text-align: center;
   
}
input.form-control.border-0 {
   
    background-color: white;
    
    height: 10em;
}
h2 {
    margin-top: 7em;
    color: rgb(255, 255, 255);
    
}

#cmd {
    font-family: courier;
    font-size: 14px;
    background: black;
    color: #FFFFFF;
    padding: 5px;
    overflow: hidden;
  }
  #cmd span {
    float: left;
    padding-left: 3px;
    white-space: pre;
  }
  #cursor {
  
    width: 1px;
    height: 84px;
    /* background: #21f838; */
    background: #FFFFFF;
    
  }
  input {
    width: 0;
    height: 0;
    opacity: 0;
    
  }
  div#cmd {
    padding-left: 10em;
    background: transparent;
  
    font-size: 4em;
  }

  /* When i resize the page */
  @media(max-width: 767px){
    div#cmd {
        padding-left: 4em;
        font-size: 4em;
      }
      

      .OurLogo {
        width: 10%;
        margin-left: 24em;
        margin-top: 9em;
        width: 20%;
    }
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
   integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
 
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
   integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 

 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
 
 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

 <link href="style.css" rel="stylesheet" type="text/css" />

    <title>Aurora 4.0 Search Button Page</title>
</head>

<body id="MyBackground">
    

  <div container-fluid class="containersearchfunction">
    <div class="specific-div">
      <div class="EnterAText">
        <h2>TYPE AND PRESS “ENTER” TO SEARCH</h2>
        
        <div id="cmd">
          <span></span>
          <div id="cursor"> </div>

        </div>
      </div>
      <input type="text;" name="command" value=""/>
    </div>
    <div><img class="OurLogo" src="aurora_logoFINAL-01.png" alt="AuroraLogo"></div>
  </div>
           
</body>


</html>

1 Ответ

0 голосов
/ 27 марта 2020

Так как никто не ответил на мой вопрос, и так как я думаю, что нашел ответ, я хотел бы опубликовать мой обновленный код, который, кажется, работает и выполняет именно то, что я хотел. Я не знаю, если код правильный, хотя он делает именно то, что я хотел, поэтому, если это не так, пожалуйста, поправьте меня!

Вот ссылка на видео о том, как он выглядит сейчас! Проверьте курсор и lo go. Они остаются неподвижными, пока я перемещаюсь по странице с мобильной версии на настольную.

Ссылка на видео

Ниже мои JS, мои CSS и мои HTML

  <script>
      $(function() {
        var cursor;
        $("#cmd").click(function() {
          $("input").focus();
          cursor = window.setInterval(function() {
            if ($("#cursor").css("visibility") === "visible") {
              $("#cursor").css({
                visibility: "hidden"
              });
            } else {
              $("#cursor").css({
                visibility: "visible"
              });
            }
          }, 500);
        });

        $("input").keyup(function() {
          $("#cmd span").text($(this).val());
        });

        $("input").blur(function() {
          clearInterval(cursor);
          $("#cursor").css({
            visibility: "visible"
          });
        });
      });

      $(document).ready(function() {
        $("#cmd").trigger("click");
      });
    </script>
.banner {
  height: 0px;
  max-width: 800px;
  margin: 13em auto 40px auto;
  background-color: blue;
  display: flex;
  text-align: center;
}

.center-me {
  color: white;
  font-size: 25px;
  margin: auto;
}

#MyBackground {
  opacity: 0.6;
  background: #34e89e;
  background: -webkit-linear-gradient(to right, #0f3443, #34e89e);
  background: linear-gradient(to right, #0f3443, #34e89e);
}

#cmd {
  display: flex;
  font-size: 14px;
  color: #ffffff;
  padding: 5px;
  overflow: hidden;
}
#cmd span {
  margin-top: -0.4em;
  white-space: pre;
}
#cursor {
  width: 1px;
  height: 84px;
  margin-top: 0em;
  /* background: #21f838; */
  background: #ffffff;
}
input {
  width: 0;
  height: 0;
  opacity: 0;
  margin-top: -1em;
}
div#cmd {
  padding-left: 2em;
  background: transparent;
  font-size: 4em;
}

/* Aurora Logo */
img.OurLogo {
  max-width: 10%;
  display: flex;
  position: fixed;
  right: 10px;
  bottom: 10px;
}
image
...