I'm new to NoUISlider and I've managed get the slider to work. However, the slider value is not visible or appears to work.
I'm new to jQuery as well, so I'm not sure why the slider value code isn't working.
The website I'm editing is right here: Experian Map
Here's my code:
<script>
$(function(){
$('#slider-range').noUiSlider({
range: {
'min': 0,
'10%': 10,
'20%': 20,
'30%': 30,
'50%': 50,
'60%': 60,
'70%': 70,
'90%': 90,
'max': 100
},
snap: true,
start: [20]
});
});
</script>
<script>
$(function(){
$('#slider-range').Link('lower').to($('#slider-range-value'));
</script>
.example-val{
color: #FFF;
display: block;
margin: 15px 0px;
}
.example-val:before {
content: "Value: ";
font: 700 12px Arial;
}
#slider-range-value{
color: #FFF;
}
<div id="slider-range"></div><span id="slider-range-value" class="example-val"></span>
The logic is OK, but you've got several syntax errors. Opening your browser console (press F12) would help.
Fixed code:
$(function(){
$('#slider-range').noUiSlider({
range: {
...
},
snap: true,
start: [20]
});
$('#slider-range').Link('lower').to($('#slider-range-value'));
}); // << was missing
Related
In FullCalendar v3, there has an option to catch after loading all events.
eventAfterAllRender
It seems removed in v4. As saying here:
https://fullcalendar.io/docs/v4/upgrading-from-v3
Here has a code snippet to prepare a demo calendar in v5.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://cdn.jsdelivr.net/npm/fullcalendar#5.5.1/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar#5.5.1/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
selectable: true,
events: [
{
title: 'Business Lunch',
start: '2020-09-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2020-09-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: '#257e4a'
},
{
title: 'Conference',
start: '2020-09-18',
end: '2020-09-20'
},
{
title: 'Party',
start: '2020-09-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
groupId: 'availableForMeeting',
start: '2020-09-11T10:00:00',
end: '2020-09-11T16:00:00',
display: 'background'
},
{
groupId: 'availableForMeeting',
start: '2020-09-13T10:00:00',
end: '2020-09-13T16:00:00',
display: 'background'
},
// red areas where no events can be dropped
{
start: '2020-09-24',
end: '2020-09-28',
overlap: false,
display: 'background',
color: '#ff9f89'
},
{
start: '2020-09-06',
end: '2020-09-08',
overlap: false,
display: 'background',
color: '#ff9f89'
}
]
});
calendar.render();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Codepen: https://codepen.io/wetruck/pen/poEXEve
Is there any option to perform an action after loading all events in v5?
I'm actually using a html loader. It's showing with the page load. But after loading all events, it should be removed.
For this situation where you have a loader you want to show and hide, please see the loading callback option for something which will do the job - you can use that callback to make a loader show/hide when the AJAX part of the task starts and stops.
e.g.
loading: function( isLoading ) {
if (isLoading == true) {
//show your loader
} else {
//hide your loader
}
}
Unlike the old eventAfterAllRender it starts and stops on the start/end of the AJAX request and doesn't cover the rendering of the events by fullCalendar, but that's normally very fast unless you have an absurd number of events being downloaded for a single time period.
I have to set the slide width to a specific size if the viewport is between a range.
breakpoints: {
767: {
perView: 1,
peek: 193,
slideWidth: 277
},
1023: {
perView: 1,
peek: 212,
}
}
The documentation states that you can use slideWidth in the settings, so I'm assuming is in the breakpoints, but there's no example on how to do that and I haven't found an example of it.
The whole interface is responsive, so even if slideWidth is working behind the scenes, the width of the slide changes no matter what.
I also tried with pure CSS but Glide takes charge of course and overwrites when a resize event occurs. Also tried with pure JS and measuring the viewport myself, but again Glide.js takes charge and the interface is being offset, so the slide moves a bit and doesn't match the screen.
Here is a codepen on how to use the breakpoints https://codepen.io/tfoh/pen/zjqzZo
new Glide('#glide1', {
type: 'carousel',
perView: 3,
breakpoints: {
800: {
perView: 1
}
}
}).mount();
I manage that with css, this example make width of slides the same on any resolution, .glide-wrapper you should add manually like a glider parent div
.glide-wrapper {
max-width: 100vw;
overflow: hidden;
}
.glide {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.glide__track {
overflow: visible!important;
}
const glide = new Glide('.glide', {
type: 'carousel',
breakpoints: {
1280: {
gap: 16,
focusAt: "center",
perView: 1,
peek: {
before: 16,
after: 16
},
},
}
}).mount({Swipe, Controls, Breakpoints });
JSFIDDLE DEMO
I couldn't figure out how to go about doing these following:
Show the default item on load. Currently, it loads a blank page and shows the data only when I drag the slider.
Show a fading effect when the items are loaded.
Here's the HTML
<div class="sli3"></div>
<div class="div-0">
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
</div>
CSS:
.div-0 {
position: relative;
}
.div-1 {
position:absolute;
top:150px;
left:150px;
}
.div-2 {
position:absolute;
top:100px;
left:60px;
}
.div-3 {
position:absolute;
top:210px;
left:260px;
}
JS:
$(function() {
$(".sli3").slider({
animate: true,
range: "min",
value: 10,
min: 0,
max: 100,
slide: function(event, ui) {
if (ui.value<=20) {
$(".div-1").text("whatever");
$(".div-2").html("hello <strong>world</strong>");
$(".div-3").text("");
}
else if (ui.value>=21 && ui.value<50) {
$(".div-1").text("yay");
$(".div-2").text("whoo");
$(".div-3").text("");
}
else if (ui.value>=50 && ui.value<70) {
$(".div-1").text("star");
$(".div-2").text("wars");
$(".div-3").text("");
}
else if (ui.value>=70 && ui.value<90) {
$(".div-1").text("night");
$(".div-2").text("crawler");
$(".div-3").text("rocks");
}
else {
$(".div-1").text("example text 1");
$(".div-2").text("example text 2");
$(".div-3").text("");
}
}
});
});
How do I go about doing this?
A bit of change to your code:
$(function() {
$(".sli3").slider({
animate: true,
range: "min",
min: 0,
max: 100,
slide: onSlide,
change: onSlide
}).slider('value', 10);
});
(I took the slide function out so I could call it both on change and slide).
Check the update to your demo:
https://jsfiddle.net/m7uhdsy9/1/
I am trying to resolve the issue .I cant load this script http://orangeplacehotel.com/superbudget/ems-policy. Is there anything wrong with this code?? I tried putting alert and it works properly but still i cant see the plug-in loaded on the site.. Please help .. Thanks,
$(function() {
$('#nanoGallery1').nanoGallery({
kind:'flickr',
userID:'129251189#N05',
touchAutoOpenDelay: -1,
breadcrumbAutoHideTopLevel: true,
maxWidth: 948,
imageTransition : 'slide',
thumbnailWidth: 200,
thumbnailHeight: 126,
thumbnailHoverEffect: 'scaleLabelOverImage,borderDarker',
i18n: {
thumbnailImageDescription: 'view photo',
thumbnailAlbumDescription: 'open album'
},
thumbnailLabel: {
display: true,
position: 'overImageOnMiddle',
hideIcons: true, align: 'center'
},
thumbnailLazyLoad: true
});
});
alert("test");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
error is "NanoGallery is not a function"
I think you should check your plugin (in what nanoGaller() is defined) is included in page or not before running your code
Below is the code working fine
Its not a solution but might give you some idea
First include the jquery library then
$.prototype.nanoGallery = function(){
console.log(arguments);
}
$(function() {
$('#nanoGallery1').nanoGallery({
kind:'flickr',
userID:'129251189#N05',
touchAutoOpenDelay: -1,
breadcrumbAutoHideTopLevel: true,
maxWidth: 948,
imageTransition : 'slide',
thumbnailWidth: 200,
thumbnailHeight: 126,
thumbnailHoverEffect: 'scaleLabelOverImage,borderDarker',
i18n: {
thumbnailImageDescription: 'view photo',
thumbnailAlbumDescription: 'open album'
},
thumbnailLabel: {
display: true,
position: 'overImageOnMiddle',
hideIcons: true, align: 'center'
},
thumbnailLazyLoad: true
});
});
alert("test");
So, I have a js script:
<script>
$(document).ready(function() {
$("#changePh").click(function() {
$("changebox").overlay().load();
\});
$("#changebox").overlay({
top: 260,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
load: true
});
});
</script>
and i wanted that overlay appears after that i pressed the button, insted now it's appears
immediately i load the page
I have also a button with id="changePh" and a form with id="changebox"
Who can help me...
Try to move your overlay function inside click function:
$("#changePh").click(function() {
$("#changebox").overlay().load();
$("#changebox").overlay({
top: 260,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
load: true
});
});
Btw, you're missing # inside $("#changebox") and redundant \ before closing }) of your click function.