Navbar changing from transparent to black on scroll / resize - load?

Navbar changing from transparent to black on scroll / resize - load? - javascript

So I have a JS that allows me to get my navbar to change from transparent at the top of the screen, to black once you start scrolling.
However, with this script my page loads (on refresh for ex) and the bar starts off black and slowly fades to transparent.
How can I edit this code so that on load (AT THE TOP) the bar is always transparent. And only on scroll or resize it changes.
**Please don't point out that I have "load" in the JS.. without this it starts off black until i scroll down then back up to the top.
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");
} else {
$('.navbar').removeClass("navbar-inverse");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function() {
checkScroll();
});
}
body {
height: 1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
&.btn-gs-lg {
padding: 10px 33px !important;
.transition(background-color ease .3s);
&: hover {
background-color: transparent;
}
}
&.btn-gs-lg-alt {
padding: 10px 33px !important;
.transition(background-color ease .3s);
&: hover {
background-color: lighten(blue, 10%);
}
}
}
.navbar.navbar-inverse {
background: transparent;
transition: all .5s linear;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: black;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
text-transform: uppercase;
&: hover {
color: darken(blue, 10%) !important;
}
}
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-inverse navbar-alt navbar-fixed-top scrolled">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#o-navbar-collapse" 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>
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-paper-plane-o"></i>
Free Trial
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Home
</li>
<li>
Features
</li>
<li>
FAQ
</li>
<li>
Pricing
</li>
</ul>
</div>
</div>
</div>
</html>
TIA.

The issue is class navbar-inverse in your div.
bootstarp applies blackbackground color on the element where this class is used.
you should remove this class from html and use the below code in script.
Hope this helps.
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");} else {
$('.navbar').removeClass("navbar-inverse");}
updated snippet
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY)
{
$(".navbar").fadeIn(1, function() {
$(this).css({opacity: 1.0});
$(this).addClass("navbar-inverse")
});
}
else
{
$(".navbar").fadeIn(1000, function() {
if($(window).scrollTop() <= startY)
{
$(this).fadeOut(1000, function()
{
$(this).css({opacity: 1.0}); $(this).removeClass("navbar-inverse")
});
}
});
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
text-transform: uppercase;
&:hover {
color: darken(#blue,10%) !important;
}
}
}
.navbar.navbar-inverse {
background: transparent;
transition: all .5s linear;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: black;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand navbar-brand-alt">
</a>
</div>
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#my-navbar-collapse" 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>
<div class="navbar-collapse collapse" id="my-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-paper-plane-o"></i>
Free Trial
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Home
</li>
<li>
Features
</li>
<li>
FAQ
</li>
<li>
Pricing
</li>
</ul>
</div>
</div>
</div>
<section class="page-section page-section-xlg bs-bg" id="home">
<div class="container">
<div class="row wrap wrap-alt">
<div class="col-md-offset-6 col-md-6">
<h1 class="text-white heading-responsive largest">LOREM IPSUM</h1>
<h4 class="subheading subheading-md subheading-md-white thin">LOREM IPSUM DOLOR SIT AMET. LOREM IPSUM DOLOR SIT AMET.</h4>
<br />
<a href="#" class="btn-gs btn-gs-lg text-normalize">
<i class="fa fa-paper-plane-o"></i>
Free Trial
</a>
</div>
</div>
</div>
</section>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

Related

Faded header on scroll down - apply to scroll up as well

I have a header that fades from transparent to blue once you start scrolling. Once you reach the top of the page again the header returns to transparent.
But right now it just jumps back to being transparent. Might be obvious - but what can I do to make the blue fade nicely to transparent as well?
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");
} else {
$('.navbar').removeClass("navbar-inverse");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(#brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar.navbar-inverse {
background: transparent;
transition: all .5s linear;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="#Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Back
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

Looks like the problem here is that the CSS transition property is included in the class that you're adding/removing as you reach the top of the page ("navbar-inverse"). The transition will work when you add the class, but removing it will give the abrupt change in transparency you're seeing.
Instead, try putting the transition in a separate ".navbar" class, and removing it from "navbar-inverse", like so:
.navbar{
transition: all .5s linear;
}
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");
} else {
$('.navbar').removeClass("navbar-inverse");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(#brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar{
transition: all .5s linear;
}
.navbar.navbar-inverse {
background: transparent;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="#Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Back
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

You can the jQueryUI animated addClass() removeClass();
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse", 1000, "easeInBack");
} else {
$('.navbar').removeClass("navbar-inverse", 1000, "easeInBack");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(#brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar.navbar-inverse {
background: transparent;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="#Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Back
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

onclick remove selected and show/hide the delete button and dropdown title

Use this jsFiddle instead of Stack Snippet
$(".dropdown li a").dblclick(function(){
//alert('Long pressed');
$(this).parent().toggleClass('selected');
if ($('.dropdown li').hasClass('selected')) {
// alert('1 Item selected');
$(this).parent().parent().parent().parent().parent().parent().find('.header').find('.dropdown-title').addClass('hide');
$(this).parent().parent().parent().parent().parent().parent().find('.deleteli').removeClass('hide');
$(this).parent().parent().parent().parent().parent().parent().find('.deleteli').addClass('show');
}
else {
$(this).parent().parent().parent().parent().parent().parent().find('.header').find('span').removeClass('hide');
$('.delete').removeClass('show');
$('.delete').addClass('hide');
// alert('1 Item dis selected');
}
});
$('a#deletelibtn').click(function () {
// body...
// alert('deletelibtn clicked')
$(this).parent().parent().find('.selected').remove();
$(this).parent().find('.dropdown-title').removeClass('hide');
$(this).parent().find('.dropdown-title').addClass('show');
})
/*Dropdown Messages*/
.messages-dropdown{
width: 300px;
}
.messages-dropdown .header{
padding: 15px;
border-bottom: 1px solid #ccc;
}
.messages-dropdown .header small{
float: right;
}
.messages-dropdown .header small a{
font-style: 9px;
margin-left: 5px;
}
.messages-dropdown .footer{
text-align: center;
border-top: 1px solid #ccc;
}
.messages-dropdown .footer a{
padding: 15px;
}
.messages-items{
list-style: none;
padding: 0;
padding-left: 0px;
margin: 0;
}
.messages-items .Mitem {
padding: 10px;
padding-left: 10px;
border-left: 3px solid transparent;
}
.messages-items .Mitem:hover {
background: #f0f0f0;
border-color: #3a3f51;
}
.messages-items .Mitem a {
display: inline-block;
width: 100%;
}
.messages-items .Mitem a:hover {
text-decoration: none;
background: #f0f0f0;
}
.messages-items .Mitem a b{
color: #444;
letter-spacing: 1px;
}
.messages-items .Mitem a small{
color: #999;
letter-spacing: 1px;
}
.messages-items .Mitem img{
float: left;
margin-right: 10px;
border-radius: 100% !important;
padding: 5px;
border: 1px solid #ccc;
width: 40px;
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="icon icon-li-envelope message-bell"></i>
<span class="badge message-badge">4</span>
</a>
<ul class="dropdown-menu messages-dropdown">
<li class="header">
<span class="dropdown-title">
heading
</span>
<a class="#delete" id="deletelibtn">
delete
</a>
</li>
<div id="message">
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
When I select the messages the deletelibtn option is enabled and I'm able to delete the messages, but after deleting the messages the deletelibtn button is not hiding and then again if am selecting the messages again the delete option is not showing.
When the deletelibtn option is showing the dropdown-title should be hidden, similarly when the dropdown-title is visible the deletelibtn button should be hidden.
I hope I explained what I need exactly.

I changed several little things which wouldn't affect functionality but are 'best practice'. There were a couple of small targeting issues as well which are what caused the functional problem. The reason it was so hard to debug is because your html was a but jumbled and you reused the same words over and over making it hard to follow the logic. Here is the corrected js.
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and
// therefore events delegated to document won't be fired
event.stopPropagation();
});
$("ul.messages-items a").dblclick(function(){
$(this).closest('ul.messages-items').parent().addClass('selected');
var $container = $(this).closest('div.container-fluid')
if ($('li.dropdown').hasClass('open')) {
$container.find('.header').find('.dropdown-title').removeClass('show').addClass('hide');
$container.find('.deleteli').removeClass('hide').addClass('show');
}
else {
$container.find('.header').find('span').removeClass('hide').addClass('show');
$('.delete').removeClass('show').addClass('hide');
}
});
$('a#deletelibtn').click(function () {
var $this = $(this);
$('#message').find('li.selected').remove();
$this.parent().find('.dropdown-title').removeClass('hide').addClass('show');
$this.find('i.deleteli').removeClass('show').addClass('hide');
})
https://jsfiddle.net/xctgo71x/23/
You can add this off-click event to reset the dropdown.
$(document).click(function(e){
//console.log(e);
if(true)
ResetDropdown();
});
function ResetDropdown(){
$('span.dropdown-title').removeClass('hide').addClass('show');
$('i.deleteli').removeClass('show').addClass('hide');
$('#message').find('li.selected').removeClass('selected');
}
It works ok on the jsfiddle but on your actual code you may need to tweak it a little.
https://jsfiddle.net/xctgo71x/29/

How to make nav-fixed-top push down content like non-fixed navbar?

I want to make my navbar fixed on the top and push down content when I open the collapse menu like it normally do in static or just nav.
Like this: (https://getbootstrap.com/examples/navbar-static-top/)
But I want the navbar to be fixed to top.
I read this before: Navbar-fixed-top pushes content on page up
but adding padding just won't work, please help me solve this xD
My code
CSS & HTML:
/*------------------------------------------------- Hero Image -------------------------------------------------*/
.calltoaction {
text-align: center;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
.calltoaction h1 {
text-align: center;
display: inline-block;
font-size: 70px;
/*text-transform: uppercase;*/
letter-spacing: 2px;
border: 8px solid #FFFFFF;
border-radius: 13px;
padding: 17px 20px;
color: white;
font-family: sans-serif;
font-weight: 900;
}
.calltoaction h3 {
color: #FFFFFF;
font-size: 29px;
text-align: center;
}
#hero-image {
height: 870px;
background: #e8eced url('http://twnateserver.no-ip.org/Pictures/taiwan-taipei.jpg') no-repeat center;
}
#hero-image h1 {
margin: 215px 0 7px 0;
}
#hero-image h3 {
margin: 3% 0 7px 0;
}
/*#hero-image a {
margin: 3% 0 7px 0;
}*/
/*------------------------------------------------- Hero Image -------------------------------------------------*/
/*------------------------------------------------- navbar----------------------------------------------*/
.navbar {
background-color: rgba(15, 91, 121, 0.03);
background: rgba(15, 91, 121, 0.03);
border-color: rgba(15, 91, 121, 0.03);
margin-bottom: 0px;
/*Line 4213-4217 in Bootstrap.css*/
/*Goal effect: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h*/
}
.navbar li {
color: #000;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: rgba(233, 237, 239, 0.42);
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(15, 91, 121, 0.03);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
/*Line 4513-4574 in Bootstrap.css define the colors of navbar texts and hover colors*/
/*---------------------------------------------------------------------------------------------------------------*/
<!DOCTYPE html>
<html>
<head>
<title>Nate</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel='shortcut icon' type='image/x-icon' href='favicons/0.ico' />
</head>
<body>
<!-- Fixed Top Navbar, please add middle to top fixed navbar too when you can... -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#">Nate's Testing Place</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- li class="active" -> transform button to grey -->
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span>&nbsp Log in</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Hero Image and texts -->
<div id="hero-image">
<div class="calltoaction">
<h1><b>Nate's Testing Place</b></h1>
<h3>Just a testing site, always open but not seven-eleven...</h3>
<!--Let's Go-->
</div>
</div>
<!-- Hero Image and texts -->
<div class="containter widgetpadding">
<div class="col-md-4 col-xs-6">
<h4>My First Unity Game: Roller Madness (Project 2 of the coursera course)</h4>
Play Roller Madness
</div>
<div class="col-md-4 col-xs-6">
<h4>Just a nevbar testing page, css is so tricky......</h4>
Go to nevbar test page
</div>
<div class="col-md-4 col-xs-6">
<h4>Some installation info for installing Kali linux, no installation required now...</h4>
Kali Linux Installation info
</div>
<div class="col-md-4 col-xs-6">
<h4>Text Tutorial for dual-booting Arch and Windows10 UEFI......</h4>
Arch info
</div>
<div class="col-md-4 col-xs-6">
<h4>Installing arch by installing Antergos is much more easier and pleasant......</h4>
Antergos info
</div>
<div class="col-md-4 col-xs-6">
<h4>sdfsadfsdfsdfasdfawefregergtrhrtyhjytjtyjtyjtyjtyjtyjtyjtyjtryjtryjrtyjrtyjtyj</h4>
aetvretevtdsfv
</div>
</div>
<!--Back to Top Widget: http://html-tuts.com/back-to-top-button-jquery/ -->
<div class="">
</div>
<!--Back to Top Widget-->
</body>
</html>

If padding isn't working for you, try this for <nav>:
nav.navbar-fixed-top {
position:fixed;
top:0;
}
and then the below for <body>:
body::before {
display:block;
content: '';
height:60px; /* or whatever */
}

Add
body {
min-height: 2000px;
padding-top: 70px; /*70px nabar height*/
}
see bootstrap example
live example here

I want to make my navbar fixed on the top and push down content when I
open the collapse menu like it normally do in static or just nav.
I recently met with such a requirement and below jquery helped.
/* Jquery to push to content down for fixed boostrap navbars in mobile displays
* Replace 400px with desired value througout
*/
jQuery(function($){
$("#navbar-collapse li.expanded.active.dropdown").on("click",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$(this).trigger("data-attribute-changed");
});
$("#navbar-collapse li.expanded.active.dropdown").on("data-attribute-changed",function(){
if(!$(this).hasClass("open")){
var dropdown_height=$(this).children(".dropdown-menu").height();
var navbar_collapse_margin = parseInt($("#navbar-collapse").css("margin-top")) + dropdown_height;
navbar_collapse_margin = navbar_collapse_margin + "px";
$("#navbar-collapse").css("margin-top",navbar_collapse_margin);
}
else{
$("#navbar-collapse").css("margin-top","400px");
}
});
$(window).on("resize",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$("#navbar-collapse").css("margin-top","0px"); // Reset margin on resize
});
$("button.navbar-toggle").on("click",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$("#navbar-collapse").css("margin-top","0px"); // Dealing with regular displays
else
$("#navbar-collapse").css("margin-top","400px");
});
});

navbar has a min-height of 50px as per this rule on line 4169 of bootstrap.css
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
so for the div after navigation menu have a margin-top of at least 50px and it should work fine..

How to replace css class value using angularjs values?

I have a problem now to make my css values dynamic. I have this kind of code but not working
<style>
.panel-primary {
background-color:{{myColorPanel}}
}
</style>
I've seen this post from this link
How to Dynamically create a CSS class using AngularJS
i don't know what is my mistakes there that it didn't work.
Anyone have an alternative solution to my problem.
I just want to make bootstrap panel to be customized in colors and i don't want to put ng-class or ng-style in every panel i used coz it is so many.
Anyone have an idea please let me know.
Full Code
<!DOCTYPE html>
<html data-ng-app="Aptus">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
<title>Centralized Test</title>
<!--<link href="http://cdn.dbtc.sdb.ph/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />-->
<link href="contents/css/angucomplete.css" rel="stylesheet" />
<link href="contents/css/bootstrap.min.css" rel="stylesheet" />
<link href="contents/css/dashboard.css" rel="stylesheet" />
<link href="contents/css/loading-bar.css" rel="stylesheet" />
<link href="contents/css/loading-bar.min.css" rel="stylesheet" />
<link href="contents/css/font-awesome.min.css" rel="stylesheet" />
<link href="contents/css/cropper.min.css" rel="stylesheet" />
<link href="styles/myStyles.css" rel="stylesheet" />
<link href="contents/css/elusive-webfont.css" rel="stylesheet" />
<link href="contents/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="contents/css/angular-chart.css" rel="stylesheet" />
<link href="Scripts/ckeditor/contents.css" rel="stylesheet" />
<link href="Contents/css/colorpicker.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.ng-ckeditor {
border: 0;
}
body {
overflow-x: hidden;
}
#sidebar-dropdown {
color: #9a96a1 !important;
}
.form-control {
border-radius: 0 !important;
}
.modal .modal-body {
max-height: 450px !important;
overflow-y: auto;
}
#media (max-width:767px) {
.small-width-hidden {
display: none;
}
}
#media screen {
footer {
display: none;
}
}
#media print {
.progress {
background-color: #F5F5F5 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F5F5F5', endColorstr='#F5F5F5')" !important;
}
.progress-bar-success {
display: block !important;
background-color: #198718 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#198718', endColorstr='#198718')" !important;
}
.progress-bar-info {
display: block !important;
background-color: #5BC0DE !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5BC0DE', endColorstr='#5BC0DE')" !important;
}
.progress, .progress > .progress-bar {
display: block !important;
-webkit-print-color-adjust: exact !important;
box-shadow: inset 0 0 !important;
-webkit-box-shadow: inset 0 0 !important;
}
.not-printable {
display: none;
}
.additional {
display: inline-block !important;
}
.printable {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
}
.small-font {
font-size: 8pt !important;
}
.small-padding > tbody > tr > td {
padding-top: 1px !important;
padding-bottom: 1px !important;
margin: 1px !important;
}
.small-padding > tbody > tr > th {
padding-top: 1px !important;
padding-bottom: 1px !important;
margin: 1px !important;
}
.small-padding > table {
padding: 1px !important;
}
.small-font > span {
font-size: 6pt !important;
}
footer {
position: fixed !important;
bottom: 0 !important;
}
#page {
size: auto;
margin: 5mm;
}
}
#CriteriaTable > tr > th {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.dashboardsubmenu {
list-style-type: none;
padding-left: 10px;
}
.tab-content {
border-right: solid 1px #ddd;
border-left: solid 1px #ddd;
border-bottom: solid 1px #ddd;
}
#icon-tab > li > a {
border-radius: 0 !important;
}
#loading-bar-spinner .spinner-icon {
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: red;
border-left-color: red;
border-radius: 10px;
-webkit-animation: loading-bar-spinner 400ms linear infinite;
-moz-animation: loading-bar-spinner 400ms linear infinite;
-ms-animation: loading-bar-spinner 400ms linear infinite;
-o-animation: loading-bar-spinner 400ms linear infinite;
animation: loading-bar-spinner 400ms linear infinite;
}
#loading-bar .bar {
background: red;
}
#loading-bar .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 1px red, 0 0 1px red;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/************For Angular-Modal****************/
#media (max-width:530px) {
.message {
width: 100% !important;
}
}
/*******************************************/
a:not(:hover) {
text-decoration: none !important;
}
.modal-content {
border-radius: 0;
}
.go-top {
position: fixed;
bottom: 1em;
left: 1em;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 1em;
display: none;
}
.go-top:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
.math-tex {
font-size: 20px !important;
}
table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #fff;
}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
}
});
</script>
<script type="text/javascript" src="Scripts/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!---->
<!-- <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>-->
</head>
<body data-ng-cloak="" data-ng-controller="indexController">
<style>
.panel-primary {
background-color:{{myColorPanel}}
}
</style>
<div class="container">
<div class="row">
<div class="wrapper">
<div class="sidebar-wrapper not-printable">
<div class="sidebar not-printable" style="margin-bottom:10px">
Centralized Test
<div class="user-panel">
<div class="pull-left image">
<img src="Contents/images/photo.png" class="circular" alt="User Image" />
</div>
<div class="pull-left info">
<p>Hello {{lastName}}</p>
<a class="cursor-pointer" data-ng-click="logOut()">Log Out</a>
</div>
</div>
<ul class="nav nav-pills nav-stacked">
<li><a class="cursor-pointer">Dashboard</a></li>
<li id="sidebar-dropdown" data-ng-repeat="mod in modulesData | filter:{userRoleName:currentRole || ''}" data-ng-class="{'active' : activeModule == mod.moduleId}">
<a href="{{mod.moduleUrl}}" data-toggle="collapse" data-target="#{{mod.moduleId}}" data-ng-click="setCurrentModule(mod);SetActiveModule(mod.moduleId)">
<span class="pull-right"><span class="caret" data-ng-show="mod.moduleUrl == '#' || mod.moduleUrl == ''"></span></span><i class="{{mod.iconUrl}}"></i> <span>{{mod.moduleName}}</span>
</a>
<ul class="collapse dashboardsubmenu" id="{{mod.moduleId}}" style="list-style-type: none">
<li class="list-group-item no-border" data-ng-repeat="sub in mod.subModule | filter:{userRoleName:currentRole || ''}"><i class="{{sub.iconUrl}}"></i> <span>{{sub.moduleName}}</span></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content-wrapper">
<div class="content">
<div class="container not-printable">
<div class="row">
<div class="header">
<nav class="navbar navbar-static-top navigation" role="navigation">
<a class="navbar-toggle navbar-left cursor-pointer" role="button" id="toggle-button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-left">
<ul class="nav navbar-nav">
<li><a class="cursor-pointer" href="#/home" data-ng-click="setCurrentModule('Dashboard')" style="color:white !important"><span class="fa fa-home fa-lg"></span></a></li>
<li class="dropdown" data-ng-show="iTestRoles.length>0">
<a class="cursor-pointer dropdown-toggle" data-toggle="dropdown-menu" data-target="#Roles">{{currentRole}} <span class="caret"></span></a>
<ul class="dropdown-menu" id="Roles">
<li data-ng-repeat="data in iTestRoles"><a class="cursor-pointer" data-ng-click="SetiTestRole(data.userRoleName,data.userRoleId)">{{data.userRoleName}}</a></li>
</ul>
</li>
<li class="dropdown" data-ng-show="iTestSubjectGrade.length>0">
<a class="cursor-pointer dropdown-toggle" data-toggle="dropdown-menu" data-target="#SubGrade">{{subject}} {{grade}}<span class="caret"></span></a>
<ul class="dropdown-menu" id="SubGrade">
<li data-ng-repeat="data in iTestSubjectGrade"><a class="cursor-pointer" data-ng-click="SetiTestSubGrade(data.subject,data.grade,data.subjectCode,data.gradeID)">{{data.subject}} {{data.grade}}</a></li>
</ul>
</li>
</ul>
</div>
<div class="navbar-right right-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle cursor-pointer" data-toggle="dropdown-menu" data-target="ProfileMenu">
<i class="fa fa-user"></i> {{firstName
}} {{middleInitial}} {{lastName}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="ProfileMenu">
<!-- User image -->
<li class="user-header bg-light-green">
<img src="Contents/images/photo.png" class="circular" alt="User Image" />
<p>
{{firstName}} {{middleInitial}} {{lastName}}
<!--- {{userRole}}-->
<small></small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<!-- <div class="col-xs-4 text-center">
Followers
</div>
<div class="col-xs-4 text-center">
Sales
</div>
<div class="col-xs-4 text-center">
Friends
</div>-->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a class="btn btn-default btn-flat cursor-pointer">Profile</a>
</div>
<div class="pull-right">
<a class="btn btn-default btn-flat cursor-pointer" data-ng-click="logOut()">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row not-printable" id="content-title">
<h3>{{currentModule.moduleDescription}}</h3>
</div>
<div class="row" id="content">
<div data-ng-view="" class="printable">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="go-top text-center not-printable">
<span class="fa fa-chevron-circle-up not-printable" style="font-size:32px"></span><br />
<span class="not-printable">Go to Top</span>
</a>
</div>
<div id="icon" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="border-radius:0">
<div class="modal-header" style="border-radius:0;background-color:#3c8dbc">
<label class="modal-title" style="color:white">Icons</label>
</div>
<div class="modal-body">
<ul class="nav nav-tabs cursor-pointer" role="tablist" id="icon-tab">
<li class="active"><a class="cursor-pointer" role="tab" data-toggle="tab" data-target="#glyphicons">Glyphicons</a></li>
<li><a role="tab" data-toggle="tab" data-target="#font-awesome">Font-Awesome</a></li>
<li><a role="tab" data-toggle="tab" data-target="#elusive">Elusive-Icon</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="glyphicons">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="glyph in ModuleIcons.GlyphIcons" style="padding:10px"><span class="{{glyph.Name}}"></span></div>
</div>
</div>
</div>
<div class="tab-pane" id="font-awesome">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="awesome in ModuleIcons.FontAwesome" style="padding:10px"><span class="{{awesome.Name}}"></span></div>
</div>
</div>
</div>
<div class="tab-pane" id="elusive">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="elusive in ModuleIcons.ElusiveIcon" style="padding:10px"><span class="{{elusive.Name}}"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="border-radius:0">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-ng-click="Submit(classes,enrollCodes)">Continue</button>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="warning-dialog.html">
<div class="modal-header" style="border-radius:0">
<h4 style="font-weight:bolder" class="text-center">You're Idle. Do Something!</h4>
</div>
<div ng-idle-countdown="countdown" ng-init="countdown=10" class="modal-body" style="border-radius:0">
<progressbar max="10" value="10" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</progressbar>
</div>
</script>
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Normally you'd be logged out, but in this demo just do anything and you'll be reset.
</p>
</div>
</script>
<script src="scripts/jquery-1.11.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-local-storage.min.js"></script>
<script src="scripts/loading-bar.min.js"></script>
<script src="scripts/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="scripts/angular-idle.min.js"></script>
<script src="scripts/angucomplete-alt.min.js"></script>
<script src="scripts/moment.min.js"></script>
<script src="scripts/bootstrap-datetimepicker.min.js"></script>
<script src="scripts/cropper.min.js"></script>
<script src="scripts/dashboard.js"></script>
<script src="scripts/ckeditor/ckeditor.js"></script>
<script src="scripts/Chart.min.js"></script>
<script src="scripts/angular-chart.js"></script>
<script src="Scripts/ng-ckeditor.js"></script>
<script src="Scripts/angularjs-unique.js"></script>
<script src="Scripts/bootstrap-colorpicker-module.min.js"></script>
<script src="app/app.js"></script>
<script src="app/Controllers/IndexController.js"></script>
<script src="app/Controllers/loginController.js"></script>
<script src="app/Services/authInterceptorService.js"></script>
<script src="app/Services/authService.js"></script>
<script src="app/Controllers/HomeController.js"></script>
<script src="app/Services/HomeService.js"></script>
<script src="app/Filters/Filter.js"></script>
<script src="app/Controllers/SetupController.js"></script>
<script src="app/Services/SetupService.js"></script>
<script src="app/Directives/Directives.js"></script>
<script src="app/Controllers/TestController.js"></script>
<script src="app/Services/TestService.js"></script>
<script src="app/Controllers/ITestController.js"></script>
<script src="app/Services/ITestService.js"></script>
<script src="app/Services/SignalRService.js"></script>
<script src="Scripts/jquery.floatThead.min.js"></script>
<script src="app/Controllers/ActivateExamController.js"></script>
<script src="app/Services/ExamActivationService.js"></script>
<script type="text/javascript">
$('#icon-tab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
//$.fn.modal.Constructor.prototype.enforceFocus = function () {
// modal_this = this
// $(document).on('focusin.modal', function (e) {
// if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
// && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
// && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
// modal_this.$element.focus()
// }
// })
//};
$(document).ready(function () {
// Show or hide the sticky footer button
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function (event) {
event.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 300);
})
});
</script>
</body>
</html>

I've provided a simple example below as to how you can switch classes, not directly modify the classes, however that's not a very typical procedure.
function MyCtrl($scope) {
$scope.myClass = 'blue'
}
.blue { color: blue }
.red { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<h2 ng-class="myClass" ng-click="myClass = myClass == 'blue' ? 'red' : 'blue'">Click Me!</h2>
</div>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
angular.module("myApp",[]).controller("myController",function($scope){
$scope.name="sagar";
$scope.myColorPanel ="green";
$scope.colorChange=function(color){
$scope.myColorPanel =color;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<style>
.panel-primary {
background-color:{{myColorPanel}};
}
</style>
<div class="panel-primary"><h3>{{name}} ,dynamic Color Change By Angularjs</h3></div>
<button ng-click="colorChange('red')">Red</button>
<button ng-click="colorChange('blue')">Blue</button>
<button ng-click="colorChange('pink')">Pink</button>
<button ng-click="colorChange('yellow')">Yellow</button>
</body>
</html>
Hope That Was Help you..

Now I found the real problem. Its the version of the angularjs that i use didn't support angularjs in style. Since it is an existing system, the angularjs used is older version. The version I previously used is 1.2x then i updated it to newer version (1.5x) and all the code I used is now working. Thank a lot for all the effort of you guys. I know its my fault not realized about the version of angularjs but thank you so much.
The solution was changing from old version to newer version.

ng-class is the best option if you want it to work using AngularJs.
You can check this article.Hopefully this will give you the solution to your problem.

I think it should work.
May be there are other places where background color on .panel-primary is being set.
You are using bootstrap, right? Make sure your custom CSS is loaded after bootstrap's CSS.

Put the style tag inside your controller, not in the head tag as follows
<body ng-controller="MainCtrl">
Background of div is <input ng-model="name">
<style>
.p { background-color: {{name}}; }
</style>
<div class="p">dddd</div>
</body>

Altering the state/position of a search form in a nav bar

I am trying to reposition a search form/button inside of my navbar with lingering problems. My CSS has changed many times, and I have gotten the form and button to move, but into weir alignment that either changes the nav bar or the search form. Here is my current CSS, which shows no changes from the default bootstrap state. I want to make the search form a little longer, and have the bar and form move slightly down and to the left, in position with the nav list:
<html>
<head>
<!-- Imported documents -->
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href = "css/styles.css">
<meta charset="utf-8">
<title>TesterPage.</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menuIcon" 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>
<!-- Brand Logo -->
<a class="navbar-brand" href="#">
<img alt="Brand" src="assets/logo.gif" class="img-responsive" id="brandImage" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
About
</li>
<li class="dropdown">
Blog
</li>
<li class="dropdown">
Resume
</li>
<li class="dropdown">
Portfolio
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label for="search" class="sr-only">Search Bar</label>
<input type="text" name="search" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.container {
background:#30302f;
}
.container a{
color: #fff;
}
.container a:hover{
text-decoration: underline;
color: #fff;
}
.menuIcon {
background:rgb(200,200,200);
}
.navbar-brand {
height:auto;
}
.navbar-default {
background-color: #30302f;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 14px 14px;
top: 16px;
left: -50px;
text-transform: uppercase;
}
.navbar-form .navbar-right .form-class{
left: -30px;
top: 100px;
}
.navbar-default .navbar-nav>li>a:hover {
color: #fff;
text-decoration: underline;
}
#brandImage {
max-width:60%;
}
#media (max-width:600px) {
.navbar-brand {
width:95%;
padding:8px 2.5%;
}
#brandImage {
max-width:100%;
}
}
#media (min-width:990px) and (max-width:1200px) {
.navbar-brand {
width:250px;
}
}
Many thanks!
EDIT: I still try and edit the CSS code, and it slides my nav header to the left on the index, and misaligns it in other working pages :/

We Keep Coding

JavaScript is the programming language of the Web.

Navbar changing from transparent to black on scroll / resize - load? - javascript

Related

Faded header on scroll down - apply to scroll up as well

onclick remove selected and show/hide the delete button and dropdown title

How to make nav-fixed-top push down content like non-fixed navbar?

How to replace css class value using angularjs values?

Altering the state/position of a search form in a nav bar

Categories

Resources