Utilize JavaScript to implement CSS using an "if" statement

I am currently working on implementing iOS web app properties into my website. My goal is to create a <div> at the top of the page and apply specific CSS styles when a certain condition is met in a JavaScript script.

Unfortunately, I am facing issues with getting the styles to work properly. You can see a demonstration of my concept here: jsFiddle

The JavaScript code I am using on my actual website () is as follows:

<script type="text/javascript">
    function statusBarBG(){
    if (("standalone" in window.navigator) &amp;&amp; window.navigator.standalone) {
             $('.status-bar').css('width', '100%');
             $('.status-bar').css('height', '20px');
             $('.status-bar').css('position', 'fixed');
             $('.status-bar').css('background', '#454545');
             $('.status-bar').css('z-index', '9999');
               };
    };
</script>
javascriptioscss

Answer №1

Instead of just defining the function, you can execute it as a self-executing anonymous function like this:

(function changeStatusBar(){
    if (("standalone" in window.navigator) &amp;& window.navigator.standalone) {
             $('.status-bar').css('width', '100%');
             $('.status-bar').css('height', '20px');
             $('.status-bar').css('position', 'fixed');
             $('.status-bar').css('background', '#454545');
             $('.status-bar').css('z-index', '9999');
    };
})();

Also, make sure to add the jQuery library and execute the function when using jsfiddle.

Check out the updated jQuery working DEMO

Answer №2

Give this approach a shot...

$('.progress-bar').setAttribute("style","width: 100%");
$('.progress-bar').setAttribute("style","height: 30px");
$('.progress-bar').setAttribute("style","position: absolute");
$('.progress-bar').setAttribute("style","background-color: #568392");
$('.progress-bar').setAttribute("style","z-index: 8888");

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

Freeze your browser with an Ajax request to a specific URL

There is a function in my view that transfers a value from a text box to a table on the page. This function updates the URL and calls another function called update_verified_phone(). The update_verified_phone() function uses a model called user_info_model( ...

javascriptphpjqueryajax

Guide to incorporating flash into a form similar to the method used on http://www.mediafire.com

I'm looking to integrate a flash upload feature into my index file, but I'm not sure how to do it. Here is the link to the flash uploader: . I want it to work similar to how uploading works on when you click on UPLOAD. Thank you for any assistan ...

phpjquerycssflash

Enhancing JSON data in Datatables with additional text

I'm currently looking for a way to insert some text into my data before generating a table using jQuery DataTables. As an example, if my JSON data looks like [1,5,6,12], I would like it to be displayed as [1 seconds, 5 seconds, 6 seconds, 12 seconds] ...

javascriptjqueryjsondatatables

Using @material-ui/core/useScrollTrigger in a Next.js application: a step-by-step guide

I have been researching the Material-UI documentation for useScrollTrigger and attempting to implement it in Next.js to replicate the Elevate App Bar. https://material-ui.com/components/app-bar/#usescrolltrigger-options-trigger import React from "react"; ...

javascriptreactjstypescriptmaterial-uinext.js

Nuxt.js ERROR: Unable to find reference to 'window' object

Currently working with Nuxt.js and encountering an issue while configuring vuex-persist. Seeking assistance from someone familiar with this problem. store/index.js store/LangModule.js ...

javascriptvue.jsvuexnuxt.jspersistence

Assigning a click event to an element within CKEditor

Looking to add a click event to an element in ckeditor4-angular for custom functionality <div class="fractional-block" id="fractional-block"><span>5</span><svg height="5" width="100%"><line ...

javascriptangularckeditorckeditor4.x

Can you direct me to resources on the internet that provide information about support for 12 Bit color depth?

I am curious to know when the w3specs will support colors in 12 bits instead of the current 8-bit format used for webcolors like sRGB (#FFFFFF or rgba(255,0,0,100). I wonder if there will ever be a new standard called 12-Bit sRGB where colors can be defin ...

csscolorsphotocolor-depthsrgb

Is pl/pgsql block code supported by postgres-nodejs?

I am attempting to define a custom UUID variable that can be utilized across multiple queries within a transaction. Initially, I attempted using a JavaScript variable which ultimately defeated the purpose of declaring the variable on the server side. The ...

javascriptnode.jspostgresqlexpressplpgsql

Expanding the CSS Search Box

Visit the link I've been working on coding a CSS text box. When you hover over the button in the provided link, you'll notice that the 'Type to search' functionality is working smoothly as it moves to the right. My current focus is on ...

css

Troubleshooting npm audit error involving loadVirtual and ENOLOCK

➜ npm safety check npm ERR! code ENOLOCK npm ERR! safety check This operation requires an existing lockfile. npm ERR! safety check Please generate one using: npm i --package-lock-only npm ERR! safety check Original error: loadVirtual needs a preexistin ...

javascriptnode.jsreactjsnpm

Guide to importing scoped styles into a <NextJS> component

When importing a CSS file, I usually do it like this: import './Login.module.css'; In my component located at components/login/index.js, I define elements with classes such as <div className="authentication-wrapper authentication-basic ...

javascriptcssnext.js

Add array as an element within another array

After initializing the data, I have an object structured like this and I am able to push data using the method below: myObj = { 1: ["a", "b", "c"], 2: ["c", "d", "e"], } data: { types: {} }, methods: { pushValue(key, value) { var ...

javascriptarraysmultidimensional-arrayvue.jsvuejs2

Encase the event handler within JQuery

Here's an example of inputs with OnBlur event handlers: <input name="abc" tabIndex="5" class="datetime" onblur="if (CheckMode(this))__doPostBack('abc',''); else return false;" /> Now, in JQuery Form ready function, I want ...

javascriptjquery

Storing a variable in jQuery using AJAX and retrieving it at a later time

Hey there! I'm currently using jQuery and AJAX to fetch the user ID of the logged-in user. I'm storing this information in a variable so that I can use it for some logic later on. However, I'm facing issues with accessing it. Here's my ...

javascriptjqueryajaxglobal-variables

In Node.js, while running unit tests, the importing function is limited to read-only access

Having trouble mocking an async function in Jest? I followed the documentation and used mockResolvedValue, but encountered a read-only issue when trying to import my mock function from another file. Check out my code below: //index.js async function get ...

javascriptnode.jsaxiosjestjs

remove an element from a nested array using MongoDB

Greetings everyone! I am currently working on a materials document that contains arrays of articles, each article having an array of details. Here is a snippet from my collection data: { "_id": "62f2404b42556d62e2939466", "code&quo ...

javascriptnode.jsarraysmongodbexpress

Organizing data in a bar chart with D3.js through the d3.nest() function

I am new to d3.js and my JavaScript skills are at a basic level. Thank you for your assistance, it is greatly appreciated. Total Clicks per Campaign I have a CSV file with columns: "Campaign" and "Clicked". The "Clicked" column contains values: Clicked ...

javascriptd3.js

Finalizing an item's status

I am quite puzzled about the workings of closures in this particular code snippet: function Spy(target, method) { var result = {count: 0}, oldFn = target[method]; target[method] = function(input) { result.count++; return ol ...

javascriptclosures

Tips for Ensuring the Longevity of my Node.js Server

After developing an application in Node js with express js, I am facing an issue where the server shuts down whenever I close the command prompt. To start the app, I use the following command: c:/myApp > npm start I attempted to resolve this problem b ...

javascriptnode.jsexpress

Assigning event to the body element

Is there a way to bind an event to the entire page, specifically the html or body tag? I am trying to achieve the following: document.addEventListener('mousemove', function() { alert('a'); }); I want an alert to be triggered whenever ...

javascripthtml