Is it possible to manipulate CSS on a webpage using javascript?

I have incorporated this piece of JavaScript to integrate a chat box onto my website:

 window.HFCHAT_CONFIG = {
     EMBED_TOKEN: "XXXXX",
     ACCESS_TOKEN: "XXXXX",
     HOST_URL: "https://happyfoxchat.com",
     ASSETS_URL: "https://XXXXX.cloudfront.net/visitor"
 };

(function() {
  var scriptTag = document.createElement('script');
  scriptTag.type = 'text/javascript';
  scriptTag.async = true;
  scriptTag.src = window.HFCHAT_CONFIG.ASSETS_URL + '/js/widget-loader.js';

  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(scriptTag, s);
})();

This is the HTML code that is being generated on my webpage:

<div id="hfc-embed-container" style="display: block;">
    <div style="" id="hfc-cleanslate" class="hfc-chat-container">
      <div class="chat-template">
        <div id="hfc-badge" class="hfc-default-minimized-view hfc-page hfc-badge clearfix hfc-badge-bottom" style="background-color: rgb(255, 255, 255);">
          <div class="hfc-proactive-notification">
            <div class="hfc-proactive-message">Hi! This is a test message!</div>
          </div>

          <img alt="" class="hfc-badge-icon" id="hfc-badge-icon" src="https://d1l7z5ofrj6ab8.cloudfront.net/visitor/images/floating-widget-circle.png">
          <h2 class="hfc-badge-title" style="color: rgb(0, 0, 0);">Leave us a message!</h2><span class="hfc-unread"></span>
        </div>
    </div>
  </div>
</div>

If the text "Leave us a message" appears in the generated HTML, I would like to hide the hfc-embed-container by setting its display property to none.

Would it be possible for me to achieve this using JavaScript or should I consider exploring other options? Appreciate your input!

javascripthtmlcss

Answer №1

Your HTML code may have elements with IDs containing hyphens, which is allowed for class names but not for IDs. To resolve this issue, you can change the ID from hfc-embed-container to hfcEmbedContainer.

<div id="hfcEmbedContainer" style="display: block;">

To ensure proper functionality, make sure to run the following code only after the DOM has loaded:

if (document.querySelector(".hfc-badge-title").innerHTML.indexOf("Leave us a message") > -1) {
    document.getElementById("hfcEmbedContainer").style.display = "none";
}

If there is a button triggering a message dialog (named btnLeaveMessage), consider moving the code there:

window.addEventListener("DOMContentLoaded", function(){
    document.getElementById("btnLeaveMessage").addEventListener("click",    
      function(){
        if (document.querySelector(".hfc-badge-title").innerHTML.indexOf("Leave us a message") > -1) {
           document.getElementById("hfcEmbedContainer").style.display = "none";
        }
      });
});

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

Stop allowing special characters in Ajax requests (HTTP)

$.ajax({ url: '/pos/' + myVar type: 'GET', success: function(data) {} .. I have a variable called myVar with a value of "a-b". However, the value may sometimes be represented as "a->b", causin ...

javascriptjqueryajax

In PHP, the symbol "!=" is used to compare if a string is not equal to a

Seeking feedback on why setting a string variable prevents me from calling it within a function. For instance: $name = "name"; $quote_name = "'".$name."'"; //echo of $name = name //echo of $quote_name = 'name' In PHP, I encounter iss ...

phphtml

Is it possible to send an entire HTML table to the server and then update the database table with it?

Recently, I encountered an issue that has me stumped. Suppose I have a database table A with multiple columns and the server (PHP script) renders this data into an HTML table for the web client. Now, the challenge lies in allowing users to add/delete rows ...

javascriptjqueryajaxhtml-table

Utilizing AngularJS to extract data from a query string

After making significant progress on my previous project, I found myself in need of some final assistance that has proven to be elusive. I successfully built my entire angular controller and populated all the necessary data for the page. However, I am str ...

javascriptjqueryangularjs

The Art of Div Switching: Unveiling the Strategies

I have a question regarding my website. I have been working on it for some time now, but I have encountered a challenge that I am struggling to overcome. After much consideration, I am unsure of the best approach to take. The issue at hand is that I have ...

javascriptcsshtmldom

Updating the state on a click event triggered by a MenuItem in React using Material UI

I'm currently working on implementing state changes based on dropdown selections using Material UI. However, I've encountered an issue where the code snippet below (simplified) only returns the list item, and I'm unsure what steps to take n ...

javascriptreactjsdrop-down-menumaterial-ui

Looking to incorporate React Canary in raw HTML? Or perhaps interested in adding react-dom/client into your project?

Due to certain undisclosed reasons, I am developing a React application without the use of bundlers like webpack. Instead, I simply include React and ReactDOM using <script> tags in my index.html, fetching them from a CDN: https://cdnjs.cloudflare.co ...

javascriptreactjscdn

Exploring the Latest Features: Using Angular 7 with Bootstrap Collapse for Dynamic Aria-Controls

I am currently working on creating my own component to use within an *ngFor loop. I am facing an issue where I need a unique value for my Collapse feature. Right now, when I click on the second main row in the table, the collapse feature only shows the inn ...

htmlangularbootstrap-4

How can you retrieve the property value from an object stored in a Set?

Consider this scenario: SomeItem represents the model for an object (which could be modeled as an interface in Typescript or as an imaginary item with the form of SomeItem in untyped land). Let's say we have a Set: mySet = new Set([{item: SomeItem, s ...

javascripttypescriptecmascript-6

What is the best way to implement sorting in a table using react virtualized?

I've been working on implementing sorting in my project using the table sorting demo available on Github. Here is the code I'm using: import React from 'react'; import PropTypes from 'prop-types'; import { Table, Column, Sor ...

javascriptreactjsreact-virtualized

Adjust the size of the HTML input font to decrease as additional text is entered

Is it possible to create an HTML text field that automatically adjusts the font size when the user types more characters than it can display? I know Acrobat has this feature for forms, but I'm looking to implement it in HTML. So, imagine having a te ...

htmlcsstextresponsive-design

The angular controller function is failing to set $scope.value

I've been facing an issue with setting an Angular variable value in a controller function that is created by a directive. For some reason, it doesn't seem to work when I try to assign the value within the controller function, even though it displ ...

javascriptangularjsangularjs-directive

Encountering difficulties with showing contact images in phonegap using angularjs

In my project, I encountered an issue where I can fetch and display the contact photo using simple HTML and JavaScript. However, when I attempt to do the same using AngularJS model, I encounter an error. Below is the code snippet that I am struggling with: ...

javascriptandroidangularjscordovacontact-list

Show a pop-up notification for a compact disc

Received a CD containing various tutorials created in HTML. I am looking to have a browser window open with specific parameters, such as no toolbars and fixed width/height, to properly display the content. Using window.open with multiple parameters trigge ...

html

Guide to configuring an Angular Material Footer using Flex-Layout

Could someone help me with setting up the footer in my Angular Material app? I want it to: stick to the bottom when the content height is smaller than the view-port move down or get pushed down when the content height exceeds the view-port One important ...

htmlcssangularangular-materialangular-flex-layout

Tips for adding page numbers to a PDF created from HTML using wkhtmltopdf

Our response: We currently utilize wkhtmltopdf for generating PDFs from a specified html template. A brief overview: We incorporate Sulu CMF in constructing our backend, which is built on Symfony2. The KnpSnappy Bundle acts as a Symfony wrapper for wkht ...

javascripthtmlsymfonypdfpdf-generation

Showing items in a VueJS component and transferring them to the component

Utilizing VueJS 2.0 and vue-router 2, my goal is to display a template based on route parameters. I have a view called WidgetView where components are dynamically changed. Initially, WidgetComponent is shown which displays a list of widgets. When a user se ...

javascriptvue.jsvuejs2vue-router

Button click not triggering Ajax functionality

I've been working on implementing a simple Ajax function in a JSP using JQueryUI. The goal is to pass two text fields from a form and use them to populate two separate divs. However, when I click the button, nothing seems to be happening. I even tried ...

jqueryhtmlajaxjsp

Error in JavaScript Slideshow

I am attempting to create a slider that changes with a button click. Below is my JavaScript code: var img1=document.getElementById("p1"); var img2=document.getElementById("p2"); var img3=document.getElementById("p3"); function slide(){ ...

javascripthtmlcssuser-interfaceslider

What could be the reason for my jQuery focusout (or blur) event failing to trigger?

On the jsfiddle link provided, the HTML code at the end section looks like this: <input type="text" id="BLAboxPaymentAmount" value="2"> </br> <input type="text" id="BLAboxSection5Total" value="3"> Below that is the jQuery code snippet: ...

javascriptjqueryhtmlfocusoutjquery-focusout