Develop Reference

How to use JS file in react

I have downloaded a template for my website which calls below js file from my react component.
!(function($) {
"use strict";
// Hero typed
if ($('.typed').length) {
var typed_strings = $(".typed").data('typed-items');
typed_strings = typed_strings.split(',')
new Typed('.typed', {
strings: typed_strings,
loop: true,
typeSpeed: 100,
backSpeed: 50,
backDelay: 2000
});
}
// Smooth scroll for the navigation menu and links with .scrollto classes
$(document).on('click', '.nav-menu a, .scrollto', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
e.preventDefault();
var target = $(this.hash);
if (target.length) {
var scrollto = target.offset().top;
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
}
return false;
}
}
});
// Activate smooth scroll on page load with hash links in the url
$(document).ready(function() {
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
var scrollto = $(initial_nav).offset().top;
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
}
}
});
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
});
$(document).click(function(e) {
var container = $(".mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
}
}
});
// Navigation active state on scroll
var nav_sections = $('section');
var main_nav = $('.nav-menu, .mobile-nav');
$(window).on('scroll', function() {
var cur_pos = $(this).scrollTop() + 200;
nav_sections.each(function() {
var top = $(this).offset().top,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
if (cur_pos <= bottom) {
main_nav.find('li').removeClass('active');
}
main_nav.find('a[href="#' + $(this).attr('id') + '"]').parent('li').addClass('active');
}
if (cur_pos < 300) {
$(".nav-menu ul:first li:first").addClass('active');
}
});
});
// Back to top button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 1500, 'easeInOutExpo');
return false;
});
// jQuery counterUp
$('[data-toggle="counter-up"]').counterUp({
delay: 10,
time: 1000
});
// Skills section
$('.skills-content').waypoint(function() {
$('.progress .progress-bar').each(function() {
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, {
offset: '80%'
});
// Porfolio isotope and filter
$(window).on('load', function() {
var portfolioIsotope = $('.portfolio-container').isotope({
itemSelector: '.portfolio-item',
layoutMode: 'fitRows'
});
$('#portfolio-flters li').on('click', function() {
$("#portfolio-flters li").removeClass('filter-active');
$(this).addClass('filter-active');
portfolioIsotope.isotope({
filter: $(this).data('filter')
});
aos_init();
});
// Initiate venobox (lightbox feature used in portofilo)
$(document).ready(function() {
$('.venobox').venobox();
});
});
// Testimonials carousel (uses the Owl Carousel library)
$(".testimonials-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
900: {
items: 3
}
}
});
// Portfolio details carousel
$(".portfolio-details-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
items: 1
});
// Init AOS
function aos_init() {
AOS.init({
duration: 1000,
easing: "ease-in-out-back",
once: true
});
}
$(window).on('load', function() {
aos_init();
});
})(jQuery);
I paste html file in my component and import all css and js file.
But it shows error in js file.
Line 7:1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 14:9: 'Typed' is not defined no-undef
Line 25:9: Unexpected use of 'location' no-restricted-globals
Line 25:85: Unexpected use of 'location' no-restricted-globals
Line 183:5: 'AOS' is not defined no-undef
Line 193:4: 'jQuery' is not defined no-undef
So how do I import this js into my react component.
Thanks in advance.

You don't just import a script you've downloaded from somewhere that uses jQuery, Owl Carousel etc., into a React component.
Find or write React components that do the things that script does and use them in your React app.

You can not simply put pure JS / Jquery code into a React component and expect it to work.
Look for a more "React" - ish way do do this. There are probably some libraries doing the same thing You're looking for :)
Look for a React library responsible for animating different elements. As far as I can see that is what You are trying to achieve

Jquery Flexslider with Sliding effect

jQuery(document).ready(function ($) {
$('.flexslider.wsc_banner4519').each(function () {
var _this = this;
$('.slides > li', this).hide();
$(this).flexslider($.extend({}, {
animation: 'fade',
slideshow: false,
slideshowSpeed: 7000,
pagination: true,
directionNav: false,
animationDuration: 600
}, {
before: function (slider) {
var descs = $(_this).next('.descriptions').find('article');
if (slider.animatingTo != slider.currentSlide && descs.length >= slider.slides.length) {
descs.filter(':visible').fadeOut(slider.vars.animationDuration / 2, function () {
descs.eq(slider.animatingTo).fadeIn(slider.vars.animationDuration / 2);
});
}
}
})).hover(function () {
$('.flex-direction-nav', this).stop(true).fadeTo(100, 1);
}, function () {
$('.flex-direction-nav', this).stop(true).fadeTo(100, 0);
});
});
});
I am using flexslider(converted to double slider).Here both have fade-out effect.
I want image to be fade out and text to be sliding.
http://demo2.websitescreative.com/responsive/Features/sliderwithtext.aspx
Like this demo I have done. I want to change this into the effect I described above.
PLEASE Help.

Disable "wrap around" in SlidesJS

I'm using SlidesJS, which is a very customizable plugin for pagination of slideshows.
This is my initialization.
$('.slides').slidesjs
({
width: 300,
height: 300,
navigation: false, // It's for swiping in an iOS web app
pagination: false,
generatePagination: false
});
However, I don't want the slideshow to wrap "the other way around". I don't know if there is a term for this, so I painted this illustration:
Green = Next
Blue = Previous
What I want is the swipes which go from 4 -> 1 or from 1 -> 4 to be disabled. I haven't found a built in feature or property for this. But, is there a reasonable workaround?

Guys! I made it.
It took a couple hours.
The initial recreated problem is here
And my working solution, as explained below, is here.
I found where to put a switch to this looping effect.
AND I setted it as a new option ==> looping (true/false) !!!
If the looping option is set to false... It won't loop.
defaults = {
width: 940,
height: 528,
start: 1,
navigation: {
active: true,
effect: "slide"
},
pagination: {
active: true,
effect: "slide"
},
play: {
active: false,
effect: "slide",
interval: 5000,
auto: false,
swap: true,
pauseOnHover: false,
restartDelay: 2500
},
effect: {
slide: {
speed: 500
},
fade: {
speed: 300,
crossfade: true
}
},
callback: {
loaded: function() {},
start: function() {},
complete: function() {}
},
looping: false // Looping effect from last image to first and vice-versa
};
I slightly modified the Plugin.prototype._slide function to achieve this.
I added a new condition based on a var which I called OK_Proceed.
This var is true by default.
Its value becomes false when trying to go to the image index -1 or data.total... But only if the looping option is set to false.
I wished to preserve the original function...
;)
var OK_Proceed=true; // ADDED var
console.log( this.options.looping );
if (next === -1) {
if( this.options.looping ){
next = this.data.total - 1;
}else{
OK_Proceed=false;
}
}
if (next === this.data.total) {
if( this.options.looping ){
next = 0;
}else{
OK_Proceed=false;
}
}
When this OK_Proceed is false : The script bypasses the animate function entierely.
It is replaced by a small 10px "bounce" effect.
The only thing left to do is to reset the data.animating value:
$.data(_this, "animating", false);
So here is the full function:
Plugin.prototype._slide = function(number) { console.log("Line 430 - _slide: ");
var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
_this = this;
$element = $(this.element);
this.data = $.data(this); console.log( JSON.stringify( $.data(this) ) );
if (!this.data.animating && number !== this.data.current + 1) {
$.data(this, "animating", true);
currentSlide = this.data.current; console.log("Line 437 - currentSlide: "+currentSlide);
if (number > -1) {
number = number - 1;
value = number > currentSlide ? 1 : -1; console.log("Line 440 - value: "+value);
direction = number > currentSlide ? -this.options.width : this.options.width;
next = number;
} else {
value = this.data.direction === "next" ? 1 : -1;
direction = this.data.direction === "next" ? -this.options.width : this.options.width;
next = currentSlide + value; console.log("Line 446 - next: "+next);
} var OK_Proceed=true; // ADDED var
console.log( this.options.looping );
if (next === -1) {
if( this.options.looping ){
next = this.data.total - 1;
}else{
OK_Proceed=false;
}
}
if (next === this.data.total) {
if( this.options.looping ){
next = 0;
}else{
OK_Proceed=false;
}
}
if(OK_Proceed){this._setActive(next); // ADDED condition
slidesControl = $(".slidesjs-control", $element);
if (number > -1) {
slidesControl.children(":not(:eq(" + currentSlide + "))").css({
display: "none",
left: 0,
zIndex: 0
});
}
slidesControl.children(":eq(" + next + ")").css({
display: "block",
left: value * this.options.width,
zIndex: 10
});
this.options.callback.start(currentSlide + 1);
if (this.data.vendorPrefix) {
prefix = this.data.vendorPrefix;
transform = prefix + "Transform";
duration = prefix + "TransitionDuration";
timing = prefix + "TransitionTimingFunction";
slidesControl[0].style[transform] = "translateX(" + direction + "px)";
slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
slidesControl[0].style[transform] = "";
slidesControl[0].style[duration] = "";
slidesControl.children(":eq(" + next + ")").css({
left: 0
});
slidesControl.children(":eq(" + currentSlide + ")").css({
display: "none",
left: 0,
zIndex: 0
});
$.data(_this, "current", next);
$.data(_this, "animating", false);
slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
slidesControl.children(":not(:eq(" + next + "))").css({
display: "none",
left: 0,
zIndex: 0
});
if (_this.data.touch) {
_this._setuptouch();
}
return _this.options.callback.complete(next + 1);
});
} else {
return slidesControl.stop().animate({
left: direction
}, this.options.effect.slide.speed, (function() {
slidesControl.css({
left: 0
});
slidesControl.children(":eq(" + next + ")").css({
left: 0
});
return slidesControl.children(":eq(" + currentSlide + ")").css({
display: "none",
left: 0,
zIndex: 0
}, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
}));
} } else {
console.log("HERE");
$.data(_this, "animating", false);
console.log( JSON.stringify( $.data(this) ) );
// Bouncing effect
$(".slidesjs-control").stop().animate( { "left" : "-=10px" }, 100, "easeInOutBounce", function(){
$(".slidesjs-control").animate( { "left" : "+=10px" }, 100, "easeInOutBounce");
});
} // End added condition
}
};
I cleaned this code from all the console.logs and created a zip file ready to use.
The day after EDIT
There was two other functions to modify in order to make the "touch" behave the same as mouse clicked links... The .zip file above also reflects these changes...
Function modified for click is : _slide.
Functions modified for click are : _setuptouch and _touchmove.
Two classes are available for you to modify : bounceForward and bounceBackward.
The lastest demo is here. Try it on a touch enabled device.

Is it possible to scroll above/under an element with scroll to element

I have a simple menu that scrolls to a section when a menu item is clicked.
For example:
<li>Contact</li>
Will scroll to:
<section id="contact"></section>
However I've also got a menu that always sticks to the top, and the height of that menu is not calculated with the scroll script. So the menu always hovers over the top part of an element, making part of it unreadable.
How can I change it so that it scrolls not directly to that element, but let's say 80px above it? And preferable only for one element, since I've only got this issue for one section on my page.
I am using this scroll to element script:
/* Scroll to Main Menu
================================================== */
$('#navigation a[href*=#]').click( function(event) {
var $this = $(this);
var offset = -80;
if($this.parent().is(':nth-child(2)')) {
offset = 2; // for second child dont do offset
};
$.scrollTo( $this.attr('href') , 650, { easing: 'swing' , offset: offset , 'axis':'y' } );
event.preventDefault();
});
/* Scroll to Element on Page
================================================== */
$('a#to-blog').click( function(event) {
event.preventDefault();
$.scrollTo( $('#blog') , 1250, { offset: 1 , 'axis':'y' } );
});
$('.hero-btn').click( function(event) {
var $this = $(this);
var offset = -80;
if($this.attr('href') == '#about-us' || $('.nomenu').is(':visible')) {
offset = 0; // for first section dont do offset
};
$.scrollTo( $this.attr('href') , 650, { easing: 'swing' , offset: offset , 'axis':'y' } );
event.preventDefault();
});
/* Add active class for each nav depending on scroll
================================================== */
$('section').each(function() {
$(this).waypoint( function( direction ) {
if( direction === 'down' ) {
var containerID = $(this).attr('id');
/* update navigation */
$('#navigation a').removeClass('active');
$('#navigation a[href*=#'+containerID+']').addClass('active');
}
} , { offset: '80px' } );
$(this).waypoint( function( direction ) {
if( direction === 'up' ) {
var containerID = $(this).attr('id');
/* update navigation */
$('#navigation a').removeClass('active');
$('#navigation a[href*=#'+containerID+']').addClass('active');
}
} , { offset: function() { return -$(this).height() - 80; } });
});

I believe you need to change the offset in the various places to the value you want:
var offset = -80;
A lesser number will be further "up" the page, a higher number will be further "down" the page.

Jquery file not loading

I am a bit confused... I can load a javascript file when its above another jquery file in the tag however when its below other jquery files it doesn't load.
When I put it above the jquery.min.js file its loads fine but when its below it fails to load.
Im thinking there is something wrong with my jquery file.. but not sure what!
My Javascript file is:
/* =======================================================================================================================================*/
// gallery slider
/* =======================================================================================================================================*/
$(document).ready(function () {
$('.project').mouseover(function ()
{
$(this).children('.cover').animate(
{
height: "172px"
});
$(this).children('.title').animate(
{
bottom: '-25px', height: "100px"
});
});
$('.project').mouseleave(function ()
{
$(this).children('.cover').animate(
{
height: "17px"
});
$(this).children('.title').animate(
{
bottom: "0px", height: "20px"
});
});
});
/* =======================================================================================================================================*/
// Top Contact Area
/* =======================================================================================================================================*/
$(window).load(function () {
$("#contactArea").css('height', '0px');
$(".contact-hurry a").toggle(
function () {
$(this).text('Quick Contact Hide / Close [-]')
$("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'})
$("body").addClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
},
function () {
$(this).text('Quick Contact Show / Open [+]')
$("body").removeClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
$("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'})
}
);
});
/* =======================================================================================================================================*/
// Mega Menu $("#contactArea").css('height', '0px');
/* =======================================================================================================================================*/
$(document).ready(function () {
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 150;
//Calculate row
$(this).find("ul.floating").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});
} else { //If row does not exist...
$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});
}
}
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 100, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};
$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);
jQuery(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 0 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// run the effect
$( "#effect" ).toggle( selectedEffect, options, 500 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
/* =======================================================================================================================================*/
// faqs
/* =======================================================================================================================================*/
$(document).ready(function(){
$("#faqs tr:odd").addClass("odd");
$("#faqs tr:not(.odd)").hide();
$("#faqs tr:first-child").show();
$("#faqs tr.odd").click(function(){
$(this).next("tr").toggle('fast');
$(this).find(".arrow").toggleClass("up");
});
});
/* =======================================================================================================================================*/
// Portfolio slider
/* =======================================================================================================================================*/
/*
$(document).ready(function() {
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
if(index < $('#bigPic img').length){
var indexImage = $('#bigPic img')[index]
if(currentImage){
if(currentImage != indexImage ){
$(currentImage).css('z-index',2);
clearTimeout(myTimer);
$(currentImage).fadeOut(250, function() {
myTimer = setTimeout("showNext()", 3900);
$(this).css({'display':'none','z-index':1})
});
}
}
$(indexImage).css({'display':'block', 'opacity':1});
currentImage = indexImage;
currentIndex = index;
$('#thumbs li').removeClass('active');
$($('#thumbs li')[index]).addClass('active');
}
}
function showNext(){
var len = $('#bigPic img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}
var myTimer;
$(document).ready(function() {
myTimer = setTimeout("showNext()", 3000);
showNext(); //loads first image
});
});
*/
$("#foo2").carouFredSel({
circular: false,
infinite: false,
auto : false,
scroll : {
items : "page"
},
prev : {
button : "#foo2_prev",
key : "left"
},
next : {
button : "#foo2_next",
key : "right"
},
pagination : "#foo2_pag"
});
});

I am not sure what you actually mean, but I give it a shot.
If you include the jquery library before script files that uses jquery, those will succeed.
A script that uses jquery must have the symbols $ and jQuery defined and javascript runs the file sequentially from top to bottom.
That is why including jquery must be done before everything else.