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>
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 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 ?
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();
});
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>
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