coming soon…
Author: appcropolis
Using Bootstrap 4 With Simplify 0.2.8
The official release of Bootstrap 4 finally arrived last January 2018. While we get ready to make all our content compatible with the new release, we want to make sure that you do not have to wait. Below, there is an example of the page template source that you should use to allow bootstrap in your Simplify projects.
<!doctype html>
<html lang="en">
<head>
{{header use_bootstrap="false"}}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
{{/header}}
</head>
<body>
<!-- .appc-page -->
<div class="appc-page">
{{blocks}}
</div><!-- /.appc-page -->
{{footer use_jquery="false" use_bootstrap="false"}}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
{{/footer}}
</body>
</html>
Discover HTML Element Under The Mouse
function show(el) {
$('.current').removeClass('current');
$(el).addClass('current');
var msg = el.tagName;
$('pre').html(msg);
}
$('.main').mousemove(function(e) {
var x = e.clientX, y = e.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
show(elementMouseIsOver);
});
Submitting Form As Email
TODO:
HTML Code (full)
<form class="widget-contact-form" action="" role="form" enctype="text/plain" method="get" target="_blank">
<input type="hidden" name="subject" value="">
<input type="hidden" name="body" value="">
<input type="hidden" name="action" value="mailto:beth@interfaithquest.org">
<div class="row">
<div class="form-group col-sm-4">
<label for="name">Name *</label>
<input type="text" aria-required="true" name="name" class="form-control required name" placeholder="Enter your Name" required>
</div>
<div class="form-group col-sm-4">
<label for="email">Email *</label>
<input type="email" aria-required="true" name="email" class="form-control required email" placeholder="Enter your Email" required>
</div>
<div class="form-group col-sm-4">
<label for="phone">Phone *</label>
<input type="text" aria-required="true" name="phone" class="form-control required email" placeholder="Enter your phone number" required>
</div>
</div>
<div class="form-group">
<label for="message">Message *</label>
<textarea type="text" name="message" rows="9" class="form-control required" placeholder="Enter your Message" aria-required="true" required></textarea>
</div>
<div class="form-group">
<input type="text" class="hidden" id="widget-contact-form-antispam" name="widget-contact-form-antispam" value="">
<button class="btn btn-lg btn-interfaith" type="submit" id="form-submit"><i class="fa fa-paper-plane"></i> Send message</button>
</div>
</form>
Small Form
<form class="real-sender-email" action="" role="form" enctype="text/plain" method="get" target="_blank">
<div class="input-group input-group-newsletter">
<!-- REQUIRED USER INPUT -->
<input type="email" name="email" class="form-control" placeholder="Enter email..." aria-label="Search for...">
<!-- NOT NEEDED FOR THIS FORM -->
<input type="hidden" name="name" value="">
<input type="hidden" name="phone" value="">
<input type="hidden" name="message" value="">
<!-- SET BY SCRIPT -->
<input type="hidden" name="subject" value="">
<input type="hidden" name="body" value="">
<input type="hidden" name="action" value="mailto:support@appcropolis.com">
<!-- SUBMIT BUTTON -->
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">Notify Me!</button>
</span>
</div>
</form>
Javascript Code
!(function($, undefined) {
"use strict";
var $form = $('.real-sender-email');
$form.on('submit', function(e) {
var action = $form.find('*[name="action"]').val();
var name = $form.find('*[name="name"]').val();
var phone = $form.find('*[name="phone"]').val();
var messgae = $form.find('*[name="message"]').val();
//
var labelSubject = !!name && name.length > 0? 'Message from ' : '';
var labelPhone = !!phone && phone.length > 0? 'Phone ' : '';
var newline = "\r\n";
// Compose message
var content = messgae + newline + newline + labelPhone + phone
//
$form.attr('action', action);
$form.find('*[name="subject"]').val(labelSubject + name);
$form.find('*[name="body"]').val(content);
setTimeout(function() {
$form.find('*[name="name"]').val('');
$form.find('*[name="phone"]').val('');
$form.find('*[name="email"]').val('');
$form.find('*[name="message"]').val('');
}, 1000);
});
})(jQuery, undefined);
Loading External Script
TODO:
window.liveSiteAsyncInit = function() {
LiveSite.init({
id : 'WI-EWV1BRSX2QXKDMAKEUKO'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0],
p = (('https:' == d.location.protocol) ? 'https://' : 'http://'),
r = Math.floor(new Date().getTime() / 1000000);
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = p + "www.vcita.com/assets/livesite.js?" + r;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'livesite-jssdk'));
Binders: gallery_block
TODO
{{gallery_block id="{{$post.ID}}" assign_to="gallery"}}
<!--buttons-->
<ol class="carousel-indicators">
{{foreach $gallery as $image}}
<li data-target="#carousel-example-generic" data-slide-to="{{$image@index}}" class="{{if $image_url@index eq 0}}active{{/if}}"></li>
{{/foreach}}
</ol>
<!--slides-->
<div class="carousel-inner" role="listbox">
{{foreach $gallery as $image_url}}
<div class="item {{if $image_url@index eq 0}}active{{/if}}">
<img alt="First slide [900x500]" src="{{$image_url}}" data-holder-rendered="true">
</div>
{{/foreach}}
</div>
{{/gallery_block}}