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>
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 want to Close the sidenav by clicking anywhere outside sidenav
my html code is
<body>
<!-- show image while loading -->
<div class="se-pre-con"></div>
<!-- Header starts here -->
<div class = "header">
<!-- search bar -->
<?php include("header.php");?>
<!-- search bar ends here -->
</div>
<!-- header ends here -->
<div class="primary" id="primary">
<!-- image slider starts here -->
<div class="image-slider">
<?php include("slider.php");?>
</div>
<!-- image slider starts here -->
<!-- all-content starts here -->
<div class = "container wraper">
<!-- content starts here -->
<div class="content">
<h3 class="Category"><strong> Category </strong>
<button type="submit" class="btn btn-xs btn-success complete" id="more"><strong>More </strong> <span class="glyphicon glyphicon-forward"></button>
</h3><hr id="index-hr">
<?php include("functions/index_category.php"); ?>
</div>
<!-- content ends here -->
</div>
<!-- all-content ends here-->
<!-- daily adds starts here -->
<div class="container news">
<h3 class="news"><strong> Daily News </strong></h3><hr id="index-hr">
</div>
<!-- daily adds ends here -->
<!-- side nav starts here -->
<div id="mySidenav" class="sidenav">
×
<div id="result">
<?php include("functions/sub_category.php")?>
</div>
</div>
<!-- side nav ends here -->
</div>
</body>
The Js i tried :
//close the side nav when clicked outside
var primary = document.getElementById('primary');
var sidenav = document.getElementById('mySidenav');
window.onclick = function(event){
if( event.target == primary ){
sidenav.style.width = "0px";
primary.style.marginLeft = "0px";
}
}
How ever it works clicking enywhere on the side nav by replacing event.target == sidenav But i want to close it by clickng outside
js for opening and closing the side nav are
function openNav() {
if($(window).width() > 600){
$("#mySidenav").attr("style","width:350px");
$(".primary").attr("style","margin-left:350px");
}else{
$("#mySidenav").attr("style","width:100%");
$(".primary").attr("style","margin-left:100%");
}
}
function closeNav() {
$("#mySidenav").attr("style","width:0px");
$(".primary").attr("style","margin-left:0px");
}
css code:
.wraper{
min-height: 165px;
overflow: hidden;
height: 200px;
}
.content {
margin-top: 30px;
}
#more{
width:6%;
margin-right:0px;
float:right;
}
.wraper.complete{
height: auto;
}
h3.sub{
color:#d34615;
text-decoration:underline;
padding-left: 10px;
}
#index-hr{
width:100%;
border-top:1px solid #333;
opacity:0.3;
}
Just check the event.target to see if it was NOT the side nav and that the nav is NOT already open:
//close the side nav when clicked outside
var primary = document.getElementById('primary');
var sidenav = document.getElementById('mySidenav');
window.onclick = function(event){
var sideNavWidth = sidenav.style.width;
// check to see if the event target was not the side nav
// AND that the side nav is open
if( event.target !== sidenav && sideNavWidth !== "0" ){
sidenav.style.width = "0";
primary.style.marginLeft = "0";
}
}
This is a crude implementation of your code, but you can see that the side nav bar does, in fact open (yellow) and will not close if you click on it, but will close if you click anywhere else.
//close the side nav when clicked outside
var primary = document.getElementById('primary');
var sidenav = document.getElementById('mySidenav');
window.onclick = function(event){
var sideNavWidth = sidenav.style.width;
// check to see if the event target was not the side nav
// AND that the side nav is open
if( event.target !== sidenav && sideNavWidth !== "0" ){
closeNav();
}
}
function closeNav(){
sidenav.style.width = "0";
primary.style.marginLeft = "0";
}
.sidenav { background: yellow;}
<div class="primary" id="primary">
<!-- image slider starts here -->
<div class="image-slider">
<?php include("slider.php");?>
</div>
<!-- image slider starts here -->
<!-- all-content starts here -->
<div class = "container wraper">
<!-- content starts here -->
<div class="content">
<h3 class="Category"><strong> Category </strong>
<button type="submit" class="btn btn-xs btn-success complete" id="more"><strong>More </strong> <span class="glyphicon glyphicon-forward"></button>
</h3><hr id="index-hr">
<?php include("functions/index_category.php"); ?>
</div>
<!-- content ends here -->
</div>
<!-- all-content ends here-->
<!-- daily adds starts here -->
<div class="container news">
<h3 class="news"><strong> Daily News </strong></h3><hr id="index-hr">
</div>
<!-- daily adds ends here -->
<!-- side nav starts here -->
<div id="mySidenav" class="sidenav">
×
<div id="result">
<?php include("functions/sub_category.php")?>
</div>
</div>
<!-- side nav ends here -->
</div>
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>
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
I've already looked around for quite a bit and stumbled upon some tutorials, and so far, I've achieved not so much. What I'm trying to do is make the top header of my website disappear when the user scrolls down and reappear when they scroll to the top of the page.
My code so far:
<header class="top-nav">
<div class="top-nav">
<!-- Top Row -->
<div class="top">
<div class="container">
<div class="row vh-center">
<div class="col-md-5 slogan">
Plumbing and Remodelling Services.
</div>
<div class="col-md-2">
<a href="index.html">
<img src="img/logo.png" alt="logo" class="logo">
</a>
</div>
<div class="col-md-5 top-social right">
<div class="social-3 right">
<i class="icon-facebook"></i>
<i class="icon-dribbble"></i>
<i class="icon-twitter"></i>
<i class="icon-tumblr"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Top Row End -->
<script type="text/javascript">
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight){
$('header').removeClass('top-nav').addClass('nav-up');
} else {
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('top-nav');
}
}
lastScrollTop = st;
}
</script>
</div>
</header>
<header id="home">
<!-- Navigation -->
<div class="navigation">
<div class="container">
<div class="row vh-center">
<ul class="nav" id="nav">
<li>
<!-- Menu Link -->
<a href="index.html#home" title="About">
<span>About</span>
</a>
<!-- Menu Link End -->
</li>
<li>
<a href="http://www.terrylove.com/forums/index.php" title="Forums" target='_blank'>
<span>Forums</span>
</a>
</li>
<li>
<a href="index.html#event" title="Something">
<span>Renovations?</span>
</a>
</li>
<li>
<a href="index.html#portfolio" title="Something">
<span>Plumbing?</span>
</a>
</li>
<li>
<a href="index.html#team" title="Something">
<span>Stories?</span>
</a>
</li>
<li>
<a href="index.html#blog" title="Something">
<span>Pricing</span>
</a>
</li>
<li>
<a href="index.html#contact" title="Contact">
<span>Contact</span>
</a>
</li>
</ul>
<select class="select-menu"></select> <!-- select menu for small screens -->
</div>
</div>
</div>
<!-- Navigation End -->
</header>
The CSS:
header {
margin:0px auto;
text-align:center;
position:fixed;
width: 100%;
top:0;
z-index:999;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
float:left;
background: #34373d;
transition: top 0.2s ease-in-out;
}
.nav-up {
top: -40px;
}
When I scroll down, both the headers are just fixed and don't do what I'm saying (of course I haven't told the second header to do anything, I'll implement that once I've gotten the first one to function)
Can anyone tell me what I'm doing wrong and how I can resolve this issue?
Check if this helps you
jQuery
var lastScrollTop = 0;
$(window).scroll(function () {
var st = $(this).scrollTop();
if (st < lastScrollTop){
$('.navbar ').fadeIn();
} else {
$('.navbar ').fadeOut();
}
lastScrollTop = st;
})
I allways use jQuery's scrollTop for these actions.
$(window).scroll(function(event){
toggleHeader();
});
function toggleHeader() {
$('header').toggle( $(window).scrollTop() < 50 );
}
I've answered recently for very similar question. After little modification it should fit your needs: CLICK
Direct link to JSFiddle: http://jsfiddle.net/silveraven/WgL9z/10/
Code just to put jsfiddle link...