I am using design Material Design. I choose to use used FABs in Card to display content composed of different types of objects. Now, I try to add modal bottom sheet style with it and use the floating action button as a trigger of the modal, but nothing appear below. My codes are the following below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
<a class="btn-floating btn-large halfway-fab light-green accent-3" href="#modal2"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$('.modal').modal();
});
</script>
jquery-2.1.1.min.js library must be added before than materialize.min.js library.
Try this code;
$(document).ready(function() {
$('.modal').modal();
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
<a class="btn-floating btn-large halfway-fab light-green accent-3" href="#modal2"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
</body>
</html>
Looks like in Materialize you reference a modal using href="#modal2" - not data-modal. Try that.
Src: http://materializecss.com/modals.html
Related
I am using swup for page transitions but nothing ever happens for my specific website. I got it to work on a simple two-page HTML example website, but doing the exact same thing for my portfolio is not working. I have been trying to figure this out for days now and I'm getting desperate.
What I've Tried
Using the script link from unpkg.
Creating a full start-up document to install Node on my website itself.
Putting the single const variable in a separate document and in the HTML file itself.
Putting the 'main id="swup" class="transition-fade' tag only on a portion of my website where I want it to point.
Checked to make sure there are no typos on my CSS classes.
Changing the file source to start with ./or/or none.
What I Need
I want to make a page transition from the portfolio part of my website to make a fade-in to the next page.
Relevant code
.transition-fade {
opacity: 1;
transition: .5s;
}
html.is-animating .transition-fade {
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#500&family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/CSS/style.css">
<link id="theme-style" rel="stylesheet" href="">
<script defer src="/app.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script>
<script defer src="/index.js" type="text/javascript"></script>
<script defer src="/node_modules/swup/dist/swup.min.js"></script>
<script defer>
const swup = new Swup();
</script>
<title>Kim Lachance</title>
</section>
<main id="swup" class="transition-fade">
<section id="post-section" class="s1">
<div class="main-container">
<h3 style="text-align: center;">Some of my projects</h3>
<div class="post-wrapper">
<div>
<div class="post">
<img class="thumbnail" src="./images/tindog.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Tindog</h6>
<p class="post-intro">Fictional dog dating app website made with a Bootstrap framework</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/omnifood.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Omnifood</h6>
<p class="post-intro">Fictional food delivery app website made with HTML, CSS and jQuery</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/klmedia.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">KL Media</h6>
<p class="post-intro">Website for my own freelancer marketing company</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/drumkit.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Drumkit Javascript</h6>
<p class="post-intro">An exercise I built to flex my javascript muscles</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/dicee.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Dicee Game Javascript</h6>
<p class="post-intro">An exercise I built to flex more javascript muscles</p>
Visit
</div>
</div>
</div>
</div>
</div>
</section>
</main>
My next page also has all of these tags and scripts on them.
Thank you!
I am trying to get the feature block to show up on the page when I click the open button, but it is not doing anything. I have a sneaking suspension this has to do with the CDNs I'm importing and their position. Or this could have something to do with the order of the relevant tap target sections in my code, I'm not really sure. I followed the Materialize example of how to set this up verbatim, yet it seems like I can't quite get it right.
<!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" />
<title>Mitchell Data Science</title>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/init.js"></script>
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container-fluid">
<a id="logo-container" href="index.html" class="brand-logo" style="padding-left: 30px;">Mitchell Data Science</a>
<ul class="right hide-on-med-and-down" style="padding-right: 30px">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div id="index-banner" class="parallax-container" style="height: 350px">
<div class="section no-pad-bot">
<div class="container">
<h1 class="header center teal-text text-darken-2" style = "font-weight: 600;">Mitchell Data Science</h1>
<div class="row center">
<h5 class="header col s12 dark" >Explore, Discover, Understand…</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_1.1.jpg" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="col lg9 m9 s12">
<div class="container">
<br>
<h1> Heroes of Pymoli Data Munging</h1>
<hr><br>
</div>
<div class="row">
<div class="col-3">
<div id="list-example" class="list-group" data-offset="0">
<a class="list-group-item list-group-item-action" href="#list-item-1">Abstract </a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Wrangled Data </a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Summary</a>
</div>
</div>
<!-- Element Showed -->
<div class="fixed-action-btn">
<a id="menu" class="waves-effect waves-light btn-large btn-floating" ><i class="material-icons">menu</i></a>
</div>
<!-- Tap Target Structure -->
<div class="tap-target" data-target="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
<a class="btn" id="open">open</a>
<a class="btn" id="close">Close</a>
<script>
$('#open').click(function(){
$('.tap-target').tapTarget('open');
});
</script>
<div class="col-9">
<div data-spy="scroll" data-target="#list-example" data-offset="0"
class="scrollspy-example change-color-black">
<h4 id="list-item-1">Abstract</h4>
<p>
<br><br><br><br>
<img src="static/media/heros_fantasy.jpg"
alt="Heroes of Pymoli Abstract Picture">
<p>
In this project, I have explored a game called Heroes Of Pymoli. I will be doing some data
wrangling to clean and organize my dataset, and strategically group the data to derive
educated observations and assumptions.</p>
<br><br><br><br>
</p>
<h4 id="list-item-2">Wrangled Data</h4>
<p>
<br><br><br>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/TP_hero.PNG"
alt="Total Players">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/purchasing_analy_hero.PNG"
alt="Purchasing Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_count_analy_hero.PNG"
alt="Gender Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_purchasing_analy_hero.PNG"
alt="Purchasing Analysis by Gender">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/age_analy_hero.PNG"
alt="Age Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_pop_items.PNG"
alt="Most Popular Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_profitable_items.PNG"
alt="Most Profitable Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/top_spenders.PNG"
alt="Top Spenders">
<br><br><br><br><br>
</p>
<h4 id="list-item-3">Summary</h4>
<p>
<br><br><br><br>
- The 20 – 24 yo age group is the biggest age demographic for the game accounting for 44.79% of
the overall players. The two lowest volumes of players by age are the under 10 yo group at 2.95%
and the 40+ group at 2.08%.
<br><br>
- The overall total revenue from the game is $2,379.77.
<br><br>
- From the business standpoint, the 35-39 yo age group would be a goo place to focus the
marketing efforts. Even though their total purchase value is relatively small ($147.67) in
comparison to some other demographics, they spend the most on average per purchase ($3.60).
<br><br>
- Item number 178, the Oathbreaker, Last Hope of the Breaking Storm is both the most popular
item at 12 overall purchases, and the most profitable item at a total purchase value of $50.76.
<br><br>
- The player with the Screen Name Lisosia93 is the most prolific buyer with 5 purchases. This
player has spent a total of $18.96 with an average purchase amount of $3.79.
<br><br>
- Of the all the active players, the vast majority are male (84.03%). There also exists, a
smaller, but notable proportion of female players (14.06%).
<br><br><br><br><br>
</p>
</div>
</div>
</div>
</div>
<div class="container">
<h3>Project Links</h3>
<ul>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-"
target="_blank">Heroes Of Pymoli Data Munging</a>
</li>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/blob/master/Heroes_Of_Pymoli_Data_Analysis_FINAL.ipynb"
target="_blank">Heroes Of Pymoli Kernel (Code)</a></li>
<li>Data</li>
</ul>
<br><br>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light" style = "font-weight: bold">A cutting edge approch to data exploration and vizualization.</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_2.jpg" alt="Unsplashed background img 3"></div>
</div>
<footer class="page-footer black">
<div class="row">
<h4>
<a id="logo-container" class="brand-logo" style="padding-left: 25px;">MDS</a>
</h4>
</div>
<div class="footer-copyright" style="padding-left: 25px">
<div class="container-fluid">
Made by <a class="brown-text text-lighten-3"> Howard G. Mitchell III</a>
</div>
</div>
</footer>
<!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<!--
<script> document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems, tapTarget('open'));
});</script> -->
</body>
</html>
Be sure to initialise the Feature Discovery:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.tap-target').tapTarget();
});
https://materializecss.com/feature-discovery.html#initialization
I connected my templete.php to style.css but when I am changing anything in templete.php, it's showing the result but if I change anything in the stylesheet, it shows no result. what should I do?
My website is not live. i am doing it on wamp server.
templete.php
<!DOCTYPE html>
<html>
<head lang="en">
<title>SEO SOBER</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Merienda"
rel="stylesheet"
<head>
<body>
<header id="particles-js">
<?php
include "navbar.php";
?>
</header>
<!--..... header ends.......-->
<div class="clients">
<h3>Our Clients</h3>
<img class="client-img" src="images/clients.png">
</div>
<!--clients ends -->
<div class="container-About">
<div class="text">
<h3>SEO SOBER Digital Story</h3>
<p>about company</p>
</div>
<div class="button">
READ MORE
</div>
</div>
<!-- about ends -->
<div class="features">
<h3>Services</h3>
<div class="maincontainer">
<!-- first card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/seo-gif-10.gif">
<h4>Search Engine Optimization</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- second card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/web-design-service.gif">
<h4>Web Design</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- third card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/Development.gif">
<h4>Web Development</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<!-- fourth card-->
<div class="thecard">
<div class="thefront">
<div class="seo_card">
<img class="services-image" src="images/social.gif">
<h4>Social Media Marketing</h4>
</div>
</div>
<div class="theback">back of the card</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
<!-- services end-->
<script src="js/particles.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
please tell me what to do...
I am trying to do changes for half an hour but nothing happenes.
I also add the particles effect. is that the problem?
i think you are loading your cache, you have to hard reset your page. Try reloading like this on your page:
> -Hold the Ctrl key and press the F5 key.
> -Hold the ⇧ Shift key and click the Reload button on the navigation toolbar.
> -Hold the Ctrl key and click the Reload button on the navigation toolbar.
> -Hold the ⇧ Shift key and press the F5 key.
I want to make modal appear when I click on sign up. But the problem is that The modal is not appearing although I have checked the code many times. The modal code when just used without the other content works just fine. The source code is from W3Schools. I am sorry in advance for the way this code occurs, but How stackoverflow text editor works is beyond me. I am new to this,so please don't fry me if it's an idiotic mistake
<!DOCTYPE html>
<html manifest="demo.htm.appcache">
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image.ico" href="Airbnb logo.ico">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/3.3.5/js/bootstrap.js"></script>
<style>
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<ul class ="nav nav-pills">
<li>Name</li>
<li class="divider-vertical"></li>
<li>Browse</li>
<li class="pull-right active">Homepage</li>
<li class="pull-right">
Sign Up <!-- Modal is declared here -->
</li>
<li class="pull-right"><a href="Log%20in.htm" >Log In</a></li>
<li class="pull-right"><a href="Help.htm" >Help</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
Learn More
</div>
</div>
<div class ="neighborhood-guides">
<h2>Neighbourhood Guides</h2>
<p>Not sure where to stay? We've created neighbourood guides for cities all around the world</p>
<div class="row">
<div class ="col-md-4">
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/0sX3jq" class = "growImage" width="100px">
</div>
</div>
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/an2HXY" class="growImage">
</div>
</div>
</div>
<div class ="col-md-4">
<div class ="thumbnail">
<div class="zoom">
<img src = "http://goo.gl/Av1pac" class="growImage">
</div>
</div>
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/vw43v1" class="growImage">
</div>
</div>
</div>
<div class ="col-md-4">
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/0Kd7UO">
</div>
</div>
</div>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class ="row">
<div class= "col-md-4">
<h3>Travel</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p>See how to travel on Airbnb</p>
</div>
<div class="col-md-4">
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p>Learn more about hosting</p>
</div>
<div class ="col-md-4">
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p>Learn about trust at Airbnb</p>
</div>
</div>
</div>
</div>
<div class ="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.zoom').mouseover(function(){
//moving the div left a bit is completely optional
//but should have the effect of growing the image from the middle.
$(this).stop().animate({"width": "110%","left":"0px","top":"0px"}, 400,'swing');
}).mouseout(function(){
$(this).stop().animate({"width": "95%","left":"15px","top":"15px"}, 200,'swing');
});;
});
</script>
</body>
</html>
Bootstrap 3.x requires jQuery 1.9.x or higher.
Your reference points to jQuery 1.3.2, which will not work with Bootstrap.
starting over...
I used Chrome to test it, and could not make it work with a link or a button. But when I checked the console I see that there is a javascript error:
Failed to load resource: net::ERR_FILE_NOT_FOUND bootstrap.js:15
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1
or higher
I got it to work by upgrading to jquery 1.10.2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
So I layed out my entire site with HTML and CSS. I then did some javascript, namely to handle some tab switching. Everything was working great. When I went to wire up the data, rather than putting my entire site in a polymer element, I put an auto-binding template around the bulk of the HTML then just used smaller elements within. The data is all working great, but now that javascript stopped working.
When you look at the DOM it looks a bit off, I'm not very familiar with how the shadow-dom works, so I don't know if this is right, but within #document-fragment I see an exact duplicate of everything I see after #document-fragment (ie "top", "middle", "tabs", etc)
Here is the relevant javascript and the full HTML:
$('.tab').on('click', function() {
$('.tab').removeClass('selected');
$('.content').hide();
$(this).addClass('selected');
var t = $(this).html();
$('.' + t).show();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-ajax/core-ajax.html">
<link rel="import" href="elements/air-appName.html">
<link rel="import" href="elements/air-appPropertyList.html">
</head>
<body>
<div id="main">
<template is="auto-binding">
<core-ajax auto handleAs="json" url="app.json" response="{{app}}"></core-ajax>
<div id="top">
<img id="imgLogo" src="images/app_AIR.png">
<div id="itemHeader">
<img id="imgDataQuality" src="images/DataQuality0.png">
<air-appName id="lblTitle" name="{{app.name}}">Loading</air-appName>
</div>
</div>
<div id="middle">
<div id="left">
<input id="txtSearch" type="text">
<img id="btnSearch" src="images/btnSearch.gif">
<air-appPropertyList id="appProperties" props="{{app.props}}"></air-appPropertyList>
</div>
<div id="right">
<div id="tabContent">
<!--TODO: Tabs need to be more dynamic-->
<div id="tabs">
<span class="tab">General</span>
<span class="tab">Technical</span>
<span class="tab">Contacts</span>
<span class="tab">Links</span>
<span class="tab">Desktop</span>
</div>
<div class="content General">
This is the general tab
</div>
<div class="content Technical">
<table-servers serversUrl="{{app.associatedServers}}"></table-servers>
</div>
<div class="content Contacts">
This is the Contacts tab
</div>
<div class="content Links">
This is the links tab
</div>
<div class="content Desktop">
This is the desktop tab
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="itemFooter">
</div>
</div>
</template>
</div>
<script src="scripts/vendor/jquery-1.11.1.min.js"></script>
<script src="scripts/vars.js"></script>
<script src="scripts/functions.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/ready.js"></script>
</body>
</html>