Conditional Library Loading

Developer
Alexandre Masy
Size
4,568 Kb
Views
12,144
  1. Conditional Library Loading Previews
  2. Conditional Library Loading HTML Codes
  3. Conditional Library Loading CSS Codes
  4. Conditional Library Loading JS Codes

How do I make an conditional library loading?

What is a conditional library loading? How do you make a conditional library loading? This script and codes were developed by Alexandre Masy on 01 October 2022, Saturday.

Conditional Library Loading Previews
IQ Test

Conditional Library Loading - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Conditional Library Loading</title> <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="main"> <section class="popup"> <div class="popup__body"> <h1>Conditional Library Loading</h1> <p>Load the keyboard library only if the user agent is <em>scala-browser-ethias</em></p> </div> <div class="popup__success hidden"> <p>Success. The user agent is detected properly. :)</p> </div> <div class="popup__error hidden"> <p>Oops. It seems like you are not using the proper browser. :S</p> </div> <div class="popup__footer"> <input type="text" placeholder="Test your keyboard library here"/> </div> </section>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Conditional Library Loading - Script Codes CSS Codes

html, body { background: #142B39; font-family: 'Slabo 27px', serif; box-sizing: border-box;
}
.hidden { display: none;
}
.popup { position: absolute; width: 450px; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.popup .popup__body { padding: 16px 32px; background: #FAFCFC; border-radius: 4px 4px 0px 0px;
}
.popup .popup__body h1 { margin-top: 16px;
}
.popup .popup__success,
.popup .popup__error { padding: 4px 32px;
}
.popup .popup__success { background: #A5BE00;
}
.popup .popup__error { background: #F93E3E;
}
.popup .popup__footer { background: #E7EAED; border-radius: 0px 0px 4px 4px; padding: 16px 32px;
}
.popup .popup__footer input { background: none; height: 25px; width: 100%; border: none; border-bottom: 1px solid #142B39; transition: border-bottom-color .3s;
}
.popup .popup__footer input:focus { outline: none; border-bottom-color: #A5BE00;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url("clientlibs_base/css/images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x; font-weight: bold; color: #1c94c4;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited { color: #1c94c4; text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url("clientlibs_base/css/images/ui-bg_glass_100_fdf5ce_1x400.png") 50% 50% repeat-x; font-weight: bold; color: #c77405;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited { color: #c77405; text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active { border: 1px solid #fbd850; background: #ffffff url("clientlibs_base/css/images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x; font-weight: bold; color: #eb8f00;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited { color: #eb8f00; text-decoration: none;
}
.ui-keyboard.ui-widget-content { background: rgba(0, 0, 0, 0.5);
}
.ui-keyboard { width: 100%; position: fixed; bottom: -50px; top: auto !important; padding: 20px 0; opacity: 0;
}
.ui-keyboard.opened { opacity: 1; bottom: 0px; transition: all 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

Conditional Library Loading - Script Codes JS Codes

var ua = 'scala-browser-ethias';
(function($) { $.getStylesheet = function (href) { var $d = $.Deferred(); var $link = $('<link/>', { rel: 'stylesheet', type: 'text/css', href: href }).appendTo('head'); $d.resolve($link); return $d.promise(); };
})(jQuery);
if (navigator.userAgent == ua)
{ jQuery('.popup__success').removeClass('hidden'); loadKeyboard();
}
else
{ jQuery('.popup__error').removeClass('hidden');
}
function loadKeyboard()
{ jQuery.when( jQuery.getScript('https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.5/js/jquery.keyboard.min.js'), jQuery.getScript('https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.5/js/jquery.keyboard.extension-typing.min.js'), jQuery.getStylesheet('https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.5/css/keyboard.min.css') ).done( function() { jQuery.when(jQuery.getScript('https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.5/layouts/french.min.js')).done(createKeyboard); } );
}
function createKeyboard()
{ $('input[type="text"],input[type="tel"],input[type="number"]').each ( function() { $(this).keyboard({ layout: 'french-azerty-1', autoAccept: 'true', usePreview: false, visible: function(e, keyboard, el) { keyboard.$keyboard.addClass('opened'); } }) .addTyping({ showTyping: true, delay: 50 }); } );
}
Conditional Library Loading - Script Codes
Conditional Library Loading - Script Codes
Home Page Home
Developer Alexandre Masy
Username alexandremasy
Uploaded October 01, 2022
Rating 3
Size 4,568 Kb
Views 12,144
Do you need developer help for Conditional Library Loading?

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!

Alexandre Masy (alexandremasy) Script Codes
Name
Bullet Loader
Pair Game
Direction-icon
A Type Scale
AngularJS - UI Router - Example 1
Activate Button
Yp-loader
Alexandremasy-logo
Tiles - Triangles
A Pen by Alexandre Masy
Create amazing art & images 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!