All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:
- Bootstrap v 3 framework (powerful front-end framework for faster and easier web development)
- jQuery v1.10.2
- Flexslider 2
- Arctext.js (A jQuery plugin for curved text)
- GMAP3 5.1.1 – plugin to use google maps
Curved Text (arctext.js)
You can enable curved text for element by adding “curved” class to it.
Remember thatlibrary should be included. As example there is curved header on fullwidth map. Credits: http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/
data-radius – it is radius of curve
data-direction – direction of effect
HTML MARKUP:
1 |
<h4 class="hdr6 curved" data-radius="600" data-direction="1">Wheres the truck?</h4> |
JAVASCRIPT MARKUP:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
jQuery(document).ready(function () { /* rotate text */ if(jQuery().arctext) { jQuery(".curved").each(function () { $this = jQuery(this); var radius = $this.data("radius"); var direction = $this.data("direction"); if ((validateDataAttr(radius)) && (validateDataAttr(direction))) { jQuery($this).arctext({ radius: radius, dir: direction, // 1: curve is down, // -1: curve is up rotate: true // if true each letter should be rotated. }) } }) } }) |
Google Map (GMAP3 Plugin)
This is google map with custom marker, you can define couple parameters:
- data-location – address to show
- data-text – text in bubble overlay
- data-height – map height (if undefined height will be 220px)
- data-offset – by how many map should be repositioned from marker center point (default -30)
It uses gmap3 plugin.
Documentation: here
HTML MARKUP:
1 |
<div class="googleMap" data-location="Junipers Blvd. 380 Queens, NY 11379, USA" data-text="Junipers Blvd. 380 Queens, NY 11379, USA" data-height="480" data-offset="-80"></div> |
1 |
<div class="googleMap" data-latitude="52.13" data-longitude="21.135540" data-text="We are here!"></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function initmap() { jQuery(".googleMap").each(function () { var atcenter = ""; var $this = jQuery(this); var location = $this.data("location"); var text = $this.data("text"); var offset = -30; if (validateDataAttr($this.data("offset"))) { offset = $this.data("offset"); } if (validateDataAttr(location)) { (..) } |