Блог

Главная - Вопросы по программированию - скрытый круговой текст определенной ширины jQuery показывает при загрузке, когда он должен быть скрыт

скрытый круговой текст определенной ширины jQuery показывает при загрузке, когда он должен быть скрыт

#javascript #html #jquery #css

Вопрос:

Я использую jQuery, чтобы скрыть какой-то круглый текст ниже ширины окна 760 пикселей. Он работает правильно, но если вы загружаете страницу шириной менее 760 пикселей, текст отображается, а затем снова скрывается при изменении размера браузера. Я уверен, что для этого есть очень простое решение, но я не знаю, что это такое.

 $(window).resize(function() {
  if ($(this).width() < 760) {
    $('.circular-text').hide();
  } else {
    $('.circular-text').show();
    }
});

const text = document.querySelector(".circular-text .contact-text")
const rotate = new CircleType(text).radius(65)
window.addEventListener("scroll", function(){
  text.style.transform=`rotate(${window.scrollY * 0.15}deg)`
}); 
 .circular-text{
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 5px;
    right: 70px;
    z-index: 999999;
}

.contact-text{
    font-family: "Alliance No 2";
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    color: #fb4d98;
} 
 <script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contact-container">  
        <div class="circular-text">
            <p class="contact-text">contact us • contact us • contact us •</p>
            </div>
        </div>

Ответ №1:

Если для этого нет особой причины в jQuery, я рекомендую вместо этого использовать css

 @media screen and (max-width:759px) {
  .circular-text { display:none; }
}

Комментарии:

1. Да, я использовал CSS для достижения этой цели, но по какой-то причине, если вы загрузили страницу в режиме мобильного просмотра, а затем изменили размер браузера на вид для ноутбука/рабочего стола, возникли проблемы с тем, что текст был крошечным и в неправильном месте.

Ответ №2:

Ваш код выполняется только при изменении размера окна.

Вместо этого переместите его в функцию и вызовите при загрузке страницы, а затем прикрепите к resize прослушивателю событий окна.

 function checkWidth() {
  if ($(this).width() < 760) {
    $('.circular-text').hide();
  } else {
    $('.circular-text').show();
  }
}
checkWidth();

$(window).resize(checkWidth);

const text = document.querySelector(".circular-text .contact-text")
const rotate = new CircleType(text).radius(65)
window.addEventListener("scroll", function() {
  text.style.transform = `rotate(${window.scrollY * 0.15}deg)`
}); 
 .circular-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 5px;
  right: 70px;
  z-index: 999999;
}

.contact-text {
  font-family: "Alliance No 2";
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: #fb4d98;
} 
 <script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contact-container">
  <div class="circular-text">
    <p class="contact-text">contact us • contact us • contact us •</p>
  </div>
</div>

Чтобы устранить проблему с исчезновением, просто добавьте if инструкцию, чтобы проверить, превышает ли ширина 760 пикселей:

 function checkWidth() {
  if ($(this).width() < 760) {
    $('.circular-text').hide();
  } else {
    $('.circular-text').show();
  }
}
checkWidth();

$(window).resize(checkWidth);

const text = document.querySelector(".circular-text .contact-text")
const rotate = new CircleType(text).radius(65)
window.addEventListener("scroll", function() {
  text.style.transform = `rotate(${window.scrollY * 0.15}deg)`
});

$(document).on('scroll', function() {
  var distanceFromBottom = Math.floor($(document).height() - $(document).scrollTop() - $(window).height());
  if (distanceFromBottom < 350) {
    $('#contact-fixed').fadeOut();
    if ($(this).width() > 760) {
      $('.circular-text').fadeOut();
    }
  } else {
    $('#contact-fixed').fadeIn();
    if ($(this).width() > 760) {
      $('.circular-text').fadeIn();
    }
  }
}); 
 body {
  height: 1000px;
}

.circular-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 5px;
  right: 69px;
  z-index: 999999;
}

.contact-text {
  font-family: "Alliance No 2";
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: #fb4d98;
} 
 <script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contact-container">
  <div class="circular-text">
    <p class="contact-text">contact us • contact us • contact us •</p>
  </div>
</div>

Чтобы устранить проблему с неправильным повторным отображением текста библиотекой при изменении размера, мы можем повторно отобразить его программно в прослушивателе resize событий.

Конечный Результат:

 const text = document.querySelector(".circular-text .contact-text")

function checkWidth() {
  const rotate = new CircleType(text).radius(65)
  if ($(this).width() < 760) {
    $('.circular-text').hide();
  } else {
    $('.circular-text').show();
  }
}
checkWidth();

$(window).resize(checkWidth);



window.addEventListener("scroll", function() {
  text.style.transform = `rotate(${window.scrollY * 0.15}deg)`
});

$(document).on('scroll', function() {
  var distanceFromBottom = Math.floor($(document).height() - $(document).scrollTop() - $(window).height());
  if (distanceFromBottom < 350) {
    $('#contact-fixed').fadeOut();
    if ($(this).width() > 760) {
      $('.circular-text').fadeOut();
    }
  } else {
    $('#contact-fixed').fadeIn();
    if ($(this).width() > 760) {
      $('.circular-text').fadeIn();
    }
  }
}); 
 body {
  height: 1000px;
}

.circular-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 5px;
  right: 69px;
  z-index: 999999;
}

.contact-text {
  font-family: "Alliance No 2";
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: #fb4d98;
} 
 <script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contact-container">
  <div class="circular-text">
    <p class="contact-text">contact us • contact us • contact us •</p>
  </div>
</div>

Комментарии:

1. Это работает, спасибо, но еще один фрагмент jQuery, который стирает текст, когда вы находитесь в 350 пикселей от нижней части страницы, мешает ему и делает его меньше 760 пикселей, если вы прокручиваете мышь, а мне нужно и то, и другое. Можно ли скомбинировать код так, чтобы текст всегда был скрыт ниже 760 и исчезал выше 760, когда вы достигаете 350px в нижней части страницы? Вот набор кодов со всем кодом.

2. @gjjr Конечно, без проблем. Я взгляну на кодовую строку и обновлю свой ответ.

3. Отличное спасибо! Если вы измените размер браузера ниже 760, вы увидите, что текст исчезнет по мере необходимости, но затем, если вы прокрутите вниз, он появится снова, поэтому мне нужно, чтобы он всегда был скрыт ниже 760. Спасибо!

4. @gjjr Я обновил свой ответ, чтобы включить рабочий код (включенный в ваш код).

5. Извините, что я должен был упомянуть, мне все еще нужен элемент «#контакт-исправлен», чтобы он отображался ниже и выше 760.

Метки: ,