Identifying an iOS-WebApp and adjusting the style using CSS properties

I have been searching for a solution to my specific problem, but I haven't found one that works for me.

Here is the issue at hand:
My responsive website displays an info-box when accessed from a mobile device. This info-box contains a link to a tutorial on how to save the site as a WebApp. However, when the user accesses the website from a WebApp, the info-box should be hidden.

Below is the code I am currently using (which is not functioning):

<script type="text/javascript>
  if (window.navigator.standalone == true) {
    document.getElementById('alertbox')[0].style.display = 'none !important';
  }
</script>

The ID of the info-box is "alertbox":

<div id="alertbox" class="alert alert-info visible-phone">
  <button type="button" class="close" data-dismiss="alert>×</button>
  This website supports iOS-WebApps. Learn more <a href="/guides/ios-webapp>how to save this website as a WebApp</a>.
</div>

The use of "!important" is necessary because I am utilizing Twitter's BootStrap which has already defined the sub-attribute (display) as !important.

Thank you in advance.

javascriptioscssweb-applicationsdetection

Answer №1

After extensive research and experimentation, I have successfully discovered a reliable solution:

<script type="text/javascript>
  if (navigator.userAgent.match(/(iPod touch|iPhone|iPad|CriOS)/i)) {
    if (window.navigator.standalone == true) {
      //Handling iOS WebApp
      $(".notification").notification('dismiss');
    }
    else {
      //For iOS Safari/Chrome
    }
  }
  else {
    //For other browsers
    $(".notification").notification('dismiss');
  };
</script>

This script is designed to automatically close the notification box using the following code:

<div id="notifybox" class="notification notification-info visible-phone">
  <button type="button" class="close" data-dismiss="notification">×</button>
  This platform fully supports iOS-WebApps. Find out more by visiting <a href="/guides/ios-webapp">how to convert this website into a WebApp</a>.
</div>

I trust that this solution will be beneficial to individuals facing similar challenges.

Answer №2

Could this possibly be the solution you're looking for? Finding out if user came from mobile Safari

I trust that this resolves your query.

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

Retrieving information from a JSON web service can easily be done using just JavaScript and jQuery

I recently downloaded a sample application from the following URL: . I am pleased to report that the part I have implemented is functioning flawlessly: <script src="scripts/jquery-1.3.2.debug.js" type="text/javascript"></script> <script src ...

javascriptjqueryjsonapijsonp

send a variable to a function in a random sequence

In my code, I have a function defined as follows: let showNotification = function(a,b,c,d,e,f){ console.log(a,b,c,d,e,f); } When calling this function, it is crucial to pass parameters in the correct order. For example, if I want to omit values for c, ...

javascriptangularjs

Guide to generating dynamic arrays in JavaScript when a button is clicked

I am working on a JavaScript program where I dynamically generate buttons and div tags, as well as retrieve data from a local JSON file. My goal is to implement a new feature where clicking a button will create an array with the same name as the button, al ...

javascripthtmlbootstrap-4

finding the relative path based on a given URL

Struggling to extract a relative path from a URL. For example, from , I want to get /my/path. I attempted the following: url = 'http://test.com/my/path'; console.log(url.replace(/^(?:\/\/|[^\/]+)*/)); Unfortunately, I am only ...

javascriptregex

How to override existing in-text styling when applying new styles

I am struggling with a website that is built on a CMS. The custom pages are generating html code with styling added to the elements individually, rather than through a style sheet. My issue is that I need to either remove the background-color property fro ...

csscss-selectors

Is it possible to adjust the height of a div based on different conditions

I'm currently working on a React project where I need to conditionally display a div above an existing one that covers the screen with an image. My goal is to have the existing div shrink in height, reducing the size of the image when the second div i ...

javascriptcssreactjsresponsive-design

Experiencing erratic outcomes with window.innerWidth in Mobile Safari

I am currently using JavaScript to determine the width of the browser: $(document).ready(function(){ var width = window.innerWidth; }); However, it seems that this method is producing inconsistent results. To showcase the issue, I have created a fun ...

javascriptjquerymobile-safari

The use of ReactDom.render is no longer permissible in Next.js

I just set up a fresh Next JS application using Next 12. Encountering this issue consistently on every page load in the browser: Alert: The use of ReactDOM.render is no longer supported in React 18. Please switch to createRoot instead. Until you make th ...

javascriptreactjsnext.js

What is the process for inserting a document into an array that is nested within another array?

My current dilemma revolves around a document (referred to as 'root') which contains an array of other documents ('stick'), each of which in turn contain another array of documents ('leaf'). Simply put: root{ stickChain[leaves ...

javascriptnode.jsarraysmongodbcrud

Maximizing efficiency when conducting a thorough analysis of the contents within a JSON object and implementing jQuery

I am currently using an ajax call to send data to a controller and retrieve json data in return. Here is an example of the data that is returned: { "old": "The Old Password field is required.", "new": "The New Password field is required.", "n ...

javascriptjqueryjsonajax

Retrieving all values from a JSON using jQuery UI autocomplete select

I am working with JSON data that contains keys: id, n, and d. My goal is to extract the 'id' and 'n' of the selected item in order to generate a URL. $.ajax({ type: "GET", url: "q.json", success: function(data) { va ...

javascriptjqueryjquery-ui-autocomplete

What causes the movement of li elements when hovered over and moved away from?

While trying to highlight a specific list item (li) element on mouse hover and simultaneously hide others using a script, an issue arises. The highlighted element "something" changes its position during hover, causing it to move out of the mouse cursor&apo ...

javascripthtmlcss

What is the best way to include an icon in a Vue child component?

Struggling to implement the image in the template using both the img tag and as a background. Despite having the correct path to the icon, neither method seems to work. Check out the code snippet here <div> <a href="#" class="icon" > ...

cssvue.jsimportsassvuejs2

Invoke OnSelectedIndexChanged from GridView prior to any other function execution

In my scenario, there are two GridViews available. The first GridView allows the user to select a row, based on which a corresponding list will be displayed according to the selected GridView ID. First Grid: https://i.stack.imgur.com/d0OKq.png Second Gri ...

javascriptc#jqueryasp.netgridview

Emphasize a portion of a text / Apply formatting to a variable

I am facing an issue where I need to format only the date in a specific string. I have managed to extract the date and store it in a variable after isolating it from the original message. <div class="foo"><p> Click here now and get by January ...

javascriptjquerycssvariablessubstring

One div on Chrome for Mac is experiencing an issue with applying the background image

I currently have a website hosted on GitHub pages at this link: When viewing the site on Windows Chrome, the bottom div containing the filtering buttons blends seamlessly with the dark grey background set in the wrapper div. However, when viewed on Mac Ch ...

javascripthtmlcsswebd3.js

Is there a way I can convert all relative image paths to absolute paths directly within a CSS file?

I have been attempting to convert all relative background-image paths into absolute paths, but I am facing difficulties. The current code I am using only replaces the last image path instead of all. Within my code, I am utilizing a path resolver function ( ...

phpcss

Fill the drop-down menu with the present day's date, month, and year

I'm new to this, so please bear with me. I have some html and jQuery code: $(document).ready(function() { var d = new Date(); var month = d.getMonth() + 1; var year = d.getFullYear(); $("#month").val(month); $("#year").val(year) ...

javascriptjqueryhtml

AngularJS ui-router resolve function may not successfully return a custom value

While attempting to preprocess some data before navigating to my page, I am forcefully resolving a promise, converting it into a custom object, and then trying to return the custom object to my resolve object. .state("trip.detail", { ...

javascriptangularjs

Try making a series of interconnected fetch requests in Redux Toolkit that rely on the completion of the previous fetch

I am still learning the ropes of Redux and I'm feeling a bit lost. My goal is to make two API calls - one to retrieve an account Id and a category Id, and another to get a list of transactions based on those IDs. The createApi function in my code lo ...

javascriptreactjsreduxredux-toolkit