Any idea about how to get the script below working only on a >767 screen size?
<script>
$(document).ready(function() {
$(window).fadeThis({
baseName: "slide-",
speed: 500,
easing: "easeOutCubic",
offset: 0,
reverse: false,
distance: 50,
scrolledIn: null,
scrolledOut: null
});
});
</script>
Use CSS for this:
<link rel="stylesheet" media="screen and (min-width:767px)" href="yourcssfilefor767.css" type="text/css">
If you have to do this dynamically:
<script>
$(document).ready(function() {
$(window).on("change", function(){
if($(window).width() > 767){
//do stuff here
}
});
});
</script>
Related
I am using the below code to show data on my web page with some animate effect
.done(function (response) {
$(".loadig-overlay").hide();
$('#Container').toggle('slide', {
direction: 'left'
}, 250, function () {
$("#Container").html(response);
$('#Container').toggle('slide', {
direction: 'right'
}, 250);
});
})
The #container html gets replaced by that received in the response but the animate effect is not applied
$('#Container').toggle('slide', {
direction: 'left'
}, 500, function () {
$("#Container").html('abc');
$('#Container').toggle('slide', {
direction: 'right'
}, 500);
});
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<div id="Container">
</div>
It appears that everything is okay with your script. Only thing which comes to my mind is that element containing 'Container' is too small so you don't see the effect. Or maybe you've been playing with z-index of neighbouring elements?
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
});
}
}
I try to use Velocity.js to do an menu button animation. The code worked well using jQuery but now I'm trying to do it using JavaScript ES6 only and I got an error.
My HTML content is this one :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Hamburger 2</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<hc-hamburger role="button">
<a class="McButton" data="hamburger-menu">
<b></b>
<b></b>
<b></b>
</a>
</hc-hamburger>
<script src="velocity.min.js"></script>
<script src="hamburger.js"></script>
</body>
</html>
And my JavaScript content :
'use strict';
class HCHamburger extends HTMLElement {
get menuButton() {
if (!this._menuButton) {
this._menuButton = this.querySelector("[data=hamburger-menu]");
}
return this._menuButton;
}
get bar() {
if (!this._bar) {
this._bar = this.querySelectorAll('b');
}
return this._bar;
}
attachedCallback() {
this.menuButton.addEventListener('click', _ => {
this.menuButton.classList.toggle("active");
let McBar1 = this.bar[0];
let McBar2 = this.bar[1];
let McBar3 = this.bar[2];
if (this.menuButton.classList.contains("active")) {
McBar1.velocity({ top: "50%" }, {duration: 200, easing: "swing"});
McBar3.velocity({ top: "50%" }, {duration: 200, easing: "swing"})
.velocity({rotateZ:"90deg"}, {duration: 800, delay: 200, easing: [500,20] });
this.menuButton.velocity({rotateZ:"135deg"}, {duration: 800, delay: 200, easing: [500,20] });
} else {
this.menuButton.velocity("reverse");
McBar3.velocity({rotateZ:"0deg"}, {duration: 800, easing: [500,20] })
.velocity({ top: "100%" }, {duration: 200, easing: "swing"});
McBar1.velocity("reverse", {delay: 800});
}
});
}
}
document.registerElement('hc-hamburger', HCHamburger);
When I click on my button I have this error : Uncaught TypeError: McBar1.velocity is not a function
As I said before this code worked with jQuery with a classic selector :
var McBar1 = $('b:nth-child(1)');
I think I have an issue when I get my McBar1 content because when I log it I juste have <b></b> and no the entire object...
We have to use jQuery to get the selection, querySelector is not enough.
I'm using fullpage.js to create my website, and I'm trying to incorporate wow.js and animate.css to create some cool animations. Everything is working fine on desktop, but when I resize the browser to mobile-size, I cannot scroll at all. The animations at the top of my page load, but I cannot scroll at all until I resize to a bigger viewport.
I've tried the 'scrollOverflow: true' on fullpage, but it's not working.
This is what my app.js looks like:
$(document).ready(function() {
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: false,
live: true // default
}
)
wow.init();
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'left',
navigationTooltips: ['Home', 'About Me', 'Skills', 'Portfolio', 'Contact', 'Hire Me'],
resize: false,
scrollBar: true,
scrollOverflow: false,
//RESPONSIVE
responsiveWidth: 800,
afterResize: function () {
if ($(window).width() < 800) {
//$.fn.fullpage.setAutoScrolling(false);
var verticalNav = document.getElementById("fp-nav");
$(verticalNav).hide();
}
}
});
});
I've tried the 'scrollOverflow: true' on fullpage, but it's not working.
And... why are you using it? The purpose of it has nothing to do with your problem... so you should turn it off...
I figured out the problem....
I had overflow: hidden !important on both my html and body in my CSS. Took them off and they both work now.
Thanks for the help Alvaro!
THEY WORK
I am using FullPage.js, scrollOverflow and WOW Animations altogether and they work perfectly fine.
HERE ARE MY SETTINGS
In the HEAD ELEMENT I have these Links
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
And at the bottom before the ending BODY tag I have all these scripts.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/vendors/scrolloverflow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.js"></script>
<script>
/*** Call function after page has loaded ***/
$(document).ready(function() {
/*** Call FullPage.js option ***/
pageScroll();
new WOW().init();
$(window).resize(function() {
pageScroll();
});
});
/*** FullPage.js Function ***/
function pageScroll(){
$('#fullpage').fullpage({
sectionsColor: ['#06C', '#C06', '#930', '#06C'],
anchors: ['aa', 'bb', 'cc', 'dd'],
menu: '.menu',
navigation: true,
scrollOverflow: true,
scrollBar:true,
fixedElements: '.header',
paddingTop: '3em',
slidesNavigation: true,
paddingBottom: '1em'
});
}
</script>
Here is a live working site.
https://cleansites.us/
Recently I came across vegas.js plugin
not sure how to use it... Read the documentation but did not get a clear idea. http://vegas.jaysalvat.com/documentation/setup/
Did the steps accordingly but no images are showing.
<script>
$.vegas('slideshow', {
backgrounds:[
{ src:'img/F1.jpg', fade:1000 },
{ src:'img/f2.jpeg', fade:1000 },
]
})('overlay', {
src:'/vegas/overlays/11.png'
});
</script>
Could you try using firebug/inspector, click on console, and paste in what is going on. There will be errors in there. Also could you post how you're including the file? Post with your html if possible.
As you can se in the settings section the overlay property goes inside of the vegas function.
$(document).ready(function() {
var imagecollection = [{
src: 'https://i.stack.imgur.com/oURrw.png'
},
{
src: 'http://i.imgur.com/SZPjHwz.jpg'
},
{
src: 'http://www.boyter.org/wp-content/uploads/2016/08/ChJzv9lUYAA9D5E.jpg'
},
{
src: 'https://pbs.twimg.com/media/Cg0x8vnXEAEB2Le.jpg'
}
/* Slideshow not working? Check your image links. */
];
$("#ShowSlideShowHere").vegas({
slides: imagecollection,
transition: 'fade',
preloadImage: true,
timer: true,
shuffle: true,
delay: 5000,
animation: 'kenburns',
cover: true,
overlay: 'https://media.istockphoto.com/vectors/isolated-christmas-falling-snow-overlay-on-transparent-background-vector-id628152000'
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script>
</head>
<body>
<div style="height:100vh">
<div id="ShowSlideShowHere" style="height:100vh">sadasdasdas</div>
</div>