After javascript addclass it adds class but css property not working - javascript

Can please someone help me?
Here .header-line after scroll has an additional class of .header-line .active but css can't see it and doesn't change the background-color. You can see my css and there .header-line .active is with background-color property. Why is my background still transparent?
CSS:
.header-line {
width: 100%;
height: 60px;
background-color: rgba(255,255,255,0.00);
}
.header-line .active {
background-color: white;
}
header:
<div class="header-line">header</div>
Javascript:
$(function() {
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$(".header-line").addClass("active");
} else {
//remove the background property so it comes transparent again (defined in your css)
$(".header-line").removeClass("active");
}
});
});

That is because in your css file you have .header-line .active { ... }, and that means .active class inside .header-line class.
You should change that to .headerline.active { ... } (remove the space)

Declare the css like this in your bootstarp.css
.header-line.active {
background-color: white;
}

Related

How can i make whole screen semi-black on sidebar open?

I have build sidebar with css and jquery. It's working fine but i want that when sidebar opens then whole screen except sidebar should get semi-black or disabled.
Here is my working
jsFiddle
How can i make whole screen semi-black or disabled on sidebar open?
You can use a box-shadow on the sidebar:
#sidebar{
box-shadow:0 0 0 10000px rgba(0,0,0,.50);
}
This is black, at .50 opacity. It's set to 10000px to cover the full screen.
Or change rgba(0,0,0,.50) to a solid color like #5a5a5a.
In your case add to your css:
#slide-out.visible:not(.close){
box-shadow:0 0 0 10000px #666666;
}
The general concept to achieve this is fairly straightforward:
Modify the javascript to add a class to the body when the nav is open (I called it nav-open.)
Modify the CSS so that the "overlay" element (you already had one in place) is displayed when the body has the class nav-open
Adjust your overlay element CSS to cause it to show properly (for some reason, it had opacity: 0 on it, which meant it was there, but was not visible).
Here's the relevant CSS:
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
// removed opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;
// set display to none by default
display: none;
}
// when the body has the class nav-open, display the overlay
.nav-open #sidenav-overlay {
display: block;
}
Here's the relevant changes to your javascript:
// no-conflict-safe document ready function
jQuery(function($) {
$('#show-hide-menu').click(function() {
if ($('#slide-out').hasClass('visible')) {
// $('#slide-out').removeClass('visible');
$('#slide-out').toggleClass('close');
} else {
$('#slide-out').addClass('visible');
}
// check if the nav is "open"
var open = !$('#slide-out').hasClass('close');
// for simplicity, always first remove the nav-open from the body
$('body').removeClass('nav-open');
// if the nav is open, add the 'nav-open' class to the body
if (open) {
$('body').addClass('nav-open');
}
});
// modify to use "on", is best-practice
// $(document).click(function(e) {
$(document).on('click', function(e) {
var sidebar = $(".sidenav, #show-hide-menu");
if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
$('#slide-out').toggleClass('close');
// be sure the nav-open class is removed when the sidebar is dismissed
$('body').removeClass('nav-open');
}
});
});
Here is a link to your fiddle, modified with these changes to do what you want: http://jsfiddle.net/cale_b/hThGb/8849/
Make a content div below your nav. Something like:
<div id="maincontent" class="">
<p>Lorem.</p>
</div>
Add some styling so it has min-height, etc.
#maincontent {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
min-height: 400px;
}
Add some JS so when the nav menu button is clicked, it toggles on and off a new style class for this area.
$('#show-hide-menu').click(function () {
if ($("div#maincontent").hasClass("overlayed")) {
$("div#maincontent").removeClass("overlayed");
}
else {
$("div#maincontent").addClass("overlayed");
}
});
Define the overlayed class in the CSS.
.overlayed {
background-color: rgba(0,0,0,.8);
}

Adding class does not change height after div height is modified using .height() method

I can toggle the height of .box between 0px and 30px by adding and removing the .collapsed class. This works fine.
However, I've got another function that toggles the height of .box between 30px and 60px using the .height() method. The problem I'm having is that if I use .height() to modify .box's height at all, adding the .collapsed class no longer affects .box's height. $(.box).hasClass("collapsed") evaluates as true, yet the height does not change to 0px.
My question is, why is this happening?
FIDDLE: https://jsfiddle.net/x89dbbw1/4/
HTML:
<button class="toggle_collapse_button">Toggle Collapse</button>
<button class="toggle_expand_button">Toggle Expand</button>
<p id="test">Collapsed: false</p>
<div class="box"></div>
CSS:
.box {
width: 160px;
height: 30px;
background-color: orange;
}
.collapsed {
height: 0px;
}
JS:
$(".toggle_collapse_button").on("click", function() {
if ($(".box").hasClass("collapsed")) {
$(".box").removeClass("collapsed");
}
else {
$(".box").addClass("collapsed");
}
document.getElementById("test").innerHTML = "Collapsed: " + $(".box").hasClass("collapsed");
});
$(".toggle_expand_button").on("click", function() {
if ($(".box").height() == 30) {
$(".box").height(60);
}
else if ($(".box").height() == 60) {
$(".box").height(30);
}
});
Note: It works fine if I toggle between 30px and 60px by adding and removing a class, but I specifically want to expand using .height() and collapse using a class, if possible.
When you use jQuery.height() it adds an inline style to the element, inline styles take precedence over all other styles aside from those with the !important flag.
A good read on css precedence: http://vanseodesign.com/css/css-specificity-inheritance-cascaade/
jquery docs: http://api.jquery.com/css/
That is because you are adding the height inline and its override the CSS
You should do that
$(".toggle_collapse_button").on("click", function() {
$(".box").removeClass("height60");
$(".box").removeClass("height30");
if ($(".box").hasClass("collapsed")) {
$(".box").removeClass("collapsed");
}
else {
$(".box").addClass("collapsed");
}
document.getElementById("test").innerHTML = "Collapsed: " + $(".box").hasClass("collapsed");
});
$(".toggle_expand_button").on("click", function() {
if ($(".box").height() == 30) {
// $(".box").height(60);
$(".box").addClass('height30');
}
else if ($(".box").height() == 60) {
$(".box").addClass('height60');
}
});
And of course the properly css style to height30 and height60
Check the example
the Example

replace link text with graphic through css

I want to replace the links in my bootstrap navigation with icons. But only when A class is added to the navigation. I currently have a fixed navigation which 'shrinks' when the user scrolls using
html (head)
$(function(){
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('header').addClass('shrink');
}
else {
$('header').removeClass('shrink');
}
});
with the 'shrink' class added to header div when scrolled 100px.
css
.navbar-custom .nav>li>a {
font-size: 1.15em;
font-weight: 400;
etc...
header.shrink {
min-height: 50px;
}
header.shrink .nav>li>a { line-height: 50px; }
when the 'shrink' class gets added to the .header I want the links (which are currently text) to turn into icons. not sure the approach for this
I have fontawesome installed and usable
In my previous project, I had the icons already inside the DOM but only hidden. I made them display if the parent had a certain class
.nav>li>a>.fa { display: none; }
.shrink .nav.li.a.fa { display:block; }
Edit:
Added jsfiddle
Edit2:
Updated jsfiddle. You can add font awesome icons using pseudo classes. You can get the unicode easily with a bit of googling
I would add the HTML markup for the icons inside your anchor tag and hide it by default:
header .nav > li > a > span.icon {
display: none;
}
And show it when the header has the .shrink class:
header.shrink .nav > li > a > span.icon {
display: block; (or inline)
}

jQuery toggleClass doesn't switch class

i've been trying to understand toggleClass function by making this simple script, yet it didn't work the way I expected it to.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="blue"></div>
<script>
$("div").click(function() {
$(this).toggleClass("red");
});
</script>
</body>
However, if i changed the div class to red and the toggleClass argument to "blue" it works, can anybody explain me this? I'm hoping to hear from you. Thanks in advance!
You need to add both blue and red class in toggleClass function to change both like,
$("div").click(function() {
$(this).toggleClass("red blue");
});
$("div").click(function() {
$(this).toggleClass("red blue");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>
What happens when you use only red in togleclass function then it will applied but the change would not overwrite because of the blue class and the blue background shown as it is. So, if you want your code to work then in that case you need to use !important in red-background like,
.red {
background: red !important;
}
$("div").click(function() {
$(this).toggleClass("red");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red !important;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>
Note that I am just informing you (by second alternative) why your code was not working. You must go with my first option.
$("div").click(function() {
$(this).toggleClass("red");
$(this).toggleClass("blue");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
$("div").click(function() {
$(this).toggleClass("red");
$(this).toggleClass("blue");
});
Try this : pass both red and blue class, it will remove if present and add if not. So for first time it will add red but will remove blue.
$("div").click(function() {
$(this).toggleClass("red blue");
});
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.
Explanation Below
it act as - if div have class "red" then REMOVE class "red" else ADD "red" class from div
The problem arises due to order of the css styles, as last css style will affect the output, so as css on class blue is declared last, so blue class is given precedence over red class.
So, to solve this, you should try to have only one class on the div, so that the order of the css should not matter.
$("div").click(function() {
$(this).toggleClass("red blue");
});
The toggleClass() will remove the class if it is assigned to the element, or it will add it if it is not assigned to the element. Try this snippet as a demo:
$(document).ready(function() {
$("div").click(function() {
if ($(this).hasClass("red")) {
alert("I am red! I'm turning red off.");
$(this).toggleClass("red");
} else if ($(this).hasClass("blue")) {
alert("I am blue! I'm turning blue off.");
$(this).toggleClass("blue");
} else {
alert("I am blank! Turning red on.");
$(this).toggleClass("red");
}
});
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>

adding an semi-black transparant overlay in front of a div

I have a div that looks like the following:
<div class="row-fluid product-to-be-categorized" data-id="584472"><img src="http://origincache-prn.fbcdn.net/10311205_575850285866660_368389950_a.jpg"></div>
I wanted such that when the div is clicked then it adds an semi-black-transparant overlay in front of the div, so the picture is covered with this transparant layer in front of it.
I have the following click handler:
$('.product-to-be-categorized').on('click', function(event) {
});
but I am unsure on what is the quickest and simplest way to do this
Simplest way would be to add a class with a pseudo element to the div on the click event.
DEMO
CSS :
.product-to-be-categorized {
position:relative;
width:50%
}
.product-to-be-categorized img {
display:block;
width:100%;
}
.overlay:before {
content:'';
position:absolute;
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.5);
}
jQuery :
$('.product-to-be-categorized').click('click', function (event) {
$(this).addClass('overlay');
});
(if you need to toggle the overlay, just replace ".addClass" by ".toggleClass" in jQuery code)
Firstly, in the click handler you can append a div to the container:
$('.product-to-be-categorized').on('click', function(event) {
$('<div />').addClass('overlay').appendTo(this);
});
Which has the following CSS:
.product-to-be-categorized {
position: relative;
/* other styling... */
}
.overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #000;
opacity: 0.5;
}
Example fiddle
You can also make the overlay togglable by checking for its existance and removing:
$('.product-to-be-categorized').on('click', function(event) {
if ($('.overlay', this).length) {
$('.overlay', this).remove();
}
else {
$('<div />').addClass('overlay').appendTo(this);
}
});
Example fiddle

Categories