Complex flash like animations used by Rally Interactive - html

I recently came across this site. http://beta.rallyinteractive.com/. The site uses some fairly complex/awesome animations. They are using only one script file that is minified. I expanded their script using chrome and tried to figure out how exactly they are achieving their animations. I have three questions:
Are their any resources out their that can point me in the right direction on how to create such cool animations.
Are they just using Html5 canvas element and no scripts like Raphael.js?
Is it worth it to learn the how to create canvas animations or do you think there is going to be some sort of Flash IDE that will take away the complexities of learning the API?
Thank you,
Tyrone

If you look at the page source, they have commented a list of javascript files they use.
<!--
<script src="/static/js/flush/events/Events.js"></script>
<script src="/static/js/flush/events/GlobalEvent.js"></script>
<script src="/static/js/flush/events/GlobalEvents.js"></script>
<script src="/static/js/flush/events/MouseEvent.js"></script>
<script src="/static/js/flush/display/Stage.js"></script>
<script src="/static/js/flush/display/Sprite.js"></script>
<script src="/static/js/flush/display/TraditionalSprite.js"></script>
<script src="/static/js/flush/geom/Point2D.js"></script>
<script src="/static/js/flush/utils/Tween.js"></script>
<script src="/static/js/flush/utils/Ease.js"></script>
<script src="/static/js/flush/utils/Utils.js"></script>
<script src="/static/js/flush/color/HEXColor.js"></script>
<script src="/static/js/flush/color/HSVColor.js"></script>
<script src="/static/js/flush/color/RGBColor.js"></script>
<script src="/static/js/rally/sprites/BioIn.js"></script>
<script src="/static/js/rally/sprites/BioShare.js"></script>
<script src="/static/js/rally/sprites/BioTweet.js"></script>
<script src="/static/js/rally/sprites/BigTweet.js"></script>
<script src="/static/js/rally/sprites/BigShare.js"></script>
<script src="/static/js/rally/sprites/NavArrow.js"></script>
<script src="/static/js/rally/CountText.js"></script>
<script src="/static/js/rally/BottomBar.js"></script>
<script src="/static/js/rally/Refresh.js"></script>
<script src="/static/js/rally/DribbbleLink.js"></script>
<script src="/static/js/rally/Icons.js"></script>
<script src="/static/js/rally/TriangleMask.js"></script>
<script src="/static/js/rally/Triangle.js"></script>
<script src="/static/js/rally/Rally.js"></script>
-->

Related

Why does main script not work when I place it under all other?

Version that works
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/purecounter/purecounter.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="https://kit.fontawesome.com/b0ca3cb0f7.js" crossorigin="anonymous"></script>
<script src="assets/js/main.js"></script>
Version that doesn't work
<script src="assets/js/main.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/purecounter/purecounter.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="https://kit.fontawesome.com/b0ca3cb0f7.js" crossorigin="anonymous"></script>
Does main javascript src needs to be placed at the bottom?
It doesn't work when I put it above all scripts.
It won't work if there are custom functions that you might be calling inside Main.js that are dependent on the other scripts which you are loading.
For eg - There is one script SWIPER JS and you might be calling your custom functions in your main.js i.e. to initialize SWIPER JS SLIDER, so until the dependent script i.e. swiper-bundle.min.js is not loaded the custom function inside main.js won't work.
You can check your console to understand what exact error you get.
Press F12 in your browser.

How to add timestamp in src URL in HTML

I am trying to acieve cache busting in index.html. Below is my code
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="<Value>" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="<Value>" crossorigin="anonymous"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js?v="+ (new Date).getTime()"' integrity="<Value>" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ricmoo/aes-js/e27b99df/index.js"></script>
</body>
I am trying to add date in bootstrap.min.js path but when I check link in Network tab, it shows
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js?v=%22+%20(new%20Date).getTime()%22
I want to know what should I put in my index.html file so that I will get correct timestamp value.
The problem is that (new Date).getTime() in the line
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js?v="+ (new Date).getTime()"' integrity="<Value>" crossorigin="anonymous"></script>
is not executed by Javascript, so you are simply appending it as an hardcoded string, and this is why you see that URL.
The correct way to add a timestamp, if you want to do it through Javascript, is this:
<script>document.write("<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js?v=" + Date.now() + "' integrity='<Value>' crossorigin='anonymous'><\/script>");</script>
In this way you are including a script which includes bootstrap.min.js and appends a timestamp to its URL.
See here for a similar question.
The timestamp can also be included from server side, if you prefer. Example for Java/JSP:
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js?v=<%= new java.util.Date().getTime() %>" integrity="<Value>" crossorigin="anonymous"></script>
Side note: the value <Value> for your <script>'s integrity attribute is not valid. You should use the value provided by the Bootstrap CDN: see here.

Can't get Bootstrap to work consistently on a remote server

I am currently trying to push my website from my computer to a remote server, everything works fine except a few Bootstrap components (carousel and cards) which are animated with JS.
The problem is that locally it works just fine, my divs show up and do their things as expected, but on the remote server its just a blank area.
I tried replacing the CDNs and playing with them but nothing has changed.
Does anybody encountered this issue before or knows how to fix it?
Here are the CDN links in my <head>:
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu"
rel="stylesheet"
/>
<!-- CSS Stylesheets -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome -->
<script
defer
src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"
></script>
<!-- Bootstrap Scripts -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
I do see errors in my console every time the page loads I get:
GET coowoork.000webhostapp.com/js/index.js net::ERR_ABORTED 404
index.html:168
GET coowoork.000webhostapp.com/images/techcrunch.png 404 VM143:137 DomDistiller debug level: 0
GET coowoork.000webhostapp.com/images/techcrunch.png 404

DataTables sort icons not showing

I tried hours to solve this problem, can anyone tell me how can I get those icons or tell me how to make a custom CSS file
files I linked
dataTables.bootstrap.min.css
and following script files
<script src="js/lib/datatables/datatables.min.js"></script>
<script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="js/lib/datatables/cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="js/lib/datatables/cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="js/lib/datatables/cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="js/lib/datatables/cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

Jquery UI script tag error

<head>
<title>Mary</title>
<link href="http://localhost/stylesheet.css" type="text/css" rel="stylesheet">
<link href="http://localhost/mary/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="http://localhost/jscript.js"></script>
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"/>
</head>
I just got done learning about jquery ui and am trying to include it in my very first webpage, but it's not working. I checked all of the links on my server, and they link up to the documentation, but the only way the content shows up when I check the webpage on my server is if I comment out the last script tag. But if I do that, I can't access the jquery ui, right? I'm so confused. I'm so excited to try all of this stuff out, but I can't figure out how to make it work :( Any help is greatly appreciated.
karthikr's answer is most likely the problem, but if that doesn't work try referencing the URL hosted by jquery itself.
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Assuming all the static files are properly referenced,
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"/>
should be
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"></script>
Note the end of the script tag /> should be ></script>