Develop Reference

How can call VAR jquery when see div that have this VAR

I have some Jquery
I need do call the var called ServicesAnimation when I scroll to main div or section that have div called for example regtangle-blue.
how can do that ?
jQuery(document).ready(function() {
var ServicesAnimation = anime.timeline().add({
targets: ['.box-info', '.regtangle-blue .h2', '.regtangle-blue .h3', '.regtangle-blue .h4', '.services .serv-box', '.how-it-works .h2', '.how-it-works .h3', '.how-it-works .col-md-4'],
translateY: [60, 0],
translateZ: 0,
opacity: [0, 1],
duration: 1600,
delay: anime.stagger(100)
});
});

Use window.matchMedia to pass variable into slider options

I have this code (some of which might not make a ton of sense...), but here's what I'm trying to accomplish.
1) Use the window.matchMedia key to determine the width of the screen
2) create a function based on the media query that prints out a value to the variable gridSize
3) Pass that getGridSize function into a list of options for a slider.
The code I have is
var mq = window.matchMedia( "(min-width: 500px)" );
var gridSize = getGridSize();
function getGridSize() {
if (mq.matches) {
// window width is at least 500px
gridSize = 4;
} else {
// window width is less than 500px
gridSize = 1;
}
};
flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;
$('.flexslider').flexslider({
animation: "slide",
animationSpeed: 400,
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: getGridSize(),
maxItems: getGridSize(),
prevText: "",
nextText: ""
});
I amalgamated 2 pieces of code, trying to sort out the bits that I need from each, so it feels a bit frankenstein-like, and is probably why it's not working.

If you set 'flexslider.vars' you need to declare it somewhere.
You are missing a 'resize' listener on the window
```
var flexslider = {vars: {}};
var mq = window.matchMedia( "(min-width: 500px)" );
function getGridSize() {
return mq.matches ? 4 : 1;
};
$('.flexslider').flexslider({
animation: "slide",
animationSpeed: 400,
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: getGridSize(),
maxItems: getGridSize(),
prevText: "",
nextText: ""
});
$(window).on('resize', function() {
var gridSize = getGridSize();
flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;
});
```

Call new parameters on a jQuery slider depending on window size

I am using bxslider.js to make a slider on my page. Since my site is responsive, the code I have allows different parameters for the slider depending on the size of the window. For example, when the window is over 768px the slider shows 2 slides. When it is under 768 it shows 1 slide and when it's under 480, the slider function stops completely. All this works fine. However it only works on load. I want it to work on resize too. I've played around the the window.resize function, but I don't have enough of a programing background to really know what I am doing or what the best way to do this is. Can anyone tell me how to get this to work both on load and on resize?
var sliderWidth = $('#testimonialSlider').width();
if ($(window).width() > 768) {
doubleslider = $('#testimonialSlider').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: sliderWidth / 2,
auto: false,
moveSlides:2,
autoHover:true,
pager:true
});
} else if ($(window).width() < 480) {
singleslider.destroySlider();
} else{
singleslider = $('#testimonialSlider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: sliderWidth,
auto: false,
moveSlides:1,
autoHover:true,
pager:true
});
}

You need to include your code not just on window.load function but also on window.resize() function.
Here check this solution
I have tried to eliminate repetitive window.resize call by using setTimeout function.
Also even after you destroySlider, the variable containing the slider object is not set to null. Hence added code to check the slider object availability too. You can use the code as is or fine tune it further to suit your requirements.
var sliderWidth,slider,id;
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(sliderResize, 1000); //settimeout to invoke resize just once
});
$(window).load(function() {
sliderResize(); //Same function invoked during window.load and resize
});
function sliderResize(){
sliderWidth = $('.bxslider').width();
if ($(window).width() > 768) {
/* check if slider object is set, else multiple sliders are created*/
if(slider == null || slider == undefined){
slider = $('.bxslider').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: sliderWidth / 2,
auto: false,
moveSlides:2,
autoHover:true,
pager:true
});
}
else{ //else just reload the existing slider with new parameters
slider.reloadSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: sliderWidth / 2,
auto: false,
moveSlides:2,
autoHover:true,
pager:true
});
}
} else if ($(window).width() < 480) {
/* destroy the slider only if already created*/
if(slider != null || slider != undefined){
slider.destroySlider();
}
} else{
/* check if slider object is set, else multiple sliders are created*/
if(slider == null || slider == undefined){
slider = $('.bxslider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: sliderWidth,
auto: false,
moveSlides:1,
autoHover:true,
pager:true
});
} else{
slider.reloadSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: sliderWidth,
auto: false,
moveSlides:1,
autoHover:true,
pager:true
});
}
}
}

function slider(){
var sliderWidth = $('#testimonialSlider').width();
if ($(window).width() > 768) {
doubleslider = $('#testimonialSlider').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: sliderWidth / 2,
auto: false,
moveSlides:2,
autoHover:true,
pager:true
});
} else if ($(window).width() < 480) {
singleslider.destroySlider();
} else{
singleslider = $('#testimonialSlider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth: sliderWidth,
auto: false,
moveSlides:1,
autoHover:true,
pager:true
});
};
};
$(window).load(function() {
slider();
});
$(document).resize(function() {
slider();
});

Easy pie chart does not: loading animation using Waypoint JS

I am designing a One page scrolling webpage. In the webpage I am using easy pie chart in my skill page. Now I want to load the easy pie chart animation when I reached the skill page.
I used the waypoint js but it not working. It load the animation when i am in the skill page but when i am in top and refresh the page & than go to the skill page, its not working.
my code are given bellow
custom.js:
jQuery('.skill').waypoint(function() {
$('.chart1').easyPieChart({
animate: 4000,
barColor: '#000',
trackColor: '#ddd',
scaleColor: '#e1e1e3',
lineWidth: 15,
size: 152,
});
}, {
triggerOnce: true,
offset: 'bottom-in-view'
});
Now how can i solve the problem ?

You can try this code:
$(window).scroll( function(){
/* Check the location of each desired element */
$('.skill').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it in */
if( bottom_of_window > bottom_of_object ){
$('.skill').easyPieChart({
size: 140,
lineWidth: 6,
lineCap: "square",
barColor: "#22a7f0",
trackColor: "#ffffff",
scaleColor: !1,
easing: 'easeOutBounce',
animate: 5000,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
}
});
});

Change the # of image in bx slider on window resize

I am using bx slider but the problem is that when i resize the window, the images in slider should change according to window size..
I have tried the below code and it works but every time I have to reload the page, can anybody help me please. And thanks in advance.
<script type="text/javascript">
if ($(window).width() < 480 ) {
$(document).ready(function(){
$('#slider1').bxSlider({
slideWidth: 280,
minSlides: 2,
maxSlides: 2,
startSlide: 0,
slideMargin: 10
});
});
}
else if ($(window).width() > 480 ) {
$(document).ready(function(){
$('#slider1').bxSlider({
slideWidth: 280,
minSlides: 4,
maxSlides: 4,
startSlide: 0,
slideMargin: 10
});
});
}
else {
$(document).ready(function(){
$('#slider1').bxSlider({
slideWidth: 280,
minSlides: 4,
maxSlides: 4,
startSlide: 0,
slideMargin: 10
});
});
}
</script>

First make put your slider into a var (better for later "reloadSlider"), then make your life easier by creating var-s for your settings (since you will need them at least twice).
Finally you need a $( window ).resize function.
See if it works (I didn't test it but should work since I have just completed mine - kind of more complicated to show it).
Try this (by the way, I see that 'medium' and 'big' sizes have same settings...):
<script type="text/javascript">
var slider;
var defsOne = { slideWidth: 280, minSlides: 2, maxSlides: 2, startSlide: 0, slideMargin: 10 }
var defsTwo = { slideWidth: 280, minSlides: 4, maxSlides: 4, startSlide: 0, slideMargin: 10 }
var defsThree = { slideWidth: 280, minSlides: 4, maxSlides: 4, startSlide: 0, slideMargin: 10 }
var myDefs = {};
$(document).ready(function(){
if ($(window).width() < 480 ) {
myDefs = defsOne;
}
else if ($(window).width() > 480 ) {
myDefs = defsTwo;
}
else {
myDefs = defsThree;
}
slider = $('#slider1').bxSlider(myDefs);
});
$( window ).resize(function() {
var ww = $(window).width();
if ($(window).width() < 480 ) {
myDefs = defsOne;
}
else if ($(window).width() > 480 ) {
myDefs = defsTwo;
}
else {
myDefs = defsThree;
}
slider.reloadSlider( myDefs );
});
</script>
Actually I would not slider.reloadSlider() at every resize (at every window pixel change), put somewhere a flag to check if size really changed from previously used one and only then do the reload:
if ( sizeReallyChanged ) {
slider.reloadSlider( myDefs );
}
If you don't you are going to reload it tons of times ...
Of some extra-help could be setting an object for "global settings" - since yours are all almost the same an then :
var defsGlobal = { slideWidth: 280, startSlide: 0, slideMargin: 10 }
var defsOne = { minSlides: 2, maxSlides: 2 }
var defsTwo = { minSlides: 4, maxSlides: 4 }
and finally "connect" all of them (of in the right place i.e. 'if'):
...
wholeDefs = $.extend( {} , defsOne, defsGlobal);
...
slider = $('#slider1').bxSlider(wholeDefs);
...
Hope this could help,
Bye nIc