Enhancing progress through cleanliness

When developing a website, I am implementing progressive enhancement to ensure accessibility and SEO friendliness. This approach involves structuring elements like the menu and slideshow as unordered lists in the page markup, with JavaScript handling the styling.

I want to prevent any flash of unformatted content where the unordered lists are visible before being styled. Can anyone share best practices for avoiding this issue?

It's crucial that the site remains accessible and SEO-friendly, which is why I'm using progressive enhancement. For example, I can't simply hide the initial appearance of the unordered lists with display: none.

javascriptcssseoaccessibilityprogressive-enhancement

Answer №1

Opt for CSS to style your content, rather than relying on JavaScript.

Answer №2

It's completely off the table to initially hide unordered lists by setting them to display:none.

You can indirectly achieve a similar effect of hiding the style with `display: none` by utilizing CSS along with a script that runs before any content is loaded:

<head>
    <style type="text/css">
        body.withjs #menu { display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.body.className= 'withjs';
        window.onload= function() {
            ...do stuff with menu...
            document.getElementById('menu').style.display= 'block';
        };
    </script>
    ...
    <ul id="menu">
        ...
    </ul>
</body>

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 find a specific element value and gather all following elements in a

What is the best way to retrieve elements following -p or --name within this array? ['-p', 'player', '1', '--name', 'player1', 'name'] ...

javascriptarrays

What is the method for displaying the delete icon, a child component located within the Menu Item, upon hovering over it using Material UI CSS syntax?

My goal is to display the delete icon when hovering over a specific menu item that is being mapped using the map function. The desired functionality is for the delete icon to appear on the corresponding menu item when it is hovered over. I attempted to i ...

javascriptcssreactjsreact-nativematerial-ui

React Native: Troubleshooting Issue with Shallow Copying of Nested JSON Objects

I have a JSON structure with nested objects like this: {"name", "children": [JSON objects]}. I am attempting to add a new child to the object based on a variable path, which is an array of names. Strangely, my code works fine in the Ch ...

javascriptjsonreact-nativereferenceshallow-copy

Which javascript libraries or game engines can be utilized to create a 3D environment with x, y, z coordinates to monitor the movement of objects?

Currently, I am working on developing a basic web application prototype that will showcase the real-time tracking of up to five individual objects within a predefined room. While I have explored the possibility of using three.js for this project, I am wond ...

javascriptthree.jscoordinatesrfid

When comparing MongoDB to Javascript, the $regex matching pattern yields varied results

Currently, I am implementing the following $regex pattern in a mongo query: {domain: {$regex: '^(.+\.)?youtube.com$'}} I anticipate that it will match youtube.com as well as sub.youtube.com. However, the issue I have encountered is that i ...

javascriptregexmongodb

Awaiting the completion of multiple asynchronous function executions

I am currently working on a promise function that executes an async function multiple times in a loop for different data. I would like to ensure that all async functions are completed before resolving the promise or calling a callback function within a non ...

javascriptnode.jsasynchronouspromise

Need help tackling this issue: getting the error message "Route.post() is asking for a callback function, but received [object Undefined]

I am currently working on implementing a new contactUs page in my project that includes a form to store data in a mongoDB collection. However, after setting up all the controller and route files and launching the app, I encountered an error that I'm u ...

javascriptnode.jsreactjsexpress

Using identical variable names for functions in Node.js

I'm feeling a bit puzzled about the following code snippet. Is it possible to create a class in JavaScript like this? module.exports = function testName(params){ testName.test = function(req, res){ //some code here } return testName; } Inste ...

javascriptnode.js

Leveraging Amplify for offline storage while transitioning between HTTP and HTTPS protocols

Recently, I encountered an issue with Amplify 1.0a1 on my website. It seems that when storing the value of prod_id in localStorage on a page using HTTP, and then navigating to a page using HTTPS (such as the 'list' page), I am unable to access th ...

javascriptjqueryhttpslocal-storageamplifyjs

What are the steps to design a versatile gallery page that can serve various projects?

Allow me to get straight to the point. What is my goal? I am aiming to develop galleries for various projects. Each project's thumbnail on the main page should open a gallery as a new page. These galleries will all have the same layout but different ...

javascriptphphtmlcssgallery

Can JavaScript/JQuery be used to dynamically alter the color of a dropdown menu or change the color of list items when a radio option is selected?

Is it possible to enhance the functionality of my code that currently selects a radio option and automatically changes the dropdown box? Can I also make the selected dropdown item change color, such as blue for 'Work', green for 'Grocery&apo ...

javascripthtmljquerydynamicradio-button

Bootstrapvalidator does not function properly with select2.js

My code is not validating the select field. What could be causing this issue? Can anyone provide a solution? Apologies for my poor English, and thank you in advance for your response. Here is my form: <form name="form_tambah" class="form_tambah"> ...

javascripthtmltwitter-bootstrapcodeigniter

Using Vue.js to conditionally render content based on changes in a variable

I am facing a challenge in rendering a new element once the boolean variable waiting changes to true. The issue arises when transitioning from one v-if statement to another, as the boolean does not update until the first statement is completed. How can I s ...

javascriptvue.jsvuejs2

How to utilize a PHP array within a Vue.js template

I have been exploring the realms of Laravel and vue.js recently and have encountered a challenge. Within my Laravel model, I have a PHP method that retrieves data from a database and organizes it into objects stored in an array. Now, my goal is to access t ...

javascriptlaravelvue.jsvuejs2vue-component

No form data available during IE10's unload event

My method of saving form data in emergencies by hooking window.unload and sending it via ajax using POST works well in browsers like IE9 and Chrome. However, I have noticed that in IE10, the form data is empty when sent through POST (using GET as a worka ...

javascriptajaxinternet-explorerinternet-explorer-10

The error message TS2304 is indicating that the name 'Set' cannot be found in electron-builder

I am trying to utilize the AppUpdater feature in electron-builder for my Electron Application. Upon importing the updater in my main.ts file: import { autoUpdater } from "electron-updater" An error is triggered when running the application: node_module ...

javascripttypescriptelectron-builder

Trouble with loading Javascript file on local server

Recently, I started exploring express and decided to build a basic webpage on localhost:3000. The page consists of a text box and a submit button, where clicking the button will retrieve the text from the text box and display it on the console. Here is my ...

javascriptnode.jsexpresshandlebars.js

Techniques for transferring JavaScript variables within a URL using AJAX

Is there a correct way to pass the values of accesstoken and pageid inside the URL I am using? Any ideas on how to do it properly? <script type="text/javascript"> function makeUrl() { var accesstoken = "12345679|bababashahahhahauauuaua"; ...

javascriptjqueryajaxurl

Issue with Bootstrap Carousel: all elements displayed at once

I'm in the process of building a carousel. I have set up the structure, but I only want five blocks to be visible initially, with the sixth block appearing after clicking an arrow. How can I achieve this? My strategy: (adopted from here) img{ b ...

javascripthtmlcssbootstrap-4carousel

CF component not able to accept arguments when invoked by JavaScript through cfajaxproxy

Ever since updating to ColdFusion 2016 Update 4, I've been experiencing a new issue. Here's the code snippet: <input type='button' name='btn' value='Click me' onclick='proxyFunc();'> Incorporating ...

javascriptajaxparameterscoldfusion