I am working with the glide.js library to make an image slider on my website. I would like to have three pre made buttons to act as the slider buttons instead of the default navigation. The default nav seems to be using <a> tags.
Looking through the js file It seems the default navigation is created here:
Glide.prototype.navigation = function() {
this.navigation.items = {};
//CLASS
// Navigation wrapper
this.navigation.wrapper = $('<div />', {
'class': this.options.navigationClass
}).appendTo(
/**
* Setting append target
* If option is true set default target, that is slider wrapper
* Else get target set in options
* #type {Bool or String}
*/
(this.options.navigation === true) ? this.parent : this.options.navigation
);
//Navigation controls
for (var i = 0; i < this.slides.length; i++) {
this.navigation.items[i] = $('<li />', {
'href': '#',
'class': this.options.navigationItemClass,
// Direction and distance -> Item index forward
'data-distance': i
}).appendTo(this.navigation.wrapper);
}
// Add navCurrentItemClass to the first navigation item
this.navigation.items[0].addClass(this.options.navigationCurrentItemClass);
// If centered option is true
if (this.options.navigationCenter) {
// Center bullet navigation
this.navigation.wrapper.css({
'left': '50%',
'width': this.navigation.wrapper.children().outerWidth(true) * this.navigation.wrapper.children().length,
'margin-left': -(this.navigation.wrapper.outerWidth(true)/2)
});
}
};
I adjusted the code, I replaced the loop with the code below to use 3 buttons I placed on my html page but it has no effect. I'm just wondering if I am doing something wrong, or if it is even possible? This is the changes I made to the code:
this.navigation.items[0] = $('.b1', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 0
}).appendTo(this.navigation.wrapper);
this.navigation.items[1] = $('.b2', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 1
}).appendTo(this.navigation.wrapper);
this.navigation.items[2] = $('.b3', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 2
}).appendTo(this.navigation.wrapper);
Does anyone have any idea how I might implement this?
I just solved the issue. Might be helpful to anyone trying to do the same thing. It was very easy, I don't know how I didn't figure it out initially.
Basically initialize the slider as follows:
$('.slider').glide({
autoplay: 5000,
arrows: 'none',
navigation: 'none'
});
Get an instance of the API:
var glide = $('.slider').glide().data('api_glide');
Then get references to each button and code the required action you want to execute when the button is clicked:
$('.b1').click(function(){
console.log("Button 1 Clicked");
glide.jump(1, console.log('1'));
});
$('.b2').click(function(){
console.log("Button 2 Clicked");
glide.jump(2, console.log('2'));
});
$('.b3').click(function(){
console.log("Button 3 Clicked");
glide.jump(3, console.log('3'));
});
All of this assumes you've got three buttons on your page like so:
<button class="b1" id="b1" name="b1" >Button 1</button>
<button class="b2" id="b2" name="b2">Button 2</button>
<button class="b3" id="b3" name="b3">Button 3</button>
Related
We are trying to show our portfolio in bootstrap via MixItUp v3.1.11 filtering and are trying to load a certain category (not all the projects) when the page is loaded.
Patrick Kunka has provided an example how it could be done here.
Same problem was asked here
Our issue is that the reccomended soultion is not working. My guess is that it is related to the change of selector due to bootstrap + mixitup issues:
control: '[data-mixitup-control]'
Here is the piece of code that is at the end of the page:
var containerEl = document.querySelector('#selector');
var mixer = mixitup(containerEl, {
selectors: {
target: '.mix',
control: '[data-mixitup-control]'
},
animation: {
effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation
},
load: {
filter: 'none' // Ensure all targets start from hidden (i.e. display: none;)
}
});
// Add a class to the container to remove 'visibility: hidden;' from targets. This
// prevents any flickr of content before the page's JavaScript has loaded.
containerEl.classList.add('mixitup-ready');
// Show all targets in the container
mixer.show()
.then(function() {
// Remove the stagger effect for any subsequent operations
mixer.configure({
animation: {
effects: 'fade scale'
},
load: {
filter: '.residential' // Ensure all targets start from hidden (i.e. display: none;)
}
});
});
When I change the filter to desired .residential it does not work.
I also tried to add this:
$(function(){
$('#selector').mixItUp({
load: {
filter: '.residential'
}
});
});
No luck. Any idea anyone where could the problem be?
In combination with MixItUp v3.1.9 and Bootstrap 4 try this example.
Add data-mixitup-control to avoid conflicts with other data-attributes:
<button type="button" class="control" data-mixitup-control data-`enter code here`filter=".product">PRODUCTS</button>
Initialize MixItUp:
var container = document.querySelector('.portfolio');
var mixer = mixitup(container, {
selectors: {
control: '[data-mixitup-control]'
}
});
I've tried the example, and it works with version 2.1.6.
Here is my example code:
$(function(){
$('#selector').mixItUp({
selectors: {
target: '.item'
},
layout: {
display: 'inline-block'
},
load: {
filter: '.residential'
}
});
});
This will load the DOM only with items related to .residential visible.
Hope this helps.
In combination with MixItUp Version 3.1.11 and Bootstrap 3 try this example.
Add data-mixitup-control to avoid conflicts with other data-attributes:
<button type="button" class="control" data-mixitup-control data-filter=".residential">Residential</button>
Initialize MixItUp:
var containerEl = document.querySelector('.container');
var mixer = mixitup(containerEl, {
selectors: {
control: '[data-mixitup-control]'
},
load: {
filter: '.residential'
}
});
You don't need to set the 'fade scale' animation effect separately - it's the default setting. https://www.kunkalabs.com/mixitup/docs/configuration-object/
I'm developping an application and i want to open a large modal.
UIkit.modal.confirm('html content', function(){ myFunction() });
In this way it generates a default modal.
<div class="uk-modal-dialog" style="min-height:0;"><div>
But i want that generates to me a modal with 80% width or a large modal. like this for exemple :
<div class="uk-modal-dialog" style="min-height:0; width:80%"><div>
what i have to do?
Sorry for my english.
In UIKIT version 2 you can do this :
const $modal= UIkit.modal.confirm(COMBINEDMSGTEXT,
function () {
//ur costom code
}, {
labels: {
"Cancel": "Text",
"Ok": "Text"
}
});
//if you console log $modal you will notice you have access to selector and element
const el = $modal.element; // this will return the main selector with the class uk-open
el.children().css("width", "52%"); // the right div you need to target is actually a child element.
In UIKIT 3 , just use directly modal.$el and you will access the seletor wanted.
I want to have a button that can turn on and off the 'hints' function in intro.js.
I have a working version to show and then hide but the show only works once. How can I get it to work repeatedly? This functionality works for the standard data-intro but not for data-hint.
<div class="jumbotron">
<h1 id='step1'>Hints</h1>
<p class="lead">Adding hints using JSON + callbacks</p>
<a id='step2' class="btn btn-large btn-success" href="javascript:void(0);">Add hints</a>
</div>
function addHints(){
intro = introJs();
intro.setOptions({
hints: [
{
element: document.querySelector('#step1'),
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#step2',
hint: 'More features, more fun.',
position: 'left'
},
{
element: '#step4',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
]
});
intro.onhintsadded(function() {
console.log('all hints added');
});
intro.onhintclick(function(hintElement, item, stepId) {
console.log('hint clicked', hintElement, item, stepId);
});
intro.onhintclose(function (stepId) {
console.log('hint closed', stepId);
});
intro.addHints();
}
$(function() {
$('#step2').click(function(){
if ( $('#step2').hasClass('clicked') ) {
introJs().hideHints();
$('#step2').removeClass('clicked');
} else {
addHints();
$('#step2').addClass('clicked');
}
});
});
Instead of using hideHints intro.js API method just remove the div block of intro.js from DOM:
var introDiv = document.getElementsByClassName("introjs-hints")[0];
introDiv.parentNode.removeChild(introDiv);
(You can do the same thing with jQuery if you want to).
When the div is removed from DOM, just initialize hints once again as you do with your addHints method when you want to show hints and it'll work.
Instead of deleting the div block with javascript. You can use .removeHints()
This function is part of intro.js, but is not included in the documentation.
Perhaps a bit hacky, but this works for me...
First, put your hints into their own variable:
hints = [{...}, ...]
then, reset your hints in the intro options
intro.onhintclose(function(stepId) {
if (document.querySelectorAll('.introjs-hidehint').length === hints.length) {
intro.setOptions({hints: hints})
}
})
The hidden hints are given a class of introjs-hidehint, and document.querySelectorAll will return all of them in an array. Once that array is the same size as your hints array, reset your hints in your intro options and that will reset all your hints so you can show them all again.
Here's a more complete example that also allows:
(a) toggling hints on/off by clicking a button (located on a nav bar so used across multiple pages).
(b) once all hints have been clicked, the hints div gets removed so that clicking show hints button will again actually...show hints...
(c) allow you to store hints for multiple pages in a single json object array (re: nav bar).
var jquery = require('jquery');
var introJs = require('intro.js');
* ===========================================================================
* define onclick of hints button
* =========================================================================*/
jquery('#hints_button').on('click', function() {
if (document.getElementsByClassName('introjs-hints').length == 0){
addSomeHints();
}
else {
destroyHints();
};
});
/* ===========================================================================
* Add hints using the IntroJS library
* =========================================================================*/
/* define hints */
var theHints = [
{
element: document.querySelector('#step1'),
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#step2',
hint: 'More features, more fun.',
hintPosition: 'left'
},
{
element: '#step4',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
];
/* generate hints with introjs */
function addSomeHints() {
intro = introJs();
intro.setOptions({
hints: theHints
});
intro.onhintclose(function (stepId) {
var remaining_hints = all_hints - document.getElementsByClassName("introjs-hidehint").length;
if (remaining_hints == 0) {
destroyHints();
};
});
/* add hints */
intro.addHints();
/* store number of hints created */
var all_hints = document.getElementsByClassName('introjs-hint').length;
};
/* remove hints div */
function destroyHints() {
var hintsDiv = document.getElementsByClassName("introjs-hints")[0]
hintsDiv.parentNode.removeChild(hintsDiv);
};
... hopefully this saves someone the 20 minutes it took me to piece together the answers and adapt it for what seems like a super common use case.
I have a slick slider on my site and its working.
What i need is to add a custom class to each item when the carousel renders.
ex: This is one done with owl carousel
if you use the following jQuery here:
http://codepen.io/OwlFonk/pen/dpjhB
jQuery(document).ready(function () {
var carousel = jQuery("#owl-demo");
carousel.owlCarousel({
itemsCustom: [[0,5]],
navigation : false, autoPlay : 10000, mouseDrag : true, touchDrag : true, pagination : false, rewindNav: true,
afterAction: function(el){
//remove class active
for ( var i = 0; i < 10; i++ )
{
this.$owlItems.removeClass('active' + i)
}
//add class active
for ( var i = 0; i < 10; i++ )
{
this.$owlItems.eq(this.currentItem + i).addClass('active' + i)
}
}
});
});
you will be able to see what i need.
I cant seem to get it working with Slick.
The reason im using Slick and not Owl is because Owl doesnt have infinite scrolling and Owl 2 is too buggy.
I would consider using Owl 2 if i can do the same as above but they changed the script so much i cant get it working.
I'm trying to add a thrid functionality to the mobiscroll scroller. First of all some explanations: I have 4 custom created wheels from "0" to "9". The user can insert a 4-digit number here.
Additionally to the standard "cancel" ("Abbrechen") and the "add" ("OK") button i want to implement an reset ("Bestand") button, which sets all wheels within the scroller to the value "0". Adding this additionally button haven't been any problem, but adding the wanted functionality to it unfortunately is. The wanted function just should reset the value of all 4 wheels to the value "0". Following my code so far:
init the wheels....
var whl1 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var whl2 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var whl3 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var whl4 = {'1':'1',
'2':'2',
'3':'3',
'4':'4',
'5':'5',
'6':'6',
'7':'7',
'8':'8',
'9':'9',
'0':'0'};
var wheel = [{},{},{},{}];
wheel[0]['1000er'] = whl1;
wheel[1]['100er'] = whl2;
wheel[2]['10er'] = whl3;
wheel[3]['1er'] = whl4;
init the scroller.... (within a loop).......
$('#' + i +'').scroller({
display: 'modal',
mode: 'clickpick',
lang : 'de',
headerText: function(value) {
//Some Stuff in here
},
button3Text: "Bestand",
button3: function(){
// this function doesn't work................
$('#' + i +'').mobiscroll('setValue', ['0', '0', '0', '0']);
},
formatResult: function(data) {
// some other stuff in here
},
onSelect: function(valueText, inst) {
// some other stuff, too
},
wheels: wheel,
height: 40
});
I have tried many ways to realize the functionallity, but nothing worked.... does anyone have an idea, how I can fix this issue? Because I already lost a lot of time fixing this issue (2 full days...), I would be very grateful for every resonse or little hint...... Thanks in advance and have a nice week!
I think that inside the button3 function the value of i is always the same, it is not remembered what value it had inside the loop.
You can try to loop through the elements with jquery like this:
HTML:
<input id="t1" class="mobiscroll" />
<input id="t2" class="mobiscroll" />
<!-- .... -->
Javascript:
$('.mobiscroll').each(function() {
var that = $(this);
that.mobiscroll({
display: 'modal',
mode: 'clickpick',
lang : 'de',
headerText: function(value) {
//Some Stuff in here
},
button3Text: "Bestand",
button3: function(){
// this function doesn't work................
that.mobiscroll('setValue', ['0', '0', '0', '0']);
},
onSelect: function(valueText, inst) {
// some other stuff, too
},
wheels: wheel,
height: 40
});
});