I used according menu and slides in a single page. I used "easeOutBounce" from using jquery.easing.1.3.js to according menu.
Now the menu is working fine.
But it conflict with the Slider. I don't need this effect with the Slider. I don't know how to solve this issue.
I don't need "easeOutBounce" effect the Bottom slide of this URL.
The slide is not a problem when I remove this line $.easing.def = "easeOutBounce"; from my code. But I need this effect to according menu.
My code is
<script>
$(document).ready(function(){
$.easing.def = "easeOutBounce";
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('li.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
</script>
<script>
$(function(){
$('#slides_two').slides({
generateNextPrev: true,
pagination: false,
preload: true,
preloadImage: 'images/loading.gif',
generatePagination: false,
play: 10000,
slideSpeed: 3000,
effect: 'slide',
pause: 4000,
hoverPause: true
});
});
</script>
You can use slideEasing option for your slider. This is how your code would be with this option:
<script type="text/javascript">
$(document).ready(function(){
$.easing.def = "easeOutBounce";
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('li.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
</script>
<script type="text/javascript">
$(function(){
$('#slides_two').slides({
generateNextPrev: true,
pagination: false,
preload: true,
preloadImage: 'images/loading.gif',
generatePagination: false,
play: 10000,
slideSpeed: 3000,
effect: 'slide',
pause: 4000,
hoverPause: true,
slideEasing: "jswing"
});
});
</script>
Easing types you can see here.
Related
Using barba.js to make an SPA site, but I'm having trouble getting another plugin I'm using (fullpage.js) to fire after page content is updated.
Right now I have to click every link twice to trigger fullpage.js
This is the function I need to run after barba.js modifies the DOM:
$('#fullpage').fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false,
});
I tried this:
Barba.Dispatcher.on('initStateChange', function() {
$('#fullpage').fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false,
});
});
...but nothing happens.
Scripts included:
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/footer-reveal.min.js"></script>
<script src="js/jquery.smoothState.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/contact.js"></script>
<script src="js/barba.min.js"></script>
<script src="js/ncscripts.js"></script>
Content of 'ncscripts.js', where all my functions live:
Barba.Pjax.start();
Barba.Dispatcher.on('initStateChange', function() {
$('#fullpage').fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false,
});
});
$('#fullpage').fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false,
});
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});
$(document).ready(function() {
$('#close-button').click(function() {
$('#gallery').toggleClass('hidden');
});
});
$("#button").click(function() {
$('.cloak-hide').toggleClass('cloak-hide-active');
});
$("#button").click(function() {
$('.menu-transform').toggleClass('menu-transform-active');
});
$("#button").click(function() {
$('.resp-font-menu').toggleClass('resp-font-menu-transition-active');
});
$("#button").click(function() {
$('.menu-footer-content').toggleClass
('menu-footer-content-transition-active');
});
$("#button").click(function() {
$('.logo-black').toggleClass('logo-black-active');
});
$('.burger').click(function(){
$(this).toggleClass('active');
});
$("#navbar-nav-list-element-left").hover(function() {
$('.bar-left').toggleClass('bar-active');
});
$("#navbar-nav-list-element-middle").hover(function() {
$('.bar-middle').toggleClass('bar-active');
});
$("#navbar-nav-list-element-right").hover(function() {
$('.bar-right').toggleClass('bar-active');
});
$(window).scroll(function(){
var scroll = $(window).scrollTop();
$('#logo-black').css({'opacity':(( 60-scroll )/60)});
});
$('#container-master').footerReveal();
Not sure how to move forward. Any advice/constructive criticism/feedback regarding this issue would be monumentally helpful!
*Also, I'm not sure if my arrangement of functions in 'ncscript.js' is optimal (or even 'correct'). Any advice regarding best practices would be appreciated.
Try this:
Barba.Dispatcher.on('newPageReady', function(current, prev, newContainer) {
$(newContainer).find('#fullpage').fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false,
});
});
This ended up fixing my issue:
initFullpagePlugin();
function initFullpagePlugin (parentElement) {
var element;
element = parentElement ? $('#fullpage', parentElement) : $('#fullpage');
if (element.length) {
// Destroys old fullPage.js object in memory,
// removes elements from DOM
if ($.fn.fullpage.destroy) {
$.fn.fullpage.destroy('all');
}
element.fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false
});
}
}
Sorry if this is a noob question (I'm a JS noob). Im working on a website in which the homepage consists of a preloader and a slideshow.
I've managed to set up both the preloader and the slideshow. However, I've noticed that both of them are being loaded at the same time. I need to find a way to first load the preloader and once the preloading is done, then start the slideshow.
I'm using (window).load on both functions but I would like to know if there's a way to prioritize how things area loaded.
Here's my working code:
jQuery(window).load(function() {
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
}
});
jQuery(window).load(function() {
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
});
Regards,
Johann
You can combine them both inside a single jQuery(window).load, and choose to run the royalSlider setup function inside the wptime_plugin_remove_preloader function, after removing the preloader:
jQuery(window).load(function() {
//set up the preloader
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
//Remove the preloader
jQuery('#wptime-plugin-preloader').remove();
//Set up the slider after removing the preloader
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
}
});
Activate the preloader on window.onload and call the slideshow function from inside the preload function (Note: Untested!):
jQuery(window).load(function() {
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
}
slideshow();
});
function slideshow() {
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
}
Put your the code that loads the slideshow inside
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
//slideshow code here
}
$(window).load would wait for the page to load all the elements, which you do need for your javascript to work, because you have to make sure the elements you are referencing in your code already exist in the DOM. To chain functions call each next function from the last block of the one preceeding
I have built accordion inside tinyscroll bar div. But the problem is tiny scrollbar is not extending (height) when the accordion menu opens.
Here is my code
$('#test').click(function(){
$('#dialog').show();
$('#scrollbar1').tinyscrollbar();
$('#overlay').show();
});
//Accordion
$('#accordion-3').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: false,
disableLink: false,
showCount: false,
speed: 'slow'
});
FIDDLE
you need to call $('#scrollbar1').tinyscrollbar_update(); once the accordion has finished its animation, like so:
fiddle
$('#test').click(function(){
$('#dialog').show();
$('#scrollbar1').tinyscrollbar();
$('#overlay').show();
});
//Accordion
$('#accordion-3').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: false,
disableLink: false,
showCount: false,
speed: '400'
});
$("#accordion-3").on("click", function() {
window.setTimeout( function() {
$('#scrollbar1').tinyscrollbar_update();
} , 400 );
});
I don't think dcAccordion has any sort of callback feature, so you're stuck with setTimeout
On the first rotation of slides there is small flicker that occurs during the Fx transition. It seems to only occur on the first rotation of slides & goes away after the first repeat.
Demo Page: http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html
Any ideas? I haven't been able to figure it out so far.
Thanks in advance!
Try changing your mode to fade (demo):
$(function () {
$('#slider').anythingSlider({
mode: 'fade',
autoPlay: true,
delay: 2000,
pauseOnHover: false,
buildStartStop: false,
buildArrows: false
}).anythingSliderFx({
'.left .content-wrapper': ['left']
}, {
timeIn: 300,
timeOut: 350,
stopRepeat: true
});
});
Is it possible to apply a fade out effect on the jQuery UI modal dialog box overlay? The issue is that the overlay div is destroyed when the modal dialog box is closed preventing any kind of animation. This is the code I have that would work if the overlay div was not destroyed on close.
$("#edit-dialog-box").dialog(
{
autoOpen: false,
modal: true,
width: "30em",
show: "fade",
hide: "fade",
open: function()
{
$(".ui-widget-overlay").hide().fadeIn();
},
close: function()
{
$(".ui-widget-overlay").fadeOut();
}
});
Demo: http://jsfiddle.net/276Ft/2/
$('#dialog').dialog({
autoOpen: true,
modal: true,
width: '100px',
height: '100px',
show: 'fade',
hide: 'fade',
open: function () {
$('.ui-widget-overlay', this).hide().fadeIn();
$('.ui-icon-closethick').bind('click.close', function () {
$('.ui-widget-overlay').fadeOut(function () {
$('.ui-icon-closethick').unbind('click.close');
$('.ui-icon-closethick').trigger('click');
});
return false;
});
}
});
I advise not to bind the fadeOut of the overlay to the “closethick” close event.
This solution will work in all cases, for example if you use a “Cancel” button, or if the dialog closes itself after doing anything else due to other buttons:
$('#dialog').dialog({
autoOpen: true,
modal: true,
width: '100px',
height: '100px',
show: 'fade',
hide: 'fade',
open: function () {
$('.ui-widget-overlay', this).hide().fadeIn();
},
beforeClose: function(event, ui){
// Wait for the overlay to be faded out to try to close it again
if($('.ui-widget-overlay').is(":visible")){
$('.ui-widget-overlay').fadeOut(function(){
$('.ui-widget-overlay').hide();
$('.ui-icon-closethick').trigger('click');
});
return false; // Avoid closing
}
}
});