JavaScript code for styling changes is not functioning as expected

Check out this code snippet:

var moving_nav = document.getElementById("moving_nav");
var logo = document.getElementById("logo");

setInterval(function(){ 
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    if (scrolled >= 100) {
        moving_nav.style.position = "fixed";
        moving_nav.style.top = "0";
        logo.style.width:"60px";
        logo.style.height:"60px";
    } 
    else {
        moving_nav.style.position = "absolute";
        moving_nav.style.top = "100px";
        logo.style.width:"120px";
        logo.style.height:"120px";
    }
}, 10);

The intention was to make the menu sticky when scrolling over it. The functionality worked perfectly fine :). However, encountered an issue when trying to change the logo size. After including the lines involving the "logo", the script stopped working properly.

The Browser Console indicates a missing ";" in line 9 (first "width"), but pinpointing its exact location has proven challenging. Attempted to resolve by eliminating the use of a variable and querying getElementById each time, without success. Also experimented with commenting out the logo styling lines, which allowed everything else to function correctly. Unable to identify the root cause :( Please assist!

PS: If you find this problem too simple, please bear in mind that I am new to JavaScript. Additionally, English is not my first language so apologies for any linguistic errors ;)

Thank you, Diavo

javascriptcss

Answer №1

When applying styles using JavaScript, remember to use = for any style property. However, when using CSS, make sure to use the colon (:).

if ( scrolled >= 100) {
    moving_nav.style.position = "fixed";
    moving_nav.style.top = "0";
    logo.style.width = "60px";
    logo.style.height = "60px";
} 
else {
    moving_nav.style.position = "absolute";
    moving_nav.style.top = "100px";
    logo.style.width = "120px";
    logo.style.height = "120px";
}

Remember to replace all instances of : with =.

Answer №2

    changing the width of the logo to "60px";
    adjusting the height of the logo to 60 pixels;

as opposed to

    setting the width of the logo as "60px";
    defining the height of the logo as 60 pixels;

Another example.

Answer №3

Instead of using =, you should use : in css.

let movingNav = document.getElementById("moving_nav");
   let logo = document.getElementById("logo");

   setInterval(function(){ 
       let scrolled = window.pageYOffset || document.documentElement.scrollTop;
       if (scrolled >= 100) {
           movingNav.style.position = "fixed";
           movingNav.style.top = "0";
           logo.style.width = "60px";
           logo.style.height = "60px";
       } 
       else {
           movingNav.style.position = "absolute";
           movingNav.style.top = "100px";
           logo.style.width = "120px";
           logo.style.height = "120px";
       }
   }, 10);

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

Injection of dependencies in ui.bootstrap

For some reason, the ui.bootstrap dependency injection is causing all the content on my single page to disappear. There are no errors showing up in the console log, and I'm not sure why it's happening. I followed all the necessary steps, but I th ...

javascriptangularjsui.bootstrap

Leveraging an external React library to utilize .ogg files for audio playback specifically in the Safari

Hey there! I'm currently working on incorporating ogg-opus audio playback in a react app on Safari (since it doesn't support .ogg format). My project was initialized using create-react-app. I came across the "ogv.js" library, which supposedly h ...

javascriptreactjssafariogg

When the children within a CSS container are floated, set the height of the container to

I've established a simple layout <div class="container"> <div class="sidebar"> </div> <div class="content"> </div> <div style="clear:both;"></div> </div> where .sidebar and .content ...

cssheight

"Unlocking the door: a step-by-step guide to logging in with ajax and json for your hybrid

As a beginner coder, I am currently working on a project to create a mobile web login form using json and ajax. To test my code, I followed the tutorial provided here. This is the code I have developed: <!DOCTYPE html> <html> <head> ...

javascriptphpjqueryajaxjson

Can I Select a Specific Node in React Component with Unique Behavior Upon Reuse?

Seeking advice on how to uniquely target a specific node within my react reusable component in order to perform operations on it multiple times independently. I will be rendering this reusable component several times on the same page in my App.js. Here is ...

javascriptreactjs

Overflow-x in HTML5 Websites

I recently launched my website in the "alpha" stage - I have implemented full mobile support using media queries. It displays perfectly when the browser window is resized, but I noticed a strange space to the right of everything on my Samsung Galaxy Note ...

csshtmlmobilemedia-queriesfluid-layout

Is there a way to horizontally center Material UI Switch and its icon props?

I'm using Material-UI to implement a Switch component on my project. This particular component allows for the addition of icons, however, I've encountered an issue with alignment when including them. Is there a way to horizontally center align b ...

javascripthtmlreactjsmaterial-ui

Redirecting the socket.io client to the Heroku service

Recently, I developed a real-time chat application using socket.io, Node.JS, and express. It was functional on my local server but now I want to connect it to an existing Heroku service instead. How can I achieve this? Once I tried the following code, va ...

javascriptnode.jsexpressherokusocket.io

Automating the Process of File Downloads Using Ajax and PHP

I am currently working on a form that requires users to enter a secret key. Once the key is submitted, it is verified against a database. If the key is found, the relevant file associated with the key should be downloaded automatically. I have successfully ...

javascriptphpjqueryajax

What is the best approach to retrieve all items from DynamoDB using NodeJS?

I am trying to retrieve all the data from a DynamoDB table using Node.js. Here is my current code: const READ = async (payload) => { const params = { TableName: payload.TableName, }; let scanResults = []; let items; do { items = await ...

javascriptnode.jsexpressamazon-dynamodbes6-promise

What is the best way to retrieve information from a form that is coded within inner HTML?

I need to extract data from the text fields in my code. How can I do that? Here is my JavaScript function that adds a new form every time the add button is clicked: function elementAppender() { if (count <= 5) { let element = docum ...

javascripthtmlbootstrap-5

What is the best way to transfer a value to v-model using emit?

I'm having trouble passing the selected value from a select field to v-model. Currently, the code only seems to work with a v-text-field. <script> export default { name: 'FormSelect', props: { model ...

javascriptvue.jsvuetify.js

The server appears to be up and running, however there seems to be an issue when attempting to access the API as it is returning an Error: connect ECONNREFUSED 127.0.0.1

Trying to decouple app and server. Successfully running, but encountering Error: connect ECONNREFUSED 127.0.0.1:3000 in Postman when hitting "app.get('/')" API despite making necessary changes. In ./routes/users.js const express = requ ...

javascriptnode.jsmongodbexpress

Tips for creating an effective dark mode toggle switch on a website

I was experimenting with creating a dark-mode switch for a website, but I'm not convinced that my implementation is the most efficient. Essentially, I ended up duplicating each file and adding a "2" at the end to create modified versions for each sect ...

javascriptreactjsmaterial-ui

What is the reason behind Svelte not scoping the tag under a class, but instead using individual tag.class to style a component?

It is common practice to scope CSS styles for components like this: .my-component-01 h1 { ... } .my-component-01 h2 { ... } However, Svelte takes a different approach by applying the styles directly to the tags: h1.svelte-hlsza1{color:orange} h2.svelte- ...

csssvelte

Path to local image in JavaScript

Apologies for the newbie question, but I'm trying to display a gif on a webpage using an HTTP link and it works perfectly. However, when I try to replace it with a file path, it doesn't work. The gif is located in the same folder as the webpage. ...

javascriptasp.net

Decoding JSON data

How do I parse 2 JSON objects? When AJAX returns just one object, it appears correctly: Object {32 : "Joseph"} However, when it returns more than 2 objects, this is what I get: ResponseText: "{"users":{"32":"Joseph"}}{"users":{"48":"Joseph K."}}" I h ...

javascriptjqueryjsonajax

Tips for optimizing the page speed of your Pixi JS app by ensuring it runs efficiently after the page loads

On my website, I implemented a dynamic gradient animation with shape-changing blobs using pixi js. The animation functions flawlessly, but the issue arises when I run page speed tests - the test assumes that the page has not finished rendering because the ...

javascripthtmljquerycsspixi.js

Encountered an issue while trying to register a service worker: "[ERROR] Cannot import statement outside

With the utilization of register-service-worker, the boilerplate for registerServiceWorker remained untouched. /* eslint-disable no-console */ import { register } from 'register-service-worker'; if (process.env.NODE_ENV === 'production&ap ...

javascriptvue.jsimportservice-workerecmascript-5

Automatically calculate the sum of numbers as the user inputs values dynamically, regardless of the number of inputs. Notify the user if they enter anything other than numbers

HTML Table with Dynamically Adding Rows <table> <thead> <th>Item</th> <th>Cost</th> </thead> <tbody id="items-list"> <tr> <td>Item 1</td> ...

javascriptjquery