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
Related
Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.
<!-- This is in my main HTML that I want nav in-->
<div id="nav-placeholder"></div>
<script>
$(function(){
$("#nav-placeholder").load("NavBar.html");
});
</script>
<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
<div class="header-column d-lg-none">
<div class="header-row">
<h1 class="font-weight-semibold text-7 mb-0">
<a href="index.html" class="
text-decoration-none text-color-light
custom-primary-font
">Dynamic</a>
</h1>
</div>
</div>
</div>
</header>
it's not a terrible practice, depending on what components you are going to use inside this method. E.g., Navbars and footers, no problem.
Have a look on this question: How to separate html text file into multiple files?
So I have about 20 projects to show on my website and since I don't want to create 20 HTML files for each of them, I use this script to link people to the specific projects they click on. And so the link is like: http://mywebsite.com/projects.html?option="project1"
The problem I notice is that it usually displays the first project for about 1 second or longer before it shows the project I click on, I don't know what's the cause, I don't know if it's a glitch. Is there a way to fix it?
The script and my html:
$(document).ready(function() {
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
}
<a href="projects.html?option=haivinh" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item">
<h3>Sleep infographic</h3>
<span class="category">Motion graphics</span>
<div class="imgwrapper">
<div class="imgcon">
<img src="images/thumb_item07.gif" />
</div>
<div id="view">view</div>
</div>
</div>
<!-- // .item -->
</div>
<!-- // .desktop-3 -->
</a>
HMTL of the project page:
<div class="container">
<div class="boxes" id="haivinh">
<div class="sidebar full-width">
<div class="desktop-6 tablet-12 columns">
<!--
.sidebar here is to used to apply the same CSS styles (padding, margin, font-size, and etc) applied to "left-sidebar" and "right-sidebar" templates
-->
<div class="box-info">
<h4 class="border-top">
Metro train ad</h3>
<p>The poster was made to promote the upcoming metro train system opening in Ho Chi Minh city in 2017. The idea is that our daily lives would be so much easier and more enjoyable going to work or school with Metro. </p>
</div>
<!-- // .box-info -->
</div>
<!-- // .desktop-6 -->
</div>
</div>
My guess would be that you default to showing project 1. You can tell this because your showDiv() function starts with a .hide(). As your function is not run until document.ready, you may see the initial setup for a short period before the function is run.
To fix this, make sure everything is hidden before running your js.
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.
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