I have a script.js file that has these functions
$(function(){
$(window).scroll(function (){
alert('you just scrolled!');
});
});
/* ================================
Preloader
=================================*/
$(window).on('load', function () { //wait untill the website is fully loaded
$('#status').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
});
$(function () {
$('#s-stages').owlCarousel({
items: 2,
autoplay: true,
autoplayHoverPause: true,
smartSpeed: 700,
loop: true,
nav: true,
dots: false,
});
});
$(function(){
$('#stages-tabs').responsiveTabs({
animation:'slide'
});
});
all of the above are working except
$(function(){
$(window).scroll(function (){
alert('you just scrolled!');
});
});
the above function can work if it is in the index.html file
Many thanks to all replies. I found the solution. the javascript file wasn't refreshing any updates. the solution is to put ?view=3 in the
and it will reflect any changes
Related
I'm using slick.js as a content browser. As such, my slider has a number of images to peruse through. I'd like to be able to refresh the web page and have slick remember the last slide I was viewing. I'm new to jquery and javascript so any guidance would be appreciated.
Here's the code I'm working with:
$(document).ready(function(){
// Carousel Options
$('.mycarousel').slick({
infinite: true,
accessibility: true, mobileFirst: true,
adaptiveHeight: true,
arrows: false, draggable: true,
useCSS: true, cssEase:'linear', focusOnSelect: true,
dots: true, appendDots:$(document.innerHTML = "<p> </p>"),
lazyLoad: 'ondemand',
});
$('.leftArrow').on('click', function(){
$('.mycarousel').slick("slickPrev");
});
$('.rightArrow').on('click', function(){
$('.mycarousel').slick("slickNext");
});
$(window).on('resize orientationchange', function() {
$('.mycarousel').slick('resize');
});
});
I myself did some research and this is what I found:
$('#yourCarousel').on('slid.bs.carousel', function () {
var currentSlide = $('#yourCarousel div.active').index();
sessionStorage.setItem('lastSlide', currentSlide);
});
if(sessionStorage.lastSlide){
$("#yourCarousel").carousel(sessionStorage.lastSlide*1);
}
Instead of sessionStorage you could also use:
localStorage.setItem('lastSlide', currentSlide)
i'm using glider Js plugin and whenever i click on next/prev button the page goes to top ,in jquery i added e.preventDefault and it worked but in this case i don't know what to do ..
here is the code:
$(document).ready( function () {
new Glider(document.querySelector('.glider-profil-service'),{
slidesToShow: 3.5,
slidesToScroll: 1,
draggable: true,
dots: '.dots',
arrows: {
prev: '.glider-prev',
next: '.glider-next'
}
});
});
any help would be great
Have you used the scrollTo
window.scrollTo(x-coord, y-coord)
Since you are using Jquery, there is one also available for JQuery scrollTop()
$(document).ready( function () {
$( "div.demo" ).scrollTop( 100 );
});
I have try to active accordion to top smooth scroll but shown error is accordion is not function. I have already add jquery min (version:3.3.1) file.
<script>
$(function() {
$("#accordionEx").accordion({
autoHeight: false,
collapsible: true,
heightStyle: "content",
active: 0,
animate: 300
});
$('#accordionEx h2').bind('click',function(){
var self = this;
setTimeout(function() {
theOffset = $(self).offset();
$('body,html').animate({ scrollTop: theOffset.top - 100 });
}, 310);
});
});
</script>
Please add exactly after the jquery library
// After your jquery library
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
This will help you.
For more details about accordion, refer to this link: accordion
Found jsfiddle online having same issue I am facing:
JSfiddle Link
Steps to reproduce:
1) click on pause
2) open new tab or go to an existing tab
3) coming back to the jsfiddle link
Auto play starts even when pause was clicked before. Not maintaining its current state when coming back from the new tab.
$(".slider").slick({
autoplay: true,
dots: true,
pauseOnDotsHover: true,
autoplaySpeed: 1000,
});
$('.pause').on('click', function() {
$('.slider')
.slick('slickPause')
.slick('slickSetOption', 'pauseOnDotsHover', false);
});
$('.play').on('click', function() {
$('.slider')
.slick('slickPlay')
.slick('slickSetOption', 'pauseOnDotsHover', true);
});
I have used following code to make it work and solve my issue.
I have also stopped auto play when paused which worked perfectly.
$( document ).ready(function() {
$(".slider").slick({
autoplay: true,
dots: true,
pauseOnDotsHover: true,
});
$('.pause').on('click', function() {
$('.slider')
.slick('slickPause')
.slick('slickSetOption', 'pauseOnDotsHover', false)
.slick('slickSetOption', 'autoplay', false);
});
$('.play').on('click', function() {
$('.slider')
.slick('slickPlay')
.slick('slickSetOption', 'pauseOnDotsHover', true)
.slick('slickSetOption', 'autoplay', true);
});
$('.slider').slick('slickPlay');
});
Looks like the script is listening for some event. Best workaround I can think of is to disable autoplay, then use $.ready to trigger a click on .play:
$(function() {
$(".play").click();
});
A valid solution to your problem is to initialize the carousel with autoplay: false and after that call the function $('.slider').slick('slickPlay'); manually inside the $( document ).ready function to play the carousel, like:
$( document ).ready(function() {
$(".slider").slick({
autoplay: false,
dots: true,
pauseOnDotsHover: true,
});
$('.pause').on('click', function() {
$('.slider')
.slick('slickPause')
.slick('slickSetOption', 'pauseOnDotsHover', false);
});
$('.play').on('click', function() {
$('.slider')
.slick('slickPlay')
.slick('slickSetOption', 'pauseOnDotsHover', true);
});
$('.slider').slick('slickPlay');
});
I tested it and is working as you want. I hope that can help you.
if ($('.slide_home').length) {
$('.slide_home').slick({
arrows: true,
dots: true,
autoplay: true,
autoplaySpeed: 5000,
speed: 1200,
fade: true,
swipe: false
});
$('.slide_home .slick-dots').append('<span class="pause float-right mt-1"><i class="fas fa-pause" style="color: #2e4486"></i></span>');
$('.slide_home .slick-dots').append('<span class="play float-right mt-1 d-none"><i class="fas fa-play" style="color: #2e4486"></i></span>');
$('.pause').on('click', function(e) {
e.preventDefault();
$('.slide_home')
.slick('slickPause')
$('.play')
.removeClass('d-none');
$('.pause')
.addClass('d-none')
});
$('.play').on('click', function(e) {
e.preventDefault();
$('.slide_home')
.slick('slickPlay');
$('.pause')
.removeClass('d-none');
$('.play')
.addClass('d-none')
});
}
I want the bxSlider to automatically start the slideshow without the user clicking on it. This is my code (which isn't working):
slider = $('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
autoStart: true
});
slider.startAuto();
What's wrong with this? What happens is that images do load, but it never autoscrolls, the user always have to choose one of the pager dots to manually scroll through. What's wrong with my code?
You should use
$(document).ready(function(e) { });
or
$(window).ready(function(e) { });
in between the code.
so the correct one should be,
$(document).ready(function(e) {
$('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
});
});
hope this will help you...!
This Code worked for me!
var slider = $('#slider').bxSlider();
$('.bx-next, .bx-prev, .bx-pager a').click(function(){
// time to wait (in ms)
var wait = 1000;
setTimeout(function(){
slider.startAuto();
}, wait);
});
You can set wait on 0 if you don't want a delay. And because I used: pagerCustom: '#pager', I changed '.bx-pager' a into '#pager a'.
This was all , what was missing and i got it from bxslider official page
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 2000
});
});
Try setting autoControls: true (from http://bxslider.com/examples/auto-show-start-stop-controls)
Okay! I got the same problem! And none of the solution worked above. But I found what was wrong!
1 - First Check and make sure you have auto:true in jQuery script like below:
$('.bxslider').bxSlider({
auto: true,
pause: 3000,
pager: true
});
2 - The main jQuery file that you are using, kindly update that jQuery file, you might be using old jQuery file! (#2 was the issue in case of mine)
Thanks!
This code is also working perfectly
jQuery(function(e){
jQuery('.bxslider').bxSlider({
mode: 'fade',
captions: true,
autoplay:true,
autoControls: true,
auto: true,
autoplaySpeed:1000
});
});
I suggest the following remedy. onSlideAfter is executed after each slide transition. Then this code will cause slider.startAuto() to be executed each time this happens, starting auto show.
var slider = $(".sliderBx ul").bxSlider({
auto: true,
pager: true,
controls: true,
onSlideAfter: function () {
slider.startAuto();
}
});