Can't get impress.js working - javascript

I tried to start with impress.js to create some HTML/CSS3 presentations.
Unfortunately I cannot get even the simplest example working.
<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">
<div id="start">
<p style='width:1000px;font-size:80px;text-align:center'>Creating Stunning Visualizations</p>
<p>Impress.js</p>
</div>
<div id="slide2" data-x="-1200" data-y="0">
<p style='width:1000px;font-size:80px;'>First Slide Moves From Left To Right</p>
<p>Impress.js</p>
</div>
</div>
<script type="text/javascript" src="../js/impress.js"></script>
<script type="text/javascript">impress().init();</script>
</body>
Howver, in Firefox (tested also in Chrome) I get the following error in dev console:
Empty string passed to getElementById() # impress.js:90
Any ideas?

Every div that you want to be a step in div#impress should have a class="step" added to it.
This code should work
<div id="impress">
<div class="step" id="start">
<p style='width:1000px;font-size:80px;text-align:center'>Creating Stunning Visualizations</p>
<p>Impress.js</p>
</div>
<div class="step" id="slide2" data-x="-1200" data-y="0">
<p style='width:1000px;font-size:80px;'>First Slide Moves From Left To Right</p>
<p>Impress.js</p>
</div>
</div>

Related

One background on grid divs and js scroll animation

I have a HTML grid and 4 divs in. On one hand I want to apply a single background image on these one. On the other hand, I want to translate the divs on scroll.
It works but when I scroll, the background image is not extended anymore.
<html>
<body>
<section id="home">
<div id="bloc1" class="bloc"> </div>
<div id="bloc2" class="bloc"> </div>
<div id="bloc3" class="bloc"> </div>
<div id="bloc4" class="bloc"> </div>
</section>
</body>
</html>
JS & CSS on JSFiddle : https://jsfiddle.net/SO3HSBF5/84wmv1cn/4/
Anyone can help me ?

Detect body scroll offset

I need to put the scrolling behaviour on the body rather than the HTML, due to using CSS Parallax. However, I have got an issue with adding sticky classes to my header using JavaScript.
I need to be able to detect that the body has scrolled, this works fine, however i'm unable to get the offset that the user has scrolled to!
I have tried everything when is online, for example:
$('body').scrollTop()
document.body.scrollTop
document.getElementsByTagName('body')[0].pageYOffset
None of this is working, it always returns 0!
Edit:
I can't modify any of the HTML apart from what is between the comments.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap" class="parallax">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
here is a codepen showing the various examples not working
https://codepen.io/anon/pen/RgPrQv
You are looking for
$(window).scroll(function() {
$(window).scrollTop();
});

Want to show the video by jquery but click event doesn't work

I am trying to show an video by using click event, but the click event doesn't trigger.
Here is the code:
<div id="video-section">
<div class="radial-progress">
<div class="r-circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
</div>
<div class="inset">
<i class="fa fa-caret-right"></i>
</div>
</div>
<iframe src="//player.vimeo.com/video/92371445"></iframe>
</div> <!-- end video-section -->
And this is my jquery codes
$('#video-section .radial-progress').on('click', function() {
$('#video-section > iframe').show();
});
You can see my live example here, it doesn't works for showing video.
Updated: I fixed myself. What happened is when I put the code in the last js file, there is another js get errors so it can't load this code. I also added a little code to make it play when play button is clicked.

Zurb Foundation 4 Section collapsing

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>

jQuery: Gallerific Half Working

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

Categories