Hey there, I'm facing an issue where my HTML website restarts whenever the browser size changes. Can someone please help me fix this?
You can check out my website here
I have uploaded my code files here:
Code Files Link
Hey there, I'm facing an issue where my HTML website restarts whenever the browser size changes. Can someone please help me fix this?
You can check out my website here
I have uploaded my code files here:
Code Files Link
Your website doesn't refresh when the browser window size changes; instead, it resets its layout and restarts its animations. This behavior is caused by a function called resize() in your main.js file that triggers the reset action whenever jQuery's window resize event is detected (located at the beginning of main.js).
To fix this issue, either remove the resize() function entirely or modify it so that it doesn't restart all animations from scratch.
Below is the problematic code snippet:
/**
* Place all custom JS functions here
*/
var pscroll;
var w,h,t1,t2,t3,t4;
$(window).on('load', animatee);
$(window).on('resize', resize);
function resize() {
clearTimeout(t1);
clearTimeout(t2);
clearTimeout(t3);
clearTimeout(t4);
$('.overlay').removeClass('overlayHidden');
$('.logo2').addClass('animatee');
$('.footer__content,.copy').css('display','none');
// Additional lines for resetting animations go here
animatee();
}
I am currently trying to transfer the information inputted into a text-box field on my webpage to variables within the component file. These variables will then be utilized in the service file, which includes a function connected to the POST request I exec ...
Here is the code where I authenticate users in a group, push accounts into an array, and save them using a POST request on /addaccount. groupRouter.post('/addaccount', Verify.verifyOrdinaryUser, function(req, res, next) { Groups.findById(req.bod ...
I am relatively new to Next.js and I am attempting to create a menu with a hover effect using the following code: import Link from 'next/link'; const MenuItem = ({ href, label }) => ( <Link href={href} className="menu-item"> ...
I am currently working on creating a chatbot using Dialogflow integrated with OpenAI in Firebase Cloud Function. However, I am facing an issue where I cannot access the /dialogflow endpoint and keep receiving the error message: "Cannot GET /dialogflow". My ...
My website has a navigation menu with third-party icon libraries (Material/FontAwesome) in use. I am facing an issue where the icons are not aligning vertically with the anchor text. Adjusting the font size of the icon to match the text results in it appe ...
In my web project using angularjs, I have the task of downloading data every second via a WebSocket. However, I encounter issues with handling multiple requests of different types. Although I utilize Promises to structure the requests, sometimes the respon ...
I am attempting to extract the data speedMbps from my JavaScript code using Ajax to send the data to my PHP script, but unfortunately, I am not receiving any output. My experience with Ajax is limited to implementing auto-completion feature. <script sr ...
Hey everyone, I spent the entire Sunday trying to create a dropdown menu in the AppBar but encountered various errors. The only menu that worked without any issues was using the "PopupState helper" which can be found at https://mui.com/material-ui/react-me ...
In this guide, you can learn how to create a custom directive in Angular by following this tutorial: Custom Directive Tutorial. The directive should function as intended. Still, I want to see the color value set in the CSS file displayed on the console us ...
Currently, I am integrating a Next.js blog with Contentful and employing queries to display posts on the homepage. While I can easily use .filter() to feature certain posts based on a boolean value, I am struggling to figure out how to fetch posts that mat ...
I need to resize an image that measures 1024x1024 and is segmented into 4 quadrants: My goal is to reduce the size of this image so that quadrant 2 is 256x256 while masking out or hiding the remaining 3 quadrants, displaying only the desired section on th ...
Lately, I made the switch to using modules in my next.js project. However, I keep encountering an error in my newly created .module.scss files that says: "Selector ":root" is not pure (pure selectors must contain at least one local class or id)". It seems ...
Currently, I have a background set for my website along with a navigation bar that displays my name and additional information. I am looking to make the background of this navigation bar semi-transparent so that it is possible to see through it. I tried ...
Currently I am facing an issue while trying to extract the body tag from the result of the .ajax() call. Instead of getting the desired result, I only see undefined logged into the console... This is the section of code causing the problem: $(document).r ...
Having an issue in Internet Explorer, works perfectly in Firefox. There is a javascript function that updates the UI (screen content) before an AJAX call. However, it does not update the UI unless an alert box prompt is used. Without the alert box, the UI ...
Check out this example. I've noticed that when resizing the viewport, the font size within the .main class increases while there is no change in the .aside class. Can someone help shed light on this for me? Thank you in advance! ...
Is there a better approach to retrieving variables from a GET OData call? I'm struggling with extracting the 'id' variable from the call within my method. I've tried using callbacks, but have not been successful. Do you have any suggest ...
For my latest project, I am developing a chat application in node.js following a tutorial from socket.io. The main objective of the app is to allow users to input their username along with a message, which will then be displayed as "username: message" in t ...
I am trying to achieve a fading effect for the background color of a div that contains a form. The solid background should fade out to transparent based on a pixel variable, allowing the background behind it to show through. This pixel value determines how ...
In my dropdown menu, I have the following options: <div class="my_div"> <select name="selection" id="select_id"> <option value="0">A</option> <option value="5">B</option> ...