So I'm trying to do this example from Zurb, but when I create the pie chart (even when I copy and paste the code they have to show the example), the chart goes crazy and tries to fill up the entire page. I know that it tries to take up the entire width of the element it's under, but then when I resize the width of the element, the chart only shrinks in size, but doesn't move back up, so ultimately, it's still taking up the entire space.
This is the main code:
<div style="margin-left: 15px">
<h4>Points: 3.75</h4>
<span>Rank 4</span>
<div class="progress success basic">
<span class="meter" style="width: 97%">Top: 97%</span>
</div>
<span>Tutored 7 times</span>
<span>Missed 2 tutoring sessions</span>
<div class="row graphs">
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example1">
<li data-value="60">Water Buffalo</li>
<li data-value="20">Bison</li>
<li data-value="12">Sheep</li>
<li data-value="32">Goat</li>
<li data-value="50">Shetland Pony</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example2" data-options="{"donut":"true"}">
<li data-value="60">Pepperoni</li>
<li data-value="20">Sausage</li>
<li data-value="12">Cheese</li>
<li data-value="32">Mushroom</li>
<li data-value="50">Chicken</li>
<li data-value="24">Other</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example2"></div>
</div>
</div>
</div>
</div>
</div>
My css which is under the head:
<link href="/res/css/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css"/>
And js which is on the bottom of the page:
<script src="/res/js/pizza.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/res/js/vendor/snapsvg.min.js"></script>
This is how it looks like:
Edit: Ok, so apparently when I name the id of the pie chart to 'donut', it works for some reason. I tested it by changing the ids, and only donut seems to work right now, but this won't work for me, because I have multiple pie charts needing to be shown.
Edit2: Seems like adding the style max-height: 480px seems to be a temporary fix.
`
Points: 3.75
Rank 4
<div class="progress success basic">
<span class="meter" style="width: 97%">Top: 97%</span>
</div>
<span>Tutored 7 times</span>
<span>Missed 2 tutoring sessions</span>
<div class="row graphs">
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example1">
<li data-value="60">Water Buffalo</li>
<li data-value="20">Bison</li>
<li data-value="12">Sheep</li>
<li data-value="32">Goat</li>
<li data-value="50">Shetland Pony</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example2" data-options="{"donut":"true"}">
<li data-value="60">Pepperoni</li>
<li data-value="20">Sausage</li>
<li data-value="12">Cheese</li>
<li data-value="32">Mushroom</li>
<li data-value="50">Chicken</li>
<li data-value="24">Other</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example2"></div>
</div>
</div>
</div>
</div>
'donut' is in your code in data-options
Your css class 'large-10 small-8 columns' is not defined in the pizza.css, maybe you need another file like : foundation.css.
If you don't want to add that big file, try to replace or just create a new css class
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
By
<div style="width: 200px; height: 200px;">
<div id="example1"></div>
</div>
or by the size that you want.
Related
I am working with AJAX.
I make a GET request that returns a raw HTML string with the contents of a webpage. I am trying to find a way to extract all of the elements in between the opening and closing div tags:
<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">
<!-- Trying to extract the children here -->
</div>
I've tried the following regex:
var div_result = result.match('(<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">)[^]*(</div>)').toString();
Which doesn't work properly. Over the div of .main-container, there is a div that contains this div. When I use this div, it returns the <\div> of the parent div, and not its own <\div>.
Is there any way to extract the text between the opening and closing div tags (<div ..> and </div>) which is only the first occurrence?
Edit: Added expected and actual results of the regex
This is what it's supposed to return:
<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">
<div class="row">
<!-- <div class="col-sm-12" role="heading"> -->
<div role="heading">
<div class="region region-header">
</div>
</div>
<section>
<a id="main-content"></a>
<div class="region region-content">
<section class="views-element-container block block-views block-views-blockabout-us-changing-images-block-3 clearfix" id="block-views-block-about-us-changing-images-block-3">
<div class="form-group">
<div class="view view-about-us-changing-images view-id-about_us_changing_images view-display-id-block_3 js-view-dom-id-f2624873734f13a6913b256416a10ff6d932a3677c7b77a637cdd2db4a34b6d8">
<div class="view-content">
<div class="about-images views-row">
<div class="views-field views-field-field__about-us-changing-image-2">
<div class="field-content"> <img src="/sites/default/files/2018-07/team_1.jpg" width="2000" height="1000" alt="team" typeof="foaf:Image" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<nav role="navigation" aria-labelledby="block-aboutusteam-menu" id="block-aboutusteam">
<h2 class="visually-hidden" id="block-aboutusteam-menu">About Us: Team</h2>
<ul class="menu menu--about-us-team nav">
<li class="expanded dropdown active">
OUR TEAM <span class="caret"></span>
<ul class="dropdown-menu">
<li>
ABOUT US
</li>
<li>
CAREERS
</li>
<li>
LOCATIONS
</li>
</ul>
</li>
</ul>
</nav>
<div class="views-element-container form-group">
<div class="view view-about-us view-id-about_us view-display-id-page_3 js-view-dom-id-397ff9a567cc56e3cd5c3a241a47b938891ffac5bf429f45429bea3f12e2f041">
<div class="view-content">
<div class="nav-buttons"></div>
<div class="nav-buttons"><span class="views-field views-field-field-menu-link-1"><span class="field-content nav-buttons">ABOUT US</span></span> <span class="views-field views-field-field-menu-link-2"><span class="field-content nav-buttons">CAREERS</span></span>
<span class="views-field views-field-field-menu-link-3"><span class="field-content nav-buttons">OUR TEAM</span></span> <span class="views-field views-field-field-menu-link-4"><span class="field-content nav-buttons">LOCATIONS</span></span>
</div>
<div class="nav-buttons"></div>
<div class="nav-buttons"></div>
<div class="nav-buttons"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
This is what it actually returns:
<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">
<div class="row">
<!-- <div class="col-sm-12" role="heading"> -->
<div role="heading">
<div class="region region-header">
</div>
</div>
<section>
<a id="main-content"></a>
<div class="region region-content">
<section class="views-element-container block block-views block-views-blockabout-us-changing-images-block-3 clearfix" id="block-views-block-about-us-changing-images-block-3">
<div class="form-group">
<div class="view view-about-us-changing-images view-id-about_us_changing_images view-display-id-block_3 js-view-dom-id-b47f64080ec9b40e5e3c78370baead058f8da13fd70c4b5e10f54261cac8abef">
<div class="view-content">
<div class="about-images views-row">
<div class="views-field views-field-field__about-us-changing-image-2">
<div class="field-content"> <img src="/sites/default/files/2018-07/team_1.jpg" width="2000" height="1000" alt="team" typeof="foaf:Image" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<nav role="navigation" aria-labelledby="block-aboutusteam-menu" id="block-aboutusteam">
<h2 class="visually-hidden" id="block-aboutusteam-menu">About Us: Team</h2>
<ul class="menu menu--about-us-team nav">
<li class="expanded dropdown active">
OUR TEAM <span class="caret"></span>
<ul class="dropdown-menu">
<li>
ABOUT US
</li>
<li>
CAREERS
</li>
<li>
LOCATIONS
</li>
</ul>
</li>
</ul>
</nav>
<div class="views-element-container form-group">
<div class="view view-about-us view-id-about_us view-display-id-page_3 js-view-dom-id-2550c3cf05f278ecbed10aa27942784678825c143bb247acf4fff74ae465e5b6">
<div class="view-content">
<div class="nav-buttons"></div>
<div class="nav-buttons"><span class="views-field views-field-field-menu-link-1"><span class="field-content nav-buttons">ABOUT US</span></span> <span class="views-field views-field-field-menu-link-2"><span class="field-content nav-buttons">CAREERS</span></span>
<span class="views-field views-field-field-menu-link-3"><span class="field-content nav-buttons">OUR TEAM</span></span> <span class="views-field views-field-field-menu-link-4"><span class="field-content nav-buttons">LOCATIONS</span></span>
</div>
<div class="nav-buttons"></div>
<div class="nav-buttons"></div>
<div class="nav-buttons"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<footer class="footer container" role="contentinfo">
<div class="region region-footer">
<nav role="navigation" aria-labelledby="block-bootstrap-subtheme-footer-menu" id="block-bootstrap-subtheme-footer">
<h2 class="visually-hidden" id="block-bootstrap-subtheme-footer-menu">Footer menu</h2>
<ul class="menu menu--footer nav">
<li>
Contact
</li>
</ul>
</nav>
</div>
</footer>
</div>
Regex is probably not the best way to go about this.
The DOMParser is now widely supported in all major browsers, and allows you to turn an HTML string into a dummy DOM element that you can manipulate and perform operations on (same as any other genuine DOM element).
var htmlString = "<div role=\"main\" class=\"main-container js-quickedit-main-content\" style=\"padding:0px;margin:0px;\"><div>First child</div><div>Second child</div><div>Third child</div></div>";
var parser = new DOMParser();
var doc = parser.parseFromString(htmlString, "text/html");
var parent = doc.querySelector(".main-container");
var children = parent.childNodes;
children.forEach(child => console.log(child));
The new DOMParser().parseFromString() method accepts two arguments and returns a dummy HTML element that you can manipulate directly in javascript without ever creating an actual element in the DOM. The first argument is the string to parse, and the second is the type of text content (it can also parse XML)
I use Node.childNodes to retrieve the child elements
I use element.querySelector() in order to select the parent div that has a class of main-container
I use Array.prototype.forEach() to simply cleanly log out the children that are retrieved
The htmlString variable above is the equivalent of the following:
<div role="main" class="main-container js-quickedit-main-content" style="padding:0px;margin:0px;">
<div>First child</div>
<div>Second child</div>
<div>Third child</div>
</div>
You match returns array of matches where first element is whole string, second element is div open tag, and the third is div closing tag.
You should group content between tags, and take second element from array:
var result = '<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">... </div>';
var div_result = result.match('<div role="main" class="main-container js-quickedit-main-content " style="padding:0px;margin:0px;">([^]*)</div>')[1].toString();
alert(div_result);
and of course do not forget to check if match was found
I actually got dynamic table made with ui-grid-b (3 columns). I got a function that generate the rows(not included but not necessary to solve) and I can remove the rows by clicking on them. My problem is, at the end of the modification of the grid, I need to get the data of the table and save it. For the moment, I don't know how to access all these datas concidering that the table is dynamic, so the number of row change and one row in the middle of others can be removed. Here is a demo of my table (with hardcoded rows, but its the code generated by a js.append() function.) : http://jsfiddle.net/xLrm2r1t/2/
<ul class="Table" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li style="text-align: center !important">
<label>Title</label>
</li>
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Header 1</div>
<div class="ui-block-b" style="width:34%">Header 2</div>
<div class="ui-block-c" style="width:33%">Header 3</div>
</div>
</li>
<li id="addedRow">
<a href="#" onclick="javascript:$(this).closest('li').remove();RowCount--;">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Info1</div>
<div class="ui-block-b" style="width:34%">Info2</div>
<div class="ui-block-c" style="width:33%">Info3</div>
</div>
</a>
</li>
<li id="addedRow">
<a href="#" onclick="javascript:$(this).closest('li').remove();RowCount--;">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Info4</div>
<div class="ui-block-b" style="width:34%">Info5</div>
<div class="ui-block-c" style="width:33%">Info6</div>
</div>
</a>
</li>
</ul>
For the moment, I tried many ways with the functions .prevAll, .prev and prevUntil, but I just don't find a good way to do it.
I just want a way to get the value inside each cell of my dynamic table.
You could just give each element that has data you want a unique class they all share. Then simply select them all using that class, iterate over the jQuery array and grab the data you want from each.
<ul class="Table" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li style="text-align: center !important">
<label class="has-data">Title</label>
</li>
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a has-data" style="width:33%">Header 1</div>
<div class="ui-block-b has-data" style="width:34%">Header 2</div>
<div class="ui-block-c has-data" style="width:33%">Header 3</div>
</div>
</li>
<li id="addedRow">
<a href="#" onclick="javascript:$(this).closest('li').remove();RowCount--;">
<div class="ui-grid-b">
<div class="ui-block-a has-data" style="width:33%">Info1</div>
<div class="ui-block-b has-data" style="width:34%">Info2</div>
<div class="ui-block-c has-data" style="width:33%">Info3</div>
</div>
</a>
</li>
<li id="addedRow">
<a href="#" onclick="javascript:$(this).closest('li').remove();RowCount--;">
<div class="ui-grid-b">
<div class="ui-block-a has-data" style="width:33%">Info4</div>
<div class="ui-block-b has-data" style="width:34%">Info5</div>
<div class="ui-block-c has-data" style="width:33%">Info6</div>
</div>
</a>
</li>
</ul>
Then:
var elements = $('.has-data');
$.each(elements,
function (index, object) {
var value = $(object).text();
// value now has the text content of the current element
}
);
So for example HTML above the value variable would have the following values for each iteration:
Title, Header 1, Header 2, Header 3, Info1, Info2, Info3, Info4, Info5, Info6
I am trying to implement a list of data where each of the items, have a tab (pills actually) menu.
The problem is that when I do this, they are interfeering with each other, making it only possible to have 1 active tab at a time, even though they have different id's.
Here is how i am doing it:
First I have one of the menus of tabs/pills for one of the items in the list:
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a></li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a></li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a></li>
</ul>
</div>
</div>
</div>
And here is the content divs for holding the associated datas:
<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>
aaaaaaaa11111111111
</div>
</div>
<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>
bbbbbbb11111111
</div>
</div>
<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>
cccccccccc1111111
</div>
</div>
I have created a jsfiddle to show you the problem: http://jsfiddle.net/kx96pndg/
When one of the tabs is selected, you can see that the active content of the other nav menu dissapears.
I really hope someone can help me out here. Any help will be greatly appreciated.
You're missing <div class="tab-content"></div> around the tab-panes. See example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a>
</li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a>
</li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>aaaaaaaa11111111111</div>
</div>
<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>bbbbbbb11111111</div>
</div>
<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>cccccccccc1111111</div>
</div>
</div>
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave2'>Vis opgave</a>
</li>
<li><a data-toggle='tab' href='#rediger_opgave2'>Rediger Tekst</a>
</li>
<li><a data-toggle='tab' href='#admin_opgave_billeder2'>Administrer billeder</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='vis_opgave2' class='tab-pane fade in active'>
<div class='row'>aaaaaaaa22222222</div>
</div>
<div id='rediger_opgave2' class='tab-pane fade'>
<div class='row'>bbbbbbb222222222</div>
</div>
<div id='admin_opgave_billeder2' class='tab-pane fade'>
<div class='row'>cccccccccc2222222</div>
</div>
</div>
</div>
I think you can use this plugin. bootstrap-multitabs
Recently i switched to materialize (it's based on Bootstrap i guess) and i'm trying to make modal work. it just doesn't show up. the button is there but it triggers nothing. I'm using starter template from Materialize website.
All i did was copy and paste modal code from Materialize modal page. I put the code in starter template but it doesn't work. i also tested it on another theme based on materialize but that didn't work either.
also jQuery is loaded properly.
edit: it's index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right">
<li>Navbar Link</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<button data-target="#modal1" class="btn modal-trigger">Modal</button>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script> $(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});</script>
</body>
</html>
modal code:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
Here's a demo of Starter template
Here's download link of template
In the version v0.97.8 (October 30th, 2016) modal plugin has been refactored according to the updates from github. Now, the initialization of the plugin is done differently, like in the example below.
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
I think you forgot to attach the plugin to the button.
$(document).ready(function() {
$('.modal-trigger').leanModal();
});
Also change this line data-target="#modal1"
<button data-target="#modal1" class="btn modal-trigger">Modal</button>
In to this line data-target="modal1", you inserted # by mistake, a loudy error noticed me in console.
<button data-target="modal1" class="btn modal-trigger">Modal</button>
See the snippet below for working example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right">
<li>Navbar Link</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<button data-target="modal1" class="btn modal-trigger">Modal</button>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<script>
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
For updated code you should initialize
$(document).ready(function() {
$('.modal').modal();
});
I want to stick a div on top when scrolling the window.
Looks like Magellan of Foundation provides similar behavior. But I want to stick my custom elements(the div with attribute data-magellan-expedition="fixed") on top instead of Sub-Nav in Magellan's example.
<body>
<!-- Header and Nav -->
<nav id="nav" class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Foundation Magellan
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Sitemap</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active" >Item1</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Login</li>
</ul>
</section>
</nav>
<!-- End Header and Nav -->
<!-- Main Feed -->
<div data-magellan-expedition="fixed" >
<div id="calendar" class="row">
<dl id="calendar-per-day" class="sub-nav">
<script>
someCodeToCreateCalendar();
</script>
</dl>
<hr>
</div>
<div class="row">
<div class="large-12 columns">
<div id="baidumap"
style="height:300px; overflow: hidden; margin: 0;"></div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns">
<p>
very long content can be scrolled............
</p>
</div>
<div class="large-3 columns">
<div class="row">
<div class="large-11 large-centered columns">
<h4>Right side content</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-5 columns">
<p>© 2013 All Rights Reserved</p>
</div>
<div class="large-7 columns">
<ul class="inline-list right">
<li>About</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is full my code to try my thought. I want the calendar and map always stick on top when scrolling the window. But it does not work at all. Does anybody know how to do it?
Use CSS
.div-to-stick {
postion:fixed;
}
This will stick it to the top of the page on scroll.