I am creating new web and need help with JavaScript.
What I want is disable scrollify JS on mobile.
Tried almost everything, not success.
Here is my code:
<script>
$(function() {
$.scrollify({
section : ".pagescroll",
standardScrollElements: ".modal",
});
$.scrollify.disable() // this function is for disable mobile
});
</script>
Thank you
jQuery.scrollify({
touchScroll: false
});
touchScroll: A boolean to define whether Scrollify handles touch scroll events. True by default.
Why don't you check if it's mobile using userAgent and regex like this
You can execute your script only if it's not mobile
if(!(/Android|webOS|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) )) { //if not these devices(userAgents)
$(function() {
$.scrollify({
section : ".pagescroll",
standardScrollElements: ".modal",
});
});
}
You can try the below snippet in mobile SO site also. It's working
if(!(/Android|webOS|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) )) { //if not these userAgents
console.log("Not Mobile..!");
}else{
console.log("This is Mobile");
}
check this code...
<script>
$(document).ready(function () {
var width = $(window).width();
var height = $(window).height();
if (width > 980 && height > 500) {
$(function () {
$(".panel").css({
"height": $(window).height()
});
$.scrollify({
section: ".panel"
});
$(".scroll").click(function (e) {
e.preventDefault();
$.scrollify("move", $(this).attr("href"));
});
});
} else {
$(".scroll").click(function (e) {
e.preventDefault();
});
$.scrollify.destroy();
}
$(window).resize(function () {
width = $(window).width();
height = $(window).height();
$(function () {
if (width > 980 && height > 500) {
$(".panel").css({
"height": $(window).height()
});
$.scrollify({
section: ".panel"
});
$(".scroll").click(function (e) {
e.preventDefault();
$.scrollify("move", $(this).attr("href"));
});
} else {
$.scrollify.destroy();
$(".scroll").click(function (e) {
e.preventDefault();
});
}
});
});
});
$.scrollify({
section : ".fullSec",
scrollSpeed:2000,
easing: "easeOutExpo",
offset : 0,
scrollbars: true,
setHeights: true,
updateHash: false,
afterResize: function() {
if( $(window).width() < 767) {
$.scrollify.disable()
}else{
$.scrollify.enable()
}
},
});
Related
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
I'm trying to show and hide with toggle the entire side menu bar(#menu_links) when the browser is tunneled to less than 750px.
Does anyone know why the side menu bar (#menu_links) is not hidden by passing the edge of the browser when you click "#menu_button" when the browser size is less than 750?
https://menusel-169ba.firebaseapp.com/
$(document).ready(function () {
$('#menu_links').css({ width: '50px' });
$('.collapse-menu').addClass('hidden');
$('ul#menu_links li').hover(function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
}, function () {
$('span', this).addClass('hidden');
$('span', this).removeClass('show');
});
// Muesrta panel de CAMBIAR CONTRASEÑA
$('a.test').on("click", function (e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
var timesClicked = 0;
$("#menu_button").click(function () {
timesClicked++
if (timesClicked % 2 == 0) {
$('#menu_links').animate({ width: '50px' }, 350);
$('.collapse-menu').removeClass('show');
$('.collapse-menu').addClass('hidden');
$('ul#menu_links li').hover(function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
}, function () {
$('span', this).addClass('hidden');
$('span', this).removeClass('show');
});
} else {
$('#menu_links').animate({ width: '200px' }, 350);
$('.collapse-menu').addClass('show');
$('.collapse-menu').removeClass('hidden');
$('ul#menu_links li').hover(function () {
}, function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
});
}
console.log(timesClicked % 2);
});
var menu_buttonVar = document.querySelector("#menu_button"),
menu_linksVar = document.querySelector("#menu_links");
// checkWidth() BREACK-POINTS
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 750) {
console.log("screen width is less than 480");
menu_linksVar.style.left = "-50px";
$('#menu_button').click(function () {
$('#menu_links').animate({
left: '0px',
}, 0);
});
} // END if
else {
console.log("screen width is greater than or equal to 960");
menu_linksVar.style.left = "0px";
}
};
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
}); // END documentReady
Now my menu is ready and it works fine.
The next step is synthesize the code to work with the same functions but with less characters.
Here is the link:
https://menusel-169ba.firebaseapp.com/
Thank you.
I have a tooltip that might be appear in 2 position : top & bottom
i want do this with jquery resize. when user resize his browser in with less than 768px , my tooltip appear on the top position and when greater than 768px appear on bottom position but resize() wont work!!
$(window).ready(function () {
if ($(window).width() >= 768) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'bottom'});
});
}
else if ($(window).width() <= 767) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'top'});
});
}
$(window).resize(function () {
var wi = $(window).width();
if (wi >= 768) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'bottom'});
});
}
else if (wi <= 767) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'top'});
});
}
});
});
Something like this might work out for u mate.. :)
$(window).ready(function () {
if ($(window).width() >= 768) {
$(".green-tooltip").tooltip({
placement: 'bottom'
});
} else if ($(window).width() <= 767) {
$(".green-tooltip").tooltip({
placement: 'top'
});
}
});
$(window).resize(function () {
var wi = $(window).width();
if (wi >= 768) {
$(".green-tooltip").tooltip({
placement: 'bottom'
});
} else if (wi <= 767) {
$(".green-tooltip").tooltip({
placement: 'top'
});
}
});
Fiddle
I use a little jquery to change the class of my menu when I resize my browser. That works but when I want to use mouseenter on the new class it doesnt work.
This is my code for resizing:
$( window ).resize(function() {
windowWidth = $(window).width();
windowWidth = windowWidth + 17;
if(windowWidth < 780) {
$('.menu_bar').parent().addClass('mobile-header');
$('.nav_top').removeClass('nav_top').addClass('nav-left');
$('.primary-content').addClass('responsive');
} else {
$('.menu_bar').parent().removeClass('mobile-header');
$('.nav-left').removeClass('nav-left').addClass('nav_top');
$('.primary-content').removeClass('responsive');
}
});
This is the code for the mouseenter:
$(".nav-left ul").on({
mouseenter: function () {
$('ul', this).stop(true, true).slideDown(100);
},
mouseleave: function () {
$('ul', this).stop(true, true).slideUp(100);
}
}, "li");
If I change nav-top to nav-left in my markup (when the menu has the class nav-left on document ready) the mouseenter works fine.
try this :
$( window ).resize(function() {
windowWidth = $(window).width();
windowWidth = windowWidth + 17;
if(windowWidth < 780) {
$('.menu_bar').parent().addClass('mobile-header');
$('.nav_top').removeClass('nav_top').addClass('nav-left');
$('.primary-content').addClass('responsive');
} else {
$('.menu_bar').parent().removeClass('mobile-header');
$('.nav-left').removeClass('nav-left').addClass('nav_top');
$('.primary-content').removeClass('responsive');
}
$(".nav-left ul").on({
mouseenter: function () {
$('ul', this).stop(true, true).slideDown(100);
},
mouseleave: function () {
$('ul', this).stop(true, true).slideUp(100);
}
}, "li");
});
I'm building a site which is a single scroll with smoothscrolls and some more JS for some feature across the page.
On Google Chrome, this seems to work for me with no issues at all; although a few friends have mixed results. On Safari, there seems to be a few issues but, most of all, none of the smooth scrolling seems to work (most of the JS) until you are past the 'landing slide'
I have tried to debug this and check the web inspector console, but no errors are appearing.
Can anyone help?
My JS code is here: http://goo.gl/rcvJe and the site I am building here: http://goo.gl/0vQUe
Many thanks in advance,
R
// Resizing each slide height per height of window
$(document).ready(function() {
if ( $(window).width() > 700 ) {
$(document).ready(function() {
var height = $(window).outerHeight() + 50;
$('.each-slide').outerHeight(height);
});
$(window).resize(function() {
var height = $(window).outerHeight() + 50;
$('.each-slide').outerHeight(height);
});
}
if ( $(window).width() > 700 ) {
$(document).ready(function() {
var height = $(window).outerHeight() - 199;
$('.first-slide').outerHeight(height);
});
$(window).resize(function() {
var height = $(window).outerHeight() - 199;
$('.first-slide').outerHeight(height);
});
}
});
// Initialise the smooth scrolling on anchors
$(document).ready(function() {
$('a.smooth-scroll-no-offset').smoothScroll({
easing: 'swing',
speed: 500
});
});
$(document).ready(function() {
$('a.smooth-scroll').smoothScroll({
easing: 'swing',
speed: 500,
offset: 100
});
});
// Fitvid
$(document).ready(function(){
$('.video-container').fitVids();
});
// Remove arrow hint when near bottom
/*$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 700 ) {
$('.continue-down').fadeOut();
}
else {
$('.continue-down').fadeIn();
}
});*/
// Ajax subscribe form
$(function () {
$('#subForm').submit(function (e) {
e.preventDefault();
$.getJSON(
this.action + "?callback=?",
$(this).serialize(),
function (data) {
if (data.Status === 400) {
alert("Error: " + data.Message);
} else {
$('#subForm input[type=submit]').animate({opacity:0}).delay(2000).animate({opacity:1});
$('.confirmation-message').animate({opacity:1}).delay(2000).animate({opacity:0});;
$('#subForm').find('input[type=text]').val('');
}
});
});
});
// Some simple colours on hovers
$(document).ready(function() {
$('.menu-navigation-desktop ul li:nth-child(2) a').hover(function()
{ $('.site-intro a:nth-of-type(1)').css({'color':'#69B6D7','border-bottom':'1px solid'}); },
function () { $('.site-intro a:nth-of-type(1)').css({'color':'#333333','border-bottom':'0'}); }
);
$('.menu-navigation-desktop ul li:nth-child(3) a').hover(function()
{ $('.site-intro a:nth-of-type(2)').css({'color':'#A396C0','border-bottom':'1px solid'}); },
function () { $('.site-intro a:nth-of-type(2)').css({'color':'#333333','border-bottom':'0'}); }
);
$('.menu-navigation-desktop ul li:nth-child(4) a').hover(function()
{ $('.site-intro a:nth-of-type(3)').css({'color':'#777777','border-bottom':'1px solid'}); },
function () { $('.site-intro a:nth-of-type(3)').css({'color':'#333333','border-bottom':'0'}); }
);
});
// Contact form styles and triggers
$(document).ready(function(){
var $c=$('.menu-navigation-desktop ul li:nth-child(5) a').css('background-color');
$('.contact-form').css('background-color',$c);
$('.menu-navigation-desktop li a.contact-form-action').click(function() {
$('.contact-form').toggle();
});
});
// Animations
$(document).ready(function() {
$('.map-icon').addClass('animated pulse');
});
// Mobile navigation
$(document).ready(function() {
$('.navigation-trigger').click(function() {
$('.menu-navigation-mobile ul').slideToggle('fast');
$('span', this).text($('span', this).text() == 'navigatedown' ? 'navigateup' : 'navigatedown');
});
});
// Design process slider
$(document).ready(function() {
var unslider = $('.design-process-slider').unslider({
delay: false,
keys: true,
dots: true,
fluid: true
});
});
$(document).ready(function() {
$('.design-process-slider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider.data('unslider')['next']();
} else {
unslider.data('unslider')['prev']();
};
});
});
// Sustainability slider
$(document).ready(function() {
var unslider2 = $('.sustainability-slider').unslider({
delay: false,
keys: true,
dots: false,
fluid: true
});
});
$(document).ready(function() {
$('.sustainability-slider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider2.data('unslider')['next']();
} else {
unslider2.data('unslider')['prev']();
};
});
});
// Testimonial slider
$(document).ready(function() {
var unslider3 = $('.testimonial-slider').unslider({
delay: false,
keys: true,
dots: false,
fluid: true
});
});
$(document).ready(function() {
$('.testimonial-slider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider3.data('unslider')['next']();
} else {
unslider3.data('unslider')['prev']();
};
});
});
// Map tip hovers
$(document).ready(function() {
$('.map-icon.one').hover(
function () {
$('.map-tip.one').fadeIn();
},
function () {
$('.map-tip.one').fadeOut();
}
);
$('.map-icon.two').hover(
function () {
$('.map-tip.two').fadeIn();
},
function () {
$('.map-tip.two').fadeOut();
}
);
$('.map-icon.three').hover(
function () {
$('.map-tip.three').fadeIn();
},
function () {
$('.map-tip.three').fadeOut();
}
);
$('.map-icon.four').hover(
function () {
$('.map-tip.four').fadeIn();
},
function () {
$('.map-tip.four').fadeOut();
}
);
});
// Testimonial circle cycles
$(document).ready(function() {
$('.testimonial-container').cycle();
});
//
$(document).ready(function() {
$('.menu-navigation-desktop ul li').click(function() {
$('.menu-navigation-desktop ul li').removeClass('active-slide');
$(this).addClass('active-slide');
});
});
$(document).ready(function() {
var sections = $('.each-slide-section-container'),
links = $('.menu-navigation-desktop ul li a'),
lis = $('.menu-navigation-desktop ul li');
$(window).scroll(function() {
var currentPosition = $(this).scrollTop();
links.removeClass('selected');
lis.removeClass('active-slide');
sections.each(function() {
var top = $(this).offset().top,
bottom = top + $(this).height();
if (currentPosition >= top && currentPosition <= bottom) {
var link = $('a[href="#' + this.id + '"]');
link.addClass('selected');
link.parent().addClass('active-slide');
}
});
});
});
$(document).ready(function() {
$('.each-slide .design-spread-container .design-spread-element').hover(
function () {
$(this).animate({
opacity: 1
})
},
function () {
$(this).animate({
opacity: 0
})
}
);
});
This issue with smoothScroll solved my problem.
https://github.com/kswedberg/jquery-smooth-scroll/issues/29