I've been looking online now for a couple of weeks but can't seem to find a simple solution that works. I want to use Animate.CSS with Reveal.JS
I have the following code already:
<div class="reveal">
<div class="slides">
<!-- Intro -->
<section data-transition="zoom">
<div class="headlines-intro">
<p class="animated zoomIn">Headlines</p>
<h2 class="decorated animated fadeInDown delay-1s"><span><div id="day"></div> <div id="month"></div></span></h2>
</div><!-- headlines-intro -->
</section>
<!-- /Intro -->
<!-- Greeting -->
<section data-transition="zoom" data-autoslide="5000">
<h1 class="greeting wow hinge">Goedemorgen!</h1>
</section>
<!-- /Greeting-->
</div><!-- /slides -->
</div><!-- /reveal -->
All the animations now trigger when the page loads but I want them only to be loaded when the active section is in view. How do I achieve this? My JS/Jquery skills are very basic.
Related
What I would like to do is an animation where there is the sky and mountains of different colors with some text in the middle and when I scroll they come overlapping one at a time (as if they cover each other).
I've tried looking for different tutorials or documentation and I can not do it
what should happen:
The result should be that when scrolling the images of the mountains with the text overlap each other and when you get to the last image the site can be scrolled normally.
i don't have any preference for the js library that will be used
below some codepen links with examples of things i tried to do:
here is the html that i should use with the image links:
<div class="debug">
<label><input type="checkbox"> Debug</label>
</div>
<div class="parallax">
<div id="group" class="parallax__group">
<div class="parallax__layer parallax__layer--base1">
<img src='https://tacweb-test.azurewebsites.net/img/mountain-dark-green.svg'>
</div>
<div class="parallax__layer parallax__layer--base">
<!-- <div class="title">Base Layer</div> --><img src='https://tacweb-test.azurewebsites.net/img/mountain-white.svg'>
</div>
<div class="parallax__layer parallax__layer--back">
<!-- <div class="title">Background Layer</div> -->
<img src='https://tacweb-test.azurewebsites.net/img/mountain-green.svg'>
</div>
<div class="parallax__layer parallax__layer--deep">
<!-- <div class="title">Deep Background Layer</div> -->
<img src='https://tacweb-test.azurewebsites.net/img/clouds.svg' id='clouds'>
</div>
</div>
https://codepen.io/habby1337/pen/xxrZMEa (the one that works a bit better)
https://codepen.io/habby1337/pen/xxrOOqN
I copied the example code for the materialize slider and pasted it into my html.
I linked the html with a JavaScript file, where I placed an
M.AutoInit();
Which should initialize all JS components of materialize.css
(Carousel works in my html)
This is the related html:
<div class="row ">
<div class="col s12 m12 ">
<div class="slider">
<ul class="slides">
<li>
<img src="https://lorempixel.com/580/250/nature/4">
<!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</div>
</div>
And this is how I linked to the JavaScript: First materialize.js that app.js where I M.AutoInit();
<script type="text/JavaScript" src="../js/materialize.js"></script>
<!-- <script type="text/JavaScript" src="../js/materialize.min.js"></script> -->
<script src="../app.js "></script>
</html>
I am confused, because the carousel works within the same setting but not the slider…
2 things to change in your code:
Make sure your initialization code is executed just after the DOM Content is totally loaded
Use the specific initializator of the slider instead of the generic one
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.slider');
var instances = M.Slider.init(elems);
});
Working example with your code: https://codepen.io/jhervas/pen/mddNrZX
I am trying to show/hide a div element. So it will list a hopspital, and then when it is clicked, it should display the following information using angularjs. If I delete 'ng-repeat="x in data" ng-if="x.collegeID == returnSchool()"' the dropdown effect will work, but obviously no data from my JSON object. If I delete 'class="drop-panel animated fadeIn"' then you don't need to click on the hospital name, all the information will be displayed for you (no dropdown effect). I can't quite figure out what I am doing wrong. I just want to be able to click on the hospital name, and then have the information associated with that hospital to display underneath it.
localHospital.html
<!-- resource start -->
<div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">
<!-- resource header & icon -->
<div class="list-item question"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>
<!-- resource data -->
<div class="drop-panel animated fadeIn">
<!-- phone number -->
<p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
<p class="resource-content">{{x.hospitalPhoneNumber}}</p>
<!-- location -->
<p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
<p class="resource-content">{{x.hospitalAddress}}</p>
<!-- directions -->
<p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p>
<p class="resource-content">{{x.hospitalDirections}}</p>
</div>
</div>
<!-- resource end -->
style.css
.drop-panel {
display: none;
}
.drop-panel.show {
display: block !important;
}
Try changing ng-if to ng-show. ng-if will add the element to the DOM only when the user clicks on it, which means it could be screwing up the style's show/hide behavior.
I ended up solving it by using the ng-show command, but I didn't just switch the ng-if with ng-show. I ended up getting rid of the drop-panel css class in the div, and adding 'ng-click="showDetails = ! showDetails"' and then and 'ng-show="showDetails"', which would toggle on and off as the div was clicked.
It was from this Show hidden div on ng-click within ng-repeat
localHospitals.html
<!-- resource start -->
<div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">
<!-- resource header & icon -->
<div class="list-item question" ng-click="showDetails = ! showDetails"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>
<!-- resource data -->
<div class="animated fadeIn" ng-show="showDetails">
<!-- phone number -->
<p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
<p class="resource-content">{{x.hospitalPhoneNumber}}</p>
<!-- location -->
<p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
<p class="resource-content">{{x.hospitalAddress}}</p>
<!-- directions -->
<p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p>
<p class="resource-content">{{x.hospitalDirections}}</p>
</div>
</div>
<!-- resource end -->
Trying to implement a section with Zurb Foundation 4.3.2. I've made sure to include the right couple of js and css files, and initialize foundation in the js script, but the section continues to collapse all the content and buttons together. The first section/tab doesn't show up either.
EDIT: Here's a JS Fiddle: http://jsfiddle.net/ethanova/R2SdH/ (my first, so if I performed some kind of worst practice, let me know)
After making the JSFiddle, I realized that it's working correctly on smaller dpi screens (it looks alright in the small area JSFiddle provides, even if clicking the tabs isn't working - I checked with my actual code and making the browser window smaller switches the section to Accordion and it works great). So it seems that it's only on the larger screen sizes when it reverts to Tabs is when the section collapses and doesn't work.
Any ideas on what's going wrong? Thanks guys.
<!-- foundation zurb -->
<link rel="stylesheet" href="./css/foundation.min.css">
<link rel="stylesheet" href="./css/normalize.css">
<!-- JAVASCRIPT -->
<script src='../../js/vendor/jquery.js'></script>
<!-- zurb foundation -->
<script src="../../js/foundation.min.js"></script>
<script src="../../js/vendor/custom.modernizr.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<div class='row'>
<div class='small-12 columns'>
123 Street Name <br /> City, ST Zip <br />
</div>
</div>
<div class='row'>
<div class='large-8 columns'>
<div class="section-container auto" data-section data-section-resized>
<section class="active">
<p class="title" data-section-title>Details</p>
<div class="content" data-section-content>
<p>Things like Comments, Area, Use Type, Current Use, Sqft, Taxes, Value, Status</p>
</div>
</section>
<section>
<p class="title" data-section-title>Improvements</p>
<div class="content" data-section-content>
<p>Any improvements data</p>
</div>
</section>
<section>
<p class="title" data-section-title>Mortgage</p>
<div class="content" data-section-content>
<p>Mortage data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lease</p>
<div class="content" data-section-content>
<p>Lease data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lien</p>
<div class="content" data-section-content>
<p>Lien data.</p>
</div>
</section>
</div>
</div>
<div class='large-4 columns'>
Map Goes Here
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
Related people
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
Related properties
</div>
</div>
After some more testing I figured it out. I downloaded the source code from their Section page and started inserting my code trying to get it to work. The reason I got here in the first place was because my section disappeared at one point and another stackoverflow answer said just add "data-section-resized" to the section container div. Well, don't. That got it back to being invisible. I had removed some js from my header to try to closer match theirs, and it was a mistake. This is what my section and header looks like now:
Header:
<!-- foundation zurb -->
<link rel="stylesheet" href="../../css/foundation.min.css">
<link rel="stylesheet" href="../../css/normalize.css">
<link rel="stylesheet" href="../../css/general_foundicons.css">
<!-- zurb foundation -->
<script src="../../js/foundation/foundation.js"></script>
<script src="../../js/foundation/foundation.section.js"></script>
<script src="../../js/vendor/custom.modernizr.js"></script>
Supposedly, foundation.min.js includes all the others like section. I can confirm if you try to replace foundation.js and foundation.section.js with foundation.min.js it will not work. If you keep section.js and change to foundation.js to foundation.min.js it will not work. You have to have foundation.js and foundation.section.js.
Section:
<div class='row'>
<div class='large-8 columns'>
<div class="section-container auto" data-section>
<section class="active">
<p class="title" data-section-title>Details</p>
<div class="content" data-section-content>
<p>Things like Comments, Area, Use Type, Current Use, Sqft, Taxes, Value, Status</p>
</div>
</section>
<section>
<p class="title" data-section-title>Improvements</p>
<div class="content" data-section-content>
<p>Any improvements data</p>
</div>
</section>
<section>
<p class="title" data-section-title>Mortgage</p>
<div class="content" data-section-content>
<p>Mortage data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lease</p>
<div class="content" data-section-content>
<p>Lease data.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Lien</p>
<div class="content" data-section-content>
<p>Lien data.</p>
</div>
</section>
</div>
</div>
<div class='large-4 columns'>
Map Goes Here
</div>
</div>
I'm trying to get the jQuery gallerific plugin working at http://justrecip.es/ViewRecipes.aspx?recipeid=S9ML32WQO3&act=view . The gallery is loaded correctly, but neither the thumb grid nor the navigation (next/previous image) buttons work. There are no script errors, but it seems this is a JavaScript problem of some sort.
Try this
<div class="gallery-content">
<!-- Move controls above slideshow -->
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
jsFiddle example