Mastering MaterializeCSS: Creating a Toggle Feature for Two Notifications with a Single Button Click

Visit my Personal Website at this Link StyleSource-Library BETA

While I was working on some content, I created a Container Enabler/Disabler Button. This button is positioned in the Navigation Bar on the top right and works perfectly by adding a container class to the div tag. I also added a feature that notifies the user if the container class is activated or not. However, there seems to be a problem as it displays the same notification "Container is ON" when pressed twice instead of toggling between "Container is ON" and "Container is OFF." It also throws errors in the console such as "Uncaught SyntaxError: Unexpected token ILLEGAL" and "Uncaught SyntaxError: Unexpected token )." Here's the code snippet for activating the container:

HTML

<li>
    <a href="#" id="ToggleContainer-NoficationStatus" class="tooltipped toggle-container waves-effect waves-red" data-position="bottom" data-delay="100" data-tooltip="Iam a Container Adder-Disabler :)">
        <i class="material-icons">web</i>
    </a>
</li>

Jquery

<script type="text/javascript">
    $('.toggle-container').click(function(){
        $('#adder').toggleClass('container');
    });
</script>

To activate the Notification but it actually not showing or showing an error, here's the code for Toggling The Notification when the Container Class Is detected or not in the div tag.

<script type="text/javascript">
    $(document).ready(function(){
        $("#ToggleContainer-NoficationStatus").click(function() {
            $(#adder).hasClass("container");
            setTimeout(function() {
                Materialize.toast('Container Layout is On.', 2000);
            }, 500);
        });
    });
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#ToggleContainer-NoficationStatus").click(function() {
            (!$(#adder).hasClass("container"));
            setTimeout(function() {
                Materialize.toast('Container Layout is Off.', 3000);
            }, 1000);
        });
    });
</script>
<div id="adder" class=""> //This is where the Container Class Goes on

I have been trying to solve this issue for the past 3 hours and can't find a solution online. Even though there are resources available, none seem to work. My Mother is getting frustrated with me spending 12 hours on the computer working on this personal project. Can anyone offer assistance on how to fix this error? Any help would be greatly appreciated. :)

INFO To locate the error, please visit my website StyleSource-Library BETA. The error is related to the button in the top right section resembling a Web Layout Icon.

Answer №1

After taking into consideration your feedback, I am posting the answer with an updated script to simplify and streamline your existing script.

$('.toggle-container').click(function(){
// Step 1: Toggle the class initially
    $('#adder').toggleClass('container');
    
    // Step 2: Check if '#adder' has class=conatiner and display a toast message, otherwise proceed to Step 3
    if($("#adder").hasClass("container")) 
        {
        alert("Container Layout is ON"); // Implement your setTimeout function here.
        }
    
    //Step 3: Check if '#adder' does not have class=conatiner and show a toast message
    if(!$("#adder").hasClass("container")) 
    {
        alert("Container Layout is OFF"); // Implement your setTimeout function here.
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li><a href="#" id="ToggleContainer-NoficationStatus" class="tooltipped 
toggle-container waves-effect waves-red" data-position="bottom" 
data-delay="100" data-tooltip="Iam a Container Adder-Disabler :)">
<i class="material-icons">web</i></a></li>


<div id="adder" class=""> //This is where the Container Class Goes on</div>

To test out the modifications, you can access the Demo Link provided below:

JSFiddle : DEMO.

Fiddle : Updated

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

Angular: A guide to binding to the required/ngRequired attribute

There is a directive that may or may not be required, and it can be used in two different ways. <my-foo required></my-foo> or <my-foo ng-required="data.value > 10"></my-foo> Even though require and ngRequire are essentially t ...

Angular promise did not assign a value to a variable

Can someone assist me with a problem I'm facing? After the first callback, the variable doesn't seem to change as expected. Below is my code snippet: this.handlerLocalDef = function(defer) { var hash = {}; defer.then( ...

Attach a marker to a designated street

Currently, I am working on a project that involves tracking user feedback for a long stretch of construction area. The challenge lies in ensuring that the marker placed by the user snaps to the road between two specific points - Point A and Point B. I hav ...

Guide to showcasing console output on a Web Server

Apologies if this question is not the most suitable for this platform. I recently set up Pure-FTPd service on a CentOS server. To check current connections, I use the command pure-ftpwho, which gives me the following output: +------+---------+-------+---- ...

Tips on obtaining the controller function count for an ASP.NET MVC ajax progress bar

I am currently trying to retrieve a raw count from a foreach function within an AJAX post response. The challenge I am encountering is that the post response provides the total count of all iterations in the foreach loop instead of individual counts. My ob ...

JSP displays outdated information

Here is my current issue: I have set up a Servlet as the Controller, JSB as the Model, and Java Beans for storing information. Below is the code snippets: HTML/JSP: <table summary="This table displays information about the current game"> ...

Is there a workaround for retrieving a value when using .css('top') in IE and Safari, which defaults to 'auto' if no explicit top value is set?

My [element] is positioned absolutely with a left property set to -9999px in the CSS. The top property has not been set intentionally to keep the element in the DOM but out of the document flow. Upon calling [element].css('top') in jQuery, Firef ...

How can you determine the locations where the "return" key has been pressed in a text document?

I am attempting to modify a text that contains pressed return (Enter) keys. For example: "Hey man, how are you? Here there is one enter above. And pressing 2 enters below. Ok?" The modified text should appear as: "Hey man, how are you?XHer ...

Following a POST request, the redirection functionality in Next.js seems to be malfunctioning

I am facing an issue with redirecting the user after submitting a form. I have a button that triggers a post request to my API route, which then inserts a row in the database. The goal is to redirect the user to / once everything is done. However, the retu ...

Protractor struggling to drag an element, but cannot successfully drop it

I've been utilizing Protractor to test my AngularJS application, specifically focusing on dragging an element and dropping it onto an SVG. So far, I've managed to successfully click and drag the element over the SVG. browser.actions() .mouse ...

Adding to an existing array in MongoJS

I have been attempting to append data to an existing array in my mongoDB. The code snippet below is what I currently have, but unfortunately, it does not work as expected since all the existing data gets wiped out when I try to add new data: db.ca ...

Tips for automatically loading a new page or URL when a user scrolls to the bottom

I am working on implementing infinite scroll functionality, where a new page loads automatically when the user reaches the bottom of the page or a particular div. Currently, I have this code that loads a new page onclick. $("#about").click(function(){ ...

Ways to pass a list from app.js to a component in react js

Currently, I am facing an issue while trying to set a state in one component and transfer that list to another component. The error message in the console says "List.map() is not a function!". This seems like a challenge I need to tackle. In my project, I ...

Enhancing my website with automated slider functionality

I currently have an image slider on my website that includes a hover effect. You can view the code here: http://jsfiddle.net/Nctfa/. Here is the HTML code: <div class="accordian"> <ul> <li> <div class="image_title"> ...

Utilize jQuery to dynamically update the checklist with stylish elements and display the total number of items in real

I have a list that can sometimes contain 5 elements, other times it may have 7. I want to determine the number of elements and apply a special style to those with less than 5. The current code I have is not working as expected... Perhaps I need to implem ...

Break free from Instagram's in-app browser and open in Safari instead

One of the features on my website is a link that redirects users to Instagram login to access photos. Unfortunately, when using the in-app browser on an iOS device, this page does not function properly. I am considering adding a link that will redirect use ...

Emptying the AnyChart (Javascript) container prior to generating new charts

I have been utilizing the anychart JavaScript library to generate a pie-chart from my data, which is dynamically pulled whenever a user modifies a dropdown selection. Below is the code snippet I am employing for this purpose: var stage = anychart.graph ...

Using jQuery to Hide and Show 3 Divs with Clicked Buttons

My goal is to have three divs, each with different content that will be displayed when a user clicks a corresponding button. I would like the first div to be displayed by default when the page loads. I attempted to achieve this using the code below, but ...

Switch out external CSS stylesheets automatically using toggle scripting

Hello there! I've been trying to figure out a way for this script to switch back to the original CSS external stylesheet. Here is the code that I currently have: $(document).ready(function() { $("#css-master2").click(function() { $("link[title=chang ...

The operation to assign a value to property 'two' cannot be completed as it is currently undefined

I'm facing an issue with the code below and cannot figure out why I am encountering the error message. I have ensured that each object contains a value, so why is there a reference to 'undefined'? Cannot set property 'two' of unde ...