i had this script used on my site but there's no easing effect on it can anyone tell me how to add easing effect on this script?
<script>
var scaffold = document.getElementById('scaffold');
var menu = document.getElementById('menu');
menu.addEventListener('core-select', function(e) {
if (e.detail.isSelected) {
scrollToSection(e.detail.item.getAttribute('name'));
}
});
function scrollToSection(id) {
var section = document.getElementById(id);
if (section) {
scaffold.$.headerPanel.scroller.scrollTop = section.offsetTop, 500;
}
}
If it is possible to use jQuery you can use its animate method.
Related
As the title suggests I want to detect the start and end of a scrollable element built using overflow.
The following code works:
var scrollAmount = 150;
var scrollBox = $('.js-compare_scroll');
var arrowLeft = $('.js-compare_scroll_left');
var arrowRight = $('.js-compare_scroll_right');
var inactive = 'm-inactive';
$(arrowLeft).on('click', function () {
$(this).parent().find(scrollBox).stop().animate({
scrollLeft: '-='+scrollAmount
}, function() {
arrowRight.removeClass(inactive);
if(scrollBox.scrollLeft() === 0) {
arrowLeft.addClass(inactive);
}
});
});
$(arrowRight).on('click', function () {
$(this).parent().find(scrollBox).stop().animate({
scrollLeft: '+='+scrollAmount
}, function() {
arrowLeft.removeClass(inactive);
if(scrollBox.scrollLeft() + scrollBox.innerWidth() >= scrollBox[0].scrollWidth) {
arrowRight.addClass(inactive);
}
});
});
However the class to style the inactive colour of the arrows only appears once the animation completes. I need to add the class before the animation completes because it has a delay. I believe by default it is 400.
Is there anyway to detect this and apply the arrow classes where needed?
Thanks.
Came back from a break and realised I should take the checking if its at the end off the click event and onto a scroll event. This works a lot better now.
Is it possible to hide the scrollbar when static, but show when scrolling?
I tried the following css based on this post, but the scrollbar doesn't show up during scrolling.
::-webkit-scrollbar {
display: none;
}
There is another post achieving similar feature on Firefox, but not Chromium.
It would be best if this feature can be achieved by css.
Set up a timer to show the scrollbar, and on scroll event reset the timer and show the scrollbar:
var el = document.body; // you can use the following code on any element
var showScrollbarTimeout = 0; // track the timeout function so that we can reset it later
function hideScroll () { el.style.overflow = "hidden"; }
function showScroll () { el.style.overflow = "visible"; }
function hideLater () { showScrollbarTimeout = setTimeout(hideScroll, 1000); }
hideLater();
el.onscroll = function () {
clearTimeout(showScrollbarTimeout);
showScroll();
hideLater();
}
I am using RoyalSlider plugin to create slideshows on on this site
I have the following javascript to create the two fields that overlay the slideshows, to allow for left and right click navigation. The problem is that the custom cursor doesn't stay loaded during the fade transition between slides. Does anyone know a solution for this?
Many thanks,
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.royalSlider').each(function() {
var slider = $(this);
var sliderInstance = slider.data('royalSlider');
if(sliderInstance) {
var slideCounter = $('<div class="rsSlideCount"></div>').appendTo( slider );
var updCount = function () {
slideCounter.html( (sliderInstance.currSlideId+1) + ' / ' + sliderInstance.numSlides );
}
sliderInstance.ev.on('rsAfterSlideChange', updCount);
updCount();
}
slider.append('<div class="rs-prev"/>');
slider.append('<div class="rs-next"/>');
slider.find('.rs-prev').click(function() {
slider.royalSlider('prev');
});
slider.find('.rs-next').click(function() {
slider.royalSlider('next');
});
});
});
</script>
Add this into your CSS:
div.rs-prev,
div.rs-next {
z-index: 10;
}
This worked for me.
Need some help. I am using jQuery in combination with media queries for some responsive aspects of my header. My client wants the header to be responsive to both devices and manual resize of the window. Therefore, I have set all of my responsive functions in both single functions and then set those same functions wrapped inside of a $(window).on('resize', function). Thanks to another poster on here, I was given the tip to wrap my responsive functions inside of a variable and then pass that variable to the resize function instead of rewriting it all out. This was a great tip and a great thing for me to learn as an intermediate javascript writer. However when I do this, the code does not work within the resize function. If I type it all out exactly the same, it works fine. But if I pass the function it does not work. Can someone please help? Code below:
var win = $(window);
var mainNav = $('.main-nav');
var navItem = $('.main-nav li');
var overlay = $('.nav-overlay');
var header = $('#header');
var subNav = $('.main-nav ul ul');
var overlayIsVisible = false;
var subNavIsVisible = false;
var exitMain = $('.exit-main');
var topNav = $('.top-nav');
var hamburger = $('.tablet-buttons .hamburger');
var exit = $('.tablet-buttons .exit');
if ( header.is('*') ) {
navItem.hover(function() {
overlay.fadeIn('slow');
$(this).find('ul').toggleClass("active");
overlayIsVisible = true;
});
exitMain.click(function() {
overlay.fadeOut('fast');
overlayIsVisible = false;
});
function tabletNav() {
if (win.width() <= 1024) {
topNav.prependTo(overlay);
hamburger.click(function() {
overlay.fadeIn('slow');
hamburger.css('display', 'none');
exit.fadeIn('slow');
});
exit.click(function(){
overlay.fadeOut('slow');
exit.css('display', 'none');
hamburger.fadeIn('slow');
});
}
else{
topNav.insertAfter('.logo');
}
};
/*This makes the above Mobile/Tablet functions also work on resize of window*/
win.on('resize', tabletNav());
};
I try to animate menu-panel. It should slide to the left. But it doesn't work right. And I can't understand why.
There are a few issues with the current code (e.g. you were missing a . on one panel selector and not referencing panel1 after changing the panel class. I also switched to absolute positioning with the arrow inside the panel.
I did a little cleanup to make the changes obvious (you should not repeat jQuery selectors - use temp vars instead):
JSFiddle: http://jsfiddle.net/TrueBlueAussie/2x3uT/8/
$(function () {
$('.slider-arrow').click(function () {
var $this = $(this);
var $panel = $(".panel, .panel1");
var left = -53;
var text = '»';
if ($this.hasClass('hide')) {
text = '«';
left = 0;
}
$panel.animate({
left: left
}, 700, function () {
// Animation complete.
$this.html(text).toggleClass('hide').toggleClass('show');
$panel.toggleClass('panel').toggleClass('panel1');
});
});
});
You can tweak the position numbers to make it match what you wanted.