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!
Related
I have created a link that I want a modal to pop up when I click on it of a different HTML page is there a way to do so using either JavaScript or Jquery. It is pretty much a resume card that opens a modal of my resume.html page. I have posted the resume card and the resuume.html code below. Is there a way to create a modal from a different page or at least its main tag because that is all I need really.
<a href="">
<div class="card">
<div class="card-body">
<div class="card-top">
<h2>Resume</h2>
</div>
<div class="card-bottom">
<p>I would like to share my resume with whoever it may concern that outlining all the achievements and skills I have achieved.</p>
<button>See More</button>
</div>
</div>
</div>
</a>
<!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.0">
<link rel="stylesheet" href="personal.css">
<title>Resume</title>
</head>
<body class="resume">
<main class="container">
<section class="resume-section flex-resume">
<div class="info">
<h1>Alladin Assaf</h1>
<h2>Web Designer - Front-End</h2>
<p>219 Moss Hill Dr Arlington, Tx 76018</p>
<p>Phone: 682-313-3458</p>
<p>Email: alladin.assaf#icloud.com</p>
</div>
<div class="paragraph">
<p>Hello, I am a recent graduate of the University of Texas at Arlington majoring in Communication Technology. I am a well detailed individual and I love using my creativity to develop visually pleasing websites. In my free time I love to play video games and hang out with friends. </p>
</div>
</section>
<section class="resume-section">
<h2>Education</h2>
<hr>
<ul>
<li>Tarrant County College (2017-2019)</li>
<li>University of Texas at Arlington (2019 - 2021)</li>
</ul>
</section>
<section class="resume-section">
<h2>Skills</h2>
<hr>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>SCSS</li>
<li>JavaScript</li>
<li>Jquery</li>
<li>PHP</li>
</ul>
</section>
<section class="resume-section">
<h2>Certificates</h2>
<hr>
<ul>
<li>Digital Media certificate</li>
</ul>
</section>
</main>
</body>
</html>
You can do like this as in below snippet . And can decorate resume according to need .
function showResume(){
document.getElementById("resume").style.display = "block";
}
function closeResume(){
document.getElementById("resume").style.display = "none";
}
#resume {
display: none;
border:2px solid red;
position:absolute;
top:0;
background-color:white
}
.close{
position:absolute;
right:0;
padding: 8px;
background-color:red;
color:white;
cursor:pointer;
}
<a href="#">
<div class="card">
<div class="card-body">
<div class="card-top">
<h2>Resume</h2>
</div>
<div class="card-bottom">
<p>I would like to share my resume with whoever it may concern that outlining all the achievements and skills I have achieved.</p>
<button onclick="showResume()">See More</button>
</div>
</div>
</div>
</a>
<div id="resume">
<span class="close" onclick="closeResume()">Close</span>
<main class="container">
<section class="resume-section flex-resume">
<div class="info">
<h1>Alladin Assaf</h1>
<h2>Web Designer - Front-End</h2>
<p>219 Moss Hill Dr Arlington, Tx 76018</p>
<p>Phone: 682-313-3458</p>
<p>Email: alladin.assaf#icloud.com</p>
</div>
<div class="paragraph">
<p>Hello, I am a recent graduate of the University of Texas at Arlington majoring in Communication Technology. I am a well detailed individual and I love using my creativity to develop visually pleasing websites. In my free time I love to play
video games and hang out with friends. </p>
</div>
</section>
<section class="resume-section">
<h2>Education</h2>
<hr>
<ul>
<li>Tarrant County College (2017-2019)</li>
<li>University of Texas at Arlington (2019 - 2021)</li>
</ul>
</section>
<section class="resume-section">
<h2>Skills</h2>
<hr>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>SCSS</li>
<li>JavaScript</li>
<li>Jquery</li>
<li>PHP</li>
</ul>
</section>
<section class="resume-section">
<h2>Certificates</h2>
<hr>
<ul>
<li>Digital Media certificate</li>
</ul>
</section>
</main>
</div>
You can now share your website link and it will first show the card then your resume . You can also hide/show card like adding this to the JS function :
document.getElementsByClassName("card").style.display = "none/block";
respectively
I am trying to load html content from another file to my main page using JQuery. I am doing this because I have a navigation bar and footer that will be constant throughout all the pages. I wrote them independently in there own files first and tested each of them so I know they work when they are statically placed into the html file. However, when I try to load them using JQuery loadHTML function I am having issues getting them on the page.
Here is my index.html file for reference:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css">
<link href="NavBarStyle.css" rel="stylesheet">
<link href="FooterStyle.css" rel="stylesheet">
</head>
<body>
<header></header>
<div><h1>Content Goes Here</h1></div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src ="NavBar.js"></script>
<script>
$(document).ready(function () {
$("header").load("NavBar.html", function(){
$("header").enhanceWithin();
});
$("footer").load("Footer.html", function(){
$("footer").enhanceWithin();
});
});
</script>
</body>
</html>
My NavBar.html
<div class = "navbar">
<div class="FB">
<iframe id="share" class = "facebook-bt" src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button_count&size=small&width=96&height=20&appId" width="96" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
<iframe id="like" class = "facebook-bt"src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&share=true&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
<div class="navbar-items">
<div class="navbar-links">
<div id = "big" class="dropdown">
<button class="dropbtn">ABOUT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
MEET US
TESTIMONIALS
OFFICE TOUR
HOURS
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">PATIENTS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
WHAT TO EXPECT
PAPERWORK
FAQ's
HEALTH TIPS
BLOG
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">SERVICES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CHIROPRACTIC
NUTRITION
MASSAGE
OTHER
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">REVIEWS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
REVIEW US
TESTIMONIALS
</div>
</div>
<div id = "big" class="dropdown">
<button class="dropbtn">CONTACT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CONTACT INFO
LOCATION
</div>
</div>
<div class="burger">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div class="small-Nav">
<div class="navbar-links">
<div id = "small" class="dropdown">
<button class="dropbtn">ABOUT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
MEET US
TESTIMONIALS
OFFICE TOUR
HOURS
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">PATIENTS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
WHAT TO EXPECT
PAPERWORK
FAQ's
HEALTH TIPS
BLOG
</div>
</div>
<div id = "small" class="dropdown-small">
<button class="dropbtn">SERVICES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
CHIROPRACTIC
NUTRITION
MASSAGE
OTHER
</div>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">REVIEWS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
REVIEW US
TESTIMONIALS
</div>
</div>
<div id = "small" class="dropdown">
<button class="dropbtn">CONTACT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content-small">
CONTACT INFO
LOCATION
</div>
</div>
</div>
</div>
</div>
<a href = "#">
<div class = "logo-circle">
<div class="logo"></div>
</div>
</a>
My footer is set up the same way as the NavBar.html file only the content is slightly different.
What am I doing wrong that is causing the files to not load up?
You don't need enhanceWithin call, so your code should look like this:
$(document).ready(function () {
$("header").load("NavBar.html");
$("footer").load("Footer.html");
});
Check load method documentation here for details.
I also suggest checking paths to files and their names (maybe you are getting 404 errors)
Try to debug your issue through dev. console by pressing F12.
You should see several errors. Something like Failed to load resource: net::ERR_FAILED and cors.
Are you running a webserver or index.html directly from the folder?
The problem is .load doesn't run directly please read up on load from jquery as the answer above mentions.
You will need to run index.html through your webserver and you will see the file load the requested file.
I get this as message:
header
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header></header>
<div><h1>Content Goes Here</h1></div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("header").load("NavBar.html", function(){
// $("header").enhanceWithin(); // Ignoring this line since question is not asking to fix the errors regarding enhance. I'll leave that upto you.
});
});
</script>
</body>
</html>
You can simply use without JQuery as well
<header>
<include src="My NavBar.html"></include>
</header>
<footer>
<include src="My Footer.html"></include>
</footer>
everybody, I'm trying the first example in
https://semantic-ui.com/collections/menu.html
it should work when hovering it any idea I'm not getting any error in the console but the dropdown not working not even when I click nothing happens
may this happens because I'm using semantic-ui CDN ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dev College</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</head>
<body>
<div class="ui text menu">
<div class="item">
<img src="default.png">
</div>
<a class="browse item">
Browse Courses
<i class="dropdown icon"></i>
</a>
<div class="ui right dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Applications</div>
<div class="item">International Students</div>
<div class="item">Scholarships</div>
</div>
</div>
</div>
<div class="ui flowing basic admission popup">
<div class="ui three column relaxed divided grid">
<div class="column">
<h4 class="ui header">Business</h4>
<div class="ui link list">
<a class="item">Design & Urban Ecologies</a>
<a class="item">Fashion Design</a>
<a class="item">Fine Art</a>
<a class="item">Strategic Design</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Liberal Arts</h4>
<div class="ui link list">
<a class="item">Anthropology</a>
<a class="item">Economics</a>
<a class="item">Media Studies</a>
<a class="item">Philosophy</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Social Sciences</h4>
<div class="ui link list">
<a class="item">Food Studies</a>
<a class="item">Journalism</a>
<a class="item">Non Profit Management</a>
</div>
</div>
</div>
</div>
</body>
</html>
The example code doesn't include any javascript like the other examples on the same page. If you want the dropdowns to work look into the dropdown documentation under the usage tab which talks more about coupling the dropdowns inside the menu. Dropdowns. And the CDN is fine.
I have been working on my personal site, but had a problem with the menu.
Web site in progress
Using jQuery I have tried to animate the main menu of the site, it is assumed that when clicking on one of the links, the contents of the main container should be moved to the corresponding section, but this is not happening, it only links correctly when clicking In one of the links for the first time, then everything fails.
I know the problem is with jQuery, but I'm really new to this library and I can not identify the problem.
I would appreciate your help.
$(document).ready(function() {
$('.scroll-to').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 150;
var targetOffset = $(id).offset().top - offSet;
$('.main_content, .principal_content').animate({scrollTop:targetOffset}, speed);
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/resume.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<script src="https://use.fontawesome.com/0d6e13b87e.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script lenguage="javascript" src="js/script.js" type="text/javascript"></script>-->
<title>Jorge Cortés - Front-end Development</title>
</head>
<body>
<div class="main_content">
<header class="header_content">
</header>
<nav class="navigation_content">
<div class="profile_card">
<div class="profile_img">
<img src="img/image.png" alt="Jorge">
</div>
</div>
<ul class="menu">
<li><a class="scroll-to" data-id="about_me" href="#about_me"><i class="icon fa fa-user-circle"></i>About me</a></li>
<li><a class="scroll-to" data-id="experience" href="#experience"><i class="icon fa fa-briefcase"></i>Experience</a></li>
<li><a class="scroll-to" data-id="education" href="#education"><i class="icon fa fa-graduation-cap"></i>Education</a></li>
<li><a class="scroll-to" data-id="skill" href="#skill"><i class="icon fa fa-grav"></i>Skills</a></li>
</ul>
</nav>
<main class="principal_content">
<section class="about_me" id="about_me">
<h1>Hello, I am <span>Jorge</span><br> Web Designer and Front-end</h1>
<div class="separator_light"></div>
<p>I have two years experience as a web/interface developer.
I have a taste <br> of clean, elegant styling, and I have lots of experience in the
production of HTML <br> and CSS code for websites.
</p>
<!--<p>Futhermore I have experience using JS libraries and writing JS code,
and I have a reasonable grasp of using CMS, specifically Joomla and WordPress.
</p>-->
<h2>Personal Info</h2>
<div class="separator_bold"></div>
<ul class="personal_info">
<li><em>Name</em><span>Jorge Cortés Álvarez</span></li>
<li><em>Date of Birth</em><span>May 26, 1993</span></li>
<li><em>e-mail</em><span>jorgecortesalvarez#outlook.com</span></li>
<li><em>Phone</em><span>(+57) 300 433 8040</span></li>
<li><em>Address</em><span>Cartagena de Indias - Colombia</span></li>
</ul>
</section>
<section class="experience" id="experience">
<h2>Work History</h2>
<div class="separator_bold"></div>
<h3>Platform Administrator OJS</h3>
<h4><i class="fa fa-thumb-tack"></i>Palobra Journal - University of Cartagena <br>
<i class="fa fa-calendar"></i>2015 - 2016</h4>
<p>Customization of the user's interface, configuration and support
of the platform Open Journal Systems (OJS) for the virtual publication
of the Palobra Journal in the University of Cartagena.
</p>
<h3>Front-end Web Developer</h3>
<h4><i class="fa fa-thumb-tack"></i>Freelance/Self-Employed <br>
<i class="fa fa-calendar"></i>2014 - Today</h4>
<p>Experience in the design and development of web sites using
techonologies as HMTL5, CSS3, JS and content management systems
as Joomla and WordPress.
</p>
</section>
<section class="education" id="education">
<h2>Academic History</h2>
<div class="separator_bold"></div>
<h3>Systems Engineer</h3>
<h4><i class="fa fa-graduation-cap"></i>Bachelor's degree - University of Cartagena <br>
<i class="fa fa-calendar-o"></i>2016</h4>
<p></p>
<h3>Secondary Education</h3>
<h4><i class="fa fa-graduation-cap"></i>High School degree - Institute Promoción Social <br>
<i class="fa fa-calendar-o"></i>2009</h4>
</section>
<section class="skill" id="skill">
<h2>Development Skills</h2>
<div class="separator_bold"></div>
<ul>
<li><p>HTML5</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>CSS3</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>JavaScript</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>UX/UI</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>Usability Testing</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
</ul>
</section>
</main>
<div class="social_media">
<p>© 2017 Jorge Cortés Álvarez. All Rights Reserved. </p>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</body>
</html>
Some styles are missing in your code, I've changed a bit your code and I've also added some styles to make the principal_content div scrollable. Your code works just the first time because the value of the scroll in that moment is 0, you need to add the value of the current scroll value to your calculation, this is the formula:
section offset top - container offset top + scrollTop value of the container
Here is your code working, but here you have a jsfiddle example that is more concise:
$(document).ready(function() {
var cont = $('.main_content .principal_content');
var contOffset = cont.offset();
// scroll function
function scrollToID(id, speed){
var targetOffset = $(id).offset().top - contOffset.top + cont.scrollTop();
cont.animate({scrollTop: targetOffset}, speed);
}
$('.scroll-to').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
});
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.menu {
background: #CCC;
height: 25px;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
}
.main_content {
height: 100%;
}
.principal_content {
height: 100%;
overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jorge Cortés - Front-end Development</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<script src="https://use.fontawesome.com/0d6e13b87e.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script lenguage="javascript" src="js/script.js" type="text/javascript"></script>
</head>
<body>
<div class="main_content">
<nav class="navigation_content">
<ul class="menu">
<li><a class="scroll-to" data-id="about_me" href="#about_me"><i class="icon fa fa-user-circle"></i>About me</a></li>
<li><a class="scroll-to" data-id="experience" href="#experience"><i class="icon fa fa-briefcase"></i>Experience</a></li>
<li><a class="scroll-to" data-id="education" href="#education"><i class="icon fa fa-graduation-cap"></i>Education</a></li>
<li><a class="scroll-to" data-id="skill" href="#skill"><i class="icon fa fa-grav"></i>Skills</a></li>
</ul>
</nav>
<main class="principal_content">
<section class="about_me" id="about_me">
<h1>Hello, I am <span>Jorge</span><br> Web Designer and Front-end</h1>
<div class="separator_light"></div>
<p>I have two years experience as a web/interface developer.
I have a taste <br> of clean, elegant styling, and I have lots of experience in the production of HTML <br> and CSS code for websites.
</p>
<h2>Personal Info</h2>
<div class="separator_bold"></div>
<ul class="personal_info">
<li><em>Name</em><span>Jorge Cortés Álvarez</span></li>
<li><em>Date of Birth</em><span>May 26, 1993</span></li>
<li><em>e-mail</em><span>jorgecortesalvarez#outlook.com</span></li>
<li><em>Phone</em><span>(+57) 300 433 8040</span></li>
<li><em>Address</em><span>Cartagena de Indias - Colombia</span></li>
</ul>
</section>
<section class="experience" id="experience">
<h2>Work History</h2>
<div class="separator_bold"></div>
<h3>Platform Administrator OJS</h3>
<h4><i class="fa fa-thumb-tack"></i>Palobra Journal - University of Cartagena<br><i class="fa fa-calendar"></i>2015 - 2016</h4>
<p>Customization of the user's interface, configuration and support of the platform Open Journal Systems (OJS) for the virtual publication of the Palobra Journal in the University of Cartagena.
</p>
<h3>Front-end Web Developer</h3>
<h4><i class="fa fa-thumb-tack"></i>Freelance/Self-Employed<br><i class="fa fa-calendar"></i>2014 - Today</h4>
<p>Experience in the design and development of web sites using techonologies as HMTL5, CSS3, JS and content management systems as Joomla and WordPress.
</p>
</section>
<section class="education" id="education">
<h2>Academic History</h2>
<div class="separator_bold"></div>
<h3>Systems Engineer</h3>
<h4><i class="fa fa-graduation-cap"></i>Bachelor's degree - University of Cartagena<br><i class="fa fa-calendar-o"></i>2016</h4>
<p></p>
<h3>Secondary Education</h3>
<h4><i class="fa fa-graduation-cap"></i>High School degree - Institute Promoción Social<br><i class="fa fa-calendar-o"></i>2009</h4>
</section>
<section class="skill" id="skill">
<h2>Development Skills</h2>
<div class="separator_bold"></div>
<ul>
<li><p>HTML5</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>CSS3</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>JavaScript</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>UX/UI</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>Usability Testing</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
</ul>
</section>
</main>
<div class="social_media">
<p>© 2017 Jorge Cortés Álvarez. All Rights Reserved. </p>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</body>
</html>
use the $(body) instead of $('.main_content, .principal_content')
try this:
$(document).ready(function() {
$('.scroll-to').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
function scrollToID(id, speed){
var offSet = 150;
var targetOffset = $(id).offset().top - offSet;
$('body').stop().animate({scrollTop:targetOffset},speed, 'swing');
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
});
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