I have two range sliders ( slider1, slider2). What I want: when the user starts sliding with mouse on the slider1 then the position( or width) and the value to be same on the slider2 as slider 1.
My current code :
<p>
<label for="amount">Distance</label>
<input type="text" id="amount">
</p>
<!--Range slider-->
<div class='col-xl-6 col-lg-6 col-md-6 col-xs-12' id='slide'>
</div>
<p>
<label for="amount2">Distance</label>
<input type="text" id="amount2">
</p>
<div class='col-xl-6 col-lg-6 col-md-6 col-xs-12' id='slide2'>
</div>
<script>
$( function() {
$( "#slide" ).slider({
range: 'min',
min: 0,
max: 5000,
value: 0,
});
$( function() {
$( "#slide2" ).slider({
range: 'min',
min: 0,
max: 5000,
value: 0,
})
});
</script>
I know that I have to use the slide event, but I cant change the position of the slide2, thanks in advance
You can use slide event this will get called when user slide the slider then use slider("value") to get value and finally set value to both slider.
Demo Code:
$(function() {
$("#slide").slider({
range: 'min',
min: 0,
max: 5000,
value: 0,
});
$("#slide2").slider({
range: 'min',
min: 0,
max: 5000,
value: 0
});
//on slide of slider call this
$(".slides").on("slide", function() {
var selection = $(this).slider("value"); //get value
$(".slides").slider("value", selection); //set that value in both
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
<label for="amount">Distance</label>
<input type="text" id="amount">
</p>
<!-- Range slider 1 -->
<div class="slides" id="slide"></div>
<p>
<label for="amount2">Distance</label>
<input type="text" id="amount2">
</p>
<!-- Range slider 2 -->
<div class="slides" id="slide2"></div>
Related
I am trying to setup multiple gsap scroll triggers with lottie animations in 3 sections. I would like the screen to pin to the animations until they complete. This is the code I currently have, which seems to mostly work. I randomly will see issues where section scroll weird or animations don't finish completely. Any help would be greatly appreciated.
<section class="section--01 section--side-by-side">
<div class="grid-container">
<div class="grid-x grid-padding-x align-center">
<div class="cell medium-6">
<h2>Title</h2>
<p>Description</p>
</div>
<div class="cell medium-6 side-by-side-wrapper">
<div id="section-lottie--01">
<div class="lottie-container"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section--02">
<div class="grid-container">
<div class="grid-x grid-padding-x align-center">
<div class="cell small-12 medium-6">
<h2 class="text-center">Title</h2>
<div id="section-lottie--02">
<div class="lottie-container"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section--03 section--side-by-side">
<div class="grid-container">
<div class="grid-x grid-padding-x align-center">
<div class="cell medium-6">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="cell medium-6">
<h3>Subtitle</h3>
<div id="section-lottie--03">
<div class="lottie-container"></div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" integrity="sha512-f8mwTB+Bs8a5c46DEm7HQLcJuHMBaH/UFlcgyetMqqkvTcYg4g5VXsYR71b3qC82lZytjNYvBj2pf0VekA9/FQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>
<script>
$(document).ready(function () {
let mobile = window.innerWidth < 749;
gsap.registerPlugin(ScrollTrigger);
LottieScrollTrigger({
target: "#section-lottie--01 .lottie-container",
trigger: ".section--01",
path:'/jobseeker-bar-chart.json',
speed: "medium",
pin: ".section--01",
scrub: 1,
start: mobile ? "center 45%" : "center center"
});
LottieScrollTrigger({
target: "#section-lottie--02 .lottie-container",
trigger: ".section--02",
path:'/salary-bar-chart.json',
speed: "medium",
pin: ".section--02",
scrub: 1,
start: "center 75%"
});
LottieScrollTrigger({
target: "#section-lottie--03 .lottie-container",
trigger: ".section--03",
path:'/salary-scatter-chart.json',
speed: "medium",
pin: ".section--03",
scrub: 1,
start: mobile ? "center 45%" : "center 55%"
});
function LottieScrollTrigger(vars) {
let playhead = {frame: 0},
speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"},
target = gsap.utils.toArray(vars.target)[0]
st = {trigger: target, pin: true, start: "center center", end: speeds[vars.speed] || "+=1000", scrub: 1},
animation = lottie.loadAnimation({
container: target,
renderer: vars.renderer || "svg",
loop: false,
autoplay: false,
path: vars.path
});
for (let p in vars) { // let users override the ScrollTrigger defaults
st[p] = vars[p];
}
animation.addEventListener("DOMLoaded", function () {
gsap.to(playhead, {
frame: animation.totalFrames - 1,
ease: "none",
onUpdate: () => animation.goToAndStop(playhead.frame, true),
scrollTrigger: st
});
});
}
});
</script>
It seems that I get different results when I refresh the page. Randomly the page will jump to the next section while scrolling through an animation.
maybe you have multiple scroll triggers, make sure the order of the scroll triggers that they are not conflicting with each other.
also possible that there are issues with the Lottie animations themselves
My code is working fine when the user triggers a mouse over event, however I want to set a timer to animate without any trigger - like auto animating. How can I do that?
$(document).ready(function() {
$(".flip").flip({
axis: 'y',
trigger: 'hover'
});
});
<div class=" flip col-md-3">
<div class="flip">
<div class="front">
<div class="title">Front Wise</div>
</div>
<div class="back">
<div class="title">Back Wise</div>
</div>
</div>
</div>
This is the library: https://nnattawat.github.io/flip/
You need to set the trigger value to manual, check the doc
$(".flip").flip({
axis: 'y',
trigger: 'manual'
});
setTimeout( function() {
$(".flip").flip('toggle');
}, 100); //this will trigger the flip after 100 millisecond
Demo
$(document).ready(function() {
$(".flip").flip({
axis: 'y',
trigger: 'manual'
});
setTimeout(function() {
$(".flip").flip('toggle');
}, 5000); //this will trigger the flip after 100 millisecond
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.js"></script>
Flip below will be triggered in 5 seconds
<div class=" flip col-md-3">
<div class="flip">
<div class="front">
<div class="title">Front Wise</div>
</div>
<div class="back">
<div class="title">Back Wise</div>
</div>
</div>
</div>
I'm using Jssor slider, and in one of the slide I've put a calendar with fullCalendar.
My problem comes when I drag an calendar event to move it to another date, because in addition to moving the event, the slider acts and is changed to another slider window.
Can I stop the action of the slider when I detect the drag start event?
Any other way to do it?
Code HTML (jssor slider + FullCalendar):
<div id="slider1_container" class="green-background">
<!-- Slides Container -->
<div u="slides" style="cursor: move;">
<div id="first-slide" class="green-background">
<div class="row">
<div class="col-md-1" style="padding-right: 1em;">
...
</div>
<div class="col-md-11">
<div id='calendar'></div>
</div>
</div>
</div>
<div id="second-slide" class="green-background"></div>
<div id="third-slide" class="green-background"></div>
</div>
</div>
JS code to jssor slider:
var options = { $AutoPlay: false };
jssor_slider1 = new $JssorSlider$('slider1_container', options);
JS code to fullCalendar:
var hoy = new Date();
$('#calendar').fullCalendar({
contentHeight: 380,
header:false,
fixedWeekCount: false,
events: [
{id:2 , title: 'New event1', start: '2017-02-15'}
],
editable: true,
defaultDate: hoy,
selectable: true,
eventDragStart: function( event, jsEvent, ui, view ) {
// Code to stop slide
}
})
Add attribute 'data-nodrag' to prevent dragging on an element.
<div data-nodrag="true" ...>
Edit
<div class="col-md-11">
<div data-nodrag="true" id='calendar'></div>
</div>
I am using the QuickFit library to resize some text on my website.
But the text is bigger than the div with the fixed size.
I need to avoid that.
I use it like that:
$(function() {
$(window).on('resize', function() {
$(".area_competences_text").quickfit({ max: 50, min: 10, truncate: false , tolerance: 0.08});
});
$(window).trigger('resize');
});
gives that result:
my HTML:
<div class ="cell cell2">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="area_competences_text text_software">
<div class="referencesProductHeader">
SOFTWARE- UND DATENBANKENTWICKLUNG <br>
</div>
<ul class="listStyle">
<li> Analyse der Geschäftsprozesse</li>
<li> Entwicklung von Lösungskonzepten und Priorisierung der Anforderungen</li>
<li> Entwicklung einer Client/Server Anwendung</li>
<li> Schwerpunkt: Logistikabwicklung im Umfeld einer Nicht-Serienfertigung</li>
<li> Rollout in Deutschland, Österreich, China und auf Baustellen weltweit</li>
<li> Projektbegleitende Beratung und Moderation</li>
<li> Wartung und Support international</li>
<li> Technologien: Client/Server, Webanwendung <br> und mobile Barcodescanner-Lösung</li>
</ul>
</div>
</td></tr></table>
</div>
Why is it overlapping its div with a fixed size?
width: 20 <-- You are saying to be 20 pixels wide. Remove it.
$(function() {
$(window).on('resize', function() {
$(".area_competences_text1").quickfit({
max: 50,
min: 10,
truncate: false,
tolerance: 0.08,
width: 20
});
$(".area_competences_text2").quickfit({
max: 50,
min: 10,
truncate: false,
tolerance: 0.08
});
});
$(window).trigger('resize');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/chunksnbits/jquery-quickfit/master/jquery.quickfit.js"></script>
<div class="area_competences_text1">with Width</div>
<div class="area_competences_text2">without Width</div>
I am very new to JS so please try to be as elaborate as possible. I am implementing bootstrap tabs in my html page. There I have a slider using the jquery ui. Before implementing the tabs the slider was working perfectly. But now the slider is invisible. I can move it if I click at the right place. All I can see now is the value of the slider instead of the whole thing.
Tried to reload the slider script after the tab is clicked but it doesn't help. And another weird thing is that, when I remove the tabs altogether now and try to just have the slider, the result is still the same ie. I see only the slider value and the entire div is invisible.
Please ask for any further clarification if needed. Any help would be appreciated. Thanks in advance.
js:
$(document).ready(function(){
alert("Inside slider");
$( "#slider" ).slider({
value:<%-tasks["priority"]%>,
min: 0,
max: 10,
step: 1,
slide: function( event, ui ) {
// alert(ui.value);
$( "#priority" ).val( ui.value );
},
start: function( event, ui ) {alert("started")}
});
$( "#priority" ).val( $( "#slider" ).slider( "value" ) );
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
alert("here")
$( "#slider" ).slider();
});
$('#tab_control a[href="#basic"]').tab('show');
})
html:
<ul class="nav nav-tabs" role="tablist" id="tab_control">
<li class="active">Basic</li>
<li>Advanced</li>
</ul>
<div class="tab-pane active basic-tab" id="basic">
<label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
<div class="col-sm-10">
<div id="slider" ></div>
<p><input type="text" id="priority" name="priority" readonly style="border:0; color:#f6931f; font-weight:bold;"></p>
</div>
</div>
<div class="tab-pane advanced-tab" id="advanced">
</div>
update:
The slider is now working perfectly! All I did was load these files:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Previously I was loading them from my local disk like this :
<link href="/css/jquery-ui.min.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.min.js"></script>
They are of these versions:
jquery-ui.min.css : jQuery UI - v1.11.2
jquery.js : jQuery v1.11.1
jquery-ui.min.js : jQuery UI - v1.11.2
So any ideas as to what was the problem?? Its really baffling me.
HTH
Basic
Advanced
<div class="tab-pane active fade in basic-tab" id="basic">
<label for="inputPassword3" class="col-sm-2 control-label">Priority</label>
<div class="col-sm-10">
<div id="slider" ></div>
<p><input type="text" id="priority" name="priority" readonly =""/> </p>
</div>
</div>
<div class="tab-pane fade advanced-tab" id="advanced">
testing
</div>
$( "#slider" ).slider({
value:"",
min: 0,
max: 10,
step: 1,
slide: function( event, ui ) {
$( "#priority" ).val( ui.value );
},
start: function( event, ui ) {alert("started")}
});
$( "#priority" ).val( $( "#slider" ).slider( "value" ) );
http://jsfiddle.net/jz5r5dsw/1/