hi on scroll active class is not add to the li on click on a that works fine please look at it once.
<script>
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 150;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('.wpb_wrapper section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
$('nav a.active').removeClass('active');
$('nav a').eq(i).addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('nav a.active').removeClass('active');
$('nav a:first').addClass('active');
}
}).scroll();
</script>
.cs-hd {
font-weight: bold;
font-size: 24px;
}
.cs-para {
font-size: 19px;
}
/*first section */
.cs-secondpara {
padding-top: 15px;
}
.cs-lf {
background: #eaeaea;
padding: 30px;
border-radius: 15px;
}
.cs-lf p {
font-size: 15px;
font-weight: bold;
line-height: 30px;
}
.cs-pa {
border-bottom: 1px solid #a2a2a2;
padding-bottom: 30px;
}
.cs-ul {
line-height: 30px;
font-size: 15px;
padding-top: 30px;
}
.cs-bhd {
color: #29aae2;
font-weight: bold;
font-size: 21px;
}
/*second-section*/
.cs-im-bl {
display: inline-block;
border-right: 1px solid #9c9191;
padding-right: 20px;
width: 20%;
vertical-align: top;
}
.cs-bul {
display: inline-block;
font-size: 17px;
line-height: 27px;
width: 78%;
}
.cs-main {
background: white;
padding: 30px;
border-radius: 15px;
}
.cs-main p {
line-height:27px;
}
.p-four {
padding-top: 10px;
}
.cs-blu-hd {
color: #29aae2;
font-size: 22px;
}
/*third section*/
.cs-im {
display: inline-block;
vertical-align: top;
padding-right: 15px;
padding-top: 55px;
}
.cs-bul-third ul {
border-left: 1px solid #9c9191;
}
.cs-bul-third {
display: inline-block;
font-size: 17px;
line-height: 27px;
width: 67%;
}
/*tab section fourth */
.vc_tta-title-text {
font-size: 17px;
color: #231f20;
font-weight: bold;
}
.vc_tta-tab {
margin: 1px 0 0 0px !Important;
border: 1px solid #908789;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab.vc_active>a .vc_tta-title-text {
color: white;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab.vc_active>a {
background-color: #29aae2 !Important;
}
.vc_tta.vc_general .vc_tta-tab>a
{
padding: 14px 44px !important;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a:focus, .vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a:hover {
background-color: transparent;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a {
background: transparent !Important;
}
.cs-list
{
font-size:17px;
line-height:30px;
}
.cs-border
{ border: 1px solid #c7c7c7;
border-radius: 15px;
}
.cs-border p
{
line-height: 27px;
}
.line-banner-section p a {
padding: 5px 5px 5px 5px !important;
width: 200px !important;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
color: #41ABE1 !important;
background: #ffffff;
}
.line-banner-section p a:hover {
width: 200px !important;
background: rgba(255, 255, 255, 0);
color: #ffffff !important;
}
.cs-txt-blk {
margin-bottom: 0px;
}
/*nav bar*/
.menu {
width: 160px;
height: auto;
background-color: #eaeaea;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: auto;
height: auto;
margin: 0 auto;
padding: 0;
}
#menu-center ul {
margin: 0 !IMPORTANT;
padding: 10px 10px 10px 24px;
}
#menu-center ul li {
list-style: none;
margin: 0px 0px 20px 0;
width: 98px;
}
#menu-center .active {
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 16px;
font-weight: bold;
}
#menu-center a {
color: black;
text-decoration: none;
line-height: 16px;
font-size: 14px;
font-weight: bold;
}
#cs-index {
z-index: 1;
position: fixed;
left: -14px;
top: 130px;
width: 180px;
}
/*navigation bar links*/<body>
<div class="m1 menu">
<div id="menu-center">
<nav>
<ul>
<li>Innovating in<br>Entrepreneurship<br>services
</li>
<li>Training Future<br>and Present<br>Entrepreneurs
</li>
<li>Mentoring<br>and<br>Accelerating
</li>
<li> Working<br>Internationally
</li>
<li>Innovation and<br>Intrapreneurship<br>in Corporates
</li>
<li>Impact Real<br>Scale-ups
</li>
</ul>
</nav>
</div>
</div>
/*one section where scrolling comes its a wordpress site*/
<div class="wpb_wrapper"><div class="vc_empty_space" style="height: 70px"><span class="vc_empty_space_inner"></span></div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<section id="bottom" data-anchor="bottom">
<h4 class="cs-hd" style="text-align: center;">Innovation and Intrapreneurship in Corporates</h4>
</section></div>
</div>
<div class="wpb_single_image wpb_content_element vc_align_center">
<figure class="wpb_wrapper vc_figure">
<div class="vc_single_image-wrapper vc_box_border_grey"><img width="1035" height="490" src="http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic.png" class="vc_single_image-img attachment-full" alt="corporate-infographic" srcset="http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic.png 1035w, http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic-768x363.png 768w" sizes="(max-width: 1035px) 100vw, 1035px"></div>
</figure>
</div>
<div class="vc_empty_space" style="height: 70px"><span class="vc_empty_space_inner"></span></div>
</div>
</body>
hi on scroll active class is not add to the li on click on a that works fine please look at it once.
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
$('nav a').removeClass('active');
if (windscroll >= 100) {
$('.wpb_wrapper section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
var sectionName = $(this).data('anchor');
$('nav a[data-scroll=' + sectionName + ']').addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('nav a:first').addClass('active');
}
});
Action to remove class active firing allays so I moved it to top.
To select link use his data attribute.
Related
So I am currently learning to shrink my menu height while scrolled down, but i cant seem to find why I cant change my padding height on menu buttons, which is named "leftmenu" class on my html. So here is my code. sorry for sloppy code i'm currently learning.
html:
<body>
<div id="menu">
<a id="logo" href="#logo"><img id="logopic" src="logo.png"></a>
<a class="leftmenu" href="#home">Home</a>
<a class="leftmenu" href="#News">News</a>
<a class="leftmenu" href="#About">About</a>
<a class="leftmenu" href="#Contact">Contact</a>
<a id="signupmenu" href="#Contact"><span id="signup"><span id="spansignup">Sign-up</span></span></a>
</div>
</body>
CSS:
*{
font-family: sans-serif;
margin: 0;
}
body {
height: 2000px;
width: 100%;
}
body #menu {
position: fixed;/*stay at top when scrolled*/
transition: 0.4s;/*transition effect when shrink*/
height: 19%;
width: 100%;
background-color: #333;
}
body #content {
padding-top: 15%;
height: 90%;
width: 100%;
background-color: #999;
}
#logo img{
height: 120px;
float: left;
cursor: pointer;
transition: 0.4s;/*transition effect when shrink*/
}
.leftmenu{
display: block;
float: left;
text-decoration: none;
color: white;
padding: 48px 40px 48px 40px;
font-size: 20px;
transition: 0.4s;/*transition effect when shrink*/
}
.leftmenu:hover {
background-color: #ddd;
color: black;
}
#logo img:hover{
background-color: #ddd;
color: black;
}
h1 {
padding-top: 40px;
text-align: center;
margin: 20px;
color: white;
}
p {
text-align: center;
margin: 30px;
color: white;
font-family: monospace;
font-size: 20px;
}
#signup{
float: right;
text-decoration: none;
color: inherit;
font-size: 20px;
border: 2px solid transparent;
border-radius: 20px;
background-image: linear-gradient(#333,#333),radial-gradient(circle at top left,#F4A0FF, #C8BFE7, #99D9EA);
background-origin: border-box;
background-clip: content-box, border-box;
}
#spansignup{
display: block;
padding: 8px 22px;
}
#signupmenu{
float: right;
display: block;
padding: 38px 40px 38px 40px;
color: white;
transition: 0.4s;/*transition effect when shrink*/
}
#signupmenu:hover{
background-color: #ddd;
color: black;
}
#signupmenu:hover #signup{
background-image: linear-gradient(#ddd,#ddd),radial-gradient(circle at top left,#F4A0FF, #C8BFE7, #99D9EA);
}
Javascript:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("menu").style.height = "10%";
document.getElementById("logopic").style.height = "63px";
document.getElementById("signupmenu").style.padding = "10px 40px 10px 40px";
document.getElementsByClassName("leftmenu").style.padding = "20px 40px 20px 40px";
} else {
document.getElementById("menu").style.height = "19%";
document.getElementById("logopic").style.height = "120px";
document.getElementById("signupmenu").style.padding = "38px 40px 38px 40px";
document.getElementsByClassName("leftmenu").style.padding = "48px 40px 48px 40px";
}
}
I tried using "for" statement but wont work on my codes.
Its because document.getElementsByClassName("leftmenu").style.padding returns an array. You will need to cycle through the array and apply it to each item in the array with something like this:
var leftm = document.getElementsByClassName("leftmenu")
for(var i = 0; i < leftm.length; i++){
document.getElementsByClassName("leftmenu")[i].style.padding = "20px 40px 20px 40px"; }
working example:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("menu").style.height = "10%";
document.getElementById("logopic").style.height = "63px";
document.getElementById("signupmenu").style.padding = "10px 40px 10px 40px";
var leftm = 0;
var leftm = document.getElementsByClassName("leftmenu")
for(var i = 0; i < leftm.length; i++){
document.getElementsByClassName("leftmenu")[i].style.padding = "20px 40px 20px 40px"; }
} else {
document.getElementById("menu").style.height = "19%";
document.getElementById("logopic").style.height = "120px";
document.getElementById("signupmenu").style.padding = "38px 40px 38px 40px";
var leftm1 = 0;
var leftm1 = document.getElementsByClassName("leftmenu")
for(var i = 0; i < leftm1.length; i++){
document.getElementsByClassName("leftmenu")[i].style.padding = "48px 40px 48px 40px"; }
}
}
*{
font-family: sans-serif;
margin: 0;
}
body {
height: 2000px;
width: 100%;
}
body #menu {
position: fixed;/*stay at top when scrolled*/
transition: 0.4s;/*transition effect when shrink*/
height: 19%;
width: 100%;
background-color: #333;
}
body #content {
padding-top: 15%;
height: 90%;
width: 100%;
background-color: #999;
}
#logo img{
height: 120px;
float: left;
cursor: pointer;
transition: 0.4s;/*transition effect when shrink*/
}
.leftmenu{
display: block;
float: left;
text-decoration: none;
color: white;
padding: 48px 40px 48px 40px;
font-size: 20px;
transition: 0.4s;/*transition effect when shrink*/
}
.leftmenu:hover {
background-color: #ddd;
color: black;
}
#logo img:hover{
background-color: #ddd;
color: black;
}
h1 {
padding-top: 40px;
text-align: center;
margin: 20px;
color: white;
}
p {
text-align: center;
margin: 30px;
color: white;
font-family: monospace;
font-size: 20px;
}
#signup{
float: right;
text-decoration: none;
color: inherit;
font-size: 20px;
border: 2px solid transparent;
border-radius: 20px;
background-image: linear-gradient(#333,#333),radial-gradient(circle at top left,#F4A0FF, #C8BFE7, #99D9EA);
background-origin: border-box;
background-clip: content-box, border-box;
}
#spansignup{
display: block;
padding: 8px 22px;
}
#signupmenu{
float: right;
display: block;
padding: 38px 40px 38px 40px;
color: white;
transition: 0.4s;/*transition effect when shrink*/
}
#signupmenu:hover{
background-color: #ddd;
color: black;
}
#signupmenu:hover #signup{
background-image: linear-gradient(#ddd,#ddd),radial-gradient(circle at top left,#F4A0FF, #C8BFE7, #99D9EA);
}
<body>
<div id="menu">
<a id="logo" href="#logo"><img id="logopic" src="logo.png"></a>
<a class="leftmenu" href="#home">Home</a>
<a class="leftmenu" href="#News">News</a>
<a class="leftmenu" href="#About">About</a>
<a class="leftmenu" href="#Contact">Contact</a>
<a id="signupmenu" href="#Contact"><span id="signup"><span id="spansignup">Sign-up</span></span></a>
</div>
</body>
I'm trying to create on scroll function, once the user scroll to certain point the menu add CSS background color attribute that appears.
But I'm having trouble, I believe I've used the correct scroll function usage, the syntax is also correct but the CSS() jQuery function doesn't goes to action as you can see in this codepen
How can I change CSS attribute once the user scrolling to certain point on the screen?
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".top-nav").css('background', 'blue');
} else {
$(".top-nav").css('background', 'transparent');
}
});
});
html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.main {
height: 2000px;
}
img {
width: 100%;
}
body {
background-color: #f7f7f7;
transition: margin-right 0.5s, margin-left 0.5s;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: grid;
transition: margin-right 0.5s, margin-left 0.5s;
}
.logo-red {
color: #005aa3;
font-size: 37px;
}
/* Top Nav Bar */
.top-nav {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
display: grid;
grid-template-columns: auto auto;
color: white;
}
.top-nav .nav-scroller {
background-color: blue;
}
.top-nav h1 {
padding-left: 3rem;
font-size: 1.6rem;
}
.top-nav div {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 4rem;
}
.top-nav ul {
list-style: none;
display: none;
}
.top-nav li {
display: inline-block;
padding: 0.7rem 1rem;
}
.top-nav div ul li a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
outline: none;
color: #fff;
transition: 0.5s all ease;
}
.top-nav div ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #0068bd;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.top-nav div ul li a:hover:after {
width: 100%;
left: 0;
}
/* Burger menu */
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
right: 0;
background-color: #36454f;
opacity: 1;
overflow-x: hidden;
padding: 60px 0;
transition: width 0.5s;
-webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
text-align: right;
font-size: 5vw;
margin: 0 20px;
color: white;
border-bottom: 2px #ccc solid;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav a:hover {
color: #fff;
border-radius: 0.5rem;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
font-weight: bold;
border: none;
margin-left: 0;
}
#media (max-width:1024px) {
.top-nav {
min-height: 4rem;
}
.top-nav div {
padding-right: 1rem;
}
.top-nav h1 {
padding-left: 1rem;
padding-top: 0.6rem;
}
}
#media (min-width:1024px) {
#burger-menu {
display: none;
}
.top-nav ul {
display: inline;
margin: 0;
padding: 0;
}
.contact form {
width: 50vw;
}
.top-nav h1 {
padding-top: 0.3rem;
}
}
#yd {
font-family: 'Rubik', sans-serif;
font-style: italic;
color: #bdbdbd;
}
#yd {
transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1>
<a href="#" id="logo">
<span id="yd">yotam dahan</span>
<span class="logo-red">.</span>
<span id="com">COM</span>
</a>
</h1>
<div>
<ul style="direction: rtl;">
<li>שירותים</li>
<li>תיק עבודות</li>
<li>שמור על קשר</li>
</ul>
<a href="#!" id="burger-menu" onclick="toggleSideMenu()">
<i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
</a>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
שירותים
תיק עבודות
שמור על קשר
</div>
</div>
<div class="main"></div>
The issue is because you've set overflow: scroll on the body element so the window isn't scrolling, the body is. As such the event handler is on the wrong element.
Also note that you should avoid putting CSS styling (as well as HTML) in your JS code. A better approach is using CSS classes. Then you can use toggleClass(). Try this:
jQuery($ => {
$('body').scroll(function () {
var scroll = $(this).scrollTop();
$('.top-nav').toggleClass('blue', scroll >= 100);
});
});
html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.main {
height: 2000px;
}
img {
width: 100%;
}
body {
background-color: #f7f7f7;
transition: margin-right 0.5s, margin-left 0.5s;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: grid;
transition: margin-right 0.5s, margin-left 0.5s;
}
.logo-red {
color: #005aa3;
font-size: 37px;
}
/* Top Nav Bar */
.top-nav {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
display: grid;
grid-template-columns: auto auto;
color: white;
}
.top-nav.blue {
background-color: blue;
}
.top-nav .nav-scroller {
background-color: blue;
}
.top-nav h1 {
padding-left: 3rem;
font-size: 1.6rem;
}
.top-nav div {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 4rem;
}
.top-nav ul {
list-style: none;
display: none;
}
.top-nav li {
display: inline-block;
padding: 0.7rem 1rem;
}
.top-nav div ul li a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
outline: none;
color: #fff;
transition: 0.5s all ease;
}
.top-nav div ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #0068bd;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.top-nav div ul li a:hover:after {
width: 100%;
left: 0;
}
/* Burger menu */
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
right: 0;
background-color: #36454f;
opacity: 1;
overflow-x: hidden;
padding: 60px 0;
transition: width 0.5s;
-webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
text-align: right;
font-size: 5vw;
margin: 0 20px;
color: white;
border-bottom: 2px #ccc solid;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav a:hover {
color: #fff;
border-radius: 0.5rem;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
font-weight: bold;
border: none;
margin-left: 0;
}
#media (max-width: 1024px) {
.top-nav {
min-height: 4rem;
}
.top-nav div {
padding-right: 1rem;
}
.top-nav h1 {
padding-left: 1rem;
padding-top: 0.6rem;
}
}
#media (min-width: 1024px) {
#burger-menu {
display: none;
}
.top-nav ul {
display: inline;
margin: 0;
padding: 0;
}
.contact form {
width: 50vw;
}
.top-nav h1 {
padding-top: 0.3rem;
}
}
#yd {
font-family: "Rubik", sans-serif;
font-style: italic;
color: #bdbdbd;
}
#yd {
transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1><span id="yd">yotam dahan</span><span class="logo-red">.</span><span id="com">COM</span></h1>
<div>
<ul style="direction: rtl;">
<li>שירותים</li>
<li>תיק עבודות</li>
<li>שמור על קשר</li>
</ul>
<i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
שירותים
תיק עבודות
שמור על קשר
</div>
</div>
<div class="main"></div>
We have a website. It has navigation section with some menu. It is a single page application.
The requirement is if we are in the home, or in any other section, it should highlight the respective menu. It should do so on scrolling to the required section.
In this sample website i'm going highlight menu item during smooth scroll. I have tried $('body').scrollspy({ target: '#menu' }) this one but couldn't help me
*/
(function ($) {
'use strict';
jQuery(document).ready(function () {
/* Preloader */
$(window).load(function () {
$('.preloader').delay(800).fadeOut('slow');
});
/* Smooth Scroll */
$('a.smoth-scroll').on("click", function (e) {
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top - 50
}, 1000);
e.preventDefault();
});
$('body').scrollspy({ target: '#menu' })
/* Scroll Naviagation Background Change with Sticky Navigation */
$(window).on('scroll', function () {
if ($(window).scrollTop() > 100) {
$('.header-top-area').addClass('navigation-background');
} else {
$('.header-top-area').removeClass('navigation-background');
}
});
/* Mobile Navigation Hide or Collapse on Click */
$(document).on('click', '.navbar-collapse.in', function (e) {
if ($(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle') {
$(this).collapse('hide');
}
});
$('body').scrollspy({
target: '.navbar-collapse',
offset: 195
});
/* Scroll To Top */
$(window).scroll(function(){
if ($(this).scrollTop() >= 500) {
$('.scroll-to-top').fadeIn();
} else {
$('.scroll-to-top').fadeOut();
}
});
$('.scroll-to-top').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
/* Tooltip */
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
/* Ajaxchimp for Subscribe Form */
$('#mc-form').ajaxChimp();
/* Global Style */
body {
font-size: 12px;
font-weight: 400;
line-height: 24px;
letter-spacing: 1px;
height: 100%;
font-family: 'Poppins', sans-serif;
}
html,
body {
height: 100%
}
::selection {
background-color: #f7639a;
color: #ffffff;
}
::-moz-selection {
background-color: #f7639a;
color: #ffffff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Poppins', sans-serif;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
a {
color: #4c9cef;
}
a:hover,
a:active{
background: pink;
}
a:focus {
/*color: #f7639a;
text-decoration: none;
outline: none;*/
}
p {
line-height: 28px;
}
b {
font-weight: 600;
}
ul,
li {
margin: 0;
padding: 0;
}
fieldset {
border: 0 none;
margin: 0 auto;
padding: 0;
}
.no-padding {
padding: 0
}
.pink-color {
color: #f7639a !important;
}
.pink-color-bg {
background-color: #f7639a !important;
}
.section-space-padding {
padding: 100px 0px;
}
.section-title {
text-align: center;
}
.section-title h2 {
margin-top: 0;
font-weight: 600;
font-size: 30px;
}
.section-title p {
font-weight: 400;
line-height: 25px;
margin-bottom: 40px;
}
.bg-cover {
background-repeat: no-repeat;
}
.pattern-bg {
background: url(../images/bg/pattern-bg.png);
background-repeat: repeat;
}
.grabbing {
cursor: url(../images/owl-carousel/grabbing.png) 8 8, move;
}
.divider > i {
color: #f7639a;
font-size: 21px;
}
.divider {
position: relative;
width: 126px;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.divider:after,
.divider:before {
content: ' ';
width: 43px;
position: absolute;
border-bottom: dotted 2px #ffffff;
top: 50%;
margin-top: -4px;
}
.divider:before {
left: 0;
}
.divider:after {
right: 0;
}
.divider.dark:after,
.divider.dark:before {
border-color: #b2b2b2;
}
.button {
border: none;
border-radius: 5px;
font-family: inherit;
font-size: 17px;
color: inherit;
background: none;
cursor: pointer;
padding: 20px 60px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.button:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.button-style {
border: 3px solid #fff;
color: #fff;
}
.button-style:hover,
.button-style:active,
.button-style:focus {
color: #ffffff;
background: #4c9cef;
}
.button-style-color-2:hover,
.button-style-color-2:active,
.button-style-color-2:focus {
color: #ffffff;
background: #f7639a !important;
}
.button-style-dark {
border: 3px solid #000000;
color: #000000;
}
/* Preloader */
.preloader {
background: #F9F9F9;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
.preloader p {
position: absolute;
top: 48%;
left: 50%;
text-align: center;
font-size: 20px;
color: #333333;
}
.preloader:before, .preloader:after {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 40%;
left: 40%;
background-color: #4c9cef;
animation: squaremove 1s ease-in-out infinite;
-webkit-animation: squaremove 1s ease-in-out infinite;
}
.preloader:after {
bottom: 0px;
background-color: #f7639a;
animation-delay: 0.3s;
}
#keyframes squaremove {
0%, 100%{
-webkit-transform: translate(0,0) rotate(0);
-ms-transform: translate(0,0) rotate(0);
-o-transform: translate(0,0) rotate(0);
transform: translate(0,0) rotate(0);
}
25%{
-webkit-transform: translate(40px,40px) rotate(45deg);
-ms-transform: translate(40px,40px) rotate(45deg);
-o-transform: translate(40px,40px) rotate(45deg);
transform: translate(40px,40px) rotate(45deg);
}
50%{
-webkit-transform: translate(0px,80px) rotate(0deg);
-ms-transform: translate(0px,80px) rotate(0deg);
-o-transform: translate(0px,80px) rotate(0deg);
transform: translate(0px,80px) rotate(0deg);
}
75%{
-webkit-transform: translate(-40px,40px) rotate(45deg);
-ms-transform: translate(-40px,40px) rotate(45deg);
-o-transform: translate(-40px,40px) rotate(45deg);
transform: translate(-40px,40px) rotate(45deg);
}
}
/* Home Section and Navigation Menu */
.home-section {
background: #f1f1f1;
padding-top: 60px;
}
.table {
margin-bottom: 0px;
}
.table a {
color: #ffffff;
}
.table > tbody > tr > td {
padding: 15px;
border: 3px solid #e4e4e4;
}
.table tr > td {
padding: 11px 13px;
}
tr:nth-child(1) > td {
border-top:0px;
}
tr > td:nth-child(1){
background-color: #ffffff;
font-weight: 500;
font-size: 13px;
color: #888888;
width: 140px;
}
tr > td:nth-child(2) {
font-weight: 500;
color: #ffffff;
background: #4c9cef;
}
.header-top-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.logo {
padding-top: 28px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.logo a {
display: block;
color: #333333;
letter-spacing: 6px;
font-weight: 600;
font-size: 14px;
border-bottom: 4px solid #f7639a;
width: 92px;
}
.navigation-menu .navbar-nav li a {
color: #333333;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
padding: 30px 15px;
-webkit-transition: .3s;
transition: .3s;
font-weight: 600;
}
.navigation-menu .navbar-nav li a:hover {
background: none;
color: #f7639a;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.nav li a:focus,
.nav li a:hover {
background: none;
color: #4c9cef;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar {
margin: 0;
}
.navigation-background {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: #4c9cef;
}
.navigation-background .logo {
padding-top: 18px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navigation-background .logo a {
color: #ffffff;
}
.navigation-background .navigation-menu .navbar-nav li a {
color: #fff;
padding: 20px 15px;
-webkit-transition: .3s;
transition: .3s;
}
.navigation-background .navigation-menu .navbar-nav li a:hover {
color: #fff;
}
/* Scroll To Top */
.scroll-to-top {
background-color: #4c9cef;
display: none;
width: 60px;
height: 60px;
font-size: 25px;
border-radius: 100%;
line-height: 67px;
text-align: center;
color: #fff;
position: fixed;
right: 20px;
bottom: 30px;
z-index: 999;
box-shadow: 0px 1px 2px 0px rgba(90, 91, 95, 0.15);
transition: all 0.3s ease-in-out;
}
.scroll-to-top:hover,
.scroll-to-top:focus {
background-color: #f7639a;
color: #ffffff;
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
}
/* Responsive */
#media only screen and (max-width: 1199px) {
.experience-circle i {
font-size: 30px;
}
.experience-content{
margin-left: 75px;
}
.experience-content:after,
.experience-content:before {
top: 30%;
}
}
#media only screen and (min-width: 767px) and (max-width: 991px) {
.navigation-menu .navbar-nav li a {
padding: 30px 11px;
font-size: 12px;
}
.navigation-background .navigation-menu .navbar-nav li a {
padding: 30px 11px;
font-size: 12px;
}
.navigation-background .logo {
padding-top: 28px;
}
.margin-left-setting {
margin-left: 0px !important;
}
}
#media only screen and (max-width: 991px) {
.call-to-action h2 {
font-size: 20px;
}
}
#media only screen and (max-width: 767px) {
.navbar-toggle .icon-bar {
background: #f7639a;
}
.navigation-background .navbar-toggle .icon-bar {
background: #ffffff;
}
.navbar-toggle {
margin-right: 0px;
margin-top: -30px;
}
.navbar {
min-height: 0px;
}
.navigation-menu .navbar-nav li a {
padding: 11px 15px;
color: #ffffff;
}
.navigation-menu .navbar-nav li a:hover {
color: #ffffff;
}
.navigation-background .navigation-menu .navbar-nav li a:hover {
color: #ffffff;
}
.navigation-background .navigation-menu .navbar-nav li a {
padding: 11px 15px;
}
.navbar-fixed-bottom .navbar-collapse,
.navbar-fixed-top .navbar-collapse {
max-height: 420px;
}
.navbar-toggle {
margin-top: -30px;
}
.navbar-collapse {
background: #4c9cef;
}
.navigation-background .navbar-collapse {
background: #4c9cef;
}
.section-title h2 {
font-size: 22px;
}
.testimonial-word {
padding: 0;
}
.testimonial-carousel-list {
margin-top: 0px;
}
.call-to-action h2 {
font-size: 18px;
line-height: 35px;
}
.contact-us-detail {
left: 39%;
}
.owl-prev {
left: 5px;
}
.owl-next {
right: 5px;
}
.scroll-to-top {
width: 45px !important;
height: 45px !important;
font-size: 20px !important;
line-height: 52px !important;
right: 8px !important;
bottom: 15px !important;
}
}
#media only screen and (max-width: 555px) {
.social-icon li a {
width: 40px;
height: 40px;
line-height: 44px;
font-size: 16px;
}
.section-title h2 {
font-size: 16px;
font-weight: 500;
}
.section-title p {
font-weight: 300;
font-size: 12px;
}
.statistics-content > h5 {
font-size: 20px;
}
.statistics-content > span {
font-size: 10px;
}
.statistics-icon {
font-size: 30px;
}
.services-section hr {
width: 35px;
}
.services-section h3 {
font-size: 12px;
}
.services-section .services-detail {
width: 180px;
height: 180px;
}
.services-section .services-detail i {
font-size: 30px;
margin-top: 45px;
}
.owl-theme .owl-controls .owl-buttons div {
padding: 6px 10px;
width: 40px;
height: 40px;
line-height: 36px;
font-size: 8px;
}
.contact-us-detail {
left: 30%;
}
}
#media only screen and (max-width: 500px) {
.experience {
margin-left: 0px;
border: 0px;
}
.experience-circle {
margin: 0 auto;
position: static;
margin-bottom: 20px;
}
.experience-content {
padding: 10px 15px;
margin-left: 0px;
text-align: center;
}
.experience-content:after,
.experience-content:before {
display: none;
}
}
#media only screen and (max-width: 449px) {
.button {
font-size: 13px;
padding: 14px 28px;
font-weight: 600;
}
.contact-us-detail {
left: 25%;
}
}
/* Useful Classes */
/* Spacing ( with Margin and Padding ) */
/* Margin */
.margin-0 {
margin: 0px !important;
}
/* Margin Top */
.margin-top-0 {
margin-top: 0px !important;
}
.margin-top-10 {
margin-top: 10px !important;
}
.margin-top-20 {
margin-top: 20px !important;
}
.margin-top-30 {
margin-top: 30px !important;
}
.margin-top-40 {
margin-top: 40px !important;
}
.margin-top-50 {
margin-top: 50px !important;
}
.margin-top-60 {
margin-top: 60px !important;
}
.margin-top-70 {
margin-top: 70px !important;
}
.margin-top-80 {
margin-top: 80px !important;
}
.margin-top-90 {
margin-top: 90px !important;
}
.margin-top-100 {
margin-top: 100px !important;
}
.margin-top-120 {
margin-top: 120px !important;
}
.margin-top-150 {
margin-top: 150px !important;
}
.margin-top-200 {
margin-top: 200px !important;
}
/* Margin Bottom */
.margin-bottom-0 {
margin-bottom: 0px !important;
}
.margin-bottom-10 {
margin-bottom: 10px !important;
}
.margin-bottom-20 {
margin-bottom: 20px !important;
}
.margin-bottom-30 {
margin-bottom: 30px !important;
}
.margin-bottom-40 {
margin-bottom: 40px !important;
}
.margin-bottom-50 {
margin-bottom: 50px !important;
}
.margin-bottom-60 {
margin-bottom: 60px !important;
}
.margin-bottom-70 {
margin-bottom: 70px !important;
}
.margin-bottom-80 {
margin-bottom: 80px !important;
}
.margin-bottom-90 {
margin-bottom: 90px !important;
}
.margin-bottom-100 {
margin-bottom: 100px !important;
}
.margin-bottom-120 {
margin-bottom: 120px !important;
}
.margin-bottom-150 {
margin-bottom: 150px !important;
}
.margin-bottom-200 {
margin-bottom: 200px !important;
}
/* Padding */
.padding-0 {
padding: 0px !important;
}
/* Padding Top */
.padding-top-0 {
padding-top: 0px !important;
}
.padding-top-10 {
padding-top: 10px !important;
}
.padding-top-20 {
padding-top: 20px !important;
}
.padding-top-30 {
padding-top: 30px !important;
}
.padding-top-40 {
padding-top: 40px !important;
}
.padding-top-50 {
padding-top: 50px !important;
}
.padding-top-60 {
padding-top: 60px !important;
}
.padding-top-70 {
padding-top: 70px !important;
}
.padding-top-80 {
padding-top: 80px !important;
}
.padding-top-90 {
padding-top: 90px !important;
}
.padding-top-100 {
padding-top: 100px !important;
}
.padding-top-120 {
padding-top: 120px !important;
}
.padding-top-150 {
padding-top: 150px !important;
}
.padding-top-200 {
padding-top: 200px !important;
}
/* Padding Bottom */
.padding-bottom-0 {
padding-bottom: 0px !important;
}
.padding-bottom-10 {
padding-bottom: 10px !important;
}
.padding-bottom-20 {
padding-bottom: 20px !important;
}
.padding-bottom-30 {
padding-bottom: 30px !important;
}
.padding-bottom-40 {
padding-bottom: 40px !important;
}
.padding-bottom-50 {
padding-bottom: 50px !important;
}
.padding-bottom-60 {
padding-bottom: 60px !important;
}
.padding-bottom-70 {
padding-bottom: 70px !important;
}
.padding-bottom-80 {
padding-bottom: 80px !important;
}
.padding-bottom-90 {
padding-bottom: 90px !important;
}
.padding-bottom-100 {
padding-bottom: 100px !important;
}
.padding-bottom-120 {
padding-bottom: 120px !important;
}
.padding-bottom-150 {
padding-bottom: 150px !important;
}
.padding-bottom-200 {
padding-bottom: 200px !important;
}
/* Colors */
.color-1 {
color: #f306a0;
}
.color-2 {
color: #d60bfb;
}
.color-3 {
color: #d8be10;
}
.color-4 {
color: #0fd28a;
}
.color-5 {
color: #f97400;
}
.color-6 {
color: #08a6f3;
}
/* Background Color */
.bg-color-1 {
background-color: #f306a0;
}
.bg-color-2 {
background-color: #d60bfb;
}
.bg-color-3 {
background-color: #d8be10;
}
.bg-color-4 {
background-color: #0fd28a;
}
.bg-color-5 {
background-color: #f97400;
}
.bg-color-6 {
background-color: #08a6f3;
}
/* Tooltip Styles */
.tooltip-inner {
font-style: italic;
padding: 10px 12px;
min-width: 150px;
width: 100%;
}
.tooltip.top {
margin-top:-15px;
}
.tooltip.bottom {
margin-top:15px;
bottom: auto;
left: auto;
right: auto;
}
.tooltip.left {
margin-right:15px;
}
.tooltip.right {
margin-left:15px;
}
.tooltip-color .tooltip-inner {
color: #fff;
}
/* UiPasta Credit */
.uipasta-credit {
color: #333333;
text-align: center;
}
.uipasta-credit a {
color: #4c9cef;
font-weight: 600;
}
.uipasta-credit a:hover {
color: #f7639a;
}
<div class="header-top-area">
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="logo">
WebRes
</div>
</div>
<div class="col-sm-9">
<div class="navigation-menu">
<div class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="menu" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class="smoth-scroll" href="#home">Home <div class="ripple-wrapper"></div></a>
</li>
<li><a class="smoth-scroll" href="#about">About</a>
</li>
<li><a class="smoth-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="smoth-scroll" href="#testimonials">Testimonial</a>
</li>
<li><a class="smoth-scroll" href="#services">services</a>
</li>
<li><a class="smoth-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the image of sample where I need to highlight menu during scroll
For every page you have, assign a variable for example in your Home.php
at the top of the page
<?php $page = "home" ?>
then in your navigation/toolbar
<li class=" <?php if($page == "home"){echo "active";}?> "> Home </li>
and in your css file you can customize whatever style you want with the active
I was required to program the following header ( the borders I've added
to know if it renders as I need to ):
"Select Project", "Select Item" and "Select Content" are dropdown elements.
Each one take 2 grids. I need that when clicking on the dropdown element, no matter which one, the drop down menu will take a width of 6 grids as shown above
in the blue frame.
( In other words, the drop down menu will be the same for all dropdown elements
but the content is different ).
In addition, when resizing to smaller screen, the media query doesn't work at all:
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) and (max-width : 1370px) {
.dropdown-menu.multi-column {
width: 765px !important;
}
}
What am I doing wrong here ?
HTML:
<!-- Layout Container-->
<div id="main-wrapper">
<!--Header - Top Bar Navigation-->
<header class="margin-left-right-20">
<div class="row top-bar">
<!-- Logo Image -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<img src="images/logo.png" id="logo" alt="logo" />
</div>
<!-- Application Indicator -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<a href="#">
<div>
<span class="top-bar-small-title">App</span>
<br />
<span class="top-bar-app-links" id="current-app-selected">App1</span>
</div>
</a>
</div>
<!-- Module (a.k.a Project) Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<div class="dropdown">
<a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">Project</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Project</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-column" aria-labelledby="dLabel">
<div class="dropdown-menu multi-column">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul class="dropdown-menu">
<li>Col 1 - Opt 1</li>
<li>Col 1 - Opt 2</li>
</ul>
</div>
<div class="span6">
<ul class="dropdown-menu">
<li>Col 2 - Opt 1</li>
<li>Col 2 - Opt 2</li>
</ul>
</div>
</div>
</div>
</div>
<!--<li>
<div class="row" style="width: 760px;">
<ul class="list-unstyled col-md-4">
<li>test1-1</li>
<li>test1-2</li>
<li>test1-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test2-1</li>
<li>test2-2</li>
<li>test2-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
</div>
</li>-->
<!--<li>Item 1</li>
<li>Item 2</li>-->
</ul>
</div>
</div>
<!-- Module (a.k.a Project) Selector -->
<!--<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Module</span><br />
<span class="top-bar-app-links make-it-regular">Select Module</span>
</div>-->
<!-- Item Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
</div>
<!-- Block Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Content</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Content</span>
</div>
<!-- Search Bar -->
<div class="col-md-2 col-lg-offset-1 col-lg-2 top-bar-margin-top border-div" id="div-search-bar">
<div class="input-group input-search col-md-12 col-lg-12 form-group">
<input type="text" class="form-control" name="q" id="search-bar" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default btn-search-custom" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<!-- Avatar user -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div" id="div-avatar-circle">
<div class="avatar-circle col-lg-1">
</div>
<div class="show-user col-lg-8" style="display:inline-block">
<span class="show-user-name">Lionel Messi</span>
<span class="show-user-permission">Programmer</span>
</div>
</div>
</div>
<!-- End <div class="row top-bar">-->
</header>
</div>
CSS:
* {
padding: 0;
margin: 0;
/* height:100%;*/
}
.margin-left-right-20 {
margin-left: 20px;
margin-right: 20px;
}
.border-div {
border: solid 1px black;
}
.container {
margin-left: 20px;
margin-right: 20px;
width: 100%;
position: relative;
}
#logo {
width: 79px;
height: 42px;
margin-left: 26px;
}
.top-bar {}
.top-bar-margin-top {
margin-top: 43px;
/*padding: 0;*/
}
.top-bar-margin-top a:hover {
text-decoration: none;
}
.top-bar-small-title {
font-family: 'Lato', sans-serif;
font-size: 10px;
color: #2baab1;
}
.top-bar-app-links {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #2baab1;
}
#current-app-selected {
font-weight: bold;
}
#search-bar {
/*width: 325px;*/
width: 100%;
height: 29px;
}
/*#media only screen and (min-width: 1200px) and (max-width: 1368px) {
#search-bar{
width: 200px;
height: 29px;
}
}*/
/*#avatar-and-search-in-new-line {
display:none;
}*/
.make-it-regular {
color: #373d42;
}
input.search-query {
padding-left: 26px;
}
.input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
left: -13%;
z-index: 1000;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
input-group-rounded input.form-control:first-child,
.input-group-rounded input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 500px;
}
.input-group-icon input.form-control:first-child,
.input-group-icon input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 25px;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-rounded input.form-control,
.input-search input.form-control {
-webkit-border-radius: 500px;
border-radius: 500px;
}
.input-group-icon input.form-control,
.input-search input.form-control {
font-size: 12px;
font-size: 1.2rem;
padding-right: 36px;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
-webkit-appearance: none;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.input-group-btn:first-child,
.input-search .input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.btn-search-custom {
border: 0px solid transparent;
padding: 0;
}
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
z-index: 2;
margin-left: 13px;
}
#div-avatar-circle {
padding: 0;
}
.avatar-circle {
background-color: #5c6770;
border-color: #5c6770;
border-radius: 50%;
border-style: solid;
border-width: 1px;
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
}
.show-user {
display: inline-block;
/* width: 98px; */
margin-top: 3px;
/* margin-left: 10px; */
/* margin: 0; */
/* padding: 0px; */
padding-left: 3px;
}
.nav-tabs-colors {
background-color: #ececef;
}
.edit-app-tabs {
background-color: #ececef;
}
#edit-app-tab {
background-color: #ececef;
}
#edit-app-content-title {
margin-left: 35px;
}
.app-name-title {
position: absolute;
top: 193px;
}
.app-name-title div h3 {
margin: 0;
padding: 0;
}
.privacy-statement-text-area {
position: absolute;
top: 241px;
}
#privacy-statement-data {
background-color: white;
resize: none;
overflow-y: auto;
/*width:460px;*/
height: 224px;
max-height: 224px;
}
.panel {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
/* border-radius: 4px;*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/* overflow-y: auto;*/
/*width:431px;*/
/*width:402px;*/
}
.panel-margin-settings {
margin-left: 20px;
margin-bottom: 15px;
}
#first-component {
margin-top: 33px;
}
.component-heading {
background: #2baab1;
height: 47px;
}
.component-heading-title {
margin-top: 11px;
margin-left: 15px;
margin-bottom: 0;
font-size: 22px;
color: white;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading {
background: #fdfdfd;
/* border-radius: 5px 5px 0 0;*/
/* border-bottom: 1px solid #DADADA;*/
/* padding: 18px;*/
position: relative;
}
/*
.panel-title {
color: #33353F;
font-size: 20px;
font-weight: 400;
line-height: 20px;
padding: 0;
text-transform: none;
}
*/
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 22px;
color: #2baab1;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading + .panel-body {
/* border-radius: 0 0 5px 5px;*/
}
.panel-body {
background: #fdfdfd;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/* border-radius: 5px;*/
}
.panel-body {
padding: 15px;
}
.checkbox-custom {
position: relative;
padding: 0 0 0 25px;
margin-bottom: 7px;
margin-top: 0;
}
.checkbox-custom input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 50%;
left: 3px;
margin: -6px 0 0 0;
z-index: 2;
cursor: pointer;
}
.checkbox-custom label {
cursor: pointer;
margin-bottom: 0;
text-align: left;
line-height: 1.2;
}
.checkbox-custom label:before {
content: '';
position: absolute;
top: 50%;
left: 0;
margin-top: -9px;
width: 19px;
height: 18px;
display: inline-block;
border-radius: 2px;
border: 1px solid #bbb;
background: #fff;
}
.checkbox-custom input[type="checkbox"]:checked + label:after {
position: absolute;
display: inline-block;
font-family: 'FontAwesome';
content: '\F00C';
top: 50%;
left: 4px;
margin-top: -5px;
font-size: 11px;
line-height: 1;
width: 16px;
height: 16px;
color: #2baab1;
}
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
/*
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
}
*/
.new-category {
float: right;
margin-top: 5px;
text-decoration: none;
}
.new-category:link,
.new-category:visited,
.new-category:hover {
text-decoration: none;
cursor: pointer;
}
.dd {
position: relative;
display: block;
margin: 0;
padding: 0;
/* list-style: none;*/
font-size: 13px;
line-height: 20px;
}
.dd-list {
display: block;
position: relative;
margin: 0;
padding: 0;
list-style-type: decimal;
/* list-style: none;*/
}
.dd-item,
.dd-empty,
.dd-placeholder {
display: block;
position: relative;
margin: 0;
padding: 0;
min-height: 20px;
font-size: 13px;
line-height: 20px;
display: list-item;
}
.dd-item-reset {
font-size: 0;
}
.dd-handle {
display: block;
height: 34px;
margin: 5px 0;
padding: 6px 10px;
color: #333;
text-decoration: none;
font-weight: 600;
border: 1px solid #CCC;
background: white;
/* background: #F6F6F6;*/
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd-list-ul {
list-style-type: none;
}
.dd-handle-assoc-file {
display: inline-block;
/*width:280px;*/
width: 277px;
height: 31px;
vertical-align: middle;
border-radius: 0;
font-size: 14px;
}
.btn-associated-file-item {
background-color: #dcdcdc;
border-bottom-left-radius: 5px;
border-color: #5c6770;
border-style: solid;
border-top-left-radius: 5px;
border-width: 1px;
height: 31px;
width: 93px;
display: inline-block;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
/* border-right:1px solid blc;*/
}
.close-assoc-file {
line-height: inherit;
}
#glossary-file-select,
#definition-file-select,
#design-file-select {
visibility: hidden;
z-index: -1000;
height: 0;
width: 0;
}
#modules-list-table-padding {
padding-left: 65px;
padding-right: 65px;
}
#modules-list-table-title {
margin-top: 33px;
margin-left: 15px;
display: block;
}
#create-module {
font-size: 12px;
color: #2baab1;
font-family: 'Lato', sans-serif;
font-weight: bold;
float: right;
text-decoration: none;
display: inherit;
margin-top: -5px;
margin-right: 10px;
}
#table-underline {
border: 1px solid #2baab1;
margin-top: 12px;
}
.modules-table > tbody > tr > th,
.modules-table > tbody > tr > td {
border-color: #ececef;
}
.modules-table tr > *:nth-child(1) {
padding-left: 15px;
}
.modules-table tr > *:nth-child(2) {
padding-left: 67px;
width: 336px;
max-width: 336px;
}
.modules-table tr > *:nth-child(3) {
padding-left: 103px;
padding-right: 30px;
}
.modules-table tr > *:nth-child(4) {
padding-right: 11px;
}
.modules-table > tbody > tr > td:last-child {
text-align: center;
}
/*.modules-table tr > th:last-child {
padding-right: initial;
float:right;
}*/
/*.modules-table tr > *:last-child {
padding-left: 10px;
}*/
/*.modules-table > tbody > tr > td:nth-child(2) {
width:336px;
}*/
/*div[class^="col-lg-1"]:first-child {
margin-left: 20px;
}*/
/*div[class^="col-lg-1"]:last-child {
margin-right: 20px;
}
div[class^="col-lg-3"]:first-child {
margin-left: 20px;
}
div[class^="col-lg-3"]:last-child {
margin-right: 20px;
}*/
.tools-option-link {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
vertical-align: middle;
margin-left: 5px;
}
.tools-option-container {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: solid 1px black;
}
.reset-padding-top {
padding-top: 0;
}
#tools-block a:hover {
text-decoration: none;
}
#ChartistExtremeResponsiveConfiguration {}
.module-name {
display: inline-block;
width: 150px;
}
.circular-bar.circular-bar-xs {
width: 50px;
}
.circular-bar {
margin: 25px 0;
}
.circular-bar {
margin-bottom: 25px;
}
.mr-md {
margin-right: 15px !important;
}
.mt-xs {
margin-top: 5px !important;
}
.m-none {
margin: 0 !important;
}
.circular-bar-container {
position: relative;
top: 5px;
}
.circular-bar-percentage-text {
position: absolute;
top: 29%;
left: 21%;
}
table {
border-collapse: collapse;
}
td {
padding-top: 10px;
padding-bottom: 10px;
}
#module-of-the-day-id {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #2baab1;
}
#module-of-the-day-name {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
}
.stars-styling {
font-size: 18px;
color: #ffbb00;
}
#module-of-the-day-review-paragraph {
/*width:343px;*/
font-size: 14px;
margin-top: 15px;
}
#item-reviewer {
float: right;
font-size: 14px;
/*font-family: 'Lato', sans-serif;*/
font-weight: bold;
color: #373d42;
}
#module-of-the-day-item-reviewer {
margin-bottom: 15px;
}
#module-usage-stats {
clear: both;
}
#module-usage-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#module-usage-text-container {
position: absolute;
top: 13%;
}
#module-usage-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#module-usage-status {
font-size: 14px;
}
/* */
#published-items-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#published-items-text-container {
position: absolute;
top: 13%;
}
#published-items-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#published-items-status {
font-size: 14px;
}
#published-items-percentage-text {
top: 33%;
left: 31%;
}
/* */
#device-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#device-text-container {
position: absolute;
top: 3%;
}
#device-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#device-status {
font-size: 14px;
}
#view-all-statistics {
margin-top: 15px;
}
#view-all-statistics a:link {
text-decoration: underline;
}
.stats-paragraph-styling {
font-size: 14px;
font-weight: bold;
margin: 0;
}
.mb-none {
margin-bottom: 0 !important;
}
.text-weight-bold {
font-weight: 700;
}
h4,
.h4 {
font-size: 18px;
font-size: 1.8rem;
}
.text-xs {
font-size: 10px;
font-size: 1rem;
}
.text-muted {
color: #777;
}
/* */
.general-data-num-styling {
font-family: 'Lato', sans-serif;
font-size: 40px;
color: #2baab1;
}
.general-data-text-styling {
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #373d42;
}
#items-num-inner-container {
/*margin-left: 15px;
margin-right: 15px;*/
border-left: solid 1px;
border-right: solid 1px;
}
/* */
.widget-summary {
display: table;
width: 100%;
}
.widget-summary .widget-summary-col.widget-summary-col-icon {
width: 1%;
}
.widget-summary .widget-summary-col {
display: table-cell;
vertical-align: top;
width: 100%;
}
.widget-summary .summary-icon {
margin-right: 15px;
font-size: 42px;
/*font-size: 4.2rem;*/
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
-webkit-border-radius: 55px;
border-radius: 55px;
}
.bg-primary {
background: #0088cc;
}
.bg-secondary {
background: #E36159;
color: #FFF;
}
.bg-tertiary {
background: #2BAAB1;
color: #FFF;
}
.bg-quartenary {
background: #734BA9;
color: #FFF;
}
.widget-summary .summary {
min-height: 65px;
word-break: break-all;
}
.widget-summary .summary .title {
margin: 0;
font-size: 16px;
/*font-size: 1.6rem;*/
line-height: 22px;
/*line-height: 2.2rem;*/
color: #333;
font-weight: 500;
}
.widget-summary .summary .info {
font-size: 14px;
/*font-size: 1.4rem;*/
line-height: 30px;
/*line-height: 3rem;*/
}
.widget-summary .summary .amount {
margin-right: .2em;
font-size: 24px;
/*font-size: 2.4rem;*/
font-weight: 600;
color: #333;
vertical-align: middle;
}
.widget-summary .summary .info span {
vertical-align: middle;
}
.text-primary {
color: #0088cc !important;
}
.widget-summary .summary-footer {
padding: 5px 0 0;
border-top: 1px dotted #ddd;
text-align: right;
}
.text-uppercase {
text-transform: uppercase;
}
/*.panel-featured-tertiary {
border-color: #2BAAB1;
}
.panel-featured-quartenary {
border-color: #734BA9;
}*/
/*.panel-featured-left {
border-left: 3px solid #33353F;
}*/
.module-subscriptions {
display: block;
margin-top: 10px;
margin-left: 15px;
margin-right: 9px;
padding-bottom: 10px;
border-bottom: solid 3px;
}
.dropdown-menu.multi-column {
width: 1036px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width: 100px;
}
JSFiddle link: https://jsfiddle.net/jaeedxpw/2/
Thanks in advance,
Eli Van Rock
i am trying to redirect to this page and go a specific part of the page, which is powered by java script to move around. i want to be able to go to say, delete section. but i cant achieve it using localhost/entry.php#delete . what am i doing wrong? below is the snippet.
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>
Anchors apply just for simple navigation around the page, for changing tabs etc. you need to add some extra code, something like:
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
switchTab = function(href){
var $link = $('a[href=' + href + ']'),
$tab = $(href);
$('.active').removeClass(ACTIVE_CLASS);
$link.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$($tab)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
}
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
switchTab($(this).attr('href'));
});
if(window.location.hash){
switchTab(window.location.hash);
}
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>