Angular Routing 1.6 assistance - javascript

When building this site I took a pure JS approach for the interaction. But now I am trying implement Angular as well, particularly for the routing.
However I am a novice with angular and am struggling with the routing. What I would like to happen is have the new section html load into the <div ng-view=""> upon click of new page in nav.
This is the error in the console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module stretchFlexViewer due to:
Error: [$injector:nomod] Module 'stretchFlexViewer' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Here is my plunkr.
http://plnkr.co/edit/F6rRQcQtA8lNgLCKmoEj?p=preview
app.js
(function() {
angular.module("app", ["ngRoute", "app.homeCtrl","app.stretchProdCtrl"])
.config(function($routeProvider) {
$routeProvider
.when("/home", {
controller: "homeCtrl",
templateUrl: "home.html"
})
.when("/stretchProd", {
controller: "stretchProdCtrl",
templateUrl: "stretchProd.html"
})
.when("/science", {
templateUrl: "/science.html"
})
.otherwise({
redirectTo: "/home"
});
});
})();
index.html
<!DOCTYPE html>
<html ng-app="app" 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" />
<script data-require="angular.js#2.0.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="angular-route#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://unmillennials.com/but.css" />
<title>Stretch Flex</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top col-xs-12 no-pad">
<div class="container col-xs-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">StretchFlex</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
<a class="menu_item" href="stretchProd.html">Stretch Producer</a>
</li>
<li>
<a class="menu_item" href="science.html">Science</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div ng-view=""></div>
</body>
</html>
homeCtrl
var app = angular.module('stretchFlexViewer', []);
app.controller('homeCtrl', function($scope) {
console.log('This is a test');
});
home.html
<section id="content">
<div class="col-md-12 col-xs-12 no-pad top-block">
<img class="top-photo col-lg-12 col-xs-12 no-pad" src="http://stretchflex.net/photos/img5.jpg" alt="tennis" width="100%" />
</div>
<div class="comp-name">
<span class="lightBlue" style="color:#87CEEB;">Stretch</span><span style="color: #D3D3D3;">Flex</span>
</div>
<div class="comparison parent">
<div class="col-md-4 col-xs-12 no-pad mov">
<div class="bordered-image child first">
<span class="stance-area">
<div class="col-md-8 col-xs-8 no-pad">
<img class="stance" src="http://stretchflex.net/stanceJaphet.jpg" min-height="50%" width="85%"/>
</div>
<div class="col-md-4 col-xs-4 no-pad ang1">
<img class="angle-japhet one" src="http://stretchflex.net/photos/startAngle.png" min-height="25%" width="100%"/>
</div>
</span>
<span class="stance-area">
<div class="col-md-8 col-xs-8 no-pad">
<img class="stance" src="http://stretchflex.net/stanceBaez.jpg" min-height="50%" width="85%"/>
</div>
<div class="col-md-4 col-xs-4 no-pad ang2">
<img class="angle-japhet one" src="http://stretchflex.net/photos/startAngle.png" min-height="25%" width="100%"/>
</div>
</span>
</div>
</div>
<div class="col-md-4 col-xs-12 no-pad mov">
<div class="bordered-image child second">
<span class="swing-area">
<div class="col-md-8 col-xs-8 no-pad">
<img class="swing" src="http://stretchflex.net/japhet1.jpg" min-height="50%" width="86%"/>
</div>
<div class="col-md-4 col-xs-4 no-pad ang3">
<div class="red-ex">
<span class="red">✘</span>
</div>
<div class="sec-ang-3">
<img class="angle-japhet sec" src="http://stretchflex.net/photos/japhetAngle.png" min-height="25%" width="100%" />
</div>
</div>
</span>
<span class="swing-area jav">
<div class="col-md-8 col-xs-8 no-pad">
<img class="swing" src="http://stretchflex.net/javier1.jpg" min-height="50%" width="86.5%"/>
</div>
<div class="col-md-4 col-xs-4 no-pad ang4">
<div class="green-check">
<span class="green">✔</span>
</div>
<div class="sec-ang-4">
<img class="angle-japhet sec" src="http://stretchflex.net/photos/javierAngle.png" min-height="25%" width="100%" />
</div>
</div>
</span>
</div>
</div>
<div class="col-md-4 col-xs-12 no-pad">
<div class="bordered-image child description third">
<div class="col-md-12 col-xs-12 delt" style="text-align: center;">
<h1>`\Delta degrees`</h1>
</div>
<div class="metrics">
<table class="fir">
<tr class="fir col-xs-12">
<th class="fir col-xs-6">Name</th>
<th class="fir col-xs-6" style="padding-left: 100px;">Height</th>
</tr>
<tr class="fir col-xs-12">
<td class="fir col-xs-6">Japhet Amador</td>
<td class="fir col-xs-6" style="padding-left: 118px;">6'4"</td>
</tr>
<tr class="fir col-xs-12">
<td class="fir col-xs-6">Javier Baez</td>
<td class="fir col-xs-6" style="padding-left: 118px;">6'0"</td>
</tr>
</table>
<table class="sec col-xs-12">
<tr class="sec col-xs-12">
<th class="sec col-xs-6">Weight</th>
<th class="sec col-xs-6" style="padding-left: 40px;">Home Runs (2014)</th>
</tr>
<tr class="sec col-xs-12">
<td class="sec col-xs-6">310</td>
<td class="sec col-xs-6" style="padding-left: 125px;">14</td>
</tr>
<tr class="sec col-xs-12">
<td class="sec col-xs-6">190</td>
<td class="sec col-xs-6" style="padding-left: 125px;">32</td>
</tr>
</table>
</div>
<div class="pelvis">
<img class="pelvis-1" src="http://stretchflex.net/pelvis1.jpg" />
<img class="arrow" src="http://stretchflex.net/rotArrow4.jpeg" />
<img class="pelvis-2" src="http://stretchflex.net/pelvis2.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12 no-pad" style="height: 300px;">
<div class="started col-md-8 col-md-offset-2 col-xs-12">
Get Started
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
Any suggestions would be great.


Here is the working plunkr
Changes made:
<html ng-app="app" lang="en"> The name of your main module is app.
Included the scripts.
Scripts:
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"> . </script>
<script data-require="angular-route#1.6.0" data-semver="1.6.0" src="https://code.angularjs.org/1.6.0/angular-route.js"></script>
<script src="app.js"></script>
<script src="homeCtrl.js"></script>
<script src="stretchProdCtrl.js"></script>
Declared one dependency of app.
Module definition:
angular.module("app", ["ngRoute"]) // ng-app="app" to match here
Referenced that module like so:
Reference main module:
angular.module("app").controller('homeCtrl'

Related

Navigating to different pages on single page template

I have a one page template that i am trying to modify so that on clicking particular links the user goes to a new page rather than scroll to a different section. I still want to keep the scroll to a section navigation but I have call to action buttons in those sections that need to go to different pages. The website is a wordpress site
Here is my js code:
$(document).ready(function() {
if ($("a" != ".external")){
$("a").on('click', function(event) {
if ((this.hash !== "/membership-form/") && (this.hash !== "#wood-grain") && (this.hash !== "#gifting") && (this.hash !== "#non-slip") && (this.hash !== "#wpcf7-f4-o1") && (this.hash !== "#carousel-control-next") && (this.hash !== "#carousel-control-prev") && (this.hash !== "#carouselExampleControls")) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
}, 800, function() {});
}
});
}
});
So on this line if ($("a" != ".external")) I added a class called external to the <a> tags that need to leave the page. I also tried this.hash !== "/membership-form/" to try and target particular <a> tags but it only seems to work with my forms and image gallery that have # references.
How can I get the site to navigate away from the home page to my other pages?
Thanks
UPDATED JS CODE
AOS.init();
var $ = jQuery;
$(document).ready(function() {
$("a").on('click', function(event) {
if (!($(location).attr('href', '/BDWest/membership-form/'))){
if ((this.hash !== "/membership-form/") && (this.hash !== "#wood-grain") && (this.hash !== "#gifting") && (this.hash !== "#non-slip") && (this.hash !== "#wpcf7-f4-o1") && (this.hash !== "#carousel-control-next") && (this.hash !== "#carousel-control-prev") && (this.hash !== "#carouselExampleControls")) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
}, 800, function() {});
}
}
});
});
UPDATED WITH THE PHP CODE
HEADER.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title><?php bloginfo('name');?> | <?php wp_title(); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url');?>" />
<!-- Bootstrap core CSS -->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="loader">
<img alt="first image" src="<?php print IMAGES;?>/3.gif">
</div>
<div class ="parallax-full" id="soon">
<div class="banner-center">
<div class="sticky-top">
<img src="https://via.placeholder.com/468x60?text=Advert" class="img-fluid"/>
</div>
</div>
<div class="hero-textBG">
<div class="logo">
<h1>CLUB BD WEST</h1>
<h2>Logo can be here</h2>
<a class="external" href="/membership-form/"><button type="button" class="btn btn-default">Register Today</button></a>
</div>
<div data-aos="fade-up" data-aos-offset="0">
<div class="scroll-button">
<a href="#home">
<img class="img-fluid" alt="scroll-button" src="<?php print IMAGES;?>/button-down.png">
</a>
<h6>Scroll down</h6>
</div>
</div>
</div>
</div>
navigation.php
<!-- Navigation -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#home"> <img src="https://via.placeholder.com/70x40?text=Very+Small+Logo" class="img-fluid"/> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section5">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
index.php
<!-- Header --><?php get_header(); ?><!--Menu -->
<?php get_template_part('navigation');?><!--Home Section -->
<div class ="parallax" id="BG-2">
<div class="container-fluid">
<div id="home">
<div class="row">
<div class="col-sm-12 text-center">
<div class="content">
<div class="mt-2 col-md-12">
<div data-aos="fade-up">
<h1 class="mt-1">CLUB BD WEST</h1>
<p class="lead">There are no winners or losers, ours is a philosophy of enjoyment through participation and we have organized a range of activities to suit all ages, fitness levels and activity choices.</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"> </div>
<section class="top-section">
<div data-aos="fade-up">
<div class="container">
<div class="row">
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/weights-icon.png"></img>
<h3>Badminton</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/staff-icon.png"></img>
<h3>Football</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/aerobics-icon.png"></img>
<h3>Cricket</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/spinning-icon.png"></img>
<h3>Recreational Cycling</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/aerobics-icon.png"></img>
<h3>Kayaking</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/spinning-icon.png"></img>
<h3>Nature rambling</h3>
</div>
</div>
<div class="row">
<div class="col text-center">
<img src="https://via.placeholder.com/500x60?text=Call+to+action+Club+Sports" class="img-fluid"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<div class="content">
<div class="mt-2 col-md-12">
<div data-aos="fade-up">
<p class="lead">The list of activities is growing, fueled by suggestions from our members.  It’s your club and responds to your needs..</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col text-center">
<h3>Our Goals</h3>
<p>To build an online social platform bringing together a diversity of people sharing a common purpose of interaction through sport and recreation.</p>
</div>
<div class="col text-center">
<h3>Our Mission</h3>
<p>To continue growth of both membership and activities developing a multicultural community with a social conscience. </p>
</div>
<div class="col text-center">
<h3>Our Vision</h3>
<p>To add to the quality of life, build cohesion in communities and enrich society.</p>
</div>
</div>
</div>
</section>
</div>
</div><!-- Container End -->
<hr class="content-seperator"></hr>
<div id="section2">
<div data-aos="fade-up">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h1>Our Story</h1>
<p>It all started when a group of friends got together for an impromptu game of badminton. The shared love of the game and the company of friends was a compelling mix and very quickly these random get togethers developed into a regular event.</p> <p>The group began to grow rapidly, first from within the circle of friends and later extending to others that were exposed to the group and drawn to it.  At this point it was evident that a structure was required to communicate with group members and so BD West was formed.</p> <p>BD West is now a not for profit social club with over 200 members and plans to grow into a multicultural community of like-minded people brought together by the love of sport, recreation and the harmony of social connection. </p>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center">
<h2>Our Management Team</h2>
</div>
<div class="col-sm-12 text-center">
<img src="https://via.placeholder.com/500x60?text=Call+to+action+Management+Team" class="img-fluid"/>
</div>
</div>
</div>
</div>
</div>
<hr class="content-seperator"></hr>
</div><!-- BG End -->
<div class ="parallax" id="BG-3"> <div class="col-sm text-center"> <img src="https://via.placeholder.com/468x60?text=Advert" class="img-fluid"/> </div>
<div id="section3">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-sm-0 text-center">
<div class="content">
<div data-aos="fade-up">
<h3 class="mt-2">Events</h3>
<p class="lead">Here are some of our latest events</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
</div>
</div>
</div><!--./container -->
</div> <!-- ./section3 -->
<hr class="content-seperator"></hr>
</div><!--./ BG3 --> <!-- Pricing Table -->
<div class ="parallax" id="BG-1">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-3 mb-sm-0 text-center">
<div id="section4">
<div class="content">
<div data-aos="fade-up">
<h3 class="mt-2">Gallery</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="content-seperator-yellow"></hr>
</div> <!-- Contact Form and Location -->
<div class ="parallax" id="BG-2">
<div id="section5">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<div class="content">
<h3 class="mt-2">Contact Us</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<?php echo do_shortcode('[contact-form-7 id="16" title="Contact Us"]');?>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<p class="lead">BD West Incorporated</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Footer Section -->
<?php get_footer();?>

if you want to link through jQuery it would be like this:
$(location).attr('href', 'http://stackoverflow.com')
But it is highly recommended to do this with pure Javascript it best simulates an HTTP redirect, and it would go like this:
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
It's better to use window.location.replace(...), because the replace() doesn't keep the page they'd come from in the session history, which avoids having the users stuck in a never-ending back-button loop.

I started to learn javascript. How can I add another scroll function?

This is HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
</div>
</body>
</html>
'''
I have a code:
window.onload = function(){
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
}
'''
Finally, when I click on the second element for scrolling, in debugger I recieve an error:"Uncaught TypeError: top.scrollIntoView is not a function
at HTMLImageElement.scrollToTop (script.js:22)". It should works properly, but I don't understand why it doen not working

you just needed to define "top". add var and your code works!
window.onload = function(){
}
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
var top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>

Other than using it like that it might be better to make it one function and use it in the HTML.
The following code should work like a charm:
function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
And, in HTML use it like that:
<a class="btn-outline-light" onclick="scrollSmoothTo('work')">See our work</a>

Using Jquery tabs isn't working properly

I have 3 different graphs I want to put in tabs and open when selected upon. I used a boostrap elements to make 3 of the graphs. I followed along the Jquery site and used that example and it isn't working how it should. For Example, when I click Tab 1 I want Graph one to appear. I've posted the code below.
$(document).ready(function(){
$( '#tabs' ).tabs();
});
.col-md-1{ padding: 10px;
border:1px solid white;
}
#size { padding: 10px;
border:1px solid white;
}
#page{padding-bottom: 100px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CS2100 Project 3</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="project3.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<div id="tabs">
<ul>
<li>PART 1</li>
<li>PART 2</li>
<li>PART 3</li>
</ul>
<div class="container" id="part1">
<h3>PART 1: 7-Day Forecast (HTML)</h3>
<table class="table table-hover table-bordered text-center">
<tbody>
<tr class="bg-primary text-primary">
<th class="text-center">Forecast</th>
<th class="text-center">Thursday</th>
<th class="text-center">Friday</th>
<th class="text-center">Saturday</th>
<th class="text-center">Sunday</th>
<th class="text-center">Monday</th>
<th class="text-center">Tuesday</th>
<th class="text-center">Wednesday</th>
</tr>
<tr>
<td>High</td>
<td>88</td>
<td>81</td>
<td>75</td>
<td>83</td>
<td>87</td>
<td>90</td>
<td>91</td>
</tr>
<tr>
<td>Low</td>
<td>61</td>
<td>59</td>
<td>52</td>
<td>57</td>
<td>59</td>
<td>63</td>
<td>65</td>
</tr>
<tr>
<td>Precip</td>
<td>0%</td>
<td>50%</td>
<td>40%</td>
<td>10%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
</tbody>
</table>
</div>
<div id="part2">
<div class="container" id="page">
<h3>PART 2: 7-Day Forecast (Bootstrap Grid)</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-center">Forecast</div>
<div class="col-md-1 text-center">Thursday</div>
<div class="col-md-1 text-center">Friday</div>
<div class="col-md-1 text-center">Saturday</div>
<div class="col-md-1 text-center">Sunday</div>
<div class="col-md-1 text-center">Monday</div>
<div class="col-md-1 text-center">Tuesday</div>
<div class="col-md-1 text-center">Wednesday</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">0</div>
<div class="col-md-1 text-center">88</div>
<div class="col-md-1 text-center">81</div>
<div class="col-md-1 text-center">75</div>
<div class="col-md-1 text-center">83</div>
<div class="col-md-1 text-center">87</div>
<div class="col-md-1 text-center">90</div>
<div class="col-md-1 text-center">91</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Low</div>
<div class="col-md-1 text-center">61</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">52</div>
<div class="col-md-1 text-center">57</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">63</div>
<div class="col-md-1 text-center">65</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Precip</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">50%</div>
<div class="col-md-1 text-center">40%</div>
<div class="col-md-1 text-center">10%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
</div>
</div>
<div id="part3">
<div class="container" id="page">
<h3>PART 3: TCP PACKET STRUCTURE</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-right" id="size">Byte#</div>
<div class="col-md-3 text-center" id="size">+0</div>
<div class="col-md-3 text-center" id="size">+1</div>
<div class="col-md-3 text-center" id="size">+2</div>
<div class="col-md-2 text-center" id="size">+3</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">0</div>
<div class="col-md-5 text-center" id="size">Source Port</div>
<div class="col-md-6 text-center" id="size">Destination Port</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">4</div>
<div class="col-md-11 text-center" id="size">Sequence Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-11 text-center" id="size">ACK Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-1 text-center" id="size">Offset</div>
<div class="col-md-1 text-center" id="size">Reserved</div>
<div class="col-md-5 text-center" id="size">Flags</div>
<div class="col-md-4 text-center" id="size">Window Size</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">16</div>
<div class="col-md-5 text-center" id="size">Checksum</div>
<div class="col-md-6 text-center" id="size">Urgent Pointer</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">20-56</div>
<div class="col-md-11 text-center" id="size">Options</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

I believe the issue is with the additionally declared jQuery library at the bottom of the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"</script>
As well, you have not included the jQuery UI library:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
$(document).ready(function(){
$( '#tabs' ).tabs();
});
.col-md-1{ padding: 10px;
border:1px solid white;
}
#size { padding: 10px;
border:1px solid white;
}
#page{padding-bottom: 100px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CS2100 Project 3</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="project3.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<div id="tabs">
<ul>
<li>PART 1</li>
<li>PART 2</li>
<li>PART 3</li>
</ul>
<div class="container" id="part1">
<h3>PART 1: 7-Day Forecast (HTML)</h3>
<table class="table table-hover table-bordered text-center">
<tbody>
<tr class="bg-primary text-primary">
<th class="text-center">Forecast</th>
<th class="text-center">Thursday</th>
<th class="text-center">Friday</th>
<th class="text-center">Saturday</th>
<th class="text-center">Sunday</th>
<th class="text-center">Monday</th>
<th class="text-center">Tuesday</th>
<th class="text-center">Wednesday</th>
</tr>
<tr>
<td>High</td>
<td>88</td>
<td>81</td>
<td>75</td>
<td>83</td>
<td>87</td>
<td>90</td>
<td>91</td>
</tr>
<tr>
<td>Low</td>
<td>61</td>
<td>59</td>
<td>52</td>
<td>57</td>
<td>59</td>
<td>63</td>
<td>65</td>
</tr>
<tr>
<td>Precip</td>
<td>0%</td>
<td>50%</td>
<td>40%</td>
<td>10%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
</tbody>
</table>
</div>
<div id="part2">
<div class="container" id="page">
<h3>PART 2: 7-Day Forecast (Bootstrap Grid)</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-center">Forecast</div>
<div class="col-md-1 text-center">Thursday</div>
<div class="col-md-1 text-center">Friday</div>
<div class="col-md-1 text-center">Saturday</div>
<div class="col-md-1 text-center">Sunday</div>
<div class="col-md-1 text-center">Monday</div>
<div class="col-md-1 text-center">Tuesday</div>
<div class="col-md-1 text-center">Wednesday</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">0</div>
<div class="col-md-1 text-center">88</div>
<div class="col-md-1 text-center">81</div>
<div class="col-md-1 text-center">75</div>
<div class="col-md-1 text-center">83</div>
<div class="col-md-1 text-center">87</div>
<div class="col-md-1 text-center">90</div>
<div class="col-md-1 text-center">91</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Low</div>
<div class="col-md-1 text-center">61</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">52</div>
<div class="col-md-1 text-center">57</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">63</div>
<div class="col-md-1 text-center">65</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Precip</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">50%</div>
<div class="col-md-1 text-center">40%</div>
<div class="col-md-1 text-center">10%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
</div>
</div>
<div id="part3">
<div class="container" id="page">
<h3>PART 3: TCP PACKET STRUCTURE</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-right" id="size">Byte#</div>
<div class="col-md-3 text-center" id="size">+0</div>
<div class="col-md-3 text-center" id="size">+1</div>
<div class="col-md-3 text-center" id="size">+2</div>
<div class="col-md-2 text-center" id="size">+3</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">0</div>
<div class="col-md-5 text-center" id="size">Source Port</div>
<div class="col-md-6 text-center" id="size">Destination Port</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">4</div>
<div class="col-md-11 text-center" id="size">Sequence Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-11 text-center" id="size">ACK Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-1 text-center" id="size">Offset</div>
<div class="col-md-1 text-center" id="size">Reserved</div>
<div class="col-md-5 text-center" id="size">Flags</div>
<div class="col-md-4 text-center" id="size">Window Size</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">16</div>
<div class="col-md-5 text-center" id="size">Checksum</div>
<div class="col-md-6 text-center" id="size">Urgent Pointer</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">20-56</div>
<div class="col-md-11 text-center" id="size">Options</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

failing to populate bootsrap row with ng-repeat

i have a bootstrap row that has to contain tow rows to encapsulate two array values using angular js . I want to loop through an array of friends using ng-repeat and fill the rows accordingly but am failing any help? my code is here
<div class="panel panel-default" style="height:2240px;">
<div class="panel-body" ng-repeat="friend in fullUser.friends">
<div class="row" style="padding-top:40px;">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<a href="user_profile.php" class="black2">
<span>
<table>
<tr>
<td>
<img ng-src="{{friend.avatar}}" class="img-circle" style="width:100px;height:100px" alt="Generic placeholder thumbnail">
</td>
<td>
<span style="margin-bottom:0px;font-size:12px;font-weight:bold;"> {{friend.name}}
Friend</span>
<hr style="margin-bottom:-15px;margin-left:0px;margin-top:0px;height:8px;width:248px;"></hr>
<span style="margin-top:-10px;font-size:25px;margin-left:223px;color:#BD2532;" class="icon icon-caret-down"></span>
</td>
</tr>
</table>
</span>
</a>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6" ng-if="$index % 2 === 0" >
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<a href="user_profile.php" class="black2">
<span>
<table>
<tr>
<td>
<img ng-src="{{friend.avatar}}" class="img-circle" style="width:100px;height:100px" alt="Generic placeholder thumbnail">
</td>
<td>
<span style="margin-bottom:0px;font-size:12px;font-weight:bold;"> {{friend.name}}
Friend</span>
<hr style="margin-bottom:-15px;margin-left:0px;margin-top:0px;height:8px;width:248px;"></hr>
<span style="margin-top:-10px;font-size:25px;margin-left:223px;color:#BD2532;" class="icon icon-caret-down"></span>
</td>
</tr>
</table>
</span>
</a>
</div>
</div>
</div>
</div>
<br/><br/>
</div>

Change column width on click in bootstrap 3

How to switch the size of one column when there is a click on a sidebar?
Im developing an application with a map in a column and a second column to the right displaying information. There is a sidebar that slides in from the right when activated.
When the sidebar is extended, the main column with the map is col-lg-6 and the column on the right is col-lg-4
Now when the sidebar is closed by clicking on a button, I would like to map column to switch to col-lg-8. Is there a way to do this?
Code for page and sidebar:
<div id="container">
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<div class="panel-heading">
<h3 class="panel-title">Projects
<button type="button" class="btn btn-xs btn-default pull-right" id="sidebar-hide-btn"><i class="fa fa-chevron-left"></i></button></h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-8 col-md-8">
<input type="text" class="form-control search" placeholder="Filter" />
</div>
<div class="col-xs-4 col-md-4">
<button type="button" class="btn btn-primary pull-right sort" data-sort="feature-name" id="sort-btn"><i class="fa fa-sort"></i> Sort</button>
</div>
</div>
</div>
<div class="sidebar-table">
<table class="table table-hover" id="feature-list">
<thead class="hidden">
<tr>
<th>Icon</th>
<tr>
<tr>
<th>Name</th>
<tr>
<tr>
<th>Chevron</th>
<tr>
</thead>
<tbody class="list"></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left:0px;">
<div class="col-xs-12 col-sm-6 col-lg-6" style="padding:0;">
<div id="map"></div>
</div>
<div class="col-xs-6 col-lg-4" style="padding-top:0px">
<div class="row">
<div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart fa-2x"></i>
</div>
<div class="panel-body" style="text-align:center">
<div id="chart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-list fa-2x"></i>
</div>
<div class="panel-body" style="text-align:left">
<div id="projects"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code for activation of sidebar and menu button:
$(window).resize(function () {
var h = $(window).height(),
offsetTop = 50; // Calculate the top offset
$('#map').css('height', (h - offsetTop));
}).resize();
$("#list-btn").click(function() {
$('#sidebar').toggle();
map.invalidateSize();
return false;
});
$("#sidebar-toggle-btn").click(function() {
$("#sidebar").toggle();
map.invalidateSize();
return false;
});
$("#sidebar-hide-btn").click(function() {
$('#sidebar').hide();
map.invalidateSize();
});
EDIT
I have tried using toggleClass and addClass/removeClass but its not working. Here is a jsfiddle to show what happens when the sidebar is hidden.
http://jsfiddle.net/Monduiz/dzo5yg72/

Try this type of trick:
$("#sidebar-hide-btn").click(function() {
$('#sidebar').hide();
$('#mapDiv').removeClass('col-lg-6');
$('#mapDiv').addClass('col-lg-8');
});

Categories

Resources