Using HTML5 localStorage as a condition tool for dynamically changing CSS styles

Hello

After spending a considerable amount of time trying to figure this out, I seem to be stuck. I believe I am following the correct steps, but for some reason, it's not working. Any advice or suggestions would be greatly appreciated.

I am attempting to modify the display property from :none to :block in an external CSS stylesheet based on whether the value of a local storage key is null with the help of jQuery.

CSS

#cart-totals div.greysp1 {
    display:none; 
    border-bottom: 1px solid #ccc;
    padding: 3px 0;margin: 0 0 0 20px;
    overflow: hidden;
    text-align:left;
    line-height:18px;
    color:#888;
}

Javascript/jQuery

if(localStorage.getItem('userScribble') == null){  
    $("#cart-totals div.greysp1").css("display", "block");
    console.log("null");
} else {
    console.log("Not null")
}

HTML

<div id="cart-totals" >
    <div class="cart-totals-content">
        <div class="greysp1">
            <div class="fL">Merchandise Subtotal:</div>
            <div class="fR" id="MerchSubTotal"></div>
          </div>
    </div>
</div>

Any insights or recommendations?

I haven't come across any similar examples yet. If you have any, please share them with me.

Answer №1

If you're having trouble getting the code to work in your tests, it may be because you're testing it locally in a browser like IE 9 that doesn't support localStorage for local documents. This might seem contradictory, but it makes sense since localStorage is designated per domain, and local documents don't have a domain.

Try testing it on Chrome (or the latest version of Firefox), or upload the file to a web server and test it from there.

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

How can I make CSS images appear beside specific links?

Currently, I have implemented the following CSS: .entry a { padding: 2px 0 0 8px; background: transparent url(images/link_arrow_light.gif) left top no-repeat; text-decoration: underline; } It is functioning correctly, but the image is being added t ...

Navigating Tabs and jQuery for JSON Data Refresh: A Step-by-Step Guide

Struggling to implement a basic UI and seeking advice from the community. Here's my current setup: 1) Using getJSON to fetch a JSON string (multidimensional array) from a PHP page. 2) Utilizing 2 jQuery.each loops to iterate through the JSON data and ...

Data is nowhere to be found despite using the post method, but the URL still contains valuable information

Recently, I've delved into the world of PHP and have been experimenting with HTML forms. Initially, I used the method GET which worked perfectly fine. However, when I switched to using the method POST, I encountered an issue where I couldn't retr ...

How can I set up an automatic refresh for an angularjs iframe?

This code utilizes Angularjs and is designed to be run on a localhost server. The first part of the code can be found in index.html: <iframe src="{{Url}}" width="100%" height="500"></iframe> The second part of the code is located in app.js: ...

Incorporating various patterns in the <input> element of an HTML 5 form to enhance validation

Currently, I have a requirement for my input in the form where my valid values can be a number, "No Min," or "No Max." I am able to use a pattern for either string value or a number but not both simultaneously. My question is how can I use multiple patte ...

SQL Delete rows from Table

I am dealing with an issue where a table displaying notices has a clear option next to each row, but when the clear button is clicked nothing happens. The setup involves a button that triggers a clear function. What could be causing this problem? <bu ...

Using jQuery's $.ajax() function to make an asynchronous request, and then passing the

I'm currently utilizing the jQuery $.ajax() function within a parent function that passes values into the ajax call. I am looking to have a custom callback function that can access the data parameter returned from the success function of the ajax call ...

Utilizing Jquery to create a carousel with looping functionality for flowing text

I am currently facing an issue with a carousel that contains multiple images and text. In order to make the text responsive, I have implemented a script called FlowText. The script works perfectly on the initial carousel image (the active one), but as soon ...

Discover the step-by-step guide for inserting personalized HTML into the current widget screen on Odoo 12 with

For the past 3 days, I've been stuck trying to figure out how to print order items. My goal is to have a custom HTML code added to a div with the class 'order-print' when the Order button is clicked. I am using odoo 12 and facing issues wit ...

Download an image file using JavaScript and HTML from a specified image URL

As someone who is new to JS and HTML, I am currently working on a project involving the creation of pie charts using Google Charts through an HTML API. I've successfully generated the chart and obtained the image URL. However, when I use window.open( ...

Using jQuery to define the position of a child <td> within a row's onclick event

I am currently working on a click function for a table row that needs to pass the content of the first two tds in the row. // Click function assigned to table rows $('#supportTables1 tr').click(function () { var firstTd = $(this).find(' ...

Analyzing Date Strings Retrieved From a MySql Database

In my MySQL database, I have a relationship that stores dates as varchar along with other attributes. This is how it looks: Answers answerId answer questionId date I am working on a web application where the user can select a &apo ...

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

Utilizing Javascript to Connect with Java Web API

I'm seeking assistance with transferring a file from a browser to another device connected to a server-operated machine. I am relatively new to web application and back-end programming. The current code allows for moving a file from the server to the ...

CSS: Deciphering the Hidden Message in this Code Snippet!

Update In my CSS file, I encountered a conflict with the following snippets. When I include this section: <style type="text/css"> ::selection{ background-color: #E13300; color: white; } ::moz-selection{ background-color: #E13300; colo ...

Efficiently Aligning Elements in CSS both Vertically and Horizontally

I'm struggling to align my form both vertically and horizontally. It's okay if this doesn't work on IE - I will include an IE detection script to prompt users to switch browsers. However, Firefox and Chrome support is essential. Below is m ...

The .prop() method does not modify the identifier of an element

I'm currently working on a jQuery/JavaScript code that clones a template element and gives each clone a unique iterative ID (such as 'eventCard0', 'eventCard1', etc.) Everything is working smoothly, except for the .prop('name ...

Having trouble loading the image source using JSON in Vue.js

var topArticle=new Vue({ el:'#toparticle', data:{topmostArticle:null}, created: function(){ fetch('topnews.json') .then(r=>r.json()) .then(res=>{this.topmostArticle=$.grep(res,functi ...

Controlling various divs with unique identifiers using Angular

Imagine having a vast number of HTML elements with unique IDs that require their styles to be changed repeatedly in a controller for spectrum visualization. What is the most efficient way to achieve this in Angular, without resorting to duplicative HTML co ...

What is the best way to eliminate the header and side navigation in a master page design?

I've set up a master page called wrap.master which is connected to multiple content pages. I'm looking to create a new content page and link it to the master page. However, I want this new content page to be independent from the header and side n ...