diff --git a/README.md b/README.md index 2b579fd..5113bfe 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ brings this feature to older iOS versions, Android devices and for Windows Store force: null, // Choose 'ios', 'android' or 'windows'. Don't do a browser check, just always show this banner hideOnInstall: true, // Hide the banner after "VIEW" is clicked. layer: false, // Display as overlay layer or slide down the page - iOSUniversalApp: true, // If the iOS App is a universal app for both iPad and iPhone, display Smart Banner to iPad users, too. + iOSUniversalApp: true, // If the iOS App is a universal app for both iPad and iPhone, display Smart Banner to iPad users, too. appendToSelector: 'body', //Append the banner to a specific selector onInstall: function() { // alert('Click install'); @@ -61,7 +61,8 @@ brings this feature to older iOS versions, Android devices and for Windows Store ## Contributors -[![Arnold Daniels](https://avatars3.githubusercontent.com/u/100821?v=2&s=64)](https://github.com/jasny) -[![Thomas De Laet](https://avatars1.githubusercontent.com/u/5644283?v=2&s=64)](https://github.com/delaetthomas) +[![Arnold Daniels](https://avatars3.githubusercontent.com/u/100821?v=2&s=48)](https://github.com/jasny) +[![Thomas De Laet](https://avatars1.githubusercontent.com/u/5644283?v=2&s=48)](https://github.com/delaetthomas) +[![Shivani Thakur](https://avatars1.githubusercontent.com/u/1167588?v=3&s=48)](https://github.com/shivanibhanwal) - [1]: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html +[1]: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..d9388b3 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + Criticgiri + + + + + + + + + + +
+

Example to show how to use Jquert.smart package for iOS and Android devices

+
+ + + + + diff --git a/jquery.smartbanner-light.css b/jquery.smartbanner-light.css new file mode 100644 index 0000000..d1d827f --- /dev/null +++ b/jquery.smartbanner-light.css @@ -0,0 +1,23 @@ +#smartbanner { position:absolute; left:0; top:-82px; border-bottom:1px solid #e8e8e8; width:100%; height:78px; font-family:'Helvetica Neue',sans-serif; background:#e8e8e8; box-shadow:0 1px 2px rgba(0,0,0,0.5); z-index:9998; -webkit-font-smoothing:antialiased; overflow:hidden; -webkit-text-size-adjust:none; } +#smartbanner, html.sb-animation {-webkit-transition: all .3s ease;} +#smartbanner .sb-container { margin: 0 auto; } +#smartbanner .sb-close { position:absolute; left:0.4rem; top:2rem; display:block; border:none; width:14px; height:14px; font-family:'ArialRoundedMTBold',Arial; font-size:20px; line-height:15px; text-align:center; color:#6a6a6a; background:transparent; text-decoration:none; text-shadow:none; border-radius:0px; box-shadow:none; -webkit-font-smoothing:subpixel-antialiased; } +#smartbanner .sb-close:active { font-size:13px; color:#aaa; } +#smartbanner .sb-icon { position:absolute; left:30px; top:10px; display:block; width:57px; height:57px; background:none; background-size:cover; border-radius:10px; box-shadow:0 .5px 0.5px rgba(0,0,0,0.5); } +#smartbanner.no-icon .sb-icon { display:none; } +#smartbanner .sb-info { position:absolute; left:98px; top:18px; width:44%; font-size:11px; line-height:1.2em; font-weight:bold; color:#6a6a6a; text-shadow:0 1px 0 rgba(255,255,255,0.8); } +#smartbanner #smartbanner.no-icon .sb-info { left:34px; } +#smartbanner .sb-info strong { display:block; font-size:13px; color:#4d4d4d; line-height: 18px; } +#smartbanner .sb-info > span { display:block; } +#smartbanner .sb-info em { font-style:normal; text-transform:uppercase; } +#smartbanner .sb-button { position:absolute; right:20px; top:24px; padding: 0 10px; min-width: 10%; height:20px; font-size:12px; line-height:20px; text-align:center; font-weight:bold; color:#6a6a6a; background:-webkit-linear-gradient(top, #efefef 0%,#dcdcdc 100%); text-transform:uppercase; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.8); border-radius:3px; box-shadow:0 1px 0 rgba(255,255,255,0.6),0 1px 0 rgba(255,255,255,0.7) inset; } +#smartbanner .sb-button:active, #smartbanner .sb-button:hover { background:-webkit-linear-gradient(top, #dcdcdc 0%,#efefef 100%); } +#smartbanner .sb-icon.gloss:after { content:''; position:absolute; left:0; top:-1px; border-top:1px solid rgba(255,255,255,0.8); width:100%; height:50%; background:none; border-radius:10px 10px 12px 12px; } +#smartbanner.android { box-shadow: none; } +#smartbanner.android .sb-close { border:0; width:17px; height:17px; line-height:17px; color:#999; } +#smartbanner.android .sb-close:active { color:#eee; } +#smartbanner.android .sb-button { min-width: 12%; padding:1px; color:#4285f4; background: none; border-radius: 0; box-shadow: none; min-height:28px} +#smartbanner.android .sb-button span { text-align: center; display: block; padding: 0 10px; background-color: none; text-transform:none; text-shadow:none; box-shadow:none; } +#smartbanner.android .sb-button:active, #smartbanner.android .sb-button:hover { background: none; } +#smartbanner.android .sb-button:active span, #smartbanner.android .sb-button:hover span { background:none; } +#smartbanner.windows .sb-icon { border-radius: 0px; }