IOS web app bookmark reminder bubble

Developer
Patrick Cox
Size
2,576 Kb
Views
52,598

How do I make an ios web app bookmark reminder bubble?

Sexyier version here --> http://codepen.io/pcridesagain/pen/ozcLb.Simple little no images thought bubble that reminds your iOS users to add your web app to their device home screen. Pops up right above bookmark button when app is loaded. Once user closes the bubble it stores a localStorage key so that it won't bug them again (unless they clear there browser data).. What is a ios web app bookmark reminder bubble? How do you make a ios web app bookmark reminder bubble? This script and codes were developed by Patrick Cox on 04 September 2022, Sunday.

IOS web app bookmark reminder bubble Previews
IQ Test

IOS web app bookmark reminder bubble - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iOS web app bookmark reminder bubble</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- iOS reminder bubble markup -->
<div class="bubble" id="bubble"> <a class="bubble-close" id="bubble-close">x</a> <p>don't forget to add this app to your <strong>home screen</strong> for easier access</p>
</div>
<!-- wanna the see the bubble again after you closed it? inspect/resources/localStorage/secure.codepen.io, delete the 'bubble' key and refresh --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

IOS web app bookmark reminder bubble - Script Codes CSS Codes

/* remimder bubble styling */
.bubble{ background-color: #FFF; border: 6px solid #666; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; bottom: 0px; color: #666; display: none; left: 50%; margin-bottom: 25px; margin-left: -125px; padding: 0px; position: fixed; text-align: center; width: 240px; z-index: 100;
}
.bubble p { font: normal 18px Arial, Sans-serif; margin: 8px;
}
.bubble strong{ font-style: italic; font-weight: bold;
}
.bubble:before,
.bubble:after { bottom: -15px; border: solid 20px transparent; border-bottom: 0; border-top-color: #fff; content: "\0020"; display: block; height: 0; left: 42%; overflow: hidden; position: absolute; width: 0; z-index: 101;
}
.bubble:before { bottom: -24px; border-top-color: #666; z-index: 99;
}
a.bubble-close{ background-color: #666; border-radius: 80px; color: #fff; cursor: pointer; font: bold 20px Arial, Sans-serif; float:right; margin-right: -20px; margin-top: -20px; padding: 2px 9px;
}​

IOS web app bookmark reminder bubble - Script Codes JS Codes

$(function() { showMeTheBubble();
});
function showMeTheBubble(){ //does the 'bubble' key exist in localStorage? if not show the bubble markup. if(!localStorage.bubble){ $('#bubble').show(); $('#bubble-close').click(function(){ $('#bubble').hide(); //store the 'bubble' key and set value to true. localStorage.setItem("bubble", true); }); } else{console.log("meh, do nothing");}
}
IOS web app bookmark reminder bubble - Script Codes
IOS web app bookmark reminder bubble - Script Codes
Home Page Home
Developer Patrick Cox
Username pcridesagain
Uploaded September 04, 2022
Rating 4
Size 2,576 Kb
Views 52,598
Do you need developer help for IOS web app bookmark reminder bubble?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Patrick Cox (pcridesagain) Script Codes
Name
CSS Q-Bert
Single Element Pure CSS US Flag
Responsive Content Experiment
A Pen by Patrick Cox
Vans Logo, single element, no fonts, no psuedos
Sexy Version - iOS web app bookmark reminder bubble
A Better Moustache
A Pen by Patrick Cox
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!