-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·584 lines (517 loc) · 29 KB
/
index.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="Lockitron productsite">
<meta name="author" content="Karel Vh">
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<title>LOCKITRON</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="assets/css/normalize.css">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/dropdown.css">
</head>
<body>
<!-- Fixed navbar -->
<div id="top-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- <span class="sr-only">Toggle navigation</span>-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#headerwrap">LOCKITRON.</a>
</div>
<div id="navbarScroll" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li><a href="#service" >OVERVIEW</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#buy">BUY</a></li>
<!--
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">PAGES <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="blog.html">BLOG</a></li>
<li><a href="single-post.html">SINGLE POST</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="single-project.html">SINGLE PROJECT</a></li>
</ul>
</li>
-->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- *****************************************************************************************************************
HEADERWRAP
***************************************************************************************************************** -->
<div id="headerwrap">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h4>The lock for the 21st century</h4>
<h1>LOCKITRON</h1>
<h3>Unlock your door</h3>
<h2>without keys</h2>
</div>
<div class="col-lg-8 col-lg-offset-2 himg">
<img class="img-responsive" src="assets/img/lockitronproduct.png">
</div>
</div><!-- /row -->
</div> <!-- /container -->
</div><!-- /headerwrap -->
<!-- *****************************************************************************************************************
SERVICE LOGOS
***************************************************************************************************************** -->
<div id="service">
<div class="invisibleScrollheader"></div>
<div class="container">
<div class="row centered">
<div class="col-md-4">
<i class="fa fa-mobile-phone"></i>
<h4>Keyless</h4>
<p>No more keys necessary!</p>
<!-- <p><br/><a href="#" class="btn btn-theme">More Info</a></p>-->
</div>
<div class="col-md-4">
<i class="fa fa-group"></i>
<h4>Social</h4>
<p>Instantly share access with friends and family.</p>
<!-- <p><br/><a href="#" class="btn btn-theme">More Info</a></p>-->
</div>
<div class="col-md-4">
<i class="fa fa-lock"></i>
<h4>Secure</h4>
<p>Lockitron uses the same encryption technologies as banking sites.</p>
<!-- <p><br/><a href="#" class="btn btn-theme">More Info</a></p>-->
</div>
</div>
</div><! --/container -->
</div><! --/service -->
<!-- *****************************************************************************************************************
APP
***************************************************************************************************************** -->
<div id="twrap">
<!-- <iframe id="videoPlayer" width="560" height="315" src="http://www.youtube.com/embed/N9R8KkDkyk4?autoplay=1&controls=0&loop=1&frameborder=0&enablejsapi=1" frameborder="0"></iframe>-->
<video class="img-responsive" src="assets/video/demo.mp4" autoplay="true" loop="true" muted="true" ></video>
<!--
<div class="container centered">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<i class="fa fa-comment-o"></i>
<p>Thanks to the Lockitron it is easy to lock and unlock your door. But it doesn't stop there, Lockitron will notify you if your door was opened or if someone is knocking on the door.</p>
</div>
</div><! --/row -->
<!-- </div><! --/container -->
</div><! --/twrap -->
<!-- *****************************************************************************************************************
SPECS
***************************************************************************************************************** -->
<div id="specs">
<div class="container">
<div class="row centered specsdiv">
<!--
<div class="col-md-3">
<i class="fa fa-wifi"></i>
<h4>Wireless</h4>
<p>Lockitron comes with wifi and Bluetooth build in. This allows keyless entry and allows you to control Lockitron receive notifications from Lockitron anywhere in the world.</p>
</div>
<div class="col-md-3">
<i class="fa fa-mobile"></i>
<h4>Mobile</h4>
<p>Locktron runs on any device. This is thanks to our mobile website and apps. Older phones can control Lockitron through text message commands.</p>
</div>
<div class="col-md-3">
<i class="fa fa-cogs"></i>
<h4>Modify</h4>
<p>Lockitron works with <a href="https://ifttt.com/" target="_blank">IFTTT</a>, allowing for endless posibilities. You can also use the Locktron <a href="https://api.lockitron.com/v2/documentation" target="_blank">API endpoints.</a></p>
</div>
<div class="col-md-3">
<i class="fa fa-power-off"></i>
<h4>Efficient</h4>
<p>Lockitron is incredibly efficient. It uses 4 AA batteries that last up to 6 months.</p>
</div>
-->
</div>
</div><! --/container -->
</div><! --/service -->
<!-- *****************************************************************************************************************
MEDIA SECTION
***************************************************************************************************************** -->
<div id="portfoliowrap">
<h3>MEDIA</h3>
<div class="portfolio-centered">
<div class="recentitems portfolio">
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/media/android-app.png" alt="android app">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">The Android App</h3>
<a data-rel="prettyPhoto" href="assets/img/media/android-app.png" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
<!-- <a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-link"></i></a>-->
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item web-design">
<div class="he-wrap tpl6">
<img src="assets/img/media/Close-up-on.jpg" alt="close up">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">Close Up</h3>
<a data-rel="prettyPhoto" href="assets/img/media/Close-up-on.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/media/door-knock.png" alt="door knock">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">Door Knock</h3>
<a data-rel="prettyPhoto" href="assets/img/media/door-knock.png" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/media/iphone-users.png" alt="iphone users">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">iPhone Users Screen</h3>
<a data-rel="prettyPhoto" href="assets/img/media/iphone-users.png" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item books">
<div class="he-wrap tpl6">
<img src="assets/img/media/lockitron-black.jpg" alt="black lockitron">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">Obsedian Black Lockitron</h3>
<a data-rel="prettyPhoto" href="assets/img/media/lockitron-black.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/media/lockitron-installation.jpg" alt="installation lockitron">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">Installation of Lockitron</h3>
<a data-rel="prettyPhoto" href="assets/img/media/lockitron-installation.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
</div><!-- he bg -->
</div><!-- he view -->
</div><!-- he wrap -->
</div><!-- end col-12 -->
</div><!-- portfolio -->
</div><!-- portfolio container -->
</div><!--/Portfoliowrap -->
<!-- *****************************************************************************************************************
FAQ
***************************************************************************************************************** -->
<div id="faq" class="container mtb">
<div class="invisibleScrollheader"></div>
<div class="row inner">
<div class="col-lg-12">
<h4>Frequently Asked Questions</h4>
</div>
<div class="col-lg-6">
<p class="faqContentClick"><a>Where can I stay updated about Lockitron shipments?</a></p>
<p class="faqContent">Head over to the Lockitron blog and the Lockitron community for all of the latest updates and. We will be letting you know how the production process goes as well as allowing anyone to submit questions, comments and feedback about what they would like to see with Lockitron.</p>
<p class="faqContentClick"><a>Is Lockitron compatible with my door?</a></p>
<p class="faqContent">Visit our <a href="http://help.lockitron.com/collection/39-compatibility" target="_blank">compatibility FAQs</a> to see if Lockitron will work with your door.</p>
<p class="faqContentClick"><a>What happens if my power or internet goes out?</a></p>
<p class="faqContent">If you have a Bluetooth Low Energy capable iOS or Android device, Lockitron will work even if the internet or power go out. And of course, you can always use your original key.</p>
<p class="faqContentClick"><a>How do I partner with or wholesale Lockitron?</a></p>
<p class="faqContent">Find out more on our <a href="https://lockitron.com/sales" target="_blank">sales page.</a></p>
<p class="faqContentClick"><a>How secure is Lockitron?</a></p>
<p class="faqContent">Lockitron relies on the same security protocols used in online banking. We implement robust encryption using open, published standards. For more details, head over to our <a href="https://lockitron.com/security" target="_blank">security page.</a></p>
</div>
<div class="col-lg-6">
<p class="faqContentClick"><a>Can I buy the old version of Lockitron?</a></p>
<p class="faqContent">We are not currently offering the Lockitron Deadbolt, however, you can still purchase the Lockitron Buzzer / Access model.</p>
<p class="faqContentClick"><a>Can I replace my lock with a Lockitron compatible one?</a></p>
<p class="faqContent">If you would like to replace your deadbolt, we offer an option made by Schlage that is optimized specifically for Lockitron. This deadbolt features a standard thumb-turn and a tapered latch which means that Lockitron will be able to pull your door closed even if it’s slightly misaligned. The lock meets ANSI Grade 1 security rating, the highest standard awarded to residential deadbolts. <br><br>
We are currently offering the deadbolt as an add-on to your existing Lockitron order. The deadbolt can be added to your order by heading to our <a href="https://shop.trycelery.com/page/lockitron-deadbolt" target="_blank">tapered latch order page.</a> We offer a wide range of finishes including traditional ones like Satin Nickel, Polished Brass and Oil Rubbed Bronze.<br><br>
Depending on the style of lock your currently have and type of door, drilling may be required. See our related article below titled "Will Lockitron work with my door?" for more information. Making sure that you have sufficient space between your deadbolt and handle is crucial.</p>
<p class="faqContentClick"><a>How many Lockitrons can I control at once?</a></p>
<p class="faqContent">You can easily control as many Lockitrons as you need from a single account. From your mobile device or computer you can view all Lockitrons that you have access to, as well as view or change their state (locked or unlocked).</p>
<p class="faqContentClick"><a>How do I use text message (SMS) access?</a></p>
<p class="faqContent">If you would like to invite guests who do not have smartphones to access your lock, you can set up text message access for $5 a month - this fee is only paid by the owner of the lock once, not by any guests using the lock. In order to do this, click on the "Settings" link in your dashboard and enter in your phone number in the field next to the label "Phone Number" - it will automatically save your phone number if it has not been used another another account once you hit the submit button.<br><br>
Next, fill out your credit card information in the gold colored "Billing" section below. Once successfully submitted, you can click on the "Add SMS access for only $5 a month" button. This will send you will a text message welcoming you to Lockitron via text message. You will be issued a pin code which you should prefix to any command (i.e. 1234 U to unlock your door). You can change the pin code via the dashboard in the field next to the label "SMS Pin" - note that pin codes are not case sensitive.<br><br>
There are several things that you as an owner can now do purely by text message - you can lock or unlock your door <strong>(1234 L or 1234 U)</strong>, invite guests <strong>(1234 (415)-555-5555)</strong>, remove guests <strong>(1234 delete (415)-555-5555)</strong> as well as change your pin <strong>(1234 rekey 5M78)</strong>. Pin codes may be made up of numbers or letters. The pin code assigned to your phone will not work on another phone with a different telephone number. <br><br>
You can get a list of these commands by entering your pin code followed by "command" i.e. <strong>1234 command.</strong> Note that guests invited by text message are granted keys that don't expire, so you should delete them when they leave or grant them the key via your dashboard on the website instead, where you can set a start and end time to the key. <br><br>
When granted a key, a guest will receive a text message with a pre-generated pin code and instructions on how to operate your Lockitron. The text message will read as follows:<br><br>
<strong>"Welcome to cameron@lockitron.com's Lockitron. Reply with 1234 (your pin) followed by L to lock or U to unlock (not case sensitive). If the guest replies to the message with a U, your Lockitron will unlock."</strong>
</p>
<p class="faqContentClick"><a>How do I invite additional people to my Lockitron?</a></p>
<p class="faqContent">Lockitron allows you to invite as many family, friends and colleagues as needed on a temporary or permanent basis. If you are a Lockitron owner or administrator on a Lockitron unit, you can invite guests. Invites can be initiated through either the Lockitron website, Android app or iOS app.<br><br>
Invites can be sent to users either via email or text message (SMS) - inviting users to set up an account is included with every Lockitron and independent from our "Text Message Access" premium feature.
In the Android and iOS apps, tap the icon in the top right corner, then tap Users. From here you can manage existing users or invite new users by tapping "Add New User". To get started, either select a contact or type in the email address or phone number of the user you would like to invite. From there you will be prompted to suggest a name for the user*. You can also add a start and end date if you would only like the user to have access for a set period of time.
If both an email address and phone number are entered through the Android or iOS apps, the user will receive both an email and text message inviting them to create their account. They can activate their account using either of the two links.
If a user didn't receive an email invitation, make sure to have them check their spam filter. Alternatively, have them head to <a href="https://lockitron.com/account/forgot" target="_blank">https://lockitron.com/account/forgot</a> to request a forgot password request which will send them a new activation token.
The email sent by Lockitron to invite new users will look like this: <br><br>
<em>Welcome to Lockitron! <br><br>
You have been invited as a guest on hello@lockitron.com's Lockitron - please activate your account. Once you have activated your account, you can head to <a href="https://lockitron.com" target="_blank">https://lockitron.com</a> on your smartphone to access your key on the go. This invitation to activate your account will expire in one week. <br><br>
Thanks! <br><br>
The Lockitron Team <br><br>
Sent from hello@lockitron.com's Lockitron.</em><br><br>
Upon clicking on the "please activate your account" link, the user will be prompted to enter their email address, name and their desired password. They will then be directed to their dashboard - if the key was for a set period of time and it has not yet become valid, then the user will see the following message: <br><br>
<em>This key is no longer valid.
If you require access, please contact the owner of this lock to change this key.</em> <br><br>
<em>*Note that the name you enter for a user is only a suggested name - once the user accepts the invitation and activates their account they may change their name, phone number and email address as needed and these changes will show up in your user list.</em></p>
</div>
</div><! --/row -->
</div><! --/container -->
<!-- *****************************************************************************************************************
RECOMMENDED
***************************************************************************************************************** -->
<div id="cwrap">
<div class="container">
<div class="row centered">
<h3>Recommeded by</h3>
<div class="col-lg-3 col-md-3 col-sm-3">
<a target="_blank" href="http://uncrate.com/"><img src="assets/img/recommended/uncrate.png" class="img-responsive"></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<a target="_blank" href="http://www.nytimes.com/"><img src="assets/img/recommended/nytimes.png" class="img-responsive"></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<a target="_blank" href="http://mashable.com/"><img src="assets/img/recommended/mashable.png" class="img-responsive"></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<a target="_blank" href="http://techcrunch.com/"><img src="assets/img/recommended/techcrunch.png" class="img-responsive"></a>
</div>
</div><! --/row -->
</div><! --/container -->
</div><! --/cwrap -->
<!-- *****************************************************************************************************************
BUY
***************************************************************************************************************** -->
<div id="buy">
<div class="invisibleScrollheader"></div>
<div class="container">
<div class="row inner">
<div class="col-lg-12">
<h4>Buy Now</h4><br>
<p>Choose a color.</p>
</div>
<div class="col-lg-8">
<img src="assets/img/lockitronrow.jpg" alt="lockitron products">
</div>
<div class="col-lg-4">
<div class="radio">
<label>
<input id="colorBlack" type="radio" name="color" value="black" onclick="colorBuyButton()">Obsidian Black
</label>
</div>
<div class="radio">
<label>
<input id="colorGreen" type="radio" name="color" value="green" onclick="colorBuyButton()">Green
</label>
</div>
<div class="radio">
<label>
<input id="colorSilver" type="radio" name="color" value="silver" onclick="colorBuyButton()">Quick Silver
</label>
</div>
<form action="https://lockitron.com/store/checkout">
<button id="buyButton" type="submit" class="btn btn-default btn-lg" disabled="disabled" >Choose a color first</button>
</form>
</div>
</div><! --/row -->
</div><! --/container -->
</div><! --/buy -->
<!-- *****************************************************************************************************************
FOOTER
***************************************************************************************************************** -->
<div id="footerwrap">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h4>About</h4>
<div class="hline-w"></div>
<p>Lockitron is a start-up working hard to revolutionize the way we interact with our doorlocks.</p>
</div>
<div class="col-lg-6">
<h4>Social Links</h4>
<div class="hline-w"></div>
<p>
<a href="https://twitter.com/lockitron" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="mailto:" target="_blank"><i class="fa fa-inbox"></i></a>
</p>
</div>
<div class="col-lg-12">
<p>
© <script> document.write(new Date().getFullYear());</script> Lockitron.
</p>
</div>
</div><! --/row -->
</div><! --/container -->
</div><! --/footerwrap -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.hoverdir.js"></script>
<script src="assets/js/jquery.hoverex.min.js"></script>
<script src="assets/js/jquery.prettyPhoto.js"></script>
<script src="assets/js/jquery.isotope.min.js"></script>
<script src="assets/js/prettyPhotoEnlarge.js"></script>
<script src="assets/js/dropdown.js"></script>
<script src="assets/js/buyButton.js"></script>
<script src="assets/js/readXML.js"></script>
<!--CHANGE ACTIVE CLASS WHEN CLICKING =======================================-->
<script>
$(document).ready(function(){
$('#navbarScroll li').click(function () {
$('#navbarScroll li').removeClass('active');
$(this).addClass('active');
});
});
</script>
<!--CHANGE ACTIVE CLASS WHEN SCROLLING + SMOOTH SCROLL =======================================-->
<script>
// Cache selectors
var lastId,
//topMenu = $("#navbarScroll"),
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
</script>
<!-- FAQ HIDE AND SHOW QUESTIONS=============================================================================-->
<script>
$(".faqContentClick").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
});
});
</script>
<!--AUTO ALIGNS THE PICTURES========================================================= -->
<script>
//MEDIA
(function($) {
"use strict";
var $container = $('.portfolio'),
$items = $container.find('.portfolio-item'),
portfolioLayout = 'fitRows';
if( $container.hasClass('portfolio-centered') ) {
portfolioLayout = 'masonry';
}
$container.isotope({
filter: '*',
animationEngine: 'best-available',
layoutMode: portfolioLayout,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
},
masonry: {
}
}, refreshWaypoints());
function refreshWaypoints() {
setTimeout(function() {
}, 1000);
}
$('nav.portfolio-filter ul a').on('click', function() {
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector }, refreshWaypoints());
$('nav.portfolio-filter ul a').removeClass('active');
$(this).addClass('active');
return false;
});
function getColumnNumber() {
var winWidth = $(window).width(),
columnNumber = 1;
if (winWidth > 1200) {
columnNumber = 6;
} else if (winWidth > 950) {
columnNumber = 3;
} else if (winWidth > 600) {
columnNumber = 3;
} else if (winWidth > 400) {
columnNumber = 2;
} else if (winWidth > 250) {
columnNumber = 1;
}
return columnNumber;
}
function setColumns() {
var winWidth = $(window).width(),
columnNumber = getColumnNumber(),
itemWidth = Math.floor(winWidth / columnNumber);
$container.find('.portfolio-item').each(function() {
$(this).css( {
width : itemWidth + 'px'
});
});
}
function setPortfolio() {
setColumns();
$container.isotope('reLayout');
}
$container.imagesLoaded(function () {
setPortfolio();
});
$(window).on('resize', function () {
setPortfolio();
});
})(jQuery);
</script>
</body>
</html>