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>
Related
I'm in a big trouble. I have to redirect the web page at the last stage after developing the API, but it seems to be redirected in the "postman" application, but it does not work at all in Chrome. What should I do?
enter image description here
First, This is view to receive parameters.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>forgot_password</title>
<link rel = "stylesheet" href ="/css/sample.css">
<link href = "/css/font.css" rel = "stylesheet">
<link href = "/css/navbar2.css" rel = "stylesheet">
<link href = "/css/forgot_password_css.css" rel = "stylesheet">
<script>
function findId() {
let FindEmail = document.getElementById('exampleCheck1').checked;
let PhoneNumber = document.getElementById('exampleInputPhoneNumber').value;
let Name = document.getElementById('exampleInputName').value;
let FindPassword = document.getElementById('exampleCheck2').checked;
let PhoneNumber2 = document.getElementById('exampleInputPhoneNumber2').value;
let email = document.getElementById('exampleInputEmail2').value;
if (FindEmail == true && FindPassword == false) {
const url = new URL("/find_email",location);
url.searchParams.append('Name',Name);
url.searchParams.append('PhoneNumber',PhoneNumber);
location = url;
} else if (FindEmail == false && FindPassword == true) {
} else {
alert("아이디 찾기와 비밀번호 찾기 중 하나만 선택하세요.");
history.back();
}
}
</script>
</head>
<body>
<nav class="navbar bg-light fixed-top" id = "navbar_custom">
<div class="container-fluid" id = "container-fluid_custom">
<a class="navbar-brand" href="#">
<img src="https://cdn-icons-png.flaticon.com/512/6815/6815258.png" alt="Bootstrap" width="30" height="24">
</a>
<a class="navbar-brand" href="http://localhost:8080/">Main Page</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">My Page</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">설정</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">마이페이지</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="http://localhost:8080/mypoint">마이포인트</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<form class = "forgot_password_form">
<h1> 아이디 찾기</h1>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">아이디 찾기 사용</label>
</div> <div class="mb-3">
<label for="exampleInputPhoneNumber" class="form-label">전화번호</label>
<input type="text" class="form-control" id="exampleInputPhoneNumber" aria-describedby="emailHelp" placeholder="ex) 01012341234">
<div id="emailHelp1" class="form-text">가입 시 사용한 전화번호여야 합니다.</div>
</div>
<div class="mb-3">
<label for="exampleInputName" class="form-label">이름</label>
<input type="text" class="form-control" id="exampleInputName" placeholder="ex) 세종대왕">
<div id="emailHelp2" class="form-text">가입자의 이름이여야 합니다.</div>
</div>
<button type="submit" class="btn btn-primary" onclick= "findId()">실행</button>
</form>
<hr class ="one">
<form class = "forgot_password_form">
<h1> 비밀번호 찾기</h1>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck2">
<label class="form-check-label" for="exampleCheck2">비밀번호 찾기 사용</label>
</div> <div class="mb-3">
<label for="exampleInputPhoneNumber2" class="form-label">전화번호</label>
<input type="text" class="form-control" id="exampleInputPhoneNumber2" placeholder="ex) 01012341234">
<div id="emailHelp3" class="form-text">가입 시 사용한 전화번호여야 합니다.</div>
</div>
<div class="mb-3">
<label for="exampleInputEmail2" class="form-label">이메일</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="ex) apple1234#naver.com">
<div id="emailHelp" class="form-text">가입 시 사용한 이메일이여야 합니다.</div>
</div>
<button type="submit" class="btn btn-danger">실행</button>
</form>
<hr class ="one">
<!-- Footer -->
<footer class="text-center text-lg-start bg-white text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 link-secondary">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3 text-secondary"></i>Company name
</h6>
<p>
This is a side project website, and we're not generating any revenue yet.
Thank you for your visit. :)
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
HTML, CSS, BOOTSTRAP
</p>
<p>
SPRING
</p>
<p>
JPA
</p>
<p>
MYSQL
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3 text-secondary"></i> Seoul, 129 Teheran-ro, KR</p>
<p>
<i class="fas fa-envelope me-3 text-secondary"></i>
gurtjd97#naver.com
</p>
<p><i class="fas fa-phone me-3 text-secondary"></i> +82)10-2729-3646</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.025);">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
This is the page to be redirected.
<!DOCTYPE html>
<html lang="en" xmlns:th = "http://www.thymeleafg">
<head>
<meta charset="UTF-8">
<title>Alert Page</title>
<script th:inline = "javascript">
var username = [[${string}]];
alert(username);
</script>
</head>
<body>
</body>
</html>
Controller that processes and redirects values. (Normaly operated in Postman)
#Controller
public class ForgotController {
#Autowired
private UserService userService;
#GetMapping("/find_email")
public String findEmail(FindEmailDto findEmailDto,RedirectAttributes redirectAttributes) {
Optional<Users> users = userService.findEmail(findEmailDto);
if (users.isPresent()) {
String email = users.get().getEmail();
redirectAttributes.addAttribute("value", email);
return "redirect:/alert";
}
redirectAttributes.addAttribute("value","없는 회원 정보 입니다");
return "redirect:/alert";
}
#GetMapping("/alert")
public String alertPage(#RequestParam("value") String s, Model model) {
model.addAttribute("string", s);
return "alert";
}
}
Somehow i cant figure that out.
Hello everyone.
Ive got a simple frontend with a navbar and 2 Cols underneath.
left col got fixed size of 80px, and the right one got an image inside (so this image is fluid / responsive).
To add an input field over the image isnt the problem at all, but here comes my blockade.
I cant get the inputfield to be responsive to the size of the image.
So my thoughts was, to get the scale of the image and downscale the input.
something like this in JS
$(window).resize(function() {
// 1192 is the original imagewidth
let scale = $(".step:visible").width() / 1192;
let inputposition = document.getElementById(testid);
inputposition .css('transform', 'scale(' + scale + ')');
inputposition .css('transform-origin', 'top left');
});
now i thought about transform: scale(scale); on but this downscales the image too.
maybe someone of you can give me some food for thoughts.
So my goal is, that the inputfield minimizes as well reposition if the window resizes.
heres the sample code im workin with:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
<script src="assets/js/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg bg-danger clean-navbar">
<div class="container"><a class="navbar-brand logo" >Test</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
</ul>
</div>
</div>
</nav>
<main class="page landing-page">
<section class="clean-block clean-info dark" style="padding: 0px;">
<div class="container" style="">
<div class="row align-items-start" style="">
<div id="sidebar" class="col-1 d-md-flex flex-grow-0 flex-shrink-0 bg-danger active" style="max-width: 80px;min-width: 80px;height: 100%;padding:0px">
<ul class="list-unstyled components" style="padding:0px">
<li class="active" id="page1_li" style="position: relative; padding: 10px;">
<a onclick="function(this);" id="page1">
<img src="thumb_page1.jpg" class="img-fluid" alt="Responsive image" style="width:100%">
<div class="overlay">
<i id="overlay_page<?= $i ?>" class=""></i>
</div>
</a>
</li>
</ul>
</div>
<div class="col text-center bg-primary" style="padding: 0px;">
<form class="form-horizontal form" action="submit.php" method="post">
<div class="step " id="page1">
<div class="fullpage" style="" data-fullpage="fullpage">
<img class="img-thumbnail align-items-center" src="page1.jpg" alt="" draggable="false" contenteditable="false">
<!-- input that needs to be scaled -->
<input type="textarea" id="testid" name="testid" value="" style="position:absolute;left:100px;top:150px;width:300px;height:100px">
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
With best regards.
This is really simple. Don't add position:absolute to <input> but use <div> for that.
You need a <div> with position:relative as container. Add image with classes w-100 d-block to make it responsive. Create a <div> overlay and place content inside. <input> and <textarea> with class .form-control will have width:100% by default.
/*DEMO*/body{padding:3rem}
#overlay{
position:absolute;
top:50%;
right:3rem;
left:3rem;
transform:translateY(-50%);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="position-relative">
<img class="w-100 d-block" src="https://via.placeholder.com/400x300/007bff/ffffff" alt="">
<div id="overlay">
<input class="form-control" placeholder="Lorem Ipsum">
<hr>
<textarea class="form-control" placeholder="Lorem Ipsum"></textarea>
</div>
</div>
I am trying to get the feature block to show up on the page when I click the open button, but it is not doing anything. I have a sneaking suspension this has to do with the CDNs I'm importing and their position. Or this could have something to do with the order of the relevant tap target sections in my code, I'm not really sure. I followed the Materialize example of how to set this up verbatim, yet it seems like I can't quite get it right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mitchell Data Science</title>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/init.js"></script>
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container-fluid">
<a id="logo-container" href="index.html" class="brand-logo" style="padding-left: 30px;">Mitchell Data Science</a>
<ul class="right hide-on-med-and-down" style="padding-right: 30px">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div id="index-banner" class="parallax-container" style="height: 350px">
<div class="section no-pad-bot">
<div class="container">
<h1 class="header center teal-text text-darken-2" style = "font-weight: 600;">Mitchell Data Science</h1>
<div class="row center">
<h5 class="header col s12 dark" >Explore, Discover, Understand…</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_1.1.jpg" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="col lg9 m9 s12">
<div class="container">
<br>
<h1> Heroes of Pymoli Data Munging</h1>
<hr><br>
</div>
<div class="row">
<div class="col-3">
<div id="list-example" class="list-group" data-offset="0">
<a class="list-group-item list-group-item-action" href="#list-item-1">Abstract </a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Wrangled Data </a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Summary</a>
</div>
</div>
<!-- Element Showed -->
<div class="fixed-action-btn">
<a id="menu" class="waves-effect waves-light btn-large btn-floating" ><i class="material-icons">menu</i></a>
</div>
<!-- Tap Target Structure -->
<div class="tap-target" data-target="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
<a class="btn" id="open">open</a>
<a class="btn" id="close">Close</a>
<script>
$('#open').click(function(){
$('.tap-target').tapTarget('open');
});
</script>
<div class="col-9">
<div data-spy="scroll" data-target="#list-example" data-offset="0"
class="scrollspy-example change-color-black">
<h4 id="list-item-1">Abstract</h4>
<p>
<br><br><br><br>
<img src="static/media/heros_fantasy.jpg"
alt="Heroes of Pymoli Abstract Picture">
<p>
In this project, I have explored a game called Heroes Of Pymoli. I will be doing some data
wrangling to clean and organize my dataset, and strategically group the data to derive
educated observations and assumptions.</p>
<br><br><br><br>
</p>
<h4 id="list-item-2">Wrangled Data</h4>
<p>
<br><br><br>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/TP_hero.PNG"
alt="Total Players">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/purchasing_analy_hero.PNG"
alt="Purchasing Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_count_analy_hero.PNG"
alt="Gender Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_purchasing_analy_hero.PNG"
alt="Purchasing Analysis by Gender">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/age_analy_hero.PNG"
alt="Age Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_pop_items.PNG"
alt="Most Popular Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_profitable_items.PNG"
alt="Most Profitable Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/top_spenders.PNG"
alt="Top Spenders">
<br><br><br><br><br>
</p>
<h4 id="list-item-3">Summary</h4>
<p>
<br><br><br><br>
- The 20 – 24 yo age group is the biggest age demographic for the game accounting for 44.79% of
the overall players. The two lowest volumes of players by age are the under 10 yo group at 2.95%
and the 40+ group at 2.08%.
<br><br>
- The overall total revenue from the game is $2,379.77.
<br><br>
- From the business standpoint, the 35-39 yo age group would be a goo place to focus the
marketing efforts. Even though their total purchase value is relatively small ($147.67) in
comparison to some other demographics, they spend the most on average per purchase ($3.60).
<br><br>
- Item number 178, the Oathbreaker, Last Hope of the Breaking Storm is both the most popular
item at 12 overall purchases, and the most profitable item at a total purchase value of $50.76.
<br><br>
- The player with the Screen Name Lisosia93 is the most prolific buyer with 5 purchases. This
player has spent a total of $18.96 with an average purchase amount of $3.79.
<br><br>
- Of the all the active players, the vast majority are male (84.03%). There also exists, a
smaller, but notable proportion of female players (14.06%).
<br><br><br><br><br>
</p>
</div>
</div>
</div>
</div>
<div class="container">
<h3>Project Links</h3>
<ul>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-"
target="_blank">Heroes Of Pymoli Data Munging</a>
</li>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/blob/master/Heroes_Of_Pymoli_Data_Analysis_FINAL.ipynb"
target="_blank">Heroes Of Pymoli Kernel (Code)</a></li>
<li>Data</li>
</ul>
<br><br>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light" style = "font-weight: bold">A cutting edge approch to data exploration and vizualization.</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_2.jpg" alt="Unsplashed background img 3"></div>
</div>
<footer class="page-footer black">
<div class="row">
<h4>
<a id="logo-container" class="brand-logo" style="padding-left: 25px;">MDS</a>
</h4>
</div>
<div class="footer-copyright" style="padding-left: 25px">
<div class="container-fluid">
Made by <a class="brown-text text-lighten-3"> Howard G. Mitchell III</a>
</div>
</div>
</footer>
<!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<!--
<script> document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems, tapTarget('open'));
});</script> -->
</body>
</html>
Be sure to initialise the Feature Discovery:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.tap-target').tapTarget();
});
https://materializecss.com/feature-discovery.html#initialization
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 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