I have a fixed header when I begin to scroll the header changes its height and removes the logo. What I would like to do is have the logo fadeout instead of just disappearing. How can I achieve this effect?
For testing purposes I am unable to display my logo in jsfiddle because it is a custom font so I will be using #mainlogo as my example. Here is my code http://jsfiddle.net/Bx4rq/9/
JS
$(window).scroll(function() {
if ($(this).scrollTop() > 30){
$('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').addClass("sticky");
}
else{
$('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').removeClass("sticky");
}
});
CSS
#headerWrapper.sticky { height: 48px; }
.icon-lkbl.sticky, #mainLogo.sticky { display:none;}
.nav-collapse.sticky{ margin-top:-10px;}
HTML
<div id="headerWrapper">
<header>
<a href="#" rel="home">
<div class="iconMain icon-lkbl"></div>
<h1 id="mainLogo">Logo <strong>Test</strong></h1>
</a>
<nav id="mainNav" class="nav-collapse">
<ul>
<li>About</li>
<li>Recipes</li>
<li>Garden</li>
<li>Contact</li>
<li> <span>Search</span></li>
</ul>
</nav>
<div class="popupbox" id="popuprel">
<div id="searchPanel">
<h2><span>Find your</span> next meal</h2>
</div>
</div>
<div id="fade"></div>
</header>
</div> <!-- END HEADER WRAPPER -->
Instead of showing and hiding using display: none;
you can use jquerys, fadein and fadeout.
$(window).scroll(function () {
if ($(this).scrollTop() > 30) {
$('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').addClass("sticky");
$('.icon-lkbl, #mainLogo').fadeOut();
}
else {
$('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').removeClass("sticky");
$('.icon-lkbl, #mainLogo').fadeIn();
}
});
fadein documentation
Related
I have a hidden popout menu that toggles its visibility on the click of a button. When the popout menu becomes visible it displaces the main content to the bottom of the page. The idea would be to have the popout menu is displayed over the content div.
HTML:
<!------- Pop out menu for Side Navigation Bar ------->
<div class = "popout_navbar_align_center">
<div class = "menu_nav_inner align-center pad-2">
<ul>
<li><button class="static_nav_btn">THE MISSION</button></li>
<li><button class="static_nav_btn">OUR WORK</button></li>
<li><button class="static_nav_btn">WHO WE ARE</button></li>
<li><button class="static_nav_btn">MISS ROSIE</button></li>
<li><button class="static_nav_btn">SCHOLARSHIP</button></li>
<li><button class="static_nav_btn">CONTACT</button></li>
</ul>
<div class="box">
DONATE
</div>
</div>
</div>
<!------- Hamburger Top Navigation Bar for 768px and smaller screens ------->
<div class = "navBar_top">
<div class = "hamburger-bar-center" id ="topNavId" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!------- Main body ------->
<main id="content" class="flex-grow">
<div id="homepage-banner">
<div class="page-banner">
<h2 class="small-hidden">
FOUNDATION
</h2>
</div>
</div>
</main>
CSS:
(Popout menu)
.popout_navbar_align_center {
background-image: url("Assets/Textures/sandpaper.png");
background-color:;
width: 240px;
height: 100%;
top: 0;
left: 0;
display: none;
overflow-x: hidden;
}
.popout_navbar_align_center .menu_nav_inner {
padding-top: 60px;
}
**JAVASCRIPT: **
$("#sideNavId").on("click", function() {
if($(".popout_navbar_align_center").is(":visible"))
{
$(".popout_navbar_align_center").hide("slow");
}
else {
$(".popout_navbar_align_center").show("slow");
}
});
I've tried manipulating the css for the main content div but everything I've tried doesn't seem to work in regards to that approach. I'm not sure which divs properties should be manipulated to get the desired effect.
You can try to use the top and left css values along with position: absolute to achieve your popup not moving the rest of the content, but instead floating in front of it
I need to change the header banner background image repeatedly in my HTML static page. Right now, it's having only a single bg image. I need to add 2 more images which must change one by one after 4 or 5 secs and repeats the process just like a slider by keeping the content unchanged. Is there any easy method without using slider plugins. Below is my HTML code for the header? Thanks & regards.
<header id="home">
<!-- Background Image -->
<div class="bg-img" ***style="background-image: url('images/images/p1.png');"***>
<div class="overlay"></div>
</div>
<!-- /Background Image -->
<!-- Nav -->
<nav id="nav" class="navbar nav-transparent">
<div class="container">
<div class="navbar-header">
<!-- Logo -->
<div class="navbar-brand">
<a href="home">
<img class="logo" src="images/logo-png.png" alt="logo" style="width:55%;">
<img class="logo-alt" src="images/logo-png.png" alt="logo">
</a>
</div>
<!-- /Logo -->
<!-- Collapse nav button -->
<div class="nav-collapse">
<span></span>
</div>
<!-- /Collapse nav button -->
</div>
<!-- Main navigation -->
<ul class="main-nav nav navbar-nav navbar-right">
<li>Home</li>
<li>About us</li>
<li>What we do</li>
<li>Gallery</li>
<li>Contact us</li>
</ul>
<!-- /Main navigation -->
</div>
</nav>
<!-- /Nav -->
<!-- home wrapper -->
<div class="home-wrapper">
<div class="container">
<div class="row">
<!-- home content -->
<div class="col-md-10 col-md-offset-1">
<div class="home-content">
<h2 class="white-text">uniforms # competetive rates</h2>
<p class="white-text">We are always committed to give you best quality uniform at very competitive rates
</p>
<button class="white-btn">Read more</button>
<button class="main-btn" style="background-color:#e29d0a">Gallery</button>
</div>
</div>
<!-- /home content -->
</div>
</div>
</div>
<!-- /home wrapper -->
</header>
If you are gonna do this without using slider plugins, that means you have to write your own plugin. Here is a very simple example with using javascript to achieve:
var images = new Array(
'https://dummyimage.com/1000x400/00ff00/ffffff',
'https://dummyimage.com/1000x400/0000ff/ffffff',
'https://dummyimage.com/1000x400/ffff00/ffffff',
'https://dummyimage.com/1000x400/ff0000/ffffff',
);
var slider = setInterval(function() {
document.getElementsByClassName('bg-img')[0].setAttribute('style', 'background-image: url("'+images[0]+'")');
images.splice(images.length, 0, images[0]);
images.splice(0, 1);
}, 3000);
.bg-img {
width: 100%;
padding: 10% 0;
background-size: cover;
background-position: center;
border: 1px solid;
}
<div class="bg-img" style="background-image: url('https://dummyimage.com/1000x400/ff0000/ffffff');">
<div class="overlay"></div>
</div>
you can try this
<div class="bg-img" id="mybg-div">
And javascript
$(function() {
var div = $('#mybg-div');
var backgrounds = ['url(image-one)', 'url(image-two)'];
var current = 0;
function nextBackground() {
div.css(
'background',
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
div.css('background', backgrounds[0]);
});
Working JSFIDDLE
You can also achieve this through keyframe animation:
like
#-webkit-keyframes changeBg
{
0% {background-image: url("images/img1.jpg");}
25% {background-image: url("images/img2.jpg");}
50% {background-image: url("images/img3.jpg");}
100% {background-image: url("images/img4.jpg");}
}
This works like a plugin:
$(document).ready(function(){
const imgOne = 'https://preview.ibb.co/b43uR8/img01.jpg';
const imgTwo = 'https://preview.ibb.co/ioNAzT/img02.jpg';
const imgThree = 'https://preview.ibb.co/c9xtKT/img03.jpg';
const imgArray = [imgOne, imgTwo, imgThree];
$('.bg-img').css('background-image', 'url(' + imgArray[0] + ')');
let interval = 0;
setInterval(function(){
if (interval < (imgArray.length - 1)) {
interval++;
} else {
interval = 0;
}
$('.bg-img').css('background-image', 'url(' + imgArray[interval] + ')');
}, 4000);
});
.bg-img {
width: 100%;
height: 100vh;
background-color: #eee;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg-img"></div>
Ok, so I've tried looking at everything on here and many people have suggested adding a width or a height or even using jquery css to hide elements, but nothing is working for me.
I am trying to have 3 elements slideDown when the user scrolls to a specific section of the page. The problem is that the 3 elements flash on the screen for a brief moment then slide down. How do I remove the brief flash?
$('#e1, #e2, #e3').hide();
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 400) {
$('#e1').slideDown(1500);
$('#e2').slideDown(2000);
$('#e3').slideDown(2500);
}
});
DIV#customContent DIV.customObj {
float: left;
width: 406px;
}
DIV#customContent DIV.customObj DIV {
display: none;
margin: 15px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="customContent">
<div class="customObj">
<h3>Service</h3>
<div id="e1">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="customObj">
<h3>Modernization</h3>
<div id="e2">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="customObj">
<h3>Lift Solutions</h3>
<div id="e3">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
So the problem is, I want to make my nav fixed when the header disappeared.
everything works fine but the problem is that after the navbar got fixed the article goes under it. and I want to fix that but i want the padding or margin to be added when the navbar is fixed.
my code:
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script>
var num = 120; //number of pixels before modifying styles
$(window).bind('scroll', function() {
if ($(window).scrollTop() > num) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
}
});
</script>
Html
<div id="headwrapper">
<header>
<img src="Logo.png">
<h1>IT TECH</h1>
</header>
</div>
<nav>
<div id="selector"></div>
<a class="link1" href="home.htm">
<p>Home</p>
</a>
<a class="link2" href="talen.htm">
<p>Programmeertalen</p>
</a>
<a class="link3" href="computer.htm">
<p>Computers</p>
</a>
<a class="link4" href="richting.htm">
<p>Richtingen</p>
</a>
<a class="link5" href="contact.htm">
<p>Contact</p>
</a>
</nav>
<div id="element">
<div id="slider">
<div title="Banaan" id="foto1">
<h1>Welcome to</h1><img src="Logo.png">
<h1>IT TECH</h1></div>
<div title="Peren" id="foto2"></div>
<div title="Kiwi's" id="foto3"></div>
<div title="Aardbeien" id="foto4"></div>
</div>
</div>
<article></article>
so i want to add a class which gives the slider a margin or the element a padding.
I am not the pro with javascript so I am happy it works so far :)
Have your script set the padding on the body equal to the (current) height of the nav when the user scrolls down to it (or causes the nav to be at the top by resizing the window.)
$(window).bind('scroll resize', function() {
var $nav = $('nav'),
$body = $('body');
$nav.removeClass('fixed');
$body.css('padding-top',0);
if ($(window).scrollTop() > $nav.offset().top) {
$nav.addClass('fixed');
$body.css('padding-top',$nav.outerHeight());
}
});
html, body {margin:0;}
nav {display:block; background:#eee; width:100%;}
nav.fixed {position:fixed; top:0;}
nav a {display:inline-block; padding:10px;}
#foto1 img {width:100%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="headwrapper">
<header>
<img src="https://placekitten.com/50/50">
<h1>IT TECH</h1>
</header>
</div>
<nav>
<div id="selector"></div>
<a class="link1" href="home.htm">
<p>Home</p>
</a>
<a class="link2" href="talen.htm">
<p>Programmeertalen</p>
</a>
<a class="link3" href="computer.htm">
<p>Computers</p>
</a>
<a class="link4" href="richting.htm">
<p>Richtingen</p>
</a>
<a class="link5" href="contact.htm">
<p>Contact</p>
</a>
</nav>
<div id="element">
<div id="slider">
<div title="Banaan" id="foto1">
<h1>Welcome to</h1><img src="https://placekitten.com/50/50">
<h1>IT TECH</h1></div>
<div title="Peren" id="foto2"></div>
<div title="Kiwi's" id="foto3"></div>
<div title="Aardbeien" id="foto4"></div>
</div>
</div>
<article></article>
You can use the general sibling selector to select the article. It would look like this:
.fixed ~ #slider {}
It's important to note that the general sibling will only select items AFTER the first element. Your selector cannot traverse back up the DOM.
How do I hide my navbar when the user clicks on the "bar-icon"?
I want to create a navbar which begins hidden and when the user clicks on the bar icon, the navbar displays
. Can you do that with JavaScript? Or do you need jQuery for that?
HTML
<div class="banner">
<header class="header">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</header>
<div class="bannerContainer">
<h1>Heading 1</h1>
</div>
</div>
nav {
height: 60px;
width: 100%;
background-color: #ccc;
}
<div class="banner">
<header class="header">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</header>
<div class="bannerContainer">
<h1>Display like that above!</h1>
</div>
</div>
I'm just trying to figure out how I can hide the navbar, so no fancy-looking 3D effects when it displays is needed, (for now at least).
If I haven't provided enough information, please tell me so that I can provide the right amount of information needed to solve this.
Here is how to control that with a simple show and hide with basic javascript:
function openMenu(e){
document.getElementById('menu').style.display = 'block';
}
function closeMenu(e){
document.getElementById('menu').style.display = 'none';
}
https://jsfiddle.net/7xo87kz6/
You may use jQuery for this purpose.
Make sure to include jQuery in your project.
Jquery Part
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bar").click(function(){
$(".bannerContainer").toggle();
});
});
</script>
HTML Part
nav {
height: 60px;
width: 100%;
background-color: #ccc;
}
<div class="banner">
<div id = "bar">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</div>
</div>
<div class="bannerContainer">
<h1>Display like that above!</h1>
</div>