Popover for Android
How do I make an popover for android?
What is a popover for android? How do you make a popover for android? This script and codes were developed by Robert Biggs on 25 October 2022, Tuesday.
Popover for Android - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Popover for Android</title> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui-android.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <screen id="main" class="current"> <nav> <h1>Popover</h1> <div class='horizontal centered align-flush'> <button class='show-popover' id="showPopover1">Fruits</button> <button class='show-popover' id="showPopover2">Deserts</button> </div> </nav> <section> <ul class='list'> <li> <div> <h3>Example of popovers</h3> <h4>Click either button above to launch a popover.</h4> </div> </li> </ul> <h2>Your Choices</h2> <ul class="list" id='choices'> <li> <div> <h3>Fruits:</h3> <h4 id="fruitsChoice" class='attentionGrabber'></h4> </div> </li> <li> <div> <h3>Deserts:</h3> <h4 id="dessertsChoice" class='attentionGrabber'></h4> </div> </li> </ul> </section>
</screen> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Popover for Android - Script Codes CSS Codes
#choices h4 { font-family: SegoeWP, SegoeUI, HelveticaNeue, Roboto, Sans-serif;
}
.horizontal.centered { width: 200px; display: -wekbit-flex; display: flex; top: 5px;
}
.themeIsAndroid .horizontal.centered { width: 210px;
}
.themeIsAndroid button.show-popover::after { right: 16px;
}
.themeIsiOS .horizontal.centered { width: 130px;
}
Popover for Android - Script Codes JS Codes
$(function(){ var popover1Content = "<ul class='list'><li><h3>Apples</h3></li><li><h3>Oranges</h3></li><li><h3>Bananas</h3></li><li><h3>Pears</h3></li><li><h3>Plums</h3></li><li><h3>Cherries</h3></li><li><h3>Apricots</h3></li><li><h3>Lemons</h3></li><li><h3>Peaches</h3></li><li><h3>Pineapples</h3></li><li><h3>Strawberries</h3></li><li><h3>Guavas</h3></li><li><h3>Grapefruit</h3></li></ul>"; var popover2Content = "<ul class='list'><li><h3>Cake</h3></li><li><h3>Ice cream</h3></li><li><h3>Pies</h3></li><li><h3>Tiramisu</h3></li><li><h3>Cupcakes</h3></li><li><h3>Donuts</h3></li><li><h3>Cookies</h3></li><li><h3>Cobbler</h3></li><li><h3>Crepes</h3></li><li><h3>Tarts</h3></li><li><h3>Custard</h3></li><li><h3>Pudding</h3></li><li><h3>Fudge</h3></li><li><h3>Turnovers</h3></li><li><h3>Eclairs</h3></li></ul>"; /** * Callback for Popovers: */ var fillPopover1 = function(popover) { /** * Populate Popover with content: */ $('.popover').find('section').append(popover1Content); popoverEventHandler(); }; var fillPopover2 = function(popover) { /** * Populate Popover with content: */ $('.popover').find('section').append(popover2Content); popoverEventHandler(); }; var popoverEventHandler = function(whichPopover) { /** * Attach event to catch user interaction. * Use singletap to allow user to scroll content. */ $('.popover').on('tap', function(e) { var results; if (whichPopover === 'fruitsPopover') { results = '#fruitsChoice'; } else if(whichPopover === 'dessertsPopover') { results = '#dessertsChoice'; } var listItem; if (e.target.nodeName === 'LI') { listItem = e.target; $(results).text(e.target.textContent.trim()); } else { listItem = $(e.target).closest('li')[0]; $(results).text(listItem.textContent.trim()); } $(listItem).addClass('selected'); if ($.isAndroid || $.isChrome) { setTimeout(function() { $.ClosePopover(); }, 300); } else { $.ClosePopover(); } }); }; $('#showPopover1').on('tap', function() { var trigger = this; $.Popover({ title: 'Fruits', trigger: trigger, content: popover1Content, callback: function() { popoverEventHandler('fruitsPopover'); } }); }); $('#showPopover2').on('tap', function() { var trigger = this; $.Popover({ title: 'Desserts', trigger: trigger, content: popover2Content, callback: function() { popoverEventHandler('dessertsPopover'); } }); });
});
Developer | Robert Biggs |
Username | rbiggs |
Uploaded | October 25, 2022 |
Rating | 3 |
Size | 2,780 Kb |
Views | 16,192 |
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 |
TypeScript d.ts Test | 1,623 Kb |
Navigation List | 2,703 Kb |
IOS 7 Segmented Control | 2,577 Kb |
Stepper for Android | 1,649 Kb |
Dynamic List | 2,257 Kb |
IOS 7 Switch | 2,235 Kb |
Select List for Android | 2,002 Kb |
Navigation List | 1,903 Kb |
IOS 7 Deletable List | 2,180 Kb |
Simple List | 1,736 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 |
Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Image grid with captions | Mchernin34 | 2,222 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Avero - Collectieve LVVP Arbeidsongeschiktheidsverzekering - CSS - som | Frederiquebonink | 12,554 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!