Change Navbar Color on scroll - javascript

My navbar cannot change color on scroll, i am already using this script. please help me
<script>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$(".navbar-fixed-top").css("background-color", "#f8f8f8");
} else {
$(".navbar-fixed-top").css("background-color", "transparent");
}
});
});
</script>
i am using bootstrap

Hope this works, you have to use scrollTop() to get vertical scrollbar position and accordingly made changes in your selected div i.e. over-here is .navbar.
$(document).ready(function(){
$(window).on("scroll",function(){
var wn = $(window).scrollTop();
if(wn > 120){
$(".navbar").css("background","rgba(255,0,0,1)");
}
else{
$(".navbar").css("background","rgba(1,1,1,1)");
}
});
});
body{
height:1600px;
}
.navbar{
background:rgba(1,1,1,1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>

I am just curious on why arent you using affix that already comes with bootstrap?
Here is the link :
http://www.w3schools.com/Bootstrap/bootstrap_affix.asp
in your case change add this line for your nav tag
<nav class="navbar navbar-fixed-top"data-spy="affix" data-offset-top="(scroll value)" >
and css
.affix.navbar{
background-color: color-you-prefer;
}

Use the css class for color:
.anycolor {
background-color: #f8f8f8";
}
and do that with this code :
if ($(window).scrollTop() > 50){
$('.navigation').addClass( "anycolor");
}
else {
$('.navigation').removeClass("anycolor");
}

Related

Open and close Bootstrap dropdown by clicking a single element only

I have a simple Bootstrap 3 dropdown menu that I want to keep open at all times except when clicking on the element(anchor) that opened it. So the same element should be responsible for showing and hiding the dropdown. I want to be able to click everywhere in the UI except the element that opens and closes the dropdown.
I have tried many different approaches to solve this with e.stopPropagation();. I have tried it with jQuery .off() function..
I successfully managed to solve the problem of keeping the dropdown open when clicking inside the dropdown menu with the following code, but whenever clicking outside it closes the menu:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-sort-alpha-asc"></i>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu">
<li>
// Menu content
</li>
</ul>
</li>
</ul>
<script>
$(document).on('click', '.dropdown .dropdown-menu', function (e) {
e.stopPropagation();
});
</script>
A solution could be to bind to click events on the body, and check if you pressed the link for the dropdown.
If you click the link for the dropdown, save that in a variable (pressedLink).
When the event runs for hiding the dropdown, return the pressedLink variable. If you return false from the event, nothing more will happen, and the dropdown stays open.
var pressedLink = false;
$("body").on("click", function(e) {
if (e.target.id === "only-toggle-when-pressing-me") {
pressedLink = true;
} else {
pressedLink = false;
}
});
$('.dropdown').on('hide.bs.dropdown', function () {
return pressedLink;
})
#wrapper {
background-color: red;
padding: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.nav {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="wrapper">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i id="only-toggle-when-pressing-me" class="fa fa-sort-alpha-asc">link</i>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu">
<li>
// Menu content
</li>
</ul>
</li>
</ul>
</div>

How to apply animations to items in a list

I am new to HTML, CSS and JS/jQuery. I'm creating a test website just to get familiar with jQuery and can't seem to figure an issue out.
I have a navigation bar at the top of the page which contains a logo on the left and links on the right. I've set up the below jQuery code to fade the links in and out upon mouse enter/leave:
$(document).ready(main);
function main() {
$('.marquee').marquee({
/* pauseOnHover: true */
})
$('.nameorlogo, .navitems').mouseenter(function() {
$('.nameorlogo').fadeTo('fast', 1);
$('.navitems').fadeTo('fast', 1);
})
$('.nameorlogo, .navitems').mouseleave(function() {
$('.nameorlogo').fadeTo('fast', 0.5);
$('.navitems').fadeTo('fast', 0.5);
})
};
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>JSTest1</title>
<link href="../css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='../js/jquery-3.2.0.js'></script>
<script type="text/javascript" src='../js/main.js'></script>
<script type="text/javascript" src='../js/marquee.js'></script>
</head>
<body>
<header class=topheader>
<nav class=navtop>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</nav>
</header>
<main>
<div class=marquee>This is a test for JavaScript</div>
</main>
</body>
</html>
The problem I have is when I hover over a link, either nav links or the logo, everything fades in and out, I want them all to be independant.
I know you can do this in CSS, this is purely to help me learn and understand.
Thanks for your help.
Jim
Use the the this keyword like $(this) to refer to the currently hovered item
$(this).fadeTo('fast', 1);
Also, notice that .navitems is the whole UL element, while you need to target the LI elements. Therefore
$('.nameorlogo, .navitems li').mouseenter(function()
Additionally here's other similar ways to achieve what you desire:
using .on() method
$('.nameorlogo, .navitems li').on({
mouseenter : function() {
$(this).stop().fadeTo(250, 1);
},
mouseleave : function() {
$(this).stop().fadeTo(250, 0.5);
},
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
Using .hover() method
$('.nameorlogo, .navitems li').hover(function(evt) {
var isMouEnt = evt.type === "mouseenter";
$(this).stop().fadeTo(250, isMouEnt ? 1 : 0.5);
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>

Jquery scrollTop animation not working .... "Cannot read property 'top' of undefind

My jquery animation scrollTop is not working. When i click <a> it only takes me to the anchor without any animation. Can someone suggest any solution for this? When i run the web page, the error "Uncaught TypeError: Cannot read property 'top' of undefined" was displayed.
Here my html code :
<div class="BackgroundImg"></div>
<head>
<title>Ryan Robert 1.0</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" >
$(function(){
$("a").click(function(){
if(this.hash){
var hash = this.hash.substr(1);
var $toElement = $("a[name="+hash+"]");
var toPosition = $toElement.position().top;
$("html,body").animate({
scrollTop : toPosition
},2000,"easeOutExpo");
return false;
}
});
});
</script>
body part:
<ul>
<li><div id="menus">
.home</div></li>
<li><a href="#secondBox"><div id="menus">
.project</div></a></li>
<li><a href="#thirdBox"><div id="menus">
.skills</div></a></li>
<li><a href="#forthBox"><div id="menus">
.contact</div></a></li>
</ul>
</div>
<div id="firstBox">
<div id="profileDescriptionBox">
<div id="profileDescription">
<h1>.Welcome!</h1>
The thing is that you don't use prevent default!
So you are actually getting anchored like the default in the browser.
For a smooth animate I would suggest you do something like this:
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var offset = $(this.hash).offset();
if (!offset) {
return;
}
$("html,body").animate({
scrollTop : offset.top
},2000);
});
});
.box {
min-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
<li>First box</li>
<li>Second box</li>
<li>Third box</li>
</ul>
<div id="first-box" class="box">
First box
</div>
<div id="second-box" class="box">
Second box
</div>
<div id="third-box" class="box">
Third box
</div>
<div class="box">
Just extra to fill out
</div>
Or jsfiddle.net
https://jsfiddle.net/4xuvjuq5/
Have you tried to use offset().top?
var toPosition = $toElement.offset().top;

When click on menu, it opens, when click again it close

I have very basic:
// jQuery Document
var main = function() {
/* Push the body and the nav over by 285px over */
$('#share').click(function() {
$('.menu').animate({
right: "0px"
}, 200);
$('body').animate({
right: "285px"
}, 200);
});
/* Then push them back */
$('html').click(function() {
$('.menu').animate({
right: "-285px"
}, 200);
$('body').animate({
right: "0px"
}, 200);
});
};
$(document).ready(main);
And, I want to do something like this.. If user clicks on menu icon (#share), menu will appear, if menu is visible and user clicks again, it will disappear..How to SIMPLY do it?? i want to do it just as simple as possible... please help me :)
And yeah... I wrote something like if html. click.. then close the menu.. There should be the name of the menu icon (#share)
there is menus css:
.menu {
background-color: #373737;
right: -285px;
height: 100%;
position: fixed;
width: 285px;
}
and html:
<!DOCTYPE html>
<html>
<head>
<title>Minecraft</title>
<link href="styles_m.css" rel="stylesheet" type="text/css">
</head
<body>
<div class="menu">
</div>
<div id="header">
<div id="main">
<img src="my_logo.png">
</div>
<div id="share">
<img name="menu" src="my_menu.png">
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
</script>
</body
</html>
Just use fadeToggle():
$(function () {
$(".showMenu").click(function () {
$(this).next(".menu").fadeToggle(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" style="display: none;">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
Or if you wanna make it slide right, you can use animations:
Just use animate():
$(function () {
$(".showMenu").click(function () {
if ($(this).next(".menu").css("left") != "0px")
$(this).next(".menu").animate({
left: 0
}, 1000);
else
$(this).next(".menu").animate({
left: -250
}, 1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" style="position: relative; left: -250px;">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
You can also use a variable control to know when to show/hide the element (jsFiddle):
var control = false;
var main = function() {
$('#share').click(function() {
if( control === true ){
$('.menu').animate({
right: "-285px"
}, 200);
$('body').animate({
right: "0px"
}, 200);
control = false;
return;
}
control = true;
$('.menu').animate({ right: "0px" }, 200);
$('body').animate({ right: "285px" }, 200);
});
};
$('button').click(function() {
$('.menu').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="menu" style="display:none;">
<ul>
<li>menu 1</li>
<li>menu1</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</div>
HTML 5 data tags can be the solutions. Have a look at my fiddle
$('.showMenu').click(function() {
var active = $('.menu').data('active');
if(active === 'N') {
$('.showMenu').html('Hide Menu');
$('.menu').fadeIn(100);
$('.menu').data('active', 'Y');
} else {
$('.showMenu').html('Show Menu');
$('.menu').fadeOut(100);
$('.menu').data('active', 'N');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" data-active="N" style="display: none;">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
You could use the fadeToggle function:
$(document).ready(function() {
$('icon').click(function() {
$('dropdown element').fadeToggle(400);
});
});
An example can be found here: https://www.w3schools.com/jquery/eff_fadetoggle.asp

HTML5 LocalStorage - simple issue with jQuery

I have the following code.
When I select a link, it goes from blue to red - great!
When I refresh the page, the clicked link will remain red - great!
When I click the red link, it returns to blue - great!
However, when I refresh the page that blue link goes red - not great!
I want it to remain blue when refreshed. Can someone help me out with this?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
a {color: blue}
.active {color:red}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$('.filters a').on('click', function() {
var data_filter = $(this).closest("a").data('filter');
if($(this).hasClass("active")) {
$(this).removeClass("active");
localStorage.setItem(data_filter,true);
}
else {
$(this).addClass("active");
localStorage.setItem(data_filter,false);
}
});
$('.filters a').each(function(){
var data_filter = $(this).closest("a").data('filter');
var checked = localStorage.getItem(data_filter);
if(checked){
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
</script>
</head>
<body>
<div class="filters slide-down">
<ul class="groups inline naked right">
<li class="group">
<h3 class="text-right filter-heading trigger" data-target="#colours_filters">Colour</h3>
<ul class="naked" id="colours_filters">
<li class="filter-option">Black</li>
<li class="filter-option">Blue</li>
<li class="filter-option">Brown</li>
<li class="filter-option">Gray</li>
</ul>
</li>
<li class="group">
<h3 class="text-right filter-heading trigger" data-target="#theme_filters">Theme</h3>
<ul class="naked" id="theme_filters">
<li class="filter-option">Carefree</li>
<li class="filter-option">Decay</li>
<li class="filter-option">Dramatic</li>
<li class="filter-option">Family</li>
<li class="filter-option">Nautical</li>
</ul>
</li>
</li>
</ul>
</body>
</html>
it should be $('.filter-option a'), not $('.filters a').
localStorage setting true and false should change their places (true when it was false and vice versa).
if (checked) actually will work even for false value, because it turns out that checked is String, not Boolean. So it should be if (checked == 'true')
I also simplified some places in code.
Updated fiddle.
$(document).ready(function()
{
$('.filter-option a').on('click', function()
{
var data_filter = $(this).data('filter');
$(this).toggleClass("active");
localStorage.setItem(data_filter, $(this).hasClass("active"));
});
$('.filter-option a').each(function()
{
var data_filter = $(this).data('filter');
var checked = localStorage.getItem(data_filter);
if (checked == 'true')
{
$(this).addClass('active');
}
});
});

Categories

Resources