When the specified width is reached, jQuery will reveal hidden circular text upon page load instead of keeping it hidden

My current issue involves utilizing jQuery to hide circular text when the window width is below 760px. Although the functionality works as intended, there is a minor problem when the page loads under 760px width - the text briefly shows up before hiding again when the browser is resized. I am confident that there exists a simple solution for this matter, but unfortunately, I am not aware of it yet.

$(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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fece6fdece3eafbf6ffeacfbda1bca1bf">[email protected]</a>/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>

javascripthtmljquerycss

Answer №1

If there is no specific need for accomplishing this task using jQuery, I suggest utilizing CSS for a more efficient solution.

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

Answer №2

Execute your code only upon window resize.

Instead, organize it within a function and invoke it when the page loads, then link it to the window resize event listener.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07646e75646b62737e7762473529342937">[email protected]</a>/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>

To rectify the fading issue, include an if statement to verify if the width exceeds 760px:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccafa5beafa0a9b8b5bca98cfee2ffe2fc">[email protected]</a>/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>

To settle the issue of the library improperly re-rendering the text on resize, we can intelligently re-render it in the resize event listener.

Final Result:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a2a8b3a2ada4b5b8b1a481f3eff2eff1">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to trigger the opening of a Component upon an onPress event?

One challenge I am facing is implementing a button in my app's Screen that should open a self-made Modal component on the same screen. To achieve this, I have set up a visible state in the screen and created an onPress handler for the button to toggl ...

javascriptandroidreactjsreact-native

Unable to upload photo using Ajax request

I am in the process of trying to utilize Ajax to upload an image, so that it can be posted after the submit button is clicked. Here is the flow: User uploads image -> Ajax call is made to upload photo User clicks submit -> Post is shown to the user ...

javascriptphpajax

Failure of PrimeNG Autocomplete dropdown to adjust position

My experience with the PrimeNG Autocomplete plugin resulted in some conflicts. When using this style, the autocomplete drop-downs are positioned downward. Image description goes here https://i.sstatic.net/VZmAk.png If anyone knows how to resolve this is ...

cssbootstrap-4primeng

Obtaining information from a intricate string input

{JSON.stringify(walletData.transactions, null, 2)} My goal is to extract backend data and display it as a table. The response has been converted into an array as shown below. [ { "date": "Nov 07, 2023", "description" ...

javascriptnext.js

I would like to know the method for inserting an HTML element in between the opening and closing tags of another HTML element using

Recently, I came across a coding challenge involving a textbox. <input type="text></input> The task was to insert a new span element between the input tags using jQuery, as shown below: <input type="text><span>New span element< ...

javascriptjqueryhtml

Having trouble with the password strength indicator in React-redux?

Hey there, I'm currently working on implementing a progress strength bar for password validation in React. While I've made progress with the code to check the password regex, I'm struggling to understand how to incorporate the password stren ...

javascriptreactjsreduxpasswords

Issue with grunt-crx task detected

In my Gruntfile, I've integrated the grunt-crx task as shown below: crx: { packExtension: { src: "../build/unpacked", dest: "../build/dist" } } Whenever I execute the crx task on its ow ...

javascriptgoogle-chrome-extensiongruntjs

Leveraging $http and $q in an Angular configuration with a service/provider

My goal is to load specific configurations for each controller in the app.config section. Each controller requires a distinct set of data, but these sets are not mutually exclusive. I am struggling to find a solution to this issue. .config(['$routePr ...

javascriptangularjspromise

When using the <object> tag, it may not always render at 100% height as intended

Application Inquiry I am seeking assistance with a web page that features a title, and a sticky menu bar at the top, allowing the rest of the space for displaying content. When a menu item is clicked, the objective is to load a page in the content at full ...

htmlcssobjectinnerhtml

Oops! An issue occurred on the server: ReferenceError - 'window' is not defined. This error occurred during

I'm looking to integrate a Microsoft Login Button into a Next Js application using Material UI. However, after adding the necessary package from NPM and refreshing the page, I encountered the error mentioned above. When I tried setting ClientId="a973 ...

javascriptreactjsmaterial-uinext.jsserver-side-rendering

IE8 is proving to be a major hurdle for the successful operation of AngularJS $http

Currently, I am faced with the challenge of creating an Angular application that needs to be compatible with IE8. However, I'm encountering difficulties in establishing a connection with the server. Surprisingly, whenever I attempt a $http.get, the en ...

javascriptangularjsinternet-explorer-8

Tips for adjusting the header color in materialize framework?

I've been working on a web template and I'm looking to customize the color displayed in the Android browser (maybe using JS?). The default color is blue. How can I go about changing it? Appreciate any help! ...

javascriptcssmaterial-designmaterialize

Finding the correct column in a drop-down menu based on a table array using AngularJS

In my controller, I have data like this: $scope.operationData = [ { "label" : "Inventory", "labelType" : "Master Tables", "type" : "PROCESSOR", "outputStreams" : 1, "elementType" : "TABLE", "name" : ...

javascriptangularjsarrays

What is the best way to duplicate a CSS shape across a horizontal axis?

I am working on decorating the bottom of my page with a repeated triangle design. The image provided only displays one triangle, but I would like to extend it across the entire horizontal div. Here is a screenshot of my progress so far: https://i.stack.im ...

htmlcssrepeatcss-shapes

Is there a way to use JavaScript to switch the entire div on and off

I have a function called done that I want to use to toggle the visibility of my "temp" division. tasks.innerHTML += `<div id="temp"> <span id="taskname"> ${input.value} </span> <button class="d ...

javascripthtmlfunctiontoggleinnerhtml

Next.js: Uh-oh! Looks like we've hit an obstacle with Error 413 Request Entity

I've encountered an issue while attempting to upload large files using Next.js. I've set up an onChange function for my file input, and here's the code snippet: const handleFileUpload = () => new Promise(async (resolve) => { if(ref ...

javascriptreactjsaxiosnext.js

Automatically update and reload Express.js routes without the need to manually restart the server

I experimented with using express-livereload, but I found that it only reloaded view files. Do you think I should explore other tools, or is there a way to configure express-livereload to monitor my index.js file which hosts the server? I've come ac ...

javascriptnode.jsexpress

Instead of returning an object, the underscore groupBy function now returns an array

Currently, I am attempting to utilize underscore to create an array of entities that are grouped by their respective locations. The current format of the array consists of pairs in this structure { location: Location, data: T}[]. However, I aim to rearran ...

javascriptangulartypescriptunderscore.js

Is there a way to incorporate innerhtml (or innertext) with the h() function for adding content?

Due to certain requirements, I need to utilize virtual DOM. Below is the code snippet that I am working with: // test.js import { h, ref } from 'vue' const ButtonCounter = { name: 'button-counter', props: { tag: { type: S ...

javascriptvue.jsvuejs3

Issues with splicing an Angular array using pure JavaScript

Could someone please help me figure out what I'm doing incorrectly? I have some JSON data that I am converting into an array for use in an ng-repeat. Before looping through the array, I am checking the event dates against today's date and removin ...

javascriptangularjsangularjs-ng-repeat