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() { }
};
}
});
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 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'm developing a website for a small association. It is built using bootstrap 4, and I have a navbar that links to several flex-container. I would like these links to scroll smoothly to these elements.
I am using the following jQuery to achieve this:
// Scroll to id from nav items
$(".navbar a").click(function () {
$("body,html").animate({
scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
}, 1000)
});
This should scroll to a position corresponding to the top of the flex-container - the height of the navbar - a buffer of 10.
I also have the flowing in the the same .js file, which uses the ScrollReveal package to fade in text/images as the user scrolls through:
// Reveal text on scroll through
window.sr = ScrollReveal({ reset: true });
sr.reveal('.reveal', { opacity: 0.1, duration:600 });
Often clicking a nav-link will initially over-scroll, but will re-scroll to the correct position on a second click. I have found that if I remove the ScrollReveal call, the scrolling works as expected.
Is there something wrong with either of the above snippets?
// Get height of screen for header
$(document).ready(function () {
$('.header').height($(window).height());
});
// Scroll to id from nav items
$(".navbar a").click(function () {
$("body,html").animate({
scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
}, 1000)
});
// Header button -> scroll down
$(".header button").click(function () {
$("body,html").animate({
scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
}, 1000)
});
// This is causing the problem //
// Reveal text on scroll through
window.sr = ScrollReveal({ reset: true });
sr.reveal('.reveal', { opacity: 0.1, duration:600 });
#font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0ISg.ttf) format('truetype');
}
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
font-family: "Raleway", serif;
}
p {
font-size: 1rem;
}
html {
height: 100% !important;
}
.flex-container {
padding-left: .8em !important;
padding-right: .8em !important;
}
/* Nav bar */
.navbar {
background-color: rgba(26, 62, 85, 0.88);
}
.nav-link,
.navbar-brand {
color: rgba(141, 162, 180, 0.9);
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #4bb2f9 !important;
}
.navbar-collapse {
justify-content: flex-end;
}
<!doctype html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
<meta name="description" content="Actin Art homepage"/>
<meta name="author" content="Nick Riddiford">
<meta http-equiv="content-type" content="text/html"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<!--Scroll spy-->
<body data-spy="scroll" data-target=".navbar" data-offset="50" class="post">
<nav class="navbar navbar-expand-md navbar fixed-top">
<!-- Brand -->
<a class="navbar-brand navbar-left" href="index.html">
<img src="images/UK_flag.png" alt="Logo">
</a>
<a class="navbar-brand navbar-left" href="index_fr.html">
<img src="images/FR_flag.png" alt="">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-value="about" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="school-workshops" href="#school-workshops">School Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="books" href="#books">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="exhibitions" href="#exhibitions">Exhibitions</a>
</li>
<li class="nav-item">
<a class="btn" href="mailto:asso.actin#gmail.com">
<i class="fas fa-envelope fa-2x"></i>
</a>
</li>
</ul>
</div>
</nav>
<div class="flex-container mt-5 reveal" id="about">
<h1 class="text-center display-3 mb-3">About</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>Actin Art - <strong>L’association des Artistes et des Scientifiques Actine</strong> - is a science
communication project that combines science and art. It aims to raise general public interest in the
sciences and explain recent scientific discoveries. We are creating a series of short, illustrated,
science-based books that accurately relay science via fun, adventure stories for 3-5 year olds.</p>
<p class="reveal">As the science is accurate, the parents and teachers reading the stories to the children
will learn too, and be better able to explain the science to the children. The characters in our stories
are based on the real molecules, proteins and cells that scientists study in the lab. Our aim is that these books will inspire
children and adults to become as excited as we are by cells, molecules and biology in general!</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>
</p>
<img src="images/ActinArt_s2.jpg" alt="Actin Art" class="img-fluid">
</div>
</div>
</div>
<div class="flex-container mt-5 reveal" id="school-workshops">
<h1 class="text-center display-3 mb-3">School workshops</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<img src="images/cadherine-Joann.jpg" alt="Workshop" class="img-fluid">
<p>
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>We recently held a workshop at the Lyonnais nursery located in the 5th arrondissement in Paris. After
around 15 minutes of storytelling with our artwork, we held activities that related to some of our
stories. This was a huge success, and the children were really engaged with our stories. After
following-up with the school three months later we were delighted to discover that the children
remembered some of the key concepts from our stories!</p>
<p class="reveal">The school was very grateful for our involvement, and is looking forward to our next
workshop – as are
we! In fact, we would like to hold similar sessions in other nurseries (ages 3 – 5) around Paris. If you
would like to invite us to hold one at your school – please <a href="mailto:asso.actin#gmail.com">e-mail
us!</a></p>
</div>
</div>
</div>
<div class="flex-container mt-5 reveal" id="books">
<h1 class="text-center mb-3 display-3">Books</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>We have been working very hard on publishing some of our stories, and are delighted to announce that the
first three – part of the Jeunesse Esprits Curieux collection – will be published in November 2018!
These books are aimed at children aged 3+, and have been written by members of our group – working
scientists who are specialists in their field and want to help children (and adults) become excited
about science. For each book, the author and illustrator have worked hard to make the story both
scientifically accurate, as well as exciting and beautiful.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>
</p>
<img src="images/Book_example_paint_s.jpg" alt="Kitten painters" class="img-fluid">
</div>
</div>
</div>
<div class="flex-container mt-5 reveal" id="exhibitions">
<h1 class="text-center mb-3 display-3">Exhibitions</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<img src="images/Exhibition_s.jpg" alt="Poster" class="img-fluid" width="500">
<p>
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>To complement the books we are publishing, and to celebrate the beautiful artwork each book contains, we
are planning an exhibition ‘Le Jardin de Curiosites’. This will take place over the summer of 2019
in the Jardin Curie at the Institut Curie. Please e-mail us if
you would like to find out more, or follow us on social media
to keep updated!
</p>
</div>
</div>
</div>
<footer class="footer bg-dark">
<div class="text-center">
<i class="fab fa-facebook-f fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/scrollreveal#3.3.2/dist/scrollreveal.min.js"></script>
</body>
Since scrolling isn't playing nice with <div class="flex-container reveal"> consider wrapping your flex-containers in an additional <div> and placing the id on that outer div
<div id="about">
<div class="flex-container mt-5 reveal">
I'm trying to combine 2 different parts of materializeCSS. The horizontal FAB and the card with the button in the center of the picture and the text.
this is the result I like to have
But this is is an 'a' tag what haves his restrictions <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
I'm really close but can't find the last part. I have this result
And I'm using the follow code:
$( document ).ready(function(){
$(".button-collapse").sideNav()
});
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left', // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation
}
);
.btn-card-midle{
transform: scaleY(0.4) scaleX(0.4) translateY(0px) translateX(20px);
opacity: 0;
}
.btn-holder{
position: absolute;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CMS</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
</head>
<body>
<!-- navigatie -->
<nav class="nav-extended">
<div class="nav-wrapper">
CMS
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a><i class="material-icons">settings</i></a></li>
<li><a><i class="material-icons">close</i></a></li>
</ul>
</div>
<div class="nav-content" id="tab_menu">
<ul class="tabs tabs-transparent">
<li class="tab"><a class="active" href="#test1">Statics</a></li>
<li class="tab">Edit</li>
</ul>
</div>
</nav>
<main>
<div id="test1" class="col s12">
</div>
<div id="test2" class="col s12">
<div class="row">
<div class="col s12 m3">
<div class="card">
<div class="card-image">
<img src="https://static1.squarespace.com/static/54bff0d3e4b03c2b708fee78/54dce804e4b0208bec0e6939/5554fca4e4b01c8cda5a5d55/1499833385964/log+cabin+exterior.jpg">
<span class="card-title">Card Title</span>
<div class="fixed-action-btn btn-holder horizontal">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating btn-card-midle red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating btn-card-midle yellow darken-1" ><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating btn-card-midle green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating btn-card-midle blue" ><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<div class="fixed-action-btn" onclick="$('.tap-target').tapTarget('open');" >
<a id="menu" class="btn btn-floating btn-large red"><i class="material-icons">plus_one</i></a>
</div>
<div class="tap-target-wrapper circle-open "><div class="tap-target grey" data-activates="menu">
<div class="tap-target-content white-text open-content">
<h5>I am here</h5>
<p class="white-text">Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.</p>
</div>
</div><div class="tap-target-wave open-btn" ><a class="btn btn-floating btn-large red tap-target-origin"><i class="material-icons">plus_one</i></a></div></div>
</div>
</main>
<script type="text/javascript" src="js/main"></script>
</body>
</html>
Not sure why the other icons are kept in Ul. But this code works to keep the edit button in place.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CMS</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
</head>
<body>
<!-- navigatie -->
<nav class="nav-extended">
<div class="nav-wrapper">
CMS
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a><i class="material-icons">settings</i></a></li>
<li><a><i class="material-icons">close</i></a></li>
</ul>
</div>
<div class="nav-content" id="tab_menu">
<ul class="tabs tabs-transparent">
<li class="tab"><a class="active" href="#test1">Statics</a></li>
<li class="tab">Edit</li>
</ul>
</div>
</nav>
<main>
<div id="test1" class="col s12">
</div>
<div id="test2" class="col s12">
<div class="row">
<div class="col s12 m3">
<div class="card">
<div class="card-image">
<img src="https://static1.squarespace.com/static/54bff0d3e4b03c2b708fee78/54dce804e4b0208bec0e6939/5554fca4e4b01c8cda5a5d55/1499833385964/log+cabin+exterior.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-action" style="padding:0px">
<div class="fixed-action-btn horizontal" style="position:relative; float:right; bottom:35px; right:10px">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<div class="fixed-action-btn" onclick="$('.tap-target').tapTarget('open');" >
<a id="menu" class="btn btn-floating btn-large red"><i class="material-icons">plus_one</i></a>
</div>
<div class="tap-target-wrapper circle-open "><div class="tap-target grey" data-activates="menu">
<div class="tap-target-content white-text open-content">
<h5>I am here</h5>
<p class="white-text">Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.</p>
</div>
</div><div class="tap-target-wave open-btn" ><a class="btn btn-floating btn-large red tap-target-origin"><i class="material-icons">plus_one</i></a></div></div>
</div>
</main>
<script type="text/javascript" src="js/main"></script>
</body>
</html>
i am building a website in bootstrap for work and i just can't get it to scale down when the resolution changes at all
http://www.vccb.co.za/demohome/
i am using Bootstrap v3.3.4.
i also have the viewport meta tag aswell.
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="Vericred, Credit bureau, tracing, search, people" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VCCB Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/agency.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- JQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="https://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>
<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-63126052-1', 'auto');
ga('send', 'pageview');
</script>
<body id="page-top" style="width:100%;position:relative;" class="index">
<!-- Navigation -->
<div id="menuContainer" class="navbar navbar-default navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid" style="position:relative;width:100%">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<div class="navbar-header page-scroll" style="position:absolute;margin-left:18%">
<h2 class="section-heading slant">We are not just another bureau,</h2>
<h3 class="slant">because you are not just another consumer</h3>
<img id="menuLogo" src="img/full_size_logo.png" style="margin-top:-18%;margin-left:140%;height:100px;width:280px;visibility:visible"/>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:8%">
<ul class="nav navbar-nav navbar-right multi-level" role="menu" style="margin-top:-5.2%;margin-left:14%;width:100%;position:relative">
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-top:4%;">
<a class="page-scroll" href="Home.html">Home</a>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-left:5px;margin-top:4%;">
<a id="vis" class="page-scroll" href="about.html">About</a>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
Consumer Friend
</li>
<li class="dropdown" style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Business Partner<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" >
<a class="dropdown-toggle" data-toggle="dropdown">Our Services and Products</a>
<ul class="dropdown-menu">
<li><a target="_blank" href="consumer.html">Consumer Contact Data</a></li>
<li><a target="_blank" href="ConsumerBehaviouralData.html">Consumer Behavioural Data</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown" style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Legal<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a target="_blank" href="docs/PAIA_MANUAL.pdf">PAIA Manual</a></li>
<li><a target="_blank" href="docs/DisclaimerAndPrivacyPolicy.docx">Disclaimer and Privacy Policy</a></li>
<li>Affiliations</li>
</ul>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
Contact Us
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-left:5px;margin-top:4%;">
<a target="_blank" href="https://www.vccb.co.za/Trace">Client Login</a>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-left:5px;margin-top:4%;background-color:red;">
<a target="_blank" href="/RequestAccount.html">Sign Up As A Client</a>
</li>
<li class="list-inline social-buttons" style="margin-left:2%;margin-top:3.8%;">
<i class="fa fa-twitter" style="margin-top:25%"></i>
</li>
<li class="list-inline social-buttons" style="margin-left:2%;margin-top:2%;margin-top:3.8%;">
<i class="fa fa-facebook" style="margin-top:25%"></i>
</li>
<li class="list-inline social-buttons" style="margin-left:2%;margin-top:2%;margin-top:3.8%;">
<i class="fa fa-linkedin" style="margin-top:25%"></i>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container-fluid -->
</div>
<section id="CompInfo" style="font:14px/18px Times New Roman;color:#64676b;background-color:black;height:700px;width:70%;margin-left:15%;margin-top:1%;position:relative;">
<label style="color:white;font-size:10em;margin-top:20%;margin-left:20%;position:relative;">TUTORIALS</label>
</section>
<!-- Services Section -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-subheading text-muted">The main benefits to the consumer whose information is kept on our data base are:</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Contactability</h4>
<p class="text-muted">Improve your contactability.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-money fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Pension Pay-outs</h4>
<p class="text-muted">Receive outstanding pension pay-outs.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-suitcase fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Avoid Legal Action</h4>
<p class="text-muted">Chance to pay outstanding debt and avoid legal action.</p>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-medkit fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Consumer Rehabilitation</h4>
<p class="text-muted">Rehabilitating consumers.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-refresh fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Stay Updated</h4>
<p class="text-muted">Receive important information timeously.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-child fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Add Value</h4>
<p class="text-muted">This adds value to the consumers overall wellbeing.</p>
</div>
</div>
<br>
<br>
<button id="request" class="btn btn-m" style="color:white;float:right;margin-right:6%" type="button">Sign Up As A Client</button>
<br>
<br>
<br>
<label style="color:black;float:right"> Already a tracing customer? Click <a style="color:black;text-decoration:underline;" target="_blank" href="https://www.vccb.co.za/Trace">HERE</a> to login.</label>
</div>
</section>
<div style="visibility:hidden">Vericred, Credit bureau, tracing, search, people</div>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About</h2>
<h3 class="section-subheading text-muted">VeriCred Credit Bureau (Pty) Ltd is the newest registered Credit Bureau in South Africa in terms of the National Credit Act No 34 of 2005, with registration number NCRCB21.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li class="in">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>1990-1994</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body">
<p class="text-muted">VeriCred Credit Bureau was first established in 1990 in Bophuthatswana as a credit bureau. </p>
</div>
</div>
</li>
<li class="timeline-inverted in">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>1994-2007</h4>
<h4 class="subheading">South Africa and the National Credit Act</h4>
</div>
<div class="timeline-body">
<p class="text-muted">After 1994 VeriCred Credit Bureau was incorporated into the New South Africa and continued to operate until the National Credit Act was implemented in 2007 which significantly changed the face of the industry. </p>
</div>
</div>
</li>
<li class="in">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2012</h4>
<h4 class="subheading">Vericred Credit Bureau</h4>
</div>
<div class="timeline-body">
<p class="text-muted">In 2012 VeriCred Credit Bureau was revived and a new credit bureau was established. </p>
</div>
</div>
</li>
<li class="timeline-inverted in">
<a href="#services">
<div class="timeline-image">
<h4 style="color:White">Be Part
<br>Of Our
<br>Story!</h4>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Contact Us</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h4 style="color:white"><label style="color:red">Phone:</label> <a style="color:white" href="tel:0878034798">087 803 4798</a> </h4>
<h4 style="color:white"><label style="color:red">Fax Number:</label> 086 604 1273</h4>
<h4 style="color:white"><label style="color:red">Email:</label> <a style="color:white" href="mailto:tracesupport#vccb.co.za">info#vccb.co.za</a></h4>
<h4 style="color:white"><label style="color:red">Website:</label> <a style="color:white" href="www.vccb.co.za">www.vccb.co.za</a> </h4>
<h4 style="color:white"><label style="color:red">General Enquiries:</label> <a style="color:white" href="mailto:info#vccb.co.za">info#vccb.co.za</a> </h4>
<h4 style="color:white"><label style="color:red">Website:</label> <a style="color:white" href="mailto:disputes#vccb.co.za">disputes#vccb.co.za</a> </h4>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-lg-12">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="button" onclick="SendMail()" class="btn btn-xl" style="color:white">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container" style="width:auto">
<div class="row">
<div class="col-md-4" style="width:4%">
<img id="back-top" onclick="$('body,html').animate({scrollTop: 0}, 800);" src="/img/top.png" title="Click to go to the top." style="width:100%;height:100%;border-radius: 50%;-webkit-border-radius: 50%; -moz-border-radius: 50%; box-shadow:0 0 10px rgba(0,0,0,1);-webkit-box-shadow: 0 0 10px rgba(0,0,0,1);-moz-box-shadow: 0 0 10px rgba(0,0,0,1)"/>
</div>
<div class="col-md-4" style="width:25%">
<ul class="list-inline quicklinks">
<li><a class="page-scroll" href="#contact">Contact us</a>
<a target="_blank" href="docs/Terms Conditions and Privacy Policy.pdf">Disclaimer and Privacy Policy</a></li>
<li>PAIA Manual</li>
</ul>
</div>
<div class="col-md-4" style="width:20%;margin-left:12%;">
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-linkedin"></i>
</li>
</ul>
</div>
<div class="col-md-4" style="width:25%;margin-left:14%">
<span class="copyright">Copyright © www.vccb.co.za 2016</span>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
<script src="Scripts/ContactUs.js"></script>
<script>
var once = true;
var count = 0;
$('#back-top').fadeOut();
function isScrolledIntoView(elem) {
var centerY = Math.max(0, ((jQuery(window).height() - jQuery(elem).outerHeight()) / 2)
+ jQuery(window).scrollTop());
centerY = parseFloat(centerY) + 300;
var elementTop = jQuery(elem).offset().top;
var elementBottom = elementTop + jQuery(elem).height();
return elementTop <= centerY && elementBottom >= centerY;
}
jQuery(window).on("scroll resize", function () {
jQuery(".in").each(function (index, element) {
if (isScrolledIntoView(element)) {
jQuery(element).animate({ opacity: 1.0 }, 300);
}
});
});
$(document).on("click", "#vis", function () {
$(".in").css("opacity", "1.0");
});
$(document).on("click", "#giveMail", function () {
alert("Please fill the form in and email it to tracesupport#vccb.co.za");
});
$(document).on("click", "#request", function () {
window.location.href = "/RequestAccount.html";
});
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
</script>
To use bootstrap for responsive design, you need to specify the number of columns for different sizes. Bootstrap is split into 4 breakpoints:
col-xs-* (extra small)
col-sm-* (small)
col-md-* (medium)
col-lg-* (large)
It is a mobile first framework, so specify the size for extra small first, then specify the point at which the size should change. Eg. If you wanted a div to be 12 columns at extra small, small, and medium, but only 6 columns on large, you would do <div class="col-xs-12 col-lg-6">.
You can specify all breakpoints, but if you don't, it will default to the smallest one specified.
In your code, you have set the size for only one breakpoint, and you have not gone mobile-first, so it is not responsive.
The reason the navbar is not collapsing is because you have not put the button inside the div.navbar-header. There needs to be a button with data-toggle="collapse" and data-target="#idOfNav". This is what appears on smaller screens and what toggles the navbar to collapse/expand. For example:
<button class="navbar-toggle" data-toggle="collapse" data-target="#nav" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
And this would go in the navbar-header.
Here's a codepen of a default bootstrap navbar, so you can see how it should be: http://codepen.io/Xhaerithius/pen/ZQPqNz
Also, you can use a bootstrap navbar for your footer as well. Just change the class of navbar-static-top to navbar-fixed-bottom. Your footer needs to be responsive too! :D