I am a newbie to web design, and have been learning through forums like these, and have so far not found an answer to a really annoying error I am having. I am using Google Chrome Canary 47.0.2506.0 to render, Notepad++ to edit, and cannot get the Google Plus follow button to appear. I copied the code exactly from the Google Developers page, and have tried everything: I made sure JavaScript was enabled, it was, I even reinstalled chrome. My code is this:
Header:
<head>
<title>iBot Brainiacs</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
page content:
<main class="mdl-layout__content">
<div class="page-content">
</br>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="https://plus.google.com/107623689080156420982" data-rel="author"></div>
</br>
(note these are excerpts)
Does anyone have a solution, or a different way to do this?
Thanks
UPDATE: enitre code:
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.red-light_green.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!DOCTYPE html>
<html>
<head><title>iBot Brainiacs</title><link rel="stylesheet" type="text/css" href="stylesheet.css"><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"><script src="https://apis.google.com/js/platform.js" async defer></script></head>
<!-- Uses a header that contracts as the page scrolls down. -->
<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">iBot Brainiacs</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<a href="mailto:ibotbrainiacs#gmail.com" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">mail</i>
</a>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="waterfall-exp" />
</div>
</div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="about.html"><i class="material-icons">subject</i></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">collections</i></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">event</i></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">chat_bubble</i></a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Social Media</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
</br>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="https://plus.google.com/107623689080156420982" data-rel="author"></div>
</br>
<div class="demo-card-wide mdl-card mdl-shadow--16dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</br>
</div>
<div class="mdl-card__supporting-text">
Thank you for visting our website! I hope you enjoy your stay while learning about FLL
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="#Starting"class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</br>
</div>
</div>
</br>
</br>
</br>
</br>
</br>
<div id="Starting">
<div class="demo-card1-wide mdl-card mdl-shadow--16dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Getting Started</h2>
</div>
<div class="mdl-card__supporting-text">
Thank you for visting our website! I hope you enjoy your stay while learning about FLL
</div>
<!--about section-->
<a href="about.html"class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">subject</i>
</a>
<!--images-->
</br>
<p align=center>ABOUT</p>
<a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">collections</i>
</a>
<!--events-->
</br>
<p align=center>IMAGES</p>
<a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">event</i>
</a>
<!--blog-->
</br>
<p align=center>EVENT</p>
<a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">chat_bubble</i>
</a>
</br>b
<p align=center>BLOG</p>
<!--return to top-->
</br>
<a href=""class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">keyboard_arrow_up</i>
</a>
</br>
<p align=center>RETURN TO TOP</p>
</br>
</div>
</br>
</div>
</div>
</div>
</main>
</div>
<script>
var $userAgent = '';
if(/MSIE/i['test'](navigator['userAgent'])==true||/rv/i['test'](navigator['userAgent'])==true||/Edge/i['test'](navigator['userAgent'])==true){
$userAgent='ie';
} else {
$userAgent='other';
}
if($userAgent==='ie'){
alert("Oh, it looks like you are using Internet Explorer. Just a heads up: This website may not work on the browser. Consider using another one.")
}
</script>
</html>
Looking at the code for your entire page, unless there is a mistake, you have no <body> element containing the main body of the document.
When isolated on it's own as a div, you are implementing the google+ tag correctly.
Lastly, just in case your code was just a copy-and-paste mistake with the missing <body> element, if you are not previewing your code from an actual webserver, and just accessing your HTML file via "file:///" rather than "http://" (i.e. you are not accessing your html file via an actualy webserver like Apache, etc.), then the browser could be blocking the google+ service because of security issues. For instance, I've seen this issue before when trying to implement a Facebook share button, but attempting to preview the HTML file from the computer's hard-drive rather than through a webserver service of some type (even if it's accessing the webserver on localhost).
For instance, while the layout of your page does looks a bit broken, the google plus element is working when viewed on a webservice like codePen here: http://codepen.io/anon/pen/xwwQeM
Related
I have three 'click' event listeners coded in my javascript. The first two always work (for the elements with id's cs-detail-toggle and tc-detail-toggle) but the last one (for the element with id cc-detail-toggle) only works sometimes.
Sometimes when I load the site in my browser I can see the event listener in dev tools, other times it is not there.
The purpose of all three event listeners is the same - change the CSS display property of respective div's between 'none' and 'block'.
/** CSS Cheat Sheet Detail Toggle */
const csToggle = document.getElementById('cs-detail-toggle')
const csDetail = document.getElementById('cs-details')
function toggleCsDisplay() {
if (csDetail.style.display === 'none') {
csDetail.style.display = 'block'
} else {
csDetail.style.display = 'none'
}
}
csToggle.addEventListener('click', toggleCsDisplay);
/** Tea Cozy Detail Toggle **/
const tcToggle = document.getElementById('tc-detail-toggle')
const tcDetail = document.getElementById('tc-details')
function toggleTcDisplay() {
if (tcDetail.style.display === 'none') {
tcDetail.style.display = 'block'
} else {
tcDetail.style.display = 'none'
}
}
tcToggle.addEventListener('click', toggleTcDisplay);
/** Credit Card Checker Detail Toggle **/
const ccToggle = document.getElementById('cc-detail-toggle')
const ccDetail = document.getElementById('cc-details')
function toggleCcDisplay() {
if (ccDetail.style.display === 'none') {
ccDetail.style.display = 'block'
} else {
ccDetail.style.display = 'none'
}
}
ccToggle.addEventListener('click', toggleCcDisplay);
<section class="projects">
<h2>Projects</h2>
<div class="projects-container">
<div class="project-card">
<h3>CSS Positioning Cheat Sheet</h3>
<img
src="./assets/css-cheat-sq.png"
alt="screenshot preview of css positioning cheat sheet project"
/>
<p id="cs-detail-toggle">+ Details and Links</p>
<div id="cs-details" class="details">
<p>Quick reference guide for the 5 main CSS positioning types</p>
<p>Made as part of Codecademy Web Development Foundations Course</p>
<p>Tech used - HTML 5 and CSS3</p>
<a href="https://github.com/YSquid/positioning-cheat-sheet" target="_blank"><i class="fa-brands fa-github"></i
>GitHub Repository</a>
<i class="fa-brands fa-codepen"></i>View in CodePen
</div>
</div>
<div class="project-card">
<h3>Tea Cozy Landing Page</h3>
<img src="./assets/tea-cozy-sq.png" alt="screenshot preview of tea cozt landing page project">
<p id="tc-detail-toggle">+ Details and Links</p>
<div id="tc-details" class="details">
<p>Landing page for a ficitonal business</p>
<p>Created according to provided website spec</p>
<p>Made as part of Codecademy Web Development Foundations Course</p>
<p>Tech used - HTML5 and CSS3</p>
<i class='fa-brands fa-github'></i>GitHub Repository
</div>
</div>
<div class="project-card">
<h3>Credit Card Number Validator</h3>
<img src="./assets/card-checker-sq.png" alt="image of credit card with number highlighted and first step of luhn alorithm shown">
<p id="cc-detail-toggle">+ Details and Links</p>
<div id="cc-details" class="details">
<p>Program for checking credit cards</p>
<p>Can accept array of credit card numbers, and find the invalid ones</p>
<p>Takes list of invalid cards, and prints array of the credit card companies whose cards are in the invalid array</p>
<p>Tech used - Javascript, NodeJS for testing</p>
<i class='fa-brands fa-github'></i>GitHub Repository
<i class="fa-brands fa-codepen"></i>View in CodePen
</div>
</div>
</div>
</section>
After some help debugging from the comments I was able to find a solution, posting for future reference.
As I had my script tag in the HTML head with the async attribute, the javascript file was loading before the DOM element existed.
Here was my script tag placement before.
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./index.css" />
<script
src="https://kit.fontawesome.com/620d1d46ff.js"
crossorigin="anonymous"
></script>
<!--font awesome import-->
<!--SCRIPT PLACEMENT NOT WORKING -->
<script src="./index.js" async></script>
</head>
I moved my script tag to the bottom of my code just before the closing body tag, and it all works now.
Here is the working HTML (scroll the bottom to find the script tag, comment there to flag it).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./index.css" />
<script
src="https://kit.fontawesome.com/620d1d46ff.js"
crossorigin="anonymous"
></script>
<!--font awesome import-->
</head>
<body>
<nav>
<div class="nav-left">
<h1>Ahmad Kariem</h1>
<a href="https://github.com/YSquid" target="_blank"
><i class="fa-brands fa-github"></i
></a>
<a href="https://www.linkedin.com/in/ahmad-kariem/" target="_blank"
><i class="fa-brands fa-linkedin"></i
></a>
</div>
<div class="nav-right">
<ul>
<li>About</li>
<li>Education</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
<main>
<section class="about">
<h2 class="about-title">About Me</h2>
<div class="about-container">
<div class="about-text">
<p>
Hi! My name is Ahmad Kariem, and I am a full stack developer from
Saskatoon Sasktchewan.
</p>
<p>
My educational background is in biochemistry and business, and I
have worked in a number of roles in my career including
tech-sales, digitial marketing, and data analysis. In early 2022,
I began my journey to becoming a self-taught full-stack software
developer. I have been studying using tools such as Codecademy and
Freecodecamp to learn skills in HTML, CSS, Javascript, ReactJS and
more!
</p>
<p>
In my spare time I like to play video games, golf, watch football
and e-sports, run, and lift weights.
</p>
</div>
<img
src="./assets/portfoli site pic.jpg"
alt="A headshot of Ahmad in a suit"
/>
</div>
</section>
<section class="education">
<h2>Education</h2>
<div class="education-container">
<div class="edu-card">
<h3>B.Sc Biochemistry - 2015</h3>
<ul>
<li>Univeristy of Saskatchewan</li>
<li>Graduated with High Honors</li>
</ul>
</div>
<div class="edu-card">
<h3>Masters in Business Administration (MBA) - 2019</h3>
<ul>
<li>University of Saskatchewan</li>
<li>Graduated with Honors</li>
</ul>
</div>
<div class="edu-card">
<h3>Full-Stack Softwar Engineer - In Progress</h3>
<ul>
<li>Codecademy</li>
<li>Started September 2022</li>
</ul>
</div>
</div>
</section>
<section class="projects">
<h2>Projects</h2>
<div class="projects-container">
<div class="project-card">
<h3>CSS Positioning Cheat Sheet</h3>
<img
src="./assets/css-cheat-sq.png"
alt="screenshot preview of css positioning cheat sheet project"
/>
<button id="cs-detail-toggle">+ Details and Links</button>
<div id="cs-details" class="details">
<p>Quick reference guide for the 5 main CSS positioning types</p>
<p>Made as part of Codecademy Web Development Foundations Course</p>
<p>Tech used - HTML 5 and CSS3</p>
<a href="https://github.com/YSquid/positioning-cheat-sheet" target="_blank"><i class="fa-brands fa-github"></i
>GitHub Repository</a>
<i class="fa-brands fa-codepen"></i>View in CodePen
</div>
</div>
<div class="project-card">
<h3>Tea Cozy Landing Page</h3>
<img src="./assets/tea-cozy-sq.png" alt="screenshot preview of tea cozt landing page project">
<button id="tc-detail-toggle">+ Details and Links</button>
<div id="tc-details" class="details">
<p>Landing page for a ficitonal business</p>
<p>Created according to provided website spec</p>
<p>Made as part of Codecademy Web Development Foundations Course</p>
<p>Tech used - HTML5 and CSS3</p>
<i class='fa-brands fa-github'></i>GitHub Repository
</div>
</div>
<div class="project-card">
<h3>Credit Card Number Validator</h3>
<img src="./assets/card-checker-sq.png" alt="image of credit card with number highlighted and first step of luhn alorithm shown">
<button id="cc-detail-toggle">+ Details and Links</button>
<div id="cc-details" class="details">
<p>Program for checking credit cards</p>
<p>Can accept array of credit card numbers, and find the invalid ones</p>
<p>Takes list of invalid cards, and prints array of the credit card companies whose cards are in the invalid array</p>
<p>Tech used - Javascript, NodeJS for testing</p>
<i class='fa-brands fa-github'></i>GitHub Repository
<i class="fa-brands fa-codepen"></i>View in CodePen
</div>
</div>
</div>
</section>
<section class="skills">
<h2>Skills</h2>
<div class="skills-container">
<i class="fa-brands fa-html5"></i>
<i class="fa-brands fa-css3-alt"></i>
<i class="fa-brands fa-square-js"></i>
<i class="fa-brands fa-react"></i>
<i class="fa-brands fa-node"></i>
<i class="fa-brands fa-npm"></i>
<i class="fa-brands fa-git"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-chrome"></i>
<i class="fa-solid fa-terminal"></i>
</div>
</section>
<section class="contact">
<h2>Please feel free to reach out and connect!</h2>
<div class="contact-container">
<i class="fa-solid fa-envelope"></i>
<i class="fa-brands fa-linkedin"></i>
<i class="fa-brands fa-github"></i>
</div>
</section>
</main>
<!--SCRIPT PLACEMENT WORKING -->
<script src="./index.js" async></script>
</body>
</html>
Thanks to the commenters for putting me on the path to finding the solution!
I am trying to load html content from another file to my main page using JQuery. I am doing this because I have a navigation bar and footer that will be constant throughout all the pages. I wrote them independently in there own files first and tested each of them so I know they work when they are statically placed into the html file. However, when I try to load them using JQuery loadHTML function I am having issues getting them on the page.
Here is my index.html file for reference:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css">
<link href="NavBarStyle.css" rel="stylesheet">
<link href="FooterStyle.css" rel="stylesheet">
</head>
<body>
<header></header>
<div><h1>Content Goes Here</h1></div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src ="NavBar.js"></script>
<script>
$(document).ready(function () {
$("header").load("NavBar.html", function(){
$("header").enhanceWithin();
});
$("footer").load("Footer.html", function(){
$("footer").enhanceWithin();
});
});
</script>
</body>
</html>
My NavBar.html
<div class = "navbar">
<div class="FB">
<iframe id="share" class = "facebook-bt" src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&size=small&width=96&height=20&appId" width="96" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
<iframe id="like" class = "facebook-bt"src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&share=true&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
<div class="navbar-items">
<div class="navbar-links">
<div id = "big" class="dropdown">
<button class="dropbtn">ABOUT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
MEET US
TESTIMONIALS
OFFICE TOUR
HOURS
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">PATIENTS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
WHAT TO EXPECT
PAPERWORK
FAQ's
HEALTH TIPS
BLOG
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">SERVICES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CHIROPRACTIC
NUTRITION
MASSAGE
OTHER
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">REVIEWS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
REVIEW US
TESTIMONIALS
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">CONTACT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CONTACT INFO
LOCATION
</div>
</div>
<div class="burger">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div class="small-Nav">
<div class="navbar-links">
<div id = "small" class="dropdown">
<button class="dropbtn">ABOUT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
MEET US
TESTIMONIALS
OFFICE TOUR
HOURS
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">PATIENTS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
WHAT TO EXPECT
PAPERWORK
FAQ's
HEALTH TIPS
BLOG
</div>
</div>
<div id = "small" class="dropdown-small">
<button class="dropbtn">SERVICES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CHIROPRACTIC
NUTRITION
MASSAGE
OTHER
</div>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">REVIEWS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
REVIEW US
TESTIMONIALS
</div>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">CONTACT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
CONTACT INFO
LOCATION
</div>
</div>
</div>
</div>
</div>
<a href = "#">
<div class = "logo-circle">
<div class="logo"></div>
</div>
</a>
My footer is set up the same way as the NavBar.html file only the content is slightly different.
What am I doing wrong that is causing the files to not load up?
You don't need enhanceWithin call, so your code should look like this:
$(document).ready(function () {
$("header").load("NavBar.html");
$("footer").load("Footer.html");
});
Check load method documentation here for details.
I also suggest checking paths to files and their names (maybe you are getting 404 errors)
Try to debug your issue through dev. console by pressing F12.
You should see several errors. Something like Failed to load resource: net::ERR_FAILED and cors.
Are you running a webserver or index.html directly from the folder?
The problem is .load doesn't run directly please read up on load from jquery as the answer above mentions.
You will need to run index.html through your webserver and you will see the file load the requested file.
I get this as message:
header
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header></header>
<div><h1>Content Goes Here</h1></div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("header").load("NavBar.html", function(){
// $("header").enhanceWithin(); // Ignoring this line since question is not asking to fix the errors regarding enhance. I'll leave that upto you.
});
});
</script>
</body>
</html>
You can simply use without JQuery as well
<header>
<include src="My NavBar.html"></include>
</header>
<footer>
<include src="My Footer.html"></include>
</footer>
everybody, I'm trying the first example in
https://semantic-ui.com/collections/menu.html
it should work when hovering it any idea I'm not getting any error in the console but the dropdown not working not even when I click nothing happens
may this happens because I'm using semantic-ui CDN ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dev College</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</head>
<body>
<div class="ui text menu">
<div class="item">
<img src="default.png">
</div>
<a class="browse item">
Browse Courses
<i class="dropdown icon"></i>
</a>
<div class="ui right dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Applications</div>
<div class="item">International Students</div>
<div class="item">Scholarships</div>
</div>
</div>
</div>
<div class="ui flowing basic admission popup">
<div class="ui three column relaxed divided grid">
<div class="column">
<h4 class="ui header">Business</h4>
<div class="ui link list">
<a class="item">Design & Urban Ecologies</a>
<a class="item">Fashion Design</a>
<a class="item">Fine Art</a>
<a class="item">Strategic Design</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Liberal Arts</h4>
<div class="ui link list">
<a class="item">Anthropology</a>
<a class="item">Economics</a>
<a class="item">Media Studies</a>
<a class="item">Philosophy</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Social Sciences</h4>
<div class="ui link list">
<a class="item">Food Studies</a>
<a class="item">Journalism</a>
<a class="item">Non Profit Management</a>
</div>
</div>
</div>
</div>
</body>
</html>
The example code doesn't include any javascript like the other examples on the same page. If you want the dropdowns to work look into the dropdown documentation under the usage tab which talks more about coupling the dropdowns inside the menu. Dropdowns. And the CDN is fine.
I have a simple login page which logins the user and then redirects them, however I've made a ajax code for the reset password page and after I enter the wrong details and the login page reloads the dropdown menu doesn't work.
I've tried to use the $('.dropdown-toggle').dropdown(); function however it's not working at all.
Login.php
<?php
require_once('./files/functions.php');
require_once('phpmailer/PHPMailerAutoload.php');
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>log in</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Vendors -->
<!-- Animate CSS -->
<link href="vendors/bower_components/animate.css/animate.min.css" rel="stylesheet">
<!-- Material Design Icons -->
<link href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
<!-- Site CSS -->
<link href="css/app-1.min.css" rel="stylesheet">
</head>
<body>
<div class="login">
<!-- Login -->
<div class="login__block toggled" id="l-login">
<div class="login__block__header">
<i class="zmdi zmdi-account-circle"></i>
Hi there! Please Sign in
<div class="actions login__block__actions">
<div class="dropdown">
<i class="zmdi zmdi-more-vert"></i>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-register" href="">Create an account</a></li>
<li><a data-block="#l-forget-password" href="#">Forgot password?</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form action="" method="POST">
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="text" class="form-control" name="email">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="password" class="form-control" name="password">
<label>Password</label>
<i class="form-group__bar"></i>
</div>
<button type="submit" name="login" value="Sign In" class="btn btn--light btn--icon m-t-15"><i class="zmdi zmdi-long-arrow-right"></i></button>
</form>
<?php
// some php code for the login process...
?>
</div>
</div>
<!-- Forgot Password -->
<div class="login__block" id="l-forget-password">
<div class="login__block__header palette-Purple bg">
<i class="zmdi zmdi-account-circle"></i>
Forgot Password?
<div class="actions login__block__actions">
<div class="dropdown">
<i class="zmdi zmdi-more-vert"></i>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-login" href="#">Already have an account?</a></li>
<li><a data-block="#l-register" href="#">Create an account</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form id="pw">
<p class="m-t-30">Please enter the e-mail address used to register. We will send your new password to that address.</p>
<div class="form-group form-group--float form-group--centered">
<input type="text" class="form-control" name="email" id="emailfield">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div id="result"></div>
<button class="btn btn--light btn--icon m-t-15" value="submit" type="submit"><i class="zmdi zmdi-check"></i></button>
</div>
</form>
<script type = "text/javascript">
$("form#pw").on("submit", function(e){
e.preventDefault();
var emailfield = $("#emailfield").val();
var email ='email='+ emailfield;
$.ajax({
url: "login.php",
method: "POST",
data: email,
success: function (result) {
alert("result: " + result);
console.log(result);
$("#result").html(result);
$('.dropdown-toggle').dropdown();
}
});
});
</script>
<?php
// php code for the reset password....
?>
</div>
</div>
<!-- Older IE Warning -->
<!--[if lt IE 9]>
<div class="ie-warning">
<h1>Warning!!</h1>
<p>You are using an outdated version of Internet Explorer, please upgrade <br/>to any of the following web browsers to access this website.</p>
<div class="ie-warning__container">
<ul class="ie-warning__download">
<li>
<a href="http://www.google.com/chrome/">
<img src="img/browsers/chrome.png" alt="">
<div>Chrome</div>
</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img src="img/browsers/firefox.png" alt="">
<div>Firefox</div>
</a>
</li>
<li>
<a href="http://www.opera.com">
<img src="img/browsers/opera.png" alt="">
<div>Opera</div>
</a>
</li>
<li>
<a href="https://www.apple.com/safari/">
<img src="img/browsers/safari.png" alt="">
<div>Safari</div>
</a>
</li>
<li>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
<img src="img/browsers/ie.png" alt="">
<div>IE (New)</div>
</a>
</li>
</ul>
</div>
<p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
<![endif]-->
<!-- Site Functions & Actions -->
<script src="js/app.min.js"></script>
</body>
</html>
You are including jQuery twice, once from a CDN and once from the local filesystem. Remove the CDN one at the top.
Your inline <script> block appears before your other Javascript resources are included. Try placing it after all other JS files, or even better in your app.min.js where it probably belongs.
It is hard to see the exact problem bcs so much of your code is your own custom stuff we can't see (and likely has nothing to do with this problem). In future, please try creating a minimal, verifiable example of your problem.
I decided to use the Google Friendly Pix demo app for my purposes because I really like the layout, I just thought I could modify the .js and .html files. I've spent all night trying different code but I can just not get the method to correctly push the data, I setup a simple form to test my functionality. (Under the Journal DIV)
The Friendly Pix app: https://github.com/firebase/friendlypix
The index.html:
<!doctype html>
<!--
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Share your pics. Powered by Firebase.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friendly Pix</title>
<link rel="shortcut icon" href="/images/favicon.png">
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Web Application Manifest -->
<link rel="manifest" href="/manifest.json">
<!-- Add to home screen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Friendly Pix">
<meta name="theme-color" content="#303F9F">
<link rel="icon" sizes="192x192" href="/images/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="/images/touch/touch-icon-128x128.png">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Web Starter Kit">
<link rel="apple-touch-icon" href="/images/touch/touch-icon-180x180.png">
<link rel="apple-touch-icon-precomposed" href="/images/touch/touch-icon-180x180.png">
<meta name="apple-mobile-web-app-status-bar-style" content="#303F9F">
<!-- Tile icon for Win8 -->
<meta name="msapplication-TileImage" content="/images/touch/touch-icon-144x144.png">
<meta name="msapplication-TileColor" content="#3372DF">
<meta name="msapplication-navbutton-color" content="#303F9F">
<!-- Material Design Lite -->
<link rel="stylesheet" href="/libs/material-design-lite/material.min.css">
<script defer src="/libs/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Firebase UI Auth -->
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.css" />
<!-- Styling -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,300">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amaranth:700">
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<!-- Theatre mode viewer -->
<div class="fp-theatre"><img class="fp-fullpic"></div>
<!-- Splash screen -->
<section id="page-splash">
<h3 class="fp-logo"><i class="material-icons">photo</i> Friendly Pix</h3>
<div class="fp-caption">The friendliest way to share your pics</div>
<div class="fp-signed-out-only fp-initially-hidden">
<div id="firebaseui-auth-container" class="fp-signed-out-only fp-initially-hidden"></div>
<a class="fp-skip" href="/feed">skip sign in</a>
</div>
</section>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Header section containing logo and menu -->
<header class="fp-header mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
<div class="mdl-layout__header-row fp-titlebar">
<!-- Logo -->
<h3 class="fp-logo"><i class="material-icons">photo</i> Friendly Pix</h3>
<div class="mdl-layout-spacer"></div>
<!-- Search bar -->
<div class="fp-searchcontainer mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="searchQuery">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="searchQuery">
<label class="mdl-textfield__label" for="searchQuery">Enter your query...</label>
</div>
<div id="fp-searchResults" class="mdl-card mdl-shadow--2dp"></div>
</div>
<!-- Signed-in User Info -->
<div class="mdl-cell--hide-phone">
<button class="fp-sign-in-button fp-signed-out-only mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">account_circle</i> Sign in</button>
<div class="fp-signed-in-user-container mdl-cell--hide-phone fp-signed-in-only">
<a class="fp-usernamelink mdl-button mdl-js-button">
<div class="fp-avatar"></div>
<div class="fp-username mdl-color-text--white"></div>
</a>
</div>
</div>
<!-- Drop Down Menu -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-cell--hide-phone" id="fp-menu">
<i class="material-icons">more_vert</i>
</button>
<ul class="fp-menu-list mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="fp-menu">
<a href="/about">
<li class="mdl-menu__item"><i class="material-icons">perm_contact_calendar</i> About - Help - Contact</li>
</a>
<li class="fp-sign-out mdl-menu__item fp-signed-in-only"><i class="material-icons">exit_to_app</i> Sign out</li>
</ul>
</div>
<!-- Navigation Bar -->
<div class="fp-tab mdl-layout__header-row mdl-cell--hide-phone mdl-color--light-blue-600">
<div class="mdl-tab">
<i class="material-icons">home</i> Home
<i class="material-icons">trending_up</i> Feed
<i class="material-icons">trending_up</i> Journal
<input id="fp-mediacapture" type="file" accept="image/*;capture=camera">
<button class="fp-signed-in-only mdl-button mdl-js-button mdl-button--fab mdl-cell--hide-tablet mdl-color--amber-400 mdl-shadow--4dp mdl-js-ripple-effect" id="add">
<i class="material-icons">file_upload</i>
</button>
</div>
</div>
<button class="fp-signed-in-only mdl-cell--hide-desktop mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-color--amber-400 mdl-shadow--4dp" id="add-floating">
<i class="material-icons">photo_camera</i>
</button>
</header>
<!-- Drawer menu -->
<div class="mdl-cell--hide-desktop mdl-cell--hide-tablet mdl-layout__drawer">
<button class="fp-sign-in-button mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">account_circle</i> Sign in</button>
<div class="fp-signed-in-user-container mdl-color--light-blue-700 fp-signed-in-only">
<a class="fp-usernamelink">
<div class="fp-avatar"></div>
<div class="fp-username mdl-color-text--white"></div>
</a>
</div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link is-active fp-signed-in-only" href="/"><i class="material-icons">home</i> Home</a>
<a class="mdl-navigation__link" href="/feed"><i class="material-icons">trending_up</i> Feed</a>
<hr />
<a class="mdl-navigation__link" href="/about"><i class="material-icons">perm_contact_calendar</i> About - Help - Contact</a>
<hr class="fp-signed-in-only"/>
<a class="fp-sign-out mdl-navigation__link fp-signed-in-only"><i class="material-icons">exit_to_app</i> Sign Out</a>
</nav>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<!-- Show a feed of posts -->
<section id="page-feed" class="mdl-grid fp-content" style="display: none;">
<div class="fp-new-posts-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Show new posts...
</button>
</div>
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid">
<div class="fp-no-posts fp-help mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet
mdl-cell--8-col-desktop mdl-grid mdl-grid--no-spacing">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">help</i>
<div>
<p>Start following people to see their posts!</p>
<p>
Use the <strong><i class="material-icons">search</i> search bar</strong> to find people you know and have
a look at the <i class="material-icons">trending_up</i> feed to discover interesting people.
</p>
<p>Then <i class="material-icons">favorite</i> like and comment their posts!</p>
</div>
</div>
</div>
</div>
<div class="fp-next-page-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_more</i>
</button>
</div>
</section>
<!-- Show a single post with comments -->
<section id="page-post" class="mdl-grid fp-content" style="display: none;">
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid"></div>
</section>
<!-- Journal page -->
<!-- Journal page -->
<!-- Journal page -->
<section id="page-journal" class="mdl-grid fp-content" style="display: none;">
<form id="uploadJournal" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="testInput">
<label class="mdl-textfield__label" for="imageCaptionInput">Test message...</label>
</div>
<br />
<button type="submit" class="fp-journal mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Upload this text!
</button>
</form>
</section>
<!-- About & Contact page -->
<section id="page-about" class="mdl-grid fp-content" style="display: none;">
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">info</i>
<div>
<p>THIS IS BULL Firebase Platform.</p>
</div>
</div>
</div>
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">help</i>
<div>
<p>Start following people to see their posts in your <i class="material-icons">home</i>home!</p>
<p>
Use the <strong><i class="material-icons">search</i>search bar</strong> to find people you know and have
a look at the <i class="material-icons">trending_up</i>feed to discover interesting people.
</p>
<p>Then <i class="material-icons">favorite</i>like and comment their posts!</p>
<p>
Share your pics with your friends using the <i class="material-icons">file_upload</i>or <i class="material-icons">photo_camera</i>buttons.
</p>
</div>
</div>
</div>
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">contacts</i>
<div>
<p>Feel free to file issues on our GitHub repo.</p>
</div>
</div>
</div>
</section>
<!-- User Profile page -->
<section id="page-user-info" class="mdl-grid fp-content" style="display: none;">
<div class="fp-user-container mdl-shadow--2dp mdl-cell mdl-cell--12-col">
<div class="fp-user-avatar"></div>
<div class="fp-name-follow-container mdl-cell mdl-cell--5-col">
<div class="fp-user-username"></div>
<div class="fp-signed-in-only">
<label class="fp-follow mdl-switch mdl-js-switch mdl-js-ripple-effect" for="follow">
<input type="checkbox" id="follow" class="mdl-switch__input" value="true">
<span class="mdl-switch__label">Follow</span>
</label>
<label class="fp-notifications mdl-switch mdl-js-switch mdl-js-ripple-effect" for="notifications">
<input type="checkbox" id="notifications" class="mdl-switch__input" value="true">
<span class="mdl-switch__label">Enable Notifications</span>
</label>
</div>
<div class="fp-user-detail-container">
<div class="fp-user-detail"><span class="fp-user-nbposts">0</span> posts</div>
<div class="fp-user-detail"><span class="fp-user-nbfollowers">0</span> followers</div>
<div class="fp-user-detail fp-user-nbfollowing-container"><span class="fp-user-nbfollowing">0</span> following</div>
</div>
</div>
</div>
<div class="fp-user-following mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col">
<button class="fp-close-following mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_less</i>
</button>
</div>
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid">
<div class="fp-no-posts mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop mdl-grid mdl-grid--no-spacing">
<div class="mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
No posts yet.
</div>
</div>
</div>
<div class="fp-next-page-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_more</i>
</button>
</div>
</section>
<!-- Post new pic page -->
<section id="page-add" class="mdl-grid fp-content" style="display: none;">
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="fp-addcontainer mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
<div class="fp-overlay">
<i class="material-icons">hourglass_full</i>
</div>
<img id="newPictureContainer" src="">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<form id="uploadPicForm" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="imageCaptionInput">
<label class="mdl-textfield__label" for="imageCaptionInput">Image caption...</label>
</div>
<br />
<button type="submit" class="fp-upload mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Upload this pic!
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Toast -->
<div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar">
<div class="mdl-snackbar__text"></div>
<button type="button" class="mdl-snackbar__action"></button>
</div>
</main>
</div>
<!-- Page.js -->
<script src="/libs/page/page.js"></script>
<!-- jQuery -->
<script src="/libs/jquery/dist/jquery.min.js"></script>
<!-- Latinize -->
<script src="/libs/latinize/latinize.js"></script>
<!-- SweetAlert -->
<script src="/libs/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="/libs/sweetalert/dist/sweetalert.css">
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey:
authDomain:
databaseURL:
storageBucket:
messagingSenderId:
};
firebase.initializeApp(config);
</script>
<!-- Firebase UI for Auth -->
<script src="https://www.gstatic.com/firebasejs/ui/live/1.0/firebase-ui-auth.js"></script>
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
'signInFlow': 'popup',
'signInOptions': [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID
]
};
var firebaseUi = new firebaseui.auth.AuthUI(firebase.auth());
</script>
<!-- Friendly Pix ES5 scripts
<script src="/scripts-es5/utils.js"></script>
<script src="/scripts-es5/firebase.js"></script>
<script src="/scripts-es5/auth.js"></script>
<script src="/scripts-es5/search.js"></script>
<script src="/scripts-es5/uploader.js"></script>
<script src="/scripts-es5/messaging.js"></script>
<script src="/scripts-es5/userpage.js"></script>
<script src="/scripts-es5/post.js"></script>
<script src="/scripts-es5/feed.js"></script>
<script src="/scripts-es5/routing.js"></script> -->
<!-- Friendly Pix ES2015 scripts -->
<script src="/scripts/utils.js"></script>
<script src="/scripts/firebase.js"></script>
<script src="/scripts/auth.js"></script>
<script src="/scripts/search.js"></script>
<script src="/scripts/uploader.js"></script>
<script src="/scripts/messaging.js"></script>
<script src="/scripts/userpage.js"></script>
<script src="/scripts/post.js"></script>
<script src="/scripts/feed.js"></script>
<script src="/scripts/routing.js"></script>
<script src="/scripts/journal.js"></script>
</body>
</html>
I modified the picture upload method since this came closest to what I needed:
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
window.friendlyPix = window.friendlyPix || {};
/**
* Handles uploads of new pics.
*/
friendlyPix.Journal = class {
/**
* Inititializes the pics Journal/post creator.
* #constructor
*/
constructor() {
// Firebase SDK
this.database = firebase.database();
this.auth = firebase.auth();
this.storage = firebase.storage();
this.addPolyfills();
$(document).ready(() => {
// DOM Elements
this.addButton = $('#journal');
//this.addButtonFloating = $('#add-floating');
this.uploadButton = $('.fp-journal');
this.testInput = $('#testInput');
this.uploadJournal = $('#uploadJournal');
this.toast = $('.mdl-js-snackbar');
// Event bindings
//this.addButton.click(() => this.initiatePictureCapture());
// this.addButtonFloating.click(() => this.initiatePictureCapture());
//this.imageInput.change(e => this.readPicture(e));
this.uploadJournal.submit(e => this.uploadPic(e));
this.testInput.keyup(() => this.uploadButton.prop('disabled', !this.testInput.val()));
});
}
// Adds polyfills required for the Journal. REQUIRED FOR FUNCTION TO POST FOR SOME REASON
addPolyfills() {
// Polyfill for canvas.toBlob().
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function(callback, type, quality) {
var binStr = atob(this.toDataURL(type, quality).split(',')[1]);
var len = binStr.length;
var arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {type: type || 'image/png'}));
}
});
}
}
/**
* Uploads the pic to Firebase Storage and add a new post into the Firebase Database.
*/
uploadPic(e) {
e.preventDefault();
alert("I am an alert boxxxxxxx!");
var myRootRef = new Firebase('https://xxx.firebaseio.com/');
var collectionRef = myRootRef.child('collection');
var pushRef = collectionRef.push();
pushRef.set('item1');
var imageCaption = this.testInput.val();
//alert(imageCaption);
}
/**
* Clear the uploader.
*/
clear() {
this.currentFile = null;
// Cancel all Firebase listeners.
friendlyPix.firebase.cancelAllSubscriptions();
// Clear previously displayed pic.
this.newPictureContainer.attr('src', '');
// Clear the text field.
friendlyPix.MaterialUtils.clearTextField(this.testInput[0]);
// Make sure UI is not disabled.
this.disableUploadUi(false);
}
};
friendlyPix.journal = new friendlyPix.Journal();
I also tried:
uploadPic(e) {
e.preventDefault();
var messagesRef = new Firebase('xxx.firebaseio.com/');
var imageCaption = this.testInput.val();
//alert("I am an alert boxxxxxxx!");
//alert(imageCaption);
// Save data to firebase
messagesRef.push({fieldName:'testInput', text:imageCaption});
messageField.value = '';
}
I apologize for the huge blocks of code, I hope someone can help! I have tried every method I could find on Google.