I am in the process of creating a Shopify store and would like to go a little beyond what the themes are offering. Specifically I am triyng to add wow.js and animate.css.
As you can see below, I have added the CDN for Animate.css in the head tag of template.liquid.
Next I added the CND for Wow.js and activated is as such:
It seems to be loading the scripts just fine, even adds the animated class as one scrolls to the element, but for some reason none of the aniamtion is taking place.
Any input into alleviating this issue is much appreciated!
Well this was utterly annoying. Anyhow the way to refernce/activate Animation.css animations now seems to be with class animate__animated and NOT just animated like it used to be.
This means that when one is initialising wow.js one must change that animationClass to animate__animated as such:
new WOW({
animateClass: 'animate__animated', // --> WOW default is animated but that does not work anymore
}).init();
And the Animation.css animations must be as such:
<div class="wow animate__fadeInUp">Lorem</div>
It might be that your theme's CSS is overriding animate.min.css since it's being loaded before it. Try loading animate.min.css last, just before the closing </head> tag
Related
I am using jQuery to a simple task. Task is to simply show a loading animation from none progress until page is completely loaded.
The thing i am experiencing is that the animation shows up after 50-75% time and then goes hidden after the page is completely loaded (I am referring it as delay in next parts of question).
Points to note:
-> If I put Animation Code in header.php and script in footer.php then the code shows delay(Mentioned).
-> If i put both Animation Code and script in header.php the animation never get hidden (Ambiguous to me). For both in footer.php it gets hidden but shows delay.
I want to know the reason why my page is doing this behavior, what is the best approach of doing this task. (I know my approach is not the best one since its misbehaving)
Note: My main page includes both header.php and footer.php files.
My Question ends here.
This is bootstrap loading animation. (Working Fine. No problem with it. Just to show)
Animation Code
<div id="Loading">
<div class="spinner-border m-5" role="status" >
<span class="sr-only" >Loading...</span>
</div>
</div>
And this is what i function i am using for for hiding the animation on page is completely loaded. (Also Working Fine. No problem with it. Just to show)
Script
<script>
$(document).ready(function($) {
$('#Loading').fadeOut("slow");
});
</script>
document.ready() means your DOM is ready to run if your page have bulky contents and added js at the bottom to load dom its taking time so loading animation comes in delay. And at header make sure jquery is above the custom CSS. If you have not satisfied with the answer edit the question and add complete HTML markup.
I have found the mistake. The thing that was making the animation to load after some time was that, before animation's code I linked bootstrap CDN and then animation's code. That why it took longer than expected.
The thing I learned is that, it was a bad approach to use bootstrap for loading animation(the animation that shows the page is loading). Instead, CSS and HTML for animation should be used. Mainly using any library at your website affects the speed of the website that is not good for SEO.
You experienced two different scenarios. Let me clarify them one by one:
1. If I put Animation Code in header.php and script in footer.php then the code shows delay(Mentioned).
You said you're inserting Bootstrap before the Animation Code, so it may take time to load. I will re-iterate your words: yes, it's best practice to avoid any framework or library (like Bootstrap or jQuery) for adding page-loading animation. It's because progress bar should be the first to load and show, and it will delay if browser need to load heavy files like third-party libraries. Well, there's a solution as well:
You can also load a script asynchronously using the HTML5's async attribute for <script> tag. But then, you can't use Bootstrap in Animation code. The reason being, Bootstrap may be loaded later than your Animation code being rendered. Read: https://www.w3schools.com/tags/att_script_async.asp
<script async src="myScript.js"></script>
2. If i put both Animation Code and script in header.php the animation never get hidden (Ambiguous to me). For both in footer.php it gets hidden but shows delay.
You said you're adding jQuery file at the end of <body> in footer.php, so your script when placed in header.php doesn't run since jQuery is still not loaded. Check console log; there will be an error.
You must first load jQuery, then use it. Read: https://forum.jquery.com/topic/and-jquery-not-defined-problems
Also, if you seek to hide the progress bar after all the resources (like images and iFrames) are loaded, then use $(document).load() in place of $(document).ready(). $(document).ready() is fired when the DOM is ready, but $(document).load() is fired when the page is loaded.
I'm using the One Page Scroll jquery plugin (https://github.com/peachananr/onepage-scroll) and I want to have the site start from the bottom.
I have five sections, so when I added:
$( window ).load(function() { $(".main").moveTo(5); })
The page loads at the top and then immediately scrolls down to the bottom. I'm trying to avoid that: just want it to load at the bottom and then the user can navigate upwards.
I'm still learning jquery/javascript so I have a feeling this is a simple fix and thats why I couldn't find an answer in the forum.
Thanks in advance for any help or guidance.
Edit: here's the working example
This will be very difficult for two reasons:
The browser constructs the DOM from top to bottom, like stacking blocks upside down. Handlers on window.onload or $(document).ready don't run until after the page has already been built and rendered. Any delay while your scripts and content are loading will exacerbate the lag time. To affect how it looks from the very beginning, your code would need to run even before window.onload. (EDIT: You can do that with JS that's outside an event handler and physically before the elements you're rendering, but it will run before those elements exist. Among other problems, you won't know how tall anything is yet.)
Before the DOM is rendered, there is no bottom of the page. It gains height as more blocks are stacked. You can add some kind of wrapper with an absolute height, but that has its own issues.
If you really want this to work smoothly, you may need a more radical approach. I suggest you exclude the first page from the initial response, then add it dynamically afterward. You can give it an inline style="display:none" or just add it later via AJAX. Injecting content at the top will push everything else down, so you'll need to automatically scroll down as the page expands upward. If you do it right, the user should never be able to tell.
Try this:
jQuery( document ).ready(function( $ ) {
$(".main").moveTo(5);
});
".ready()" will wait for the DOM to load and then execute the script within
I would suggest you to make us of fullPage.js instead and make use of the 'active' class to determine which section will be visible on load as detailed in its docs:
Each section will be defined with a div containing the section class. The active section by default will be the first section, which is taken as the home page.
...
If you want to define a different starting point rather than the first section or the first slide of a section, just add the class active to the section and slide you want to load first.
Living demo
<div id="fullpage">
<div class="section">One</div>
<div class="section">
<div class="slide">
<div class="demo">Demo</div>Two</div>
<div class="slide">Three</div>
</div>
<div class="section active">Third</div> <!-- Active section -->
<div class="section">Four</div>
</div>
I'm trying to get a page to animate in on load using Angular 1.2 and Animate.css.
Here's the Plunker: http://plnkr.co/edit/oDiDfRCO2Msc0StNrtqH
I'd like the background to crossfade in and the yellow menu on the right side to slide in from the right.
In main.html:
<div>
<div class="background-container">
<my-Background></my-Background>
</div>
<div class="menu-container">
<my-Menu id="menu"></my-Menu>
</div>
</div>
In main.css:
.menu-container.ng-enter {
animation:3s fadeInRightBig;
}
.background-container.ng-enter {
animation:3s fadeInDown;
}
The animations defined in main.css don't seem to get fired. I'm pretty sure its due to the order and/or timing of css being loaded although I might be dealing with more than one issue.
What's the "right" way to ensure everything, from an animation standpoint, is loaded and ready in order to make the animations work on load?
Have you looked at something like an HTML5 loader to load your initial assets when the DOM is loaded. There is a jQuery plugin, I know it is not Angular and another library, but it may help your order of operation.
http://gianlucaguarini.github.io/jquery.html5loader/
You can try nganimate , an easy documentation for you to refer
https://docs.angularjs.org/api/ngAnimate
I ran into an interesting issue. I'm pretty sure that the answer is very simple, but I just couldn't figure it out so I thought I look for some help.
Basically, my carousel doesn't slide. It just switches image. I even tried copying the exact HTML from the bootstrap site into my own page and it still doesn't slide. In application.js, the initialization is also has no argument.
// carousel demo
$('#myCarousel').carousel()
I notice that next and prev classes are added to each item when clicking pref/next button, but it doesn't seem to do the same thing on mine. I didn't see anything wrong when I debugged either.
What am I missing? I tested this in both latest Chrome and Safari.
You also have to add bootstrap-transition for the sliding to work, like so:
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
I was having the same issue but with bootstrap v2.0.3 (which has transition bundled in), ended up adding the slide class to the carousel div
<div id="myCarousel" class="carousel slide">
then you just call:
$('#myCarousel').carousel();
I think you need
$('#myCarousel').carousel('cycle');
Pls also see:
How can I make the Bootstrap js carousel automatically cycle as soon as the page loads?
Here is a working example. It's probably something minor your missing.
http://jsfiddle.net/chapmanc/Vza6F/1/
Do you just put that JavaScript in a <script> tag?
<script>
$('.carousel').carousel({
interval: 1000
});
</script>
check the css files that you have included. Try and add the bootstrap.css file as well in addition to bootstrap.min.css. It worked for me .
I've got a page containing a lot of images, which are initially hidden from view as I'm using tabbed divs (ie. hiding some divs using CSS display:none).
Therefore, when then page loads, it takes ages to load all of the images, which looks like the page is slow (as the loading bar on the browser doesn't complete for 10+ seconds).
I would like a way of not loading images until they are visible on the page.
I've played around with jQuery LazyLoad, however this only seems to load images when scrolling the browser (which doesn't work for tabbed divs).
Therefore, is there a way of changing LazyLoad to work like this, or is there a better way of doing this?
Thanks!
Maybe jQuery Tabs could do what you need, with ajax call on tabs...
How do you display your hidden divs?
One plan of attack:
Instead of putting the image URL in the src attribute of the img tag, put it somewhere else (e.g. a hidden span with a particular class above it) and when showing the div, iterate through all the img tags and set the src to the URL it should have had.
As a method it's definitely got some downsides.
If you're using (or can use) the HTML5 doctype, you can use the "data-" prefix for tag attributes:
<img src="" data-src="/path/to/image" style="display: none" />
And then you can use Javascript to fill the src with the data-src:
$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));
If your only goal is to 'hide' the progress bar which is taking so long due to the large number of images, I'd go for some kind of AJAX solution, since that way the progress bar is not 'used'. It does introduce more complexity in the way you want to load your HTML elements (and possibly when).
I personally don't like using HTML attributes for anything other than their original purpose, so storing the path in another attribute and switching when needed would not be my first option. Instead, I'd try to create a JavaScript array (id => path) and update the separate HTML IMG elements when needed.
Good luck! ;)
I have tried that lately and have to say that this is not possible with js anymore. Maybe it has never been...
Projects like lazyload have always proclaimed that they would stop all images from loading on startup, but you can see in firebug that this does not work. The images are even loaded twice, on domready and when you start scrolling...
Your only choices would be ajax on the on hand or doing something like this:
<img src="transparent.gif" alt="" rel="real image source" />
and then switch attributes when the divs become visible, so the image starts loading.
This works fine as well at least if you don't need google indexing them.
Hope that helps! :)
Edit: Hm, why did I get a -1 when I was just givin an answer? Just have a look at pages with lazyload and enable firebug and then scroll the page. It was even said here on stackoverflow and in the comments for the lazyload plugin that this is the only solution at the moment ... :(
I was unaware of this previously, but LazyLoad does support triggering from events:
http://www.appelsiini.net/projects/lazyload
If anyone needs a hand on how I did this, let me know!