CSS transition not working in ASP.NET Web Forms

CSS transition not working in ASP.NET Web Forms - javascript

CSS3 transition works fine in an HTML page, but not in a .aspx page. Is there a way to overcome this? I'd like to do the app in Web Forms as it makes designing the forms much easier. Any input would be appreciated.
Here is the .aspx page:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CMSWebForms.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="Content/jquery-1.10.2.min.js" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-combined.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Content/test.css"/>
</head>
<body>
<ul id="sidebar" class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: fixed; top: 0; left: 0;">
<li><h1 class="text-center"><a tabindex="-1" href="#">CMS</a></h1></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Sales</a>
<ul class="dropdown-menu text-right">
<li><a tabindex="-1" href="#">Customers</a></li>
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Pricing</a>
<ul class="dropdown-menu text-center">
<li><a tabindex="-1" href="#">A</a></li>
<li><a tabindex="-1" href="#">B</a></li>
<li><a tabindex="-1" href="#">C</a></li>
<li><a tabindex="-1" href="#">D</a></li>
<li><a tabindex="-1" href="#">E</a></li>
</ul>
</li>
<li><a tabindex="-1" href="#">Quotes</a></li>
<li><a tabindex="-1" href="#">Orders</a></li>
<li><a tabindex="-1" href="#">Pricing</a></li>
<li><a tabindex="-1" href="#">Reports</a></li>
</ul>
</li>
<p> </p>
<!--<p> </p>-->
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Manufacturing</a>
<ul class="dropdown-menu text-center">
<li><a tabindex="-1" href="#">One</a></li>
<li><a tabindex="-1" href="#">Two</a></li>
<li><a tabindex="-1" href="#">Three</a></li>
<li><a tabindex="-1" href="#">Four</a></li>
<li><a tabindex="-1" href="#">Five</a></li>
</ul>
</li>
</ul>
<!--</div>-->
<!--<div id="wrapper">-->
<div id="page-content-wrapper">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li>
<button id="sidebarToggle" class="btn btn-primary btn-lg">
<i class="fa fa-angle-left"></i>
</button>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="btn btn-sm btn-info">
<i class="fa fa-sign-in"></i> Log in
</a>
</li>
</ul>
</div>
</nav>
<div class="content-header container-fluid text-center">
<h1 id="home" class="">
CMS
</h1>
</div>
<div class="page-content inset container-fluid">
<div class="row">
<div class="jumbotron text-center">
<h1 class="">Hello Beautiful!</h1>
<p class="">
</p>
Name:
<asp:TextBox ID="TextBox1" runat="server" Width="248px"></asp:TextBox>
Address:
<asp:TextBox ID="TextBox2" runat="server" Width="248px"></asp:TextBox>
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<h4 class="text-center text-primary">©2016 Apiron Technologies, Inc.</h4>
</div>
</div>
</div>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script src="Scripts/site.js"></script>
</body>
</html>
</asp:Content>
Here is the CSS:
#sidebar{
background: #000;
color: #999999;
border-radius: 0;
padding: 0;
height: 100%;
width: 200px;
margin-top: 0;
transition: .25s;
}
#sidebar.dropdown-menu.text-right.hide-sidebar{
left: -200px !important;
transition: .25s;
}
.navbar.navbar-inverse{
border-radius: 0 !important;
background: #1536b6 !important;
}
.navbar-inverse
.navbar-inverse .nav>li>a {
color: #fff !important;
}
.btn-info{
color: #fff !important;
}
.navbar.navbar-inverse.navbar-fixed-bottom{
margin-left: 200px !important;
}
#page-content-wrapper {
margin-left: 200px;
transition: .25s;
}
#page-content-wrapper.hide-sidebar{
margin-left: 0;
transition: .25s;
}
.dropdown-menu {
border-radius: 0;
padding: 0;
}
.dropdown-menu li a {
background: #000;
color: #999999;
display: block;
text-decoration: none;
outline: none;
}
.dropdown-menu li a:hover,
.dropdown-menu li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.dropdown-menu.text-right li a {
background: #000;
color: #999999;
display: block;
text-decoration: none;
outline: none;
}
.dropdown-menu.text-right li a:hover,
.dropdown-menu.text-right li.active {
color: #fff;
background-color: #333131 ;
text-decoration: none;
}
.dropdown-submenu.pull-right{
background: #000;
display: block;
width: 100%;
}
#myId {
color: aqua;
}
and here is the JS:
(function () {
var $sidebarAndWrapper = $("#sidebar,#page-content-wrapper");
var $icon = $("#sidebarToggle i.fa");
$("#sidebarToggle").on("click", function () {
$sidebarAndWrapper.toggleClass("hide-sidebar");
if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
$icon.removeClass("fa-angle-left");
$icon.addClass("fa-angle-right");
}
else {
$icon.removeClass("fa-angle-right");
$icon.addClass("fa-angle-left");
}
});
})();

What browser are you checking in? Try using another browser.
Once i had a same problem. Resetting IIS site fixed the issue. You can also try prefixing CSS.
Cheers

Related

i wanted to switch tabs by one button

my problem is that when you press the TAB button it shows the word profile, and if you press it again it should show the word home
currently, when I click on Tab, it switches to profile, but again when I click on Tab, it should switch to home, but it doesn't switch.
const tab1 = document.querySelector('#tab11')
const tab2 = document.querySelector('#tab12')
const allTabPane = document.querySelectorAll('.tab-pane')
tab1.addEventListener('click', toggleTabs);
tab2.addEventListener('click', toggleTabs);
function clickTab(tab) {
if (tab.parentNode.classList.contains('active') === false) tab.click();
}
function toggleTabs(e) {
e.preventDefault();
if (this.parentNode.classList.contains('active')) {
let toClick = this.parentNode.parentNode.querySelector('li:not(.active) > a');
setTimeout(function() {
toClick.click();
}, 10);
}
}
.wrapper {
width: 50%;
border: solid #000 2px;
margin: 0 auto;
}
.tab-bg {
text-decoration: none;
font-size: 2rem;
}
.tab-pane {
padding: 50px;
color: blueviolet;
font-size: 1.5rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div class="wrapper">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
<a class="tab-bg" href="#" id="tab11" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">TAB</a>
</li>
<li>
</li>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="home-tab-pane">Home</div>
<div class="tab-pane fade" id="profile-tab-pane">Profile</div>
</div>
</div>
</div>
Codepen demo.

Working code
$('.tab-bg').on('click', function () {
$('.tab-bg').closest("li").toggleClass("active");
$(".tab-pane").toggleClass("active fade show");
});
.wrapper{
width: 50%;
border: solid #000 2px;
margin: 0 auto;
}
.tab-bg{
text-decoration: none;
font-size: 2rem;
}
.tab-pane{
padding: 50px;
color: blueviolet;
font-size: 1.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div class="wrapper">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
<a class="tab-bg" href="#" id="tab11" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">TAB</a>
</li>
<li>
</li>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane show active" id="home-tab-pane">Home</div>
<div class="tab-pane fade" id="profile-tab-pane">Profile</div>
</div>
</div>
</div>

show/hide buttons on resizable navbar

I have a nivagation bar with button links in row on resize the window to smaller width each button wrap underneath which changing the navigation height, gets removed from the nav and appended into a dropdown menu.
I managed to append wrapped buttons when the navigation height is higher than 80, but it will only work if the initial size of the screen is big which will have all buttons in one row. but if the screen started at a smaller width it won't append all wrapped buttons in the menu.
Here is my attempt
$(window).resize(function() {
var navbar = $("#navbar");
var list = $("#list");
var btns = $("#btns");
var last_element;
for (var i = 0; i < list.children().length; i++) {
setTimeout(function() {
if (list.height() > 80) {
last_element = list.children().last();
setTimeout(function() {
$("#btns .dropdown-menu").prepend(last_element);
}, 300);
last_element.remove();
}
}, 500);
}
});
#navbar {
width: fit-content;
background-color: #dbdbdb;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
padding: 10px;
}
#list {
margin: 0;
padding: 0;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.item {
color: #333;
font-size: 30px;
font-weight: bold;
background-color: #f5f5f5;
/* display: inline-block; */
padding: 10px 30px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888;
margin: 4px 2px;
list-style-type: none;
}
.dropdown-menu {
width: 200px;
padding: 0 20px;
}
<!-- bootstrap style -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="navbar">
<ul id="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
<li class="item">item 4</li>
<li class="item">item 5</li>
<li class="item">item 6</li>
<li class="item">item 7</li>
</ul>
<div id="btns">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I would love to have similar action to this image,
Can someone offer a snippet suggestion or what should I use to implement such action?

Updated - move hidden items to dropdown menu
First, make changes on css:
apply display: flex to #navbar.
calculate the maximum height of #list manually and set max-height & overflow: hidden property to it. In this case, the maximum height of #list would be 73px but not 80px. (the height of .item 65px + top margin of .item 4px + bottom margin of .item 4px = 73px) If the max-height is not correct, #list may not hide the .items properly.
set display: inline-block for .items.
`
#navbar{
width: fit-content;
background-color: #dbdbdb;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
padding: 10px;
/*Flex layout*/
display:flex;
flex-direction:row;
align-items:center;
}
#list{
margin: 0;
padding: 0;
/*Calculate the max-height and set overflow hidden*/
overflow:hidden;
max-height:73px;
}
.item{
color: #333;
font-size: 30px;
font-weight: bold;
background-color: #f5f5f5;
display: inline-block;
padding: 10px 30px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888;
margin: 4px 2px;
list-style-type: none;
/*Move text-align center to here*/
text-align: center;
/*Remove flex layout & add display inline-block*/
display: inline-block;
}
.dropdown-menu{
width: 200px;
padding: 0 20px;
}
`
Then, update the $(window).resize() function.
The below code will check if the item is being moved to a hidden area. Moreover, use .html() to refresh the dropdown menu.
let list = $("#list");
let listItems = $("#list .item");
let dropdownMenu = $("#btns .dropdown-menu");
$(window).resize(function() {
let listPosition = list.position().top;
let hiddenItems = listItems.filter(function(){
return $(this).position().top - listPosition > 0;
}).clone();
dropdownMenu.html(hiddenItems);
});

I see you're using bootstrap. You still can do this without any JS if a collapsible menu on mobile devices is what you need.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Want to Gather all nav tabs into icon on page zoom

My navigation bar working perfectly but when i zoom it so it is disappear.
i want when certain zoom will be done so all the nav link should bind into one icon. how can i achieve it, please help
My html
<!DOCTYPE html>
<html>
<head>
<title>dasdasd</title>
<link rel="stylesheet" type="text/css" href="/css/header.css">
</head>
<header>
<body>
<nav>
<div class="box_one">
<a href="/index">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABaCAMAAACFWShxAAABC1BMVEX////oRDs6p1ZGiPH6uy17pvQ/hfFglvImevDoQjnu8/7nOjAso0znOC4doEPnNSozpVH+9uX4/Pnynpr6uST0rqr++evzp6NnuHr9uBi7zvn97eznPTz509HA4Mj4y8nU4vv82ZHqWlK43cHm8+ntd3Lwj4r+9/dTj/KLx5nmLSGt17ecz6gyf/DG2fmux/jb7t+XufEznXZRsGZ2voYipVmbsEP9y2fd6fzJtjmGrfVlqk/uui5Sp0/Wvk797MmStfY5h949pG9BnpI/lbFKk9JHlrtAoIg4qUTtbmj73+DpUEjveDTrXzj3ri71ni/1qnP2vbrR37z+xEr846y5tDzguTL80oHzkDLdnbSbAAADcklEQVRoge2WWVvaQBSGw4DBMRMyhlCCKGhkFzSWuNRq7V7RtpZql///SzoJESYLSYYkPr3Ie6UPgZdz5ptz4LiMjIyMjASp70wrHZNypXnbTdPUbXY0KEqiKBBE8gecVHfSMXZ3OneiCGGOAgqioJVvk3dNJ6SUnBcIJaG9k6xsOhEFH5UtFGE7wfrq7YFfWbRPqCR1ftOcGOiyfFK7noSr2wkpzEbMNROQTaQoLqu8SlxZXQvv4tw2jS1bHkW3bBC3k10GGYx9bG2fNkIyQCSCINDhid9GruwNCJkcWrtTrVSqnbY5yJKrrAnd0YcDbTGGu/VmJze7HVCKn34NuuvSmq6JUa9CIZHKuLLr0KBY9plOtxMpfhrJx7j6KGhLJn05gTZyP0SXbOkcTGD+b9buc9uRZEmwpxS+f5vr4F2qMrlg8nX7KSAJb2cX1zVLdz9LilROVcb9USzbrJvwLtWfchw3K83u5iD24grmemEr/E29tEfKVrivpiubH5tF7drz+sZaIBdstjPaVpC9tnU+kA0WmfxAuZQz7wMb6/kg+HMW2wu6stoeu22XxbbpOLZHZtvo8Dlt/FZmmxE7JWy2y3g3gC0l3APdygf22naZbI5Zomz62VzTw2ljut3m74SFTPnpteWLLnoOG9PkojeO8vtKjfCOY6o6vscko7ap8guDkh7+hiJtW2O0zQ/u9AQAHF7cLn1woyNG22ydKpeviQwA1Ah7/oK2MUaS3DjTprwCM/C4Ffz4uUNWZAsJZ7VSOT2xbQAZwU+vOWxvWWUklXYXbd0w6OGjkSP/bJPE4s0VJQvWHTplrPk3aSDgAPW9P09mbDkHCXMiLQzs0qm+104+ds3MHnNGTHRXcQDjobe8xvhlj49fGscN3TpQAkOdFrb21RJG4BN1bnxxNRknq9itAwir/X29JcstvTE0yL9mzejjYgcwrjb6qwOvjnx2yQbNX735kudXvmtz3LlcCnr/zuomn18pIk+6UkQdvvk8Yl9sK+sA+sDzI7ad7aNDPme3rJsrJ2SODiIeHsIRlm4oshFJh9SQrRSVAxzqwyWfObMiLcPv5lGuJTN0VRoGWlofKqn7iRVmo/eBXzwxwkYjaZeJ3CCDESFsOzHGpF71IKFw+An1g746tmTjsUHmcxpVeaSEZ9BkZGRk/Bf8AxJzWnduI/qHAAAAAElFTkSuQmCC" alt="logo" title="logo" width="90px">
</a>
</div>
<div class="box_two">
<ul>
<li>Home</li>
<li>About Us </li>
<li>City </li>
<li>How it works </li>
<li> Contact </li>
</ul>
</div>
<!-- <div class="box_three">
<ul>
<li><img src="img/login.png" width="30px" alt="login" title="login" align="left"> Login</li>
<li><img src="img/signup.png" width="30px" alt="signup" title="signup" align="left"> Sign Up</li>
</ul>
</div>
-->
</nav>
</header>
My CSS
body{margin:0px;}
nav{font-family: calibri;width: 100%; min-height: 80px; max-height: 140px; background: #3a3a3a; color: white;}
.box_one{width: 180px;float: left;height: 80px;margin-left: 30px;}
.box_two{font-size: 18px;width: 70%;float: left;height: 80px;margin-left: 8%;}
.box_three{font-size: 18px;width: 320px;float: right;height: 80px;margin-left: 10px;}
nav a{text-decoration:none;color: white;}
nav li
{
margin-top: 26px;
display:block;
float:left;
min-height:150px;
max-height:200px;
padding: 5px;
list-style: square outside none;
padding-left: 1em;
text-indent: -.7em;
}
.box_two li
{
min-width:60px;
max-width:120px;
}
.box_three li
{
width:93px;
}
nav ul {
list-style: none;
padding:0;
margin:0;
}
For example i have uploaded code on jsfiddle please check
When you will zoom out so it is showing on jsfiddle

You should you bootstrap for this, It will make your life easy. If you don't want to use bootstrap you have to use CSS media queries for all resolution which is not cool. I have created an example of menu bar using bootstrap for you here it is. for more info refer getBootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">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>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
----- UPDATE -----
You have to modify media queries as per you requirement currently I have adjusted menu so it will be visible even if you zoom it.
<!DOCTYPE html>
<html>
<head>
<title>dasdasd</title>
<link rel="stylesheet" type="text/css" href="/css/header.css">
<style type="text/css">
body{margin:0px;}
nav{font-family: calibri;width: 100%; min-height: 80px; max-height: 140px; background: #3a3a3a; color: white;}
.box_one{width: 180px; float: left; height: 80px;margin-left: 30px;}
.box_two{font-size: 18px; float: left;height: 80px;}
.box_three{font-size: 18px;width: 320px;float: right;height: 80px;margin-left: 10px;}
nav a{text-decoration:none;color: white;}
nav li
{
margin-top: 26px;
display:block;
float:left;
padding: 5px;
padding-left: 1em;
}
.box_three li
{
width:93px;
}
nav ul {
list-style: none;
padding:0;
margin:0;
}
#media (max-width: 991px) {
header{ width:100% !important;}
}
#media (max-width: 767px) {
header{ width:100% !important;}
.box_one{width: 100px; margin-left: 5px;}
#media (max-width: 480px) {
.button05 {margin: 10px 0 0;width: 100%;}
.box_one{width: 100px; margin-left: 0px;}
.box_two {
font-size: 12px;
float: none;
height: auto;
}
}
#media (max-width: 375px) {
header{ width:100% !important;}
.box_one{width: 100px; margin-left: 0px;}
.box_two {
font-size: 12px;
float: none;
height: auto;
}
nav li {
padding: 5px;
padding-left: 5px;
font-size: 10px;
}
}
</style>
</head>
<body>
<header>
<nav>
<div class="box_one">
<a href="/index">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABaCAMAAACFWShxAAABC1BMVEX////oRDs6p1ZGiPH6uy17pvQ/hfFglvImevDoQjnu8/7nOjAso0znOC4doEPnNSozpVH+9uX4/Pnynpr6uST0rqr++evzp6NnuHr9uBi7zvn97eznPTz509HA4Mj4y8nU4vv82ZHqWlK43cHm8+ntd3Lwj4r+9/dTj/KLx5nmLSGt17ecz6gyf/DG2fmux/jb7t+XufEznXZRsGZ2voYipVmbsEP9y2fd6fzJtjmGrfVlqk/uui5Sp0/Wvk797MmStfY5h949pG9BnpI/lbFKk9JHlrtAoIg4qUTtbmj73+DpUEjveDTrXzj3ri71ni/1qnP2vbrR37z+xEr846y5tDzguTL80oHzkDLdnbSbAAADcklEQVRoge2WWVvaQBSGw4DBMRMyhlCCKGhkFzSWuNRq7V7RtpZql///SzoJESYLSYYkPr3Ie6UPgZdz5ptz4LiMjIyMjASp70wrHZNypXnbTdPUbXY0KEqiKBBE8gecVHfSMXZ3OneiCGGOAgqioJVvk3dNJ6SUnBcIJaG9k6xsOhEFH5UtFGE7wfrq7YFfWbRPqCR1ftOcGOiyfFK7noSr2wkpzEbMNROQTaQoLqu8SlxZXQvv4tw2jS1bHkW3bBC3k10GGYx9bG2fNkIyQCSCINDhid9GruwNCJkcWrtTrVSqnbY5yJKrrAnd0YcDbTGGu/VmJze7HVCKn34NuuvSmq6JUa9CIZHKuLLr0KBY9plOtxMpfhrJx7j6KGhLJn05gTZyP0SXbOkcTGD+b9buc9uRZEmwpxS+f5vr4F2qMrlg8nX7KSAJb2cX1zVLdz9LilROVcb9USzbrJvwLtWfchw3K83u5iD24grmemEr/E29tEfKVrivpiubH5tF7drz+sZaIBdstjPaVpC9tnU+kA0WmfxAuZQz7wMb6/kg+HMW2wu6stoeu22XxbbpOLZHZtvo8Dlt/FZmmxE7JWy2y3g3gC0l3APdygf22naZbI5Zomz62VzTw2ljut3m74SFTPnpteWLLnoOG9PkojeO8vtKjfCOY6o6vscko7ap8guDkh7+hiJtW2O0zQ/u9AQAHF7cLn1woyNG22ydKpeviQwA1Ah7/oK2MUaS3DjTprwCM/C4Ffz4uUNWZAsJZ7VSOT2xbQAZwU+vOWxvWWUklXYXbd0w6OGjkSP/bJPE4s0VJQvWHTplrPk3aSDgAPW9P09mbDkHCXMiLQzs0qm+104+ds3MHnNGTHRXcQDjobe8xvhlj49fGscN3TpQAkOdFrb21RJG4BN1bnxxNRknq9itAwir/X29JcstvTE0yL9mzejjYgcwrjb6qwOvjnx2yQbNX735kudXvmtz3LlcCnr/zuomn18pIk+6UkQdvvk8Yl9sK+sA+sDzI7ad7aNDPme3rJsrJ2SODiIeHsIRlm4oshFJh9SQrRSVAxzqwyWfObMiLcPv5lGuJTN0VRoGWlofKqn7iRVmo/eBXzwxwkYjaZeJ3CCDESFsOzHGpF71IKFw+An1g746tmTjsUHmcxpVeaSEZ9BkZGRk/Bf8AxJzWnduI/qHAAAAAElFTkSuQmCC" alt="logo" title="logo" width="90px">
</a>
</div>
<div class="box_two">
<ul>
<li>Home</li>
<li>About Us</li>
<li>City</li>
<li>How it works</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>

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>

Skrollr init set <body> height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.

skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.

We Keep Coding

JavaScript is the programming language of the Web.

CSS transition not working in ASP.NET Web Forms - javascript

What browser are you checking in? Try using another browser. Once i had a same problem. Resetting IIS site fixed the issue. You can also try prefixing CSS. Cheers

Related

i wanted to switch tabs by one button

show/hide buttons on resizable navbar

Want to Gather all nav tabs into icon on page zoom

How to replace css class value using angularjs values?

Skrollr init set <body> height to be too high

Categories

Resources