Lets say we have this literal array
export default {
home: {
title: 'The homepage',
list: [
'Lorem ipsum dolor sit amet, consectetur {temp1} elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Lorem ipsum dolor sit amet, consectetur adipiscing {temp2}, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do {temp3} incididunt ut labore et dolore magna aliqua.'
],
temp1: 'adipiscing',
temp2: 'elit',
temp3: 'eiusmod tempor',
}
}
Then I could simple replace the {temp} for strings like so
<ul class="home__list">
<li>
<BaseTransition class="home__item">
<BaseText :text="$t('home.list[0]', { temp1: $t('home.temp1') })" size="lg-fluid" />
</BaseTransition>
</li>
<li>
<BaseTransition class="home__item">
<BaseText :text="$t('home.list[1]', { temp2: $t('home.temp2') })" size="lg-fluid" />
</BaseTransition>
</li>
<li>
<BaseTransition class="vault__item">
<BaseText :text="$t('home.list[2]', { temp3: $t('home.temp3') })" size="lg-fluid" />
</BaseTransition>
</li>
</ul>
But if I need need not temp1 to be a string but a component?
<BaseTransition type="weight">{{ $t('home.temp1) }}</BaseTransition>
I've already seen this article in the docs but is using "default" components ( tag="p" ) using slots and right now I have no clue how to adapt it for my needs
The solution that worked for me
<i18n path="home.list[1]" tag="BaseTransition" class="home__item">
<template #temp2>
<BaseTransition type="weight" tag="span">
{{ $t('home.temp2') }}
</BaseTransition>
</template>
</i18n>
Related
Please I need help with making this accordion work I am not too familiar with StimulusJS. The first accordion works fine but the rest does not respond. I have attached a snippet of the code here please let me know what I am doing wrong thank you.
The script tag contains the stimulusjs code. Please I would appreciate your comments.
<script src="https://cdn.tailwindcss.com"></script>
<script type="module">
import { Application, Controller } from "https://unpkg.com/#hotwired/stimulus/dist/stimulus.js"
window.Stimulus = Application.start()
Stimulus.register("dropdown", class extends Controller {
static targets = ["background", "drop", "expand", "button"];
static values = { accordionValue: Number };
connect() {
console.log("Drop Down connected");
}
initialize() {
this.isOpen = true;
}
onToggle = (e) => {
Array.prototype.forEach.call(this.buttonTargets, function (element, index) {
element.addEventListener("click", function () {
console.log(index)
})
})
this.isOpen ? this.show() : this.hide();
this.isOpen = !this.isOpen;
};
show() {
this.dropTarget.className = "block w-full text-base font-light pt-3";
this.backgroundTarget.className = "bg-[#F0F0F0] mb-2 py-6 px-4";
this.expandTarget.innerHTML = "-";
console.log("dropdown is active");
}
hide() {
this.dropTarget.className = "hidden";
this.backgroundTarget.className = "bg-white -mb-2 w-full py-6 px-4";
this.expandTarget.innerHTML = "+";
console.log("dropdown is closed");
}
})
</script>
<div data-controller="dropdown" class="w-full flex flex-col gap-12 md:flex-row sm:max-w-[400px] md:max-w-[450px] lg:max-w-[500px] text-[#868686]">
<div class="md:min-h-[450px] w-full mt-3">
<h4 class="text-4xl font-semibold px-4 pb-3">FAQ's</h4>
<div data-dropdown-target="background" class=" py-4 px-4">
<div data-action="click->dropdown#onToggle" data-dropdown-target="button" class="cursor-pointer flex justify-between items-center">
<h5 class="text-xl font-bold">Waar hebben jullie nieuwe tuinen aangelegd? </h5><span data-dropdown-target="expand" class="font-light text-[18px] self-start">+</span>
</div>
<p data-dropdown-target="drop" class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div data-dropdown-target="background" class=" py-4 px-4">
<div data-action="click->dropdown#onToggle" data-dropdown-target="button" class="cursor-pointer flex justify-between items-center">
<h5 class="text-xl font-bold">Waar moet een goede hovenier aan voldoen?</h5><span data-dropdown-target="expand" class="font-light text-[18px] self-start">+</span>
</div>
<p data-dropdown-target="drop" class="hidden ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div data-dropdown-target="background" class="py-4 px-4">
<div data-action="click->dropdown#onToggle" data-dropdown-target="button" class="cursor-pointer flex justify-between items-center">
<h5 class="text-xl font-bold">Wat kost de aanleg van een nieuwe tuin? </h5><span data-dropdown-target="expand" class="font-light text-[18px] self-start">+</span>
</div>
<p data-dropdown-target="drop" class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div data-dropdown-target="background" class="py-4 px-4">
<div data-action="click->dropdown#onToggle" data-dropdown-target="button" class="cursor-pointer flex justify-between items-center">
<h5 class="text-xl font-bold">Zijn de afspraken vrijblijvend?</h5><span data-dropdown-target="expand" class="font-light text-[18px] ml-auto self-start">+</span>
</div>
<p data-dropdown-target="drop" class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
Firstly - start with the HTML
The Stimulus docs provide a good guide and one of the key principles is 'Start with the HTML'.
All modern browsers support the HTML details disclosure element, and you can find really solid documentation for this on the MDN site. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Using Tailwind you can get pretty far but you may need to add a plugin to style against the open attribute.
For styling, see
https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/
How to target elements with a specific data attribute with Tailwind CSS?
https://tailwindcss.com/docs/adding-custom-styles
It would probably be a bit easier without Tailwind but that is up to you.
Get as close as you can without writing a single line of JavaScript, a nicely styled single accordion item that opens & closes without additional code.
The main benefits of using native HTML elements are
Less code to maintain is always better.
Forces you to think about accessibility and keyboard control instead of rolling your own 'button' like things that are not really buttons and breaking accessibility.
Might be good enough to leave as is and move on, you may not need the 'close others when one opens' feature and you can move on to other things in your project.
Secondly - fill in the styling gaps with Stimulus
You may find you have to use some JavaScript to add/remove some classes, try your best to avoid this, but if you have to your code approach above is close enough.
You may want to be more explicit about what classes to use on the element using the Stimulus classes approach https://stimulus.hotwired.dev/reference/css-classes
Finally - add accordion like behaviour
Assuming you want some kind of behaviour like the Bootstrap accordion where expanding one item will collapse any others already open.
Below is the simplest JavaScript to have an accordion controller that closes all other items (targets) when one opens.
When the method toggle is called, it reads that event's target and then works out if it is opening or closing. If it is opening, we go through all other accordion item targets and close them.
import { Controller } from '#hotwired/stimulus';
class AccordionController extends Controller {
static targets = ['item'];
toggle({ target }) {
const isOpening = target.hasAttribute('open');
if (isOpening) {
// if opening - close the others
this.itemTargets.forEach((item) => {
if (item === target) return;
item.removeAttribute('open');
});
}
}
}
export default AccordionController;
In the HTML we declare the data-controller="accordion" on the outer container.
For each details element we add two attributes:
data-accordion-target="item" - this scopes this details element to the accordion controller's this.itemTargets array.
data-action="toggle->accordion#toggle" - this adds an event listener for the build in details toggle event, note that this event does not bubble (unlike click) hence why we need it on each details element.
<section class="prose m-5" data-controller="accordion">
<h2>Multiple 'details' element into an accordion</h2>
<details
class="py-4 px-4"
data-action="toggle->accordion#toggle"
data-accordion-target="item"
>
<summary
class="flex justify-between items-center text-xl font-bold
cursor-pointer">
Section A
</summary>
<div class="bg-[#F0F0F0] mb-2 py-6 px-4">
Content
</div>
</details>
<details
class="py-4 px-4"
data-action="toggle->accordion#toggle"
data-accordion-target="item"
>
<summary
class="flex justify-between items-center text-xl font-bold
cursor-pointer">
Section B
</summary>
<div class="bg-[#F0F0F0] mb-2 py-6 px-4">
Content
</div>
</details>
<details
class="py-4 px-4"
data-action="toggle->accordion#toggle"
data-accordion-target="item"
>
<summary
class="flex justify-between items-center text-xl font-bold
cursor-pointer">
Section C
</summary>
<div class="bg-[#F0F0F0] mb-2 py-6 px-4">
Content
</div>
</details>
</section>
General tips
Never use a div for something that is clickable, it is just going to give you a hard time, always use a button with type="button".
There are some nuances with accessibility and the details element, be sure you understand these if your application needs to be AA compliant or higher.
I'm trying to build a simple slider with Vue and dinamic data changing based on the selected index but can't get it to work.
Here's the code, I'm pretty sure there is something wrong in the way the index is selected because the looped element is not rendering if I attach the index in sliderTop[sliderIndex], but it renders all the element without it.
HTML:
<div class="slider">
<div class="prev" #click="prev">
<i class="fas fa-angle-left"></i>
</div>
<div class="first-image">
<div class="first-background" v-for="(el) in sliderTop[sliderIndex]" v-if='(el.visible === true)'>
<div class="first-content">
<h1>{{el.title}} <span>{{el.specialFont}}</span></h1>
<p>{{el.paragraph}}</p>
<button>{{el.button}}</button>
</div>
</div>
</div>
<div class="next" #click="next">
<i class="fas fa-angle-right"></i>
</div>
</div>
VUE:
sliderIndex: 0,
sliderTop: [
{
title: 'Devotion that never',
specialFont: 'ends',
paragraph: 'Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi.',
button: 'READ MORE',
visible: true,
},
{
title: 'Projects made with',
specialFont: 'love',
paragraph: 'Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi.',
button: 'READ MORE',
visible: true,
},
{
title: 'Our new folio full of',
specialFont: 'joy',
paragraph: 'Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi.',
button: 'READ MORE',
visible: true,
}
],
next: function (){
if (this.sliderIndex < 2) {
this.sliderIndex += 1;
} else {
this.sliderIndex = 0;
}
},
prev: function (){
if (this.sliderIndex > 0) {
this.sliderIndex -= 1;
} else {
this.sliderIndex = 2;
}
},
If you want to make a slider as you mentioned, you need to create a v-for for sliderTop array. Currently, you have only one slide.
You used v-for and v-if in the same div, which is not allowed.
When you use v-for with object (sliderTop[sliderIndex] is an object) "el" becomes the value. For example, in the first iteration, el is "Devotion that never", in the second iteration, it is "ends", etc.
<div class="slider">
// prev button
<div
:class="['slide', `slide-${index}`, index == sliderIndex ? 'active' : '']"
v-for="(slide, index) in sliderTop"
:key="index"
>
<h1>{{slide.title}}
<span>{{slide.specialFont}}</span></h1>
<p>{{slide.paragraph}}</p>
<button>{{slide.button}}</button>
</div>
// next button
</div>
After that, you need to change sliderIndex by prev/next buttons and change the visibility in CSS based on active class.
For example
.slider {
position: relative
}
.slide {
position: absolute
top:0
left:0
right:0
bottom:0
opacity:0
transform: translateX(-100%)
transition: all 0.5s ease-in-out
}
.slide.active {
opacity:1
transform: translateX(0)
}
I am very new to GSAP and Vue.js. I am actually using it for the first time.
I am trying to do a text animation with Splittext from GSAP.
This is what I did but I am getting this error : gsap__WEBPACK_IMPORTED_MODULE_2__.SplitText is not a constructor.
I really don't understand where this come from.
<script>
import gsap from 'gsap'
import {TimelineLite, SplitText} from 'gsap';
export default {
mounted(){
this.textReveal()
},
methods : {
textReveal(){
var $text = document.querySelector(".splittext"),
mySplitText = new SplitText($text, {type:"words"}),
splitTextTimeline = gsap.timeline();
gsap.set($text, {perspective:400});
mySplitText.split({type:"chars, words"});
splitTextTimeline.from(mySplitText.chars, {duration: 0.5, scale:2, autoAlpha:0, transformOrigin:"100% 50%", ease: "back.out", stagger: 0.02});
splitTextTimeline.play();
}
}
}
</script>
<template>
<div class="help-page">
<img class="close" src="#/assets/icons/close.svg" alt="">
<div class="text-container">
<h1>What to see</h1>
<p class="splittext">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum, quos, magnam omnis perferendis laboriosam voluptatibus aperiam eligendi rerum fugit esse, ipsum vero quis reiciendis accusantium totam soluta ad. Quia tempore aliquam dolore eligendi amet, id quae sed tempora minus dignissimos deserunt corporis debitis error delectus dicta quidem, alias eaque!</p>
</div>
</div>
</template>
Thank you for your help :)
Well, Splittext is apparently not free and that is why I can't use it ...
I can't understand where is my fault . I try to make a custom search filter.I make a search box Where I search anythings but when it is matching in my list it gives me matching output only .But its not working .It's not look like dynamic.I am using vue 2.Hopefully I forget to add something in my computed property
<template>
<div class ="container">
<div class="new">
<form >
<h1><label>Enter country name:</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
</form>
</div>
<div class='new'>
<ul>
<li v-for="country in countries">{{country.name}}
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere dignissimos architecto quia, quisquam ad similique corporis. Laborum, error id qui consequuntur facilis est delectus velit vel ea nisi repudiandae doloribus. </p>
</li>
</ul>
</div>
</div >
</template>
<script>
export default {
data(){
return {
countries:[
{name:'AMERICA'},
{name:'INDIA'},
{name:'PAKISTAN'},
{name:'SRILANKA'},
],
search:'',
}
},
computed: {
newfuntion(){
return this.countries.filter((funtion)=>{
return funtion.match(this.search)
});
}
}
};
</script>
It looks like you are not using your computed property in your v-for.
Try changing it to this: v-for="country in newfuntion"
I have 6 different elements of varying length and I am trying to come up with a bootstrap grid layout that achieves the following.
A two column layout to display in medium and larger displays:
Note that box 3 in the example below starts immediately under box 1 even though box 2 is much longer than box 1.
MD+
|-----|-----|
| 1 | 2 |
|-----| |
| 3 |-----|
|-----| 4 |
| 5 |-----|
|-----| 6 |
|-----|
With the following single column layout for displays smaller than medium:
XS/SM:
|-----|
| 1 |
|-----|
| 2 |
| |
|-----|
| 3 |
|-----|
| 4 |
|-----|
| 5 |
|-----|
| 6 |
|-----|
Just to be thorough, I never want 3 or more columns:
|-----|-----|-----|
| 1 | 2 | 3 |
|-----| |-----|
| 4 |-----| 6 |
|-----| 5 |-----|
|-----|
And the order must remain 1-6, never 1-3 followed by 4-6
I am able to separately achieve the 2 column layout and the single column layouts using the following code but they both break when the display size changes from SM/MD and vice-versa:
Works for XS/SM:
<div class="row">
<div class="col-xs-12 col-md-6"> 1 </div>
<div class="col-xs-12 col-md-6"> 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis interdum diam, in tempor est. Pellentesque nulla mi, egestas et rhoncus non, rhoncus bibendum velit. Nulla facilisi. Aenean faucibus nulla rutrum elementum cursus. Nam vel varius libero, eu porttitor tortor. In et ultricies nunc. Duis volutpat posuere urna, id faucibus ante lobortis sit amet. Maecenas urna nisl, tristique eget sem vel, semper tincidunt nisi. </div>
<div class="col-xs-12 col-md-6"> 3 </div>
<div class="col-xs-12 col-md-6"> 4 </div>
<div class="col-xs-12 col-md-6"> 5 </div>
<div class="col-xs-12 col-md-6"> 6 </div>
</div>
Works for MD+:
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="row">
<div class="col-xs-12"> 1 </div>
<div class="col-xs-12"> 3 </div>
<div class="col-xs-12"> 5 </div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="row">
<div class="col-xs-12"> 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis interdum diam, in tempor est. Pellentesque nulla mi, egestas et rhoncus non, rhoncus bibendum velit. Nulla facilisi. Aenean faucibus nulla rutrum elementum cursus. Nam vel varius libero, eu porttitor tortor. In et ultricies nunc. Duis volutpat posuere urna, id faucibus ante lobortis sit amet. Maecenas urna nisl, tristique eget sem vel, semper tincidunt nisi. </div>
<div class="col-xs-12"> 4 </div>
<div class="col-xs-12"> 6 </div>
</div>
</div>
</div>
Is it possible to get the desired layout using Bootstrap 3, and if so, How?
I ended up hacking together a jquery solution that converts the HTML for the
bootstrap grid structure to the layout that works depending on the current
display size.
To facilitate I also hacked together a class function that provides a dz object (displaySize) that not only determines which of the current bootstrap display sizes is active (xs, sm, md, or lg) but also provides a method to execute custom function references registered with the class if the display size changes after reload (window resize event is debounced using underscore).
This is the code I ended up using, if you know how to achieve this using
just the bootstrap grid structure and classes then please post an answer as I
would much rather just do that.
The only change to the HTML is the addition of two class names added to the parent .row element (.custom-layout .custom-layout-2col). Whether you start with the single column layout or the 2 column layout is up to you. just change the second class name to match the layout that you start with. It really doesn't matter which one you start with since the code will change it to the other if needed but you should start with the layout that matches the display size for the majority of your users.
The following shows the added classes for a two column layout:
<div class="row custom-layout custom-layout-2col">
<div class="col-xs-12 col-md-6">
<div class="row">
<div class="col-xs-12"> 1 </div>
<div class="col-xs-12"> 3 </div>
<div class="col-xs-12"> 5 </div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="row">
<div class="col-xs-12"> 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis interdum diam, in tempor est. Pellentesque nulla mi, egestas et rhoncus non, rhoncus bibendum velit. Nulla facilisi. Aenean faucibus nulla rutrum elementum cursus. Nam vel varius libero, eu porttitor tortor. In et ultricies nunc. Duis volutpat posuere urna, id faucibus ante lobortis sit amet. Maecenas urna nisl, tristique eget sem vel, semper tincidunt nisi. </div>
<div class="col-xs-12"> 4 </div>
<div class="col-xs-12"> 6 </div>
</div>
</div>
</div>
The javascript:
// This is the dz class. Load this after jquery.
// Note that it instantiates itself, just load it on your page.
// Requires the underscore library (or just the _.restArguments, _.delay,
// and _.debounce functions from the library if you want to copy them out
// separately. )
; (function () {
var Def = function () { return constructor.apply(this, arguments); }
var attr = Def.prototype;
//attributes
attr.currentSize = '?';
attr.previousSize = '?';
attr.changeHandler = [];
//constructor
function constructor() {
var self = this;
$(document).ready(function () {
$('.wrapper-content').append('<div class="device-xs hidden-xs"></div><div class="device-sm hidden-sm"></div><div class="device-md hidden-md"></div><div class="device-lg hidden-lg"></div>');
$(window).resize(_.debounce(function () {
self._determineDeviceSize();
}.bind(self), 200));
self._determineDeviceSize();
}.bind(self));
}
//methods
attr.getCurrentSize = function () {
return this.currentSize;
}
attr.getPreviousSize = function () {
return this.previousSize;
}
attr.addChangehandler = function (f) {
if (typeof f === 'function') { this.changeHandler.push(f); }
}
attr._determineDeviceSize = function () {
var c = this.currentSize;
this.currentSize = $('.device-lg').is(':hidden') ? 'lg' : ($('.device-md').is(':hidden') ? 'md' : ($('.device-sm').is(':hidden') ? 'sm' : 'xs'));
if (c !== this.currentSize) {
this.previousSize = c;
// execute any registered size change handler functions
for (i = 0; i < this.changeHandler.length; ++i) {
this.changeHandler[i](this.currentSize, this.previousSize);
}
}
}
//unleash the class (if it hasn't already been)
if (typeof window.dz === 'undefined') {
window.dz = new Def();
}
})();
// Register our function with dz for the work that needs to be done
// if the bootstrap display size changes
dz.addChangehandler(function (csz, psz) {
$('.custom-layout').each(function () {
var parentRow = $(this);
// Change from 1 col to 2 col ?
if (parentRow.is('.custom-layout-1col') && (csz == 'md' || csz == 'lg')) {
var allDivs = parentRow.children('div');
var mCt = allDivs.length;
if (mCt > 0) {
// create the new row/col structure that we will move all the existing .col-* div's into
var id = 'custom' + (new Date).getTime();
var id2 = id + '2';
parentRow.after('<div class="row custom-layout custom-layout-2col"><div class="col-md-6"><div id="' + id + '" class="row"></div></div><div class="col-md-6"><div id="' + id2 + '" class="row"></div></div></div>');
var newOddParent = $('#' + id);
var newEvenParent = $('#' + id2);
var idx = 0;
while (idx < mCt) {
if (idx === 0 || idx % 2 === 0) {
// odd
newOddParent.append($(allDivs[idx]));
} else {
// even
newEvenParent.append($(allDivs[idx]));
}
idx++;
}
// remove the old parent from the DOM
parentRow.remove();
} else {
console.log('Unable to change custom-layout -- Unable to locate any div (col-*) elements in parent: ', parentRow);
}
}
// Change from 2 col to 1 col ?
if (parentRow.is('.custom-layout-2col') && (csz == 'xs' || csz == 'sm')) {
var childRows = parentRow.children('div').children('.row');
if (childRows.length == 2) {
// create the new .row div that we will move all the .col-* div's into
var id = 'custom' + (new Date).getTime();
parentRow.after('<div id="' + id + '" class="row custom-layout custom-layout-1col"></div>');
var newParent = $('#' + id);
// locate all of the col-* div's that we will be moving
var oddRowDivs = $(childRows[0]).children('div');
var evenRowDivs = $(childRows[1]).children('div');
childRows = '';
var oCt = oddRowDivs.length;
var eCt = evenRowDivs.length;
var mCt = Math.max(oCt, eCt);
var idx = 0;
// move the div's directly into the parentDiv in a staggered order
// starting with the odd (left side) div #1, then even (right side) div #2, etc..
while (idx < mCt) {
if (idx < oCt) {
newParent.append($(oddRowDivs[idx]));
}
if (idx < eCt) {
newParent.append($(evenRowDivs[idx]));
}
idx++;
}
// remove the old parent from the DOM
parentRow.remove();
} else {
console.log('Unable to change custom-layout -- Unable to locate the 2 child .row elements in parent: ', parentRow);
}
}
});
});
If anyone is interested the dz class usage is as follows:
dz.getCurrentSize() - value returned will be the current bootstrap display size of the client device: xs, sm, md, or lg
dz.getPreviousSize() - value returned will be the previous bootstrap display size or '?' if the size hasn't changed since page initialization
dz.addChangehandler(functionRef) - Allows you to add your own display size change handler function that will be executed on page load and anytime the display size changes afterwards.
Example usage:
// if all you need is the current display size then use the dzCurrentSize variable
// just make sure your accessing it after jquery's $(document).ready
$(document).ready(function () {
console.log('page size: ' + dz.getCurrentSize());
});
// using a change handler function
dz.addChangehandler(function (currentSize, previousSize) {
// example usage scenarios:
// always do stuff (on page initialization and when the size changes anytime afterwards)
alert("The bootstrap display size is: " + currentSize);
// do stuff ONLY if the size changed after page initialization
if (previousSize !== '?') {
console.log('The size has changed after initialization from: ' + previousSize + ' to: ' + currentSize);
}
// do stuff ONLY on page initialization
if (previousSize === '?') {
console.log('The page has just initialized with a size of: ' + currentSize);
}
});