Develop Reference

Nav bar accordion link not working

I have a nav bar that contains another page of my site, the page listed in the nav bar has a drop down list that is going to be linked to an accordion on the specific page. I'm having trouble implementing it, that if one of the drop down list items is click, then you will be taken to the page and the particular accordion linked to the item will be open.
For testing purposes I only have the nav bar list item "Monitoring" accordion linked right now; when I click "Monitoring" it takes me to the right page, but the accordion is still closed.
Here's my nav bar:
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #6F9824; text-align:center ">
<div class="navbar-header" align="center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" style="color:white;" align="center"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="color:white;" align="center">
<li>
<a asp-page="/Index" style="color:white;">Home</a>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:white;">
Centrify
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Centrify Home</li>
<li>Monitoring</li>
<li>Patching</li>
<li>Onboarding</li>
<li>Disaster Recovery</li>
<li>Reporting</li>
</ul>
</li>
</div>
</nav>
Accordion I'm trying to open:
<div id="Accordion1" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="2">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Vault Status
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="2">
<div class="card-block">
<div class="form-group">
<label for="exampleFormControlSelect2">Select Environment</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>RTP</option>
<option>OMA</option>
<option>BGI</option>
<option>BG2</option>
<option>CLD</option>
<option>WRKSTN</option>
<option>QA</option>
</select><br />
<button>Submit</button>
</div>
</div>
</div>
</div>
JavaScript:
$(function() {
$("#Accordion1").accordion();
});
function getParam(name) {
var query = location.search.substring(1);
if (query.length) {
var parts = query.split('&');
for (var i = 0; i < parts.length; i++) {
var pos = parts[i].indexOf('=');
if (parts[i].substring(0, pos) == name) {
return parts[i].substring(pos + 1);
}
}
}
return 0;
}
$(function() {
var defaultPanel = parseInt(getParam('panel'));
$("#Accordion1").accordion({
active: defaultPanel
});
});

I don't know if that's what's causing the problem, but the end of you'r <ul> and first <li> is missing on you'r first HTML code

How do you expect your accordion to work if there are no headers? According to jQuery UI documentation, your HTML should look something like
<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>
but it does not. You need pairs header-content in order for it to work.

Bootstrap 3 scrollspy not working, codepen

This is my first post here so please don't be mad at me if I'm doing something wrong.
Here is the case: Trying to add bootstrap 3 scrollspy functionality into my code on codepen and it's basically not working. Tried different solutions from stackoverflow, etc. and nothing helps.
Is there any good person who can take look into my code?
HTML:
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div data-spy="scroll" data-target="#nav" data-offset="0">
<h3 class="text-center" id="about">about</h3>
<h3 class="text-center" id="projects">projects</h3>
<h3 class="text-center" id="contact">contact</h3>
</div>
CSS:
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
In codepen settings tab I included:
CSS:
bootstrap.min.css
JS:
jquery.min.js
bootstrap.min.js
Here is a link to my codepen: https://codepen.io/PatrykJamroz/full/RMZJva

First thing is you need to initiate the body and not a div tag so your body should have the following:
<body data-spy="scroll" data-target=".navbar" data-offset="0">
And not the:
<div data-spy="scroll" data-target="#nav" data-offset="0">
because the body is the thing that the scroll event is attached to so initiating a div does no good unless you are scrolling with that div.
Next you need to attach it the the .navbar or the nav itself would be the best practice. And also I see that you are using jquery 3 and this may cause an issue with bootstrap 3 so you may want to switch to jquery 2.

I think that you don't really undestand how bootstrap scrollspy actually work. You have to make the 'body' as the main scrollspy container! take a look:
$('body').scrollspy({
target: '#bs-example-navbar-collapse-1'
})
$('#scrollDiv').on('activate.bs.scrollspy', function () {
//Do stuff if there is a new event in scrollspy
})
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
<div id="scrollDiv" class="container-fluid" data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div>
<div id="about" class="col-md-12">
<h3 class="text-center">about</h3>
<div class="row">
<div class="col-sm-6">
<img class="img-responsive center-block" src="https://thumb1.shutterstock.com/display_pic_with_logo/2877733/272163653/stock-photo-happy-young-man-wearing-glasses-and-smiling-as-he-works-on-his-laptop-to-get-all-his-business-272163653.jpg" alt="not me">
</div>
<div class="col-sm-6">
<h4>Mechanical Designer</h4>
<p><span><i class="fa fa-user-circle"></i></span> An open-minded, creative and focused on new tech solutions</br>
<span><i class="fa fa-tv"></i></span> Excellent knowledge of such tools as SolidWorks and SolidWorks Simulation</br
<span><i class="fa fa-check"></i></span> FCT, ICT, EOL test systems, rack cabinets, inline systems and sheet metal</br>
<span><i class="fa fa-language"></i></span> English language advanced both speaking and writing</br>
<span><i class="fa fa-graduation-cap"></i></span> AGH UST graduate - Master of Engineering in Mechanical Engineering</br>
<span><i class="fa fa-coffee"></i></span> Automotive, active lifestyle, IT</p>
</div>
</div>
</div>
</div> <!-- About section -->
<hr>
<div id="projects" class="col-md-12">
<h3 class="text-center">projects</h3>
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="http://www.hawkridgesys.com/blog/wp-content/uploads/2018/01/01-Improving-Assembly-Performance-with-SpeedPak.png" alt="dron">
1st well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://embedwistia-a.akamaihd.net/deliveries/678ea92af801e6c2d37e149980d62bcc38d7770b.jpg" alt="engine">
2nd well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
3rd well
</div>
</div>
</div> <!-- Projects 1st row -->
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
4th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
5th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
6th well
</div>
</div>
</div> <!-- Projects 2nd row -->
</div>
<hr>
<div id="contact" class="col-md-12">
<h3 class="text-center">contact</h3>
<h3 class="text-center">Don't hesitate to contact me at:</h3>
<div class="col-xs-12" style="height:5px;"></div>
<h4 class="text-center"><span><i class="fa fa-envelope"></i></span> jamroz.patryk#gmail.com</h4>
<h3 class="text-center">...or just fill the form below!</h3>
<div class="col-xs-12" style="height:5px;"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">E-mail</span>
<input type="text" class="form-control" placeholder="Your E-mail address" aria-describedby="basic-addon1">
</div> <!-- email input-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Name</span>
<input type="text" class="form-control" placeholder="Your name" aria-describedby="basic-addon1">
</div> <!-- name input -->
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">Message</span>
<input type="text" class="form-control" placeholder="Your message to me" aria-describedby="basic-addon1">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send!</button>
</span>
</div> <!-- message input -->
</div>
<div class="col-xs-12" style="height:50px;"></div>
<div class="panel-footer text-center">Made by Patryk Jamróz. March 2018.</div>
</div><!-- Container fluid -->
In that way it work! Good luck, bye.

u can try whit jquery
$("#yourtarget").click(function() {
$('html, body').animate({
scrollTop: $("#yourDiv").offset().top
}, 2000);
});

AngularJS ng-click is not working with $scope variable

Can't get my bottom div to show.
tried all the suggestions in SO from this year. Added a variable to $scope, tried $scope.apply(); , etc.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="navController">
<div class="navbar-header" >
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navCollapse()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#!/">Exampe</a>
</div>
<div class="cart-summary">
<a href="/#!/cart">
<image src="/example/source" />
<div class="cart-info">
<div class="item-count"><p>{{ ngCart.getTotalItems() }} <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize><p></div>
<div class="total-cost"><p>{{ ngCart.totalCost() | currency }}<p></div>
</div>
</a>
</div>
</nav>
<div ng-show="vm.open" class="half-menu" id="side-menu" >
<ul>
<li><button>Cart</button></li>
</ul>
</div>
In my navController:
console.log('navController up!');
$scope.vm = { open: false};
$scope.navCollapse = function(){
console.log('before click', $scope.vm.open);
$scope.vm.open = !$scope.vm.open;
// $scope.vm.open = ($scope.vm.open == false) ? true : false;
console.log('after click', $scope.vm.open);
//open up menu
};
I know the controller is loaded because the console log shows up.

You div seems to be outside of controller's scope. try wrapping whole thing in another div like this:
<div ng-controller="navController">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="navbar-header" >
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navCollapse()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#!/">Exampe</a>
</div>
<div class="cart-summary">
<a href="/#!/cart">
<image src="/example/source" />
<div class="cart-info">
<div class="item-count"><p>{{ ngCart.getTotalItems() }} <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize><p></div>
<div class="total-cost"><p>{{ ngCart.totalCost() | currency }}<p></div>
</div>
</a>
</div>
</nav>
<div ng-show="vm.open" class="half-menu" id="side-menu" >
<ul>
<li><button>Cart</button></li>
</ul>
</div>
</div>
Ofc, sometimes placing navigation menu and components, that are controlled by the menu into a single wrapper is not an option. In this case you may use services and $broadcast/$emit to communicate the changes.
https://plnkr.co/edit/xwQkUYrDu9WL9dC46MOY?p=preview

How to close collapse panel when we click link inside the panel in bootstrap

I tried this link solution but not able to conclude. I am new to this..tried everything but all vain I want something like this what to do
check this How to close collapse panel when we click link inside the panel in bootstrap
my code:
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- ***** -->
<!-- <a href="#" class="btn btn-default" data-toggle="collapse" href="#collapse1">
<i class="material-icons" style="font-size:53px;">menu</i>
</a> -->
<!-- ****** -->
<div class="navbar navbar-default navbar-static-" role="navigation">
<div class="container">
<button class="btn btn-default" data-toggle="collapse" data-target="#menu"><span class="material-icons" style="font-size:40px;">menu</span></button>
</div>
</div>
</div>
<!-- Menu -->
<div id="menu" class="panel panel-default panel-collapse collapse bottom padding">
<div class="container collapse navbar-collapse" id="myNavbar">
<ul class="bottom padding list-inline">
<li>ABOUT US / </li>
<li><a href="#services" >SERVICES</a> / </li>
<li>HOTELS / </li>
<!--<li>PRICING</li>-->
<li>CONTACT</li>
</ul>
<div class="container bottom padding">
<div class="row">
<div class="text-center">
<p class="white">Some of our partner hotels</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Hilton Grosvenor House</h3>
<p>The definition of luxury</p>
</div>
</div>
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Marriott</h3>
<p>Service paradise</p>
</div>
</div>
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Ramada</h3>
<p>For the business traveller</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center padding padding">
<img src="images/TTB_Logo_small.png"/>
<h1>Tourists Travel Bureau UK Limited</h1>
</div>
</div>
and javascript:
<script type="text/javascript">
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});</script>

To the link or the button give
data-target = "#idofthepanel"
Refer to the panel using id instead of class
Also,
You have given data-target="#mynavbar" , but navbar is a class and not an id.

Javascript not working in mozilla firefox?

The following code is not working in mozilla firefox
works well in chrome
OS used is linux
In the code i have been changing the topbar color and the contents of the taskbar after certain scroll also there is a floating contact button to the left which need to be shown after certain div element is passed .Thanks in advance
window.onscroll = function (oEvent) { //onscrool
var mydivpos = document.getElementById("aboutus").offsetTop;
var mydivpos2 = document.getElementById("mainlogo2").offsetTop;
var mydivpos3 = document.getElementById("home").offsetTop;
var scrollPos = document.getElementsByTagName("body")[0].scrollTop;
if(scrollPos >= mydivpos)
{
document.getElementById("noshow").className = ""; //changin the classname
}
else {
document.getElementById("noshow").className = "hidden"; //the topbar which is need to show
}
if(scrollPos >= mydivpos2)
{
document.getElementById("topbarwithlogo").className ="";
document.getElementById("topbar").className = "hidden";
}
if(scrollPos == 0)
{
document.getElementById("topbar").className ="";
document.getElementById("topbarwithlogo").className = "hidden";
}
};
//HTML
<div id="noshow" class="hidden">
<div class="appiphycontact">
<ul>
<img src="logos/facebook.png" class="img-responsive">
<img src="logos/google+.png" class="img-responsive">
<img src="logos/Linkedin.png" class="img-responsive">
<img src="logos/twitter.png" class="img-responsive">
</ul>
</div>
<div class="container-fluid" id="topbar">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-ar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse">
<ul class="nav navbar-nav" id="ul">
<li>
About Us
</li>
<li>
Our Team
</li>
<li>
Our Clients
</li>
</ul>
</div>
</nav>
<div class="container-fluid hidden" id="topbarwithlogo">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="ul">
<li>
About Us
</li>
<li>
Our Team
</li>
<li id="li">
Our Clients
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid" id="home">
<div class="tinted-image">
<div class="container">
<div class="col-md-12" id="mainlogo2">
<img src="images/someimage.png" class="img-responsive" alt="">
</div>
</div>
<div class="container-fluid">
<div class="maincontent">
<div id="maincontent"><h1>.</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid aboutus" id="aboutus">
<div class="container">
<h2>About Us</h2>
<p class="aboutusheader2">LEADER IN IT SERVICES, DIGITAL AND BUSINESS SOLUTIONS</p>
<div class="row">
<div class="col-md-6 imagediv ">
<p id="aboutusinfo" >Some information.</p>
</div>
<div class="col-md-6 imagediv">
<div class="aboutusimg">
<ul>
<img src="images/someimage.png" class="img-responsive" alt="">
<img src="images/someimage.png" class="img-responsive " alt="">
<img src="images/someimage.png" class="img-responsive" alt="">
</ul>
</div>
</div>
</div>
</div>

Seems like there is something wrong with the if/else statements as the event is actually fired. If you add console.debug("scrollevent fired"); at the beginning of the function and use firebug to show the console log, you will notice that the output is actually written to the output (check the JSFiddle).
Unfortunately I cannot debug your code as I cannot find a couple of elements with the given Id's in your code sample...