IOS web app bookmark reminder bubble
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 - 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");}
}
Developer | Patrick Cox |
Username | pcridesagain |
Uploaded | September 04, 2022 |
Rating | 4 |
Size | 2,576 Kb |
Views | 52,624 |
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!
Name | Size |
A Better Moustache | 3,139 Kb |
A Pen by Patrick Cox | 2,899 Kb |
Vans Logo, single element, no fonts, no psuedos | 3,162 Kb |
Responsive Content Experiment | 4,586 Kb |
Sexy Version - iOS web app bookmark reminder bubble | 2,880 Kb |
Single Element Pure CSS US Flag | 1,875 Kb |
A Pen by Patrick Cox | 3,176 Kb |
CSS Q-Bert | 4,926 Kb |
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!
Name | Username | Size |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Price table | Serluk | 5,928 Kb |
Zeichensatz | Moklick | 2,058 Kb |
SCSS Social Icons Flat | Mattsince87 | 3,482 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!