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>
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 encountering a problem with html/javascript that I couldn't find a solution for on the web for the last ~7 hours eventhough similar questions were asked! All offered solutions that I tried didn't help me.
My problem is the following error: Uncaught ReferenceError: function is not defined at HTMLDivElement.onclick
I get this error when pressing a button that should trigger the function. The function is called onclick and the onclick attribute is attached to a div object.
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
};
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
If anybody could help me with that it would be very appreciated.
PS: This is my first HTML/CSS/JS project and I don't really know what I'm doing. Also, I am using Framework7 for the project, idk if that is important.
you may forgot script tag . try this anyway..
<html lang="en">
<head>
<title>Login page</title>
</head>
<script>
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
}
</script>
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src=""></script>
</html>
<html lang="en">
<head>
<title>Login page</title>
</head>
<script>
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
}
</script>
<div class="article-element">
<div class="picture_article-element">
<img src="" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<div class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</div>
</div>
<script type="text/javascript" src=""></script>
</html>
i hope this solved your problem, i changed the div tag into a clickable button tag so the 'onclick' function can execute....goodluck
console.log("Main is alive");
function addArticletoSC() {
console.log("Main is still alive!");
};
<div class="article-element">
<div class="picture_article-element">
<img src="static/img/Chiquita_banana.PNG" alt="article" class="article_img">
</div>
<div class="text_article-element">
<p class="name_info">Chiquita Banana
<i class="material-icons button-color">info</i>
</p>
<div class="rating_comments">
<i class="material-icons rating">star_rate</i>
4.5 / 5
</div>
<div class="piece_price">
<p>1 piece</p>
<p class="price">0,50€</p>
</div>
</div>
<!-- replaced div tags with button tags -->
<button class="addtocart_article-element button" onclick="addArticletoSC()">
<i class="material-icons">add_shopping_cart</i>
</button>
<br /><br /><br /><br />
</div>
I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>
I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});
I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.
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've been digging thru the archives and haven't found exactly what I am looking for, so since I am blocked and on a deadline, hoping someone here with more experience can help me out.
Overall team was happy with what I gave them but they are asking for start/stop button to pause the auto-refresh when they need to grab details about the ads that serve in the page. I've been hacking at it and know I am close, but can someone help me here?
Here's my code so far:
<!doctype html>
<html>
<head>
<title>Demand Tag Testing- Home</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<script type="text/javascript" language="javascript">
/** Function to refresh the page at specified interval. **/
function autoRefresh(refreshPeriod) {
setTimeout("window.location.reload();",refreshPeriod);
}
</script>
<script type="text/javascript" language="javascript">
/** Function to stop refreshing the page. **/
function stopRefresh()
{
clearTimeout(refreshPeriod);
window.location.hash = 'stop'
}
/** Function to start refreshing the page if stopped. **/
function autoRefresh(refreshPeriod) {
setTimeout("window.location.reload();",refreshPeriod);
window.location.hash = 'start'
}
</script>
</head>
<body onload="autoRefresh(60000);">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tag Tester :: Demand Partners</a>
</div>
<!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Demand Tag Testing</h1>
<p>This is a template for testing the tags we get from Demand Partners. It includes scripts that auto-refresh the page every 60 seconds and keeps track of the number of page views for you. You can also manually refresh from cache or the server using the buttons below.</p>
<ul>
<li>There are three ad slots below, load 1 tag per slot.</li>
<li>Allow test to run until pageview counter reaches 500</li>
<li>The pageview counter is PER SESSION, so if you close your browser, you will lose the count</li>
</ul>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-6">
<h2>Ad Slot #1</h2>
<p>Paste Ad Tags Here</p>
</div>
<div class="col-lg-3">
<h2>Ad Slot #2</h2>
<p>Paste Tags Here</p>
</div>
<div class="col-lg-3">
<h2>Ad Slot #3</h2>
<p>Paste Tags Here</p>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<h2>Page Reload Count:</h2>
<script type="text/javascript" language="javascript">
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.write("The page has been reloaded " + sessionStorage.clickcount + " time(s) in this session.");
</script>
<div class="btn-group">
<a class="btn btn-success" onclick="startRefresh()" id="start">Start Refresh</a>
<a class="btn btn-danger" onclick="stopRefresh()" id="stop">Stop Refresh</a>
<p id="console"></p>
</div>
</div>
<div class="col-lg-4">
<h2>Reload Cached Page:</h2>
<a class="btn btn-success" href="javascript:window.location.reload();">Click To Reload From Cache</a>
</div>
<div class="col-lg-4">
<h2>Reload From Server</h2>
<button class="btn btn-success" onclick="window.location.reload(true);">Click To Reload From Server</button>
</div>
</div>
<hr>
<footer>
<p>© Company Name, Inc 2014</p>
</footer>
</div>
<!-- /container -->
</body>
</html>
I just need help linking those start/stop buttons to my refresh code and some output that lets users know when it's toggled, so any help anyone can provide here would be greatly appreciated!
You have few issues there, first of all you don't have start function but two autoRefresh which is a typo I guess .. Second, you need to declare global variable and store the timeout in there. Here is updated code which should work:
<!doctype html>
<html>
<head>
<title>Demand Tag Testing- Home</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<script type="text/javascript" language="javascript">
var myRefreshTimeout;
/** Function to refresh the page at specified interval. **/
function startRefresh(refreshPeriod) {
myRefreshTimeout = setTimeout("window.location.reload();",refreshPeriod);
}
/** Function to stop refreshing the page. **/
function stopRefresh() {
clearTimeout(myRefreshTimeout);
window.location.hash = 'stop'
}
</script>
</head>
<body onload="startRefresh(60000);">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tag Tester :: Demand Partners</a>
</div>
<!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Demand Tag Testing</h1>
<p>This is a template for testing the tags we get from Demand Partners. It includes scripts that auto-refresh the page every 60 seconds and keeps track of the number of page views for you. You can also manually refresh from cache or the server using the buttons below.</p>
<ul>
<li>There are three ad slots below, load 1 tag per slot.</li>
<li>Allow test to run until pageview counter reaches 500</li>
<li>The pageview counter is PER SESSION, so if you close your browser, you will lose the count</li>
</ul>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-6">
<h2>Ad Slot #1</h2>
<p>Paste Ad Tags Here</p>
</div>
<div class="col-lg-3">
<h2>Ad Slot #2</h2>
<p>Paste Tags Here</p>
</div>
<div class="col-lg-3">
<h2>Ad Slot #3</h2>
<p>Paste Tags Here</p>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<h2>Page Reload Count:</h2>
<script type="text/javascript" language="javascript">
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.write("The page has been reloaded " + sessionStorage.clickcount + " time(s) in this session.");
</script>
<div class="btn-group">
<a class="btn btn-success" onclick="startRefresh()" id="start">Start Refresh</a>
<a class="btn btn-danger" onclick="stopRefresh()" id="stop">Stop Refresh</a>
<p id="console"></p>
</div>
</div>
<div class="col-lg-4">
<h2>Reload Cached Page:</h2>
<a class="btn btn-success" href="javascript:window.location.reload();">Click To Reload From Cache</a>
</div>
<div class="col-lg-4">
<h2>Reload From Server</h2>
<button class="btn btn-success" onclick="window.location.reload(true);">Click To Reload From Server</button>
</div>
</div>
<hr>
<footer>
<p>© Company Name, Inc 2014</p>
</footer>
</div>
<!-- /container -->
</body>
</html>