Aligning text using Javascript and dynamically resizing it with css3 viewport causes a choppy effect when adjusting the size

I'm encountering some issues with keeping my text centered and smoothly resizing when the window size changes.

I have a weather website that showcases only the temperature. I present the temperature in various ways. I utilize local storage to store the temperature for returning visitors and display it until I can process it with my PHP function. Everything seems to function well, except when I resize the page.

I am using jQuery to center the text.

      jQuery.fn.center = function () {
      this.css("position","absolute");
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
      return this;
  }

and this is the CSS to resize the text based on the viewport of the page.

font-family:BebasNeueRegular;
src:url(BebasNeue-webfont.eot?#iefix) format(embedded-opentype), url(BebasNeue-webfont.ttf) format(truetype), url(BebasNeue-webfont.svg#BebasNeueRegular) format(svg);
font-weight:500;
font-style:normal;
font-size:45vw;
position:relative;

Any advice would be welcomed.

Thank you

javascriptjquerycsscenterviewport

Answer №1

This method could be the solution you're looking for!

window.onresize = resize;
function resize(){
             $("#fn").css("top", ( $(window).height() - $("#fn").height() ) / 2+$(window).scrollTop() + "px");
             $("#fn").css("left", ( $(window).width() - $("#fn").width() ) / 2+$(window).scrollLeft() + "px");

}

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

Issues with Joomla's mobile menu compatibility

We are currently working on a Joomla website that can be accessed through this link. The site functions perfectly with two menus when viewed on a desktop screen. However, the issue arises when it is accessed from a smartphone like an iPhone 5, as instead o ...

jquerymobilejoomla

Is it possible to utilize a single Promise multiple times?

// App.js sites[site_name].search(value).then(function(results) { console.log(results); }); // SearchClass.js Search.prototype.search = function(search) { var self = this; this.params['wa'] = search; return new Promise(function ...

javascriptnode.js

Enhance PHP search functionality by showcasing hidden auto-complete suggestions in real-time

I am attempting to showcase unlisted search results that can be clicked on to redirect the user to a specific HTML page based on data retrieved from a MySQL database. My development environment is PhoneGap. Thus far, I have successfully set up a basic PH ...

javascriptphpjqueryhtmlcordova

What is the process for confirming the authenticity of lengthy passwords with bcrypt?

"I encountered a problem that I just can't seem to solve. I set up an authentication flow using JWT with access and refresh tokens. The refresh tokens expire after a long time period, and they can be reset to prevent unauthorized use of stolen refresh ...

javascriptnode.jsjwtbcrypt

Can you help me pinpoint the tags related to mail?

The email address appears in various locations throughout the page. For instance <div> <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c2e3c28dd1d6">[email protected]</a></p> </div> ...

javascriptjquery

Getting a page element by its id with QWebEngineView is a simple task that can be

Is there a way to access the page ElementById in order to input a value? import sys from PyQt5 import QtWebEngineWidgets from PyQt5.QtCore import * from PyQt5.QtGui import QIcon from PyQt5.QtWidgets import * from PyQt5.QtWidgets import QAction from PyQt ...

javascriptpythonpyqtpyqt5qtwebengine

Chartjs-node in conjunction with prebuilt canvas is persistently generating 'Cairo not detected' errors

Currently, I am utilizing chartjs-node for creating charts. On my local (Windows) machine, the node.js code works flawlessly, likely due to having windows-build-tools with the cairo package installed. However, when attempting to compile on my remote (Linu ...

javascriptnode.jscanvaschart.js

Weird State / Unusual Effectiveness with NextJS Links

I'm encountering some unusual behavior in a personal project I'm working on. The project is a recipe website with buttons at the top that lead to different pages querying Firebase for recipe data. In the Index.js file, Firestore queries pass pro ...

javascriptreactjsnext.js

What is the best way to select the element where a user has clicked using JavaScript?

Referencing a previous question on Stack Overflow, the goal is to track user clicks in a Firefox browser using JavaScript. The provided JavaScript code almost achieves this: var DocElements = document.getElementsByTagName('*');for(var i = 0; i & ...

javascripthtmlfirefoxselenium

Say goodbye to my HTML5 creations

I am currently working on an HTML5 grid project that involves implementing a rectangle select tool for use within the grid. Everything is going smoothly, except for the fact that when I attempt to use the rectangular select tool, the grid disappears from t ...

javascriptcsshtml

In an AngularJS custom filter function, the error message "keys is not defined" is displayed

As I was reviewing examples in an Angular JS book, I came across a concept that has left me puzzled. It involves the use of custom filters with ng-repeat. Below are the code snippets: <a ng-click="selectCategory()" class="btn btn-block btn-default btn- ...

javascriptangularjs

Retrieve the elements with the largest attributes using the find method exclusively

UPDATE: After some trial and error, it seems like using the find method won't work for this particular scenario. I managed to come up with a workaround by introducing a boolean field called "last_inserted" and utilizing Meteor hooks to ensure that onl ...

javascriptmongodbmeteornosql

JSON has encountered an unconventional string at position 41 that was not anticipated

Attempting to learn Javascript as a beginner, I am facing an error that is puzzling me: SyntaxError: /home/runner/myrepl/config.json: Unexpected string in JSON at position 41 Upon checking my index.js file, it seems correct at position 41 (at least I beli ...

javascriptnode.jsnpmdiscorddiscord.js

Embed the Nest API into your HTML5 code

My mobile HTML5 application includes a script in the index.html file. Nest.js (code below) Whenever I run my application, I encounter an error stating that Firebase is not defined. This is odd because the function seems simple: --> var dataRef = new ...

javascriptnode.jshtmlfirebasenest-api

Issue with reactivity not functioning as expected within VueJS loop without clear explanation

Struggling with implementing reactivity in vue.js within a loop? The loop renders fine, but firing an event updates the content without visibly rendering the data on the page. The latest version of vue.js is being used with bootstrap and jquery. Despite a ...

javascripthtmlvue.js

What could be causing the movement of my main navigation links when hovering over another top-level element?

I am struggling to pinpoint the origin of a particular issue I am encountering with my menu. The problem arises when I hover over a top-level element, causing all elements below it to shift to the right: (Take note of the top-level elements being affected ...

htmlcss

Error 500 - NodeJS API Updater Experiencing Technical Difficult

Time to bring in the experts because I'm stuck on this issue. I have a basic CRUD API built with Node and EJS on the front-end. The problem lies in the selectAllRecords view where I display a table of all records. Each record has an edit button tha ...

javascriptnode.jsexpressejs

Avoid sudden page movements when validating user input

After successfully implementing the "Stars rating" feature from https://codepen.io/462960/pen/WZXEWd, I noticed that the page abruptly jumps up after each click. Determined to find a solution, I attempted the following: const labels = document.querySelect ...

javascriptcss

Issues arise when attempting to use jQuery's $.post method in conjunction with a cakePHP controller,

I'm attempting to fetch a json array from a cakePHP controller using $.post(). I thought I wouldn't need a view file since I'll be setting autorender to false and expecting a json array. While I do get a response when using $.ajax and $.get, ...

jqueryajaxcakephppost

Leveraging window.hash and the power of WordPress htaccess

I have a Wordpress website where I am using Ajax to display posts in a specific section. I am currently having Javascript add the hash tag like this: window.location.hash = id; Everything is working as expected. For instance, it changes the URL to www.my ...

javascriptajaxwordpress.htaccessmod-rewrite