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.
Related
I'm in a big trouble. I have to redirect the web page at the last stage after developing the API, but it seems to be redirected in the "postman" application, but it does not work at all in Chrome. What should I do?
enter image description here
First, This is view to receive parameters.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>forgot_password</title>
<link rel = "stylesheet" href ="/css/sample.css">
<link href = "/css/font.css" rel = "stylesheet">
<link href = "/css/navbar2.css" rel = "stylesheet">
<link href = "/css/forgot_password_css.css" rel = "stylesheet">
<script>
function findId() {
let FindEmail = document.getElementById('exampleCheck1').checked;
let PhoneNumber = document.getElementById('exampleInputPhoneNumber').value;
let Name = document.getElementById('exampleInputName').value;
let FindPassword = document.getElementById('exampleCheck2').checked;
let PhoneNumber2 = document.getElementById('exampleInputPhoneNumber2').value;
let email = document.getElementById('exampleInputEmail2').value;
if (FindEmail == true && FindPassword == false) {
const url = new URL("/find_email",location);
url.searchParams.append('Name',Name);
url.searchParams.append('PhoneNumber',PhoneNumber);
location = url;
} else if (FindEmail == false && FindPassword == true) {
} else {
alert("아이디 찾기와 비밀번호 찾기 중 하나만 선택하세요.");
history.back();
}
}
</script>
</head>
<body>
<nav class="navbar bg-light fixed-top" id = "navbar_custom">
<div class="container-fluid" id = "container-fluid_custom">
<a class="navbar-brand" href="#">
<img src="https://cdn-icons-png.flaticon.com/512/6815/6815258.png" alt="Bootstrap" width="30" height="24">
</a>
<a class="navbar-brand" href="http://localhost:8080/">Main Page</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">My Page</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">설정</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">마이페이지</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="http://localhost:8080/mypoint">마이포인트</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<form class = "forgot_password_form">
<h1> 아이디 찾기</h1>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">아이디 찾기 사용</label>
</div> <div class="mb-3">
<label for="exampleInputPhoneNumber" class="form-label">전화번호</label>
<input type="text" class="form-control" id="exampleInputPhoneNumber" aria-describedby="emailHelp" placeholder="ex) 01012341234">
<div id="emailHelp1" class="form-text">가입 시 사용한 전화번호여야 합니다.</div>
</div>
<div class="mb-3">
<label for="exampleInputName" class="form-label">이름</label>
<input type="text" class="form-control" id="exampleInputName" placeholder="ex) 세종대왕">
<div id="emailHelp2" class="form-text">가입자의 이름이여야 합니다.</div>
</div>
<button type="submit" class="btn btn-primary" onclick= "findId()">실행</button>
</form>
<hr class ="one">
<form class = "forgot_password_form">
<h1> 비밀번호 찾기</h1>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck2">
<label class="form-check-label" for="exampleCheck2">비밀번호 찾기 사용</label>
</div> <div class="mb-3">
<label for="exampleInputPhoneNumber2" class="form-label">전화번호</label>
<input type="text" class="form-control" id="exampleInputPhoneNumber2" placeholder="ex) 01012341234">
<div id="emailHelp3" class="form-text">가입 시 사용한 전화번호여야 합니다.</div>
</div>
<div class="mb-3">
<label for="exampleInputEmail2" class="form-label">이메일</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="ex) apple1234#naver.com">
<div id="emailHelp" class="form-text">가입 시 사용한 이메일이여야 합니다.</div>
</div>
<button type="submit" class="btn btn-danger">실행</button>
</form>
<hr class ="one">
<!-- Footer -->
<footer class="text-center text-lg-start bg-white text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 link-secondary">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3 text-secondary"></i>Company name
</h6>
<p>
This is a side project website, and we're not generating any revenue yet.
Thank you for your visit. :)
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
HTML, CSS, BOOTSTRAP
</p>
<p>
SPRING
</p>
<p>
JPA
</p>
<p>
MYSQL
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3 text-secondary"></i> Seoul, 129 Teheran-ro, KR</p>
<p>
<i class="fas fa-envelope me-3 text-secondary"></i>
gurtjd97#naver.com
</p>
<p><i class="fas fa-phone me-3 text-secondary"></i> +82)10-2729-3646</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.025);">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
This is the page to be redirected.
<!DOCTYPE html>
<html lang="en" xmlns:th = "http://www.thymeleafg">
<head>
<meta charset="UTF-8">
<title>Alert Page</title>
<script th:inline = "javascript">
var username = [[${string}]];
alert(username);
</script>
</head>
<body>
</body>
</html>
Controller that processes and redirects values. (Normaly operated in Postman)
#Controller
public class ForgotController {
#Autowired
private UserService userService;
#GetMapping("/find_email")
public String findEmail(FindEmailDto findEmailDto,RedirectAttributes redirectAttributes) {
Optional<Users> users = userService.findEmail(findEmailDto);
if (users.isPresent()) {
String email = users.get().getEmail();
redirectAttributes.addAttribute("value", email);
return "redirect:/alert";
}
redirectAttributes.addAttribute("value","없는 회원 정보 입니다");
return "redirect:/alert";
}
#GetMapping("/alert")
public String alertPage(#RequestParam("value") String s, Model model) {
model.addAttribute("string", s);
return "alert";
}
}
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 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 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
I have a form that after submission it displays the result in a box, but when I enter too much information (text) in the text box (textarea) it runs out of the box in the output. The solution that I thought it would work, would be to modify the style of the id="output" at the bottom of page to width:450px, but that didn't work.... are there any other suggestions? Here's the link to the form
here's the code
<!DOCTYPE html>
<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">
<meta content="computer repair, laptop repair, wireless installation, printer installation, printer repair, system administration, website design, web administration, logo design, web application development, computer repair miami fl, web design miami fl, system administration miami fl" name="keywords">
<meta name="Computer Soloution for Small Business and Home Users, Miami, Florida" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Contact Us</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!-- font mfizz -->
<link rel="stylesheet" href="path/to/font-mfizz/font-mfizz.css">
<link rel="stylesheet" href="icons/flaticon.css">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- custome css style sheet -->
<link href="carosel_style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
<!-- google analytics code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61593038-1', 'auto');
ga('send', 'pageview');
//form validation and submition
function validateForm()
{
var fullName = document.forms['myForm']['name'].value;
var emailAdd = document.forms['myForm']['email'].value;
var subject = document.forms['myForm']['subject'].value;
var message = document.forms['myForm']['message'].value;
var outputMsg = "";
var emailReg = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
//validating form fields
if(fullName == null || fullName == "") {
outputMsg += "Name field can not be empty!\n";
}
if(emailAdd == null || emailAdd == "") {
outputMsg += "Email field can not be empty!\n";
}
//if email field not empty check for valid email add
if(emailAdd != "" && !emailReg.test(emailAdd)) {
outputMsg += "Enter a valid email address!\n";
}
if(message == null || message == "") {
outputMsg += "Text field can not be empty!\n";
}
if(outputMsg != "") {
alert(outputMsg);
return false;
}
//sending data fields to php form
var params = "name="+fullName+"&email="+emailAdd+"&subject="+subject+"&message="+message;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "contact.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("output").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(params);
//change the style of "ouput" id
document.getElementById("output").style.border = "solid 1px #5A5A5A";
document.getElementById("output").style.padding = "10px";
document.getElementById("output").style.width = "450px";
}
</script>
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img id="main-logo" src="img/title_logo1.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="#">Home</li>
<li>About</li>
<li>Contact</li>
<li><a target="_blank" href="http://pctechtips.org">Blog</a></li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Comuter Repair</li>
<li>System Administration</li>
<li>Website Design</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/computer-keyboard-closeup-header.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>COMPUTER SOLUTIONS FOR HOME AND SMALL BUSINESS.</h1>
<p>Professional IT Support for Home Office, and Small Bussiness. Computer Repair, Printer Repair, Network Suport, System Administration, and Web Design</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Get a Quote</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<div class="hero-unit" style="padding:20px 100px">
<h1>Contact Us</h1>
<p>Please send us a description of your computer problems and a we will be in touch as soon as possible with a quote:</p>
</div>
<div class="row">
<div class="col-sm-6">
<div class="my-form">
<form class="form-horizontal" name="myForm" >
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-8">
<input type="name" name="name" class="form-control" id="inputEmail3" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-8">
<input type="email" name="email" class="form-control" id="inputPassword3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Subject:</label>
<div class="col-sm-8">
<input type="text" name="subject" class="form-control" placeholder="Subject">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Text:</label>
<div class="col-sm-8">
<textarea name="message" class="form-control" rows="7" placeholder="Text"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" onclick="validateForm()">Send</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-6">
<img id="google-img" src="https://maps.googleapis.com/maps/api/staticmap?center=Miami+Downtown,Miami,FL&zoom=13&size=500x350&maptype=roadmap&markers=color:red%7CMiami+Downtown,Miami,FL">
</div>
</div><!-- /.row -->
<div class="row"> <!-- output message rown -->
<div class="col-sm-6" >
<!-- display form result message here! -->
<p id="output" >
</p>
</div>
<div class="col-sm-6">
<!--nothing goes here!-->
</div>
</div>
<!-- FOOTER -->
<footer>
<p class="pull-right">Back to top</p>
<p>© 2015 Jorge L. Vazquez ·Privacy · Terms</p>
</footer>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
The p element 'output' that has the content needs
#output{
word-wrap:break-word;
}
break-word allows words to break and wrap to the next line
https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
You have a few options here. On the box, you can try this for CSS:
overflow-x: scroll;
This will allow you to scroll right/left in the box rather than have it bleed out.
If you want to force it to wrap without scroll:
word-wrap: break-word;
try;
<p id="output" style="overflow: scroll; word-wrap:break-word;"></p>