We Keep Coding

slitslider.js - open a specific div, not with arrow

I'm using Slit Slider js. This opens div slides with arrows and dots for navigation. Is there a way to create a link to open a specific slide? For example: Home, About Us etc. instead of arrows.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
var Page = (function() {
var $navArrows = $('#nav-arrows'),
$nav = $('#nav-dots > span'),
slitslider = $('#slider').slitslider({
onBeforeChange: function(slide, pos) {
$nav.removeClass('nav-dot-current');
$nav.eq(pos).addClass('na```v-dot-current');
}
}),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$navArrows.children(':last').on('click', function() {
slitslider.next();
return false;
});
$navArrows.children(':first').on('click', function() {
slitslider.previous();
return false;
});
$nav.each(function(i) {
$(this).on('click', function(event) {
var $dot = $(this);
if (!slitslider.isActive()) {
$nav.removeClass('nav-dot-current');
$dot.addClass('nav-dot-current');
}
slitslider.jump(i + 1);
return false;
});
});
};
return {
init: init
};
})();
Page.init();
});
Thanks for your support :)

Self reference in $.fn jquery

Is there anyway that i can refer to the "mouseWheelEvent" property from the "beforeSlide" method?
$(document).ready( function() {
$(".main").hide();
var des = false;
var scorll = false;
var slider = $.fn.fsvs({
speed : 1000,
bodyID : 'fsvs-body',
selector : '> .slide',
mouseSwipeDisance : 40,
afterSlide : function(){},
beforeSlide : () => {
if($("#slide-3").hasClass("active-slide") && !des){
$('#fsvs-body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log("up");
}
else{
$(".main").fadeIn(200, function(){
$("html").addClass("des");
$("#fsvs-body").addClass("des");
des = true;
scorll = false;
$('html, body').animate({
scrollTop: 200
}, 200);
console.log(scorll);
});
}
$('#fsvs-body').unbind('mousewheel');
});
}
},
endSlide : function(){},
mouseWheelEvents : scorll,
mouseWheelDelay : false,
scrollableArea : 'scrollable',
mouseDragEvents : true,
touchEvents : true,
arrowKeyEvents : true,
pagination : false,
nthClasses : false,
detectHash : true,
});
$(window).scroll(function(){
console.log($(document).scrollTop());
if(des){
if($(document).scrollTop() == 0){
$(".main").fadeOut(200, function(){
$("html").removeClass("des");
$("#fsvs-body").removeClass("des");
des = false;
console.log(scorll);
});
}
}
});
});
I want to toggle the mouseWheelEvent in beforeSlide and in $(window).scroll as i want the mouse wheel to be true in $(window).scroll and be false in beforeSlide.

Function in external javascript file called only on reload In react js

I have a external js file linked to my html and bundle.js file generated by webpack linked to html .
In index.html code is
<script src="js/main.js"></script>
<script type="text/javascript" src="bundle.min.js"></script>`
The issue is functions in main.js are called only once on page load in reactjs after running webpack and code is bundled.
main.js file code is
(function () {
'use strict';
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
var mobileMenuOutsideClick = function() {
$(document).click(function (e) {
var container = $("#fh5co-offcanvas, .js-fh5co-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ( $('body').hasClass('offcanvas') ) {
$('body').removeClass('offcanvas');
$('.js-fh5co-nav-toggle').removeClass('active');
}
}
});
};
var offcanvasMenu = function() {
$('#page').prepend('<div id="fh5co-offcanvas" />');
$('#page').prepend('<i></i>');
var clone1 = $('.menu-1 > ul').clone();
$('#fh5co-offcanvas').append(clone1);
var clone2 = $('.menu-2 > ul').clone();
$('#fh5co-offcanvas').append(clone2);
$('#fh5co-offcanvas .has-dropdown').addClass('offcanvas-has-dropdown');
$('#fh5co-offcanvas')
.find('li')
.removeClass('has-dropdown');
// Hover dropdown menu on mobile
$('.offcanvas-has-dropdown').mouseenter(function(){
var $this = $(this);
$this
.addClass('active')
.find('ul')
.slideDown(500, 'easeOutExpo');
}).mouseleave(function(){
var $this = $(this);
$this
.removeClass('active')
.find('ul')
.slideUp(500, 'easeOutExpo');
});
$(window).resize(function(){
if ( $('body').hasClass('offcanvas') ) {
$('body').removeClass('offcanvas');
$('.js-fh5co-nav-toggle').removeClass('active');
}
});
};
var burgerMenu = function() {
$('body').on('click', '.js-fh5co-nav-toggle', function(event){
var $this = $(this);
if ( $('body').hasClass('overflow offcanvas') ) {
$('body').removeClass('overflow offcanvas');
} else {
$('body').addClass('overflow offcanvas');
}
$this.toggleClass('active');
event.preventDefault();
});
};
var fullHeight = function() {
if ( !isMobile.any() ) {
$('.js-fullheight').css('height', $(window).height());
$(window).resize(function(){
$('.js-fullheight').css('height', $(window).height());
});
}
};
var contentWayPoint = function() {
var i = 0;
$('.animate-box').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated-fast') ) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function(){
$('body .animate-box.item-animate').each(function(k){
var el = $(this);
setTimeout( function () {
var effect = el.data('animate-effect');
if ( effect === 'fadeIn') {
el.addClass('fadeIn animated-fast');
} else if ( effect === 'fadeInLeft') {
el.addClass('fadeInLeft animated-fast');
} else if ( effect === 'fadeInRight') {
el.addClass('fadeInRight animated-fast');
} else {
el.addClass('fadeInUp animated-fast');
}
el.removeClass('item-animate');
}, k * 200, 'easeInOutExpo' );
});
}, 100);
}
} , { offset: '85%' } );
};
var dropdown = function() {
$('.has-dropdown').mouseenter(function(){
var $this = $(this);
$this
.find('.dropdown')
.css('display', 'block')
.addClass('animated-fast fadeInUpMenu');
}).mouseleave(function(){
var $this = $(this);
$this
.find('.dropdown')
.css('display', 'none')
.removeClass('animated-fast fadeInUpMenu');
});
};
var goToTop = function() {
$('.js-gotop').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $('html').offset().top
}, 500, 'easeInOutExpo');
return false;
});
$(window).scroll(function(){
var $win = $(window);
if ($win.scrollTop() > 200) {
$('.js-top').addClass('active');
} else {
$('.js-top').removeClass('active');
}
});
};
// Loading page
var loaderPage = function() {
$(".fh5co-loader").fadeOut("slow");
};
var counter = function() {
$('.js-counter').countTo({
formatter: function (value, options) {
return value.toFixed(options.decimals);
},
});
};
var counterWayPoint = function() {
if ($('#fh5co-counter').length > 0 ) {
$('#fh5co-counter').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
setTimeout( counter , 400);
$(this.element).addClass('animated');
}
} , { offset: '90%' } );
}
};
var parallax = function() {
if ( !isMobile.any() ) {
$(window).stellar({
horizontalScrolling: false,
hideDistantElements: false,
responsive: true
});
}
};
var testimonialCarousel = function(){
var owl = $('.owl-carousel-fullwidth');
owl.owlCarousel({
items: 1,
loop: true,
margin: 0,
nav: false,
dots: true,
smartSpeed: 800,
autoHeight: true
});
};
var sliderMain = function() {
$('#fh5co-hero .flexslider').flexslider({
animation: "fade",
slideshowSpeed: 5000,
directionNav: true,
start: function(){
setTimeout(function(){
$('.slider-text').removeClass('animated fadeInUp');
$('.flex-active-slide').find('.slider-text').addClass('animated fadeInUp');
}, 500);
},
before: function(){
setTimeout(function(){
$('.slider-text').removeClass('animated fadeInUp');
$('.flex-active-slide').find('.slider-text').addClass('animated fadeInUp');
}, 500);
}
});
$('#fh5co-hero .flexslider .slides > li').css('height', $(window).height());
$(window).resize(function(){
$('#fh5co-hero .flexslider .slides > li').css('height', $(window).height());
});
};
$(function(){
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
contentWayPoint();
sliderMain();
dropdown();
goToTop();
loaderPage();
counterWayPoint();
counter();
parallax();
testimonialCarousel();
fullHeight();
});
}());
I want my code in main.js called always not only on reload. I am using reactjs and webpack.
Please help me fix this. Thank you.

Please note that you your code in main.js is wrapped in something like this:
(function () {
...
}());
Above construction is called Immediately-Invoked Function Expression (IIFE) - it makes code inside to be called immediately and because everything defined inside any function is visible only in this function (is not visible outside function scope) it also helps to not pollute global context. You can read more about it here.
If you want to have possibility to call it anytime you need you should use normal function (not IIFE):
function mainFunction() {
//your codde
}
and then you can call it anytime you need (also on page load).

AngularJS how to run javascript after scope change?

Hi I had some Java scripts specific to a view. However, the script doesnt execute when angularjs loads the view. First time script run but script didnt execute when changed scope .The main index.html dont include this javascript code. This code in home.html . Index.html loads home.html but only one time working this javascript code.
$('#layerslider').layerSlider({
skin : 'fullwidth',
hoverPrevNext : true,
navStartStop : false,
navButtons : false,
autoPlayVideos : false,
animateFirstLayer : false
});
var $carousel = $('.recent-blog-jc, .recent-work-jc');
var scrollCount;
function adjustScrollCount() {
if( $(window).width() < 768 ) {
scrollCount = 1;
} else {
scrollCount = 3;
}
}
function adjustCarouselHeight() {
$carousel.each(function() {
var $this = $(this);
var maxHeight = -1;
$this.find('li').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$this.height(maxHeight);
});
}
function initCarousel() {
adjustCarouselHeight();
adjustScrollCount();
var i = 0;
var g = {};
$carousel.each(function() {
i++;
var $this = $(this);
g[i] = $this.jcarousel({
animation : 600,
scroll : scrollCount
});
$this.jcarousel('scroll', 0);
$this.prev().find('.jcarousel-prev').bind('active.jcarouselcontrol', function() {
$(this).addClass('active');
}).bind('inactive.jcarouselcontrol', function() {
$(this).removeClass('active');
}).jcarouselControl({
target: '-='+scrollCount,
carousel: g[i]
});
$this.prev().find('.jcarousel-next').bind('active.jcarouselcontrol', function() {
$(this).addClass('active');
}).bind('inactive.jcarouselcontrol', function() {
$(this).removeClass('active');
}).jcarouselControl({
target: '+='+scrollCount,
carousel: g[i]
});
$this.touchwipe({
wipeLeft: function() {
$this.jcarousel('scroll','+='+scrollCount);
},
wipeRight: function() {
$this.jcarousel('scroll','-='+scrollCount);
}
});
});
}
$(function(){
$(window).load(function(){
initCarousel();
});
});
$(window).resize(function () {
$carousel.each(function() {
var $this = $(this);
$this.jcarousel('destroy');
});
initCarousel();
});

Just add $scope.$apply() as close to the async event as possible, though keep in mind this is not best practice (you should try to do everything you can "the Angular way").

I fix this problem with angular directive. I get element with angular.element(document.querySelector('....')). I used ng-repeat in the directive template.
directive('carousel', function () {
return {
restrict: 'A',
replace: true,
transclude: false,
template: ' <div class="blank floated"><div class="four columns carousel-intro"><section class="entire"><h3>{{homepage.header4}}</h3><p>{{homepage.text4}}</p></section><div class="carousel-navi"><div id="work-prev" class="arl active jcarousel-prev"><i class="icon-chevron-left"></i></div><div id="work-next" class="arr active jcarousel-next"><i class="icon-chevron-right"></i></div></div><div class="clearfix"></div></div><section class="jcarousel recent-work-jc"><ul><li class="four columns" ng-repeat="work in works"><h5>{{work.title}}</h5><span>{{work.type}}</span></figcaption></figure></li></ul></section></div>',
link: function link(scope, element, attrs) {
var container = $(element);
var carousel = container.children('.jcarousel')
carousel.jcarousel({
wrap: 'circular'
});
scope.$watch(attrs.images, function (value) {
carousel.jcarousel('reload');
});
angular.element(document.querySelector('#work-prev')).children('.jcarousel-control-prev')
.jcarouselControl({
target: '-=1'
});
angular.element(document.querySelector('#work-next')).children('.jcarousel-control-next')
.jcarouselControl({
target: '-=1'
});
}
}
});

HTML on body load run a href link

I have this HTML Link:
Fade and Pop
that uses jquery to bring up a popup box.
how can i make the box appear on body load?
here is the full jquery code:
(function($) {
/*---------------------------
Defaults for Reveal
----------------------------*/
/*---------------------------
Listener for data-reveal-id attributes
----------------------------*/
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
});
/*---------------------------
Extend and Execute
----------------------------*/
$.fn.reveal = function(options) {
var defaults = {
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
};
//Extend dem' options
var options = $.extend({}, defaults, options);
return this.each(function() {
/*---------------------------
Global Variables
----------------------------*/
var modal = $(this),
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');
/*---------------------------
Create Modal BG
----------------------------*/
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}
/*---------------------------
Open & Close Animations
----------------------------*/
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
modal.unbind('reveal:open');
});
//Closing Animation
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
modal.unbind('reveal:close');
});
/*---------------------------
Open and add Closing Listeners
----------------------------*/
//Open Modal Immediately
modal.trigger('reveal:open')
//Close Modal Listeners
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
});
/*---------------------------
Animations Locks
----------------------------*/
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
}
});//each call
}//orbit plugin call
})(jQuery);

$('#myModal').click(); or $('#myModal').reveal(); will do this

You can trigger the click event for the link, or just execute the bound function for click($('#myModal').reveal(); in your case if no other data attributes exist for the given link).