-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
89 lines (83 loc) · 3.98 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Demo of helper.js</title>
<!-- <link rel="stylesheet" href="css/styles.css"/> -->
<script src="js/helper.js"></script>
</head>
<body>
<header role="banner">
<h1 style="color: brown">Simple use demonstration of my helper.js</h1>
<p>helper.js is module in which i am collecting functions and utility objects i use in my daily tasks.</p>
<p>I am glad to share it with others.</p>
</header>
<section role="main">
<h1 style="color: chocolate">Connection and use</h1>
<p>My module is pretty easy to use. Just plug it into your code by javascript tag <code><script src="helper.js"></code> </p>
<p>Module creates object HLP which contains some utility methods and objects. Below you can find brief description for each one.</p>
<hr/>
<article>
<h1 style="color: crimson">HLP.whatBrowser</h1>
<p>A function which returns specified data depending on a user's browser<p>
<h3>Syntax</h3>
<code>HLP.whatBrowser({'browser name [browser version]':'string to return by function', ...});</code>
<h3>using example:</h3>
<code> var currentBrowser = HLP.whatBrowser({"firefox":"Current browser is firefox","ie":"Explorer you dont know how to rock","chrome safari":" based on webkit","opera":"geek opera"});</code>
<p>Where variable currentBrowser will recieve value '<script>document.write(HLP.whatBrowser({"firefox":"Current browser is firefox","ie":"Explorer you dont know how to rock","chrome safari":" based on webkit","opera":"geek opera"}));</script>'. Which is result for current browser</p>
<hr/>
</article>
<article>
<h1 style="color: crimson">HLP.whatDevice</h1>
<p>A function which defines whether it is executed on mobile device<p>
<h3>Syntax</h3>
<code>
<pre>
HLP.whatDevice.iOS(); // returns true on iOS Devices
HLP.whatDevice.Android(); // returns true on Android Devices
HLP.whatDevice.BlackBerry(); // returns true on BlackBerry Devices
HLP.whatDevice.Opera(); // returns true on any Devices with Opera Mini or Opera Mobile browser
HLP.whatDevice.Windows(); // returns true on Devices with IE Mobile browser
HLP.whatDevice.any(); // returns true on any mobile device
</pre>
</code>
<h3>using example:</h3>
<code> var currentBrowser = HLP.whatDevice.any();</code>
<p>Where variable currentBrowser will recieve value '<script>document.write(HLP.whatDevice.any().toString());</script>'. Which is result for current platform (mobile or not)</p>
<hr/>
</article>
<article>
<h1 style="color: crimson">HLP.inlineStyle</h1>
<p>A function which returns value of inline style attribute accordingly defined css property.<p>
<h3 style="color: #f00;" id="inlineStyleExample">example item</h3>
<h3>Result</h3>
<p>Example has color css property value:</p>
<strong id="resultInline"></strong>
<h3>Syntax</h3>
<code>
<pre>
var inlineStyleElement = document.querySelector("#inlineStyleExample"),
inlineOutputElement = document.querySelector("#resultInline");
inlineOutputElement.innerHTML = HLP.inlineStyle(inlineStyleElement, 'color');
</pre>
</code>
<h3>Using example:</h3>
<code> var currentInlyneStyleValue = HLP.inlineStyle(inlineStyleElement, 'color');</code>
<p>Where inlineStyleElement is target DOM object element. Second parameter is a css property name.</p>
<hr/>
</article>
</section>
<script>
//whatBrowser
console.log(HLP.whatBrowser({"firefox":"firefox","ie":"explorer","chrome safari":"webkit","opera":"opera"}));
//whatDevice
if (HLP.whatDevice.any()) {
console.log(HLP.whatDevice.any());
}
//inlineStyle
var inlineStyleElement = document.querySelector("#inlineStyleExample"),
inlineOutputElement = document.querySelector("#resultInline");
inlineOutputElement.innerHTML = HLP.inlineStyle(inlineStyleElement, 'color');
</script>
</body>
</html>