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.
Related
I think I am doing this a slightly silly way, and so am happy to take suggestions for a new approach.
I am creating a accordion style dropdown nav for mobile but I want the target divs to be outside of the panel group. My code is of the form:
<div class='panel-group' id='accordian'>
<div class='mystyles'>
<ul>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-one-id'>Item 1</a>
</div>
</li>
.... more list items here...
</ul
</div>
<!-- the collapsed divs start here -->
<div id='target-one-id' class='clearfix collapse panel-collapse'>
...content
</div>
... more target divs here
</div> <!-- end panel group -->
I have chosen to do this as I need to style the links differently to the collapsed divs and I want them to appear lower down the page. It does generally work, however, to make a target div collapse you have to click on it's parent link. I want the child to collapse whenever any of the list links are clicked. Or in other words I want only one target div visible at any one time.
I may just not understand bootstrap but how would I go about doing this?
EDIT: A bad solution
So I have a slightly rough solution where I add js code of the form:
$("#target-one").on("show.bs.collapse", function(){
$("#target-two").collapse('hide');
$("#target-three").collapse('hide');
});
This works but the transition animation is jerky and the targets being closed appear to reopen and close as they are hidden. What is a better solution?
$("#target-one").on("show.bs.collapse", function(){
$("#target-two").collapse('hide');
$("#target-three").collapse('hide');
});
$("#target-two").on("show.bs.collapse", function(){
$("#target-one").collapse('hide');
$("#target-three").collapse('hide');
});
$("#target-three").on("show.bs.collapse", function(){
$("#target-two").collapse('hide');
$("#target-one").collapse('hide');
});
.mystyles ul {
list-style-type:none;
margin: 0;
padding: 0;
}
.mystyles ul li {
display:inline-block;
}
.mycontent {
background-color:orange;
}
.one {
height:300px;
background-color:pink;
}
.two {
width:200px;
height:500px;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class='panel-group' id='accordian'>
<div class='mystyles'>
<ul>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-one'>Item 1</a>
</div>
</li>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-two'>Item 2</a>
</div>
</li>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-three'>Item 3</a>
</div>
</li>
</ul </div>
<!-- the collapsed divs start here -->
<div id='target-one' class='clearfix collapse panel-collapse'>
<div class='mycontent one'>
content...
</div>
</div>
<div id='target-two' class='clearfix collapse panel-collapse'>
<div class='mycontent two'>
content...
</div>
</div>
<div id='target-three' class='clearfix collapse panel-collapse'>
<div class='mycontent three'>
content...
</div>
</div>
</div>
<!-- end panel group -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Ok so the snippet seems to work properly... I am now a little confused. My actual code is almost identical except for some dynamic content which is inserted into the target divs.
Could resizing of the hidden diff cause problems? I do not know how to simulate that in the snippet.
I have a static sidebar on scroll but when it reaches the footer it overlaps. Is there a way for me to stop this scrolling onto the footer? I understand this may be a simple concept but I have little experience working with the Scroll event in JQuery so any help would be fantastic.
Please find my code and a CodePen below.
<div id="main">
<div class="spacing">CONTENT HERE TO SHOW HOW THE SCROLL WILL WORK. PLEASE SCROLL DOWN</div>
<div class="container">
<div id="sidebar">
<div id="nav-anchor"></div>
<nav>
<ul>
<li>Blue</li>
<li>Green</li>
<li>Red</li>
<li>Yellow</li>
<li>Purple</li>
</ul>
</nav>
</div>
<!-- /sidebar -->
<div id="content">
<section id="blue">
...
</section>
<section id="green">
...
</section>
<section id="red">
...
</section>
<section id="yellow">
...
</section>
<section id="purple">
...
</section>
</div>
<!-- /#content -->
</div>
<!-- /.container -->
<footer>
<p>Footer here</p>
</footer>
</div>
<!-- /#main -->
$(document).ready(function(){
$(window).scroll(function(){
var window_top = $(window).scrollTop() + 12;
var div_top = $('#nav-anchor').offset().top;
if (window_top > div_top) {
$('nav').addClass('stick');
} else {
$('nav').removeClass('stick');
}
});
});
http://codepen.io/harryberry94/pen/MyOezg
If you want to hide the static element when it is overlapping the footer, add one more condition in your if condition after $('nav').addClass('stick'); :
var footer_top = $("footer").offset().top;
var static_div_bottom = $('nav').offset().top + $('nav').height();
$('#abc').text(footer_top +" " + static_div_bottom +" " + window_top);
if(static_div_bottom > footer_top){
$('nav').removeClass('stick');
}
You can use css for that if all you want is for your div not to overlap the footer, no need to use javascript and the scroll event. Just add z-index:-1; for nav.stick. Also if it needs a greater z-index to go over other elements in the page you can give the footer position:absolute; and a greater z-index (to keep content from going under the footer add padding-bottom to the body element).
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 am using the following script to show a different background depending on the state of the div.
When it is not expanded it shows the "plus (+)" sign, while when is expanded it does not have background image (does not shows anything).
The problem there is that only work once, and I dont know why.
Here's the code:
EDIT (added HTML)!
HTML:
<body>
<section>
<div class="wrapper wf">
<ul id="Parks" class="just">
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_vital" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_vital" class="nav-toggle"></div>
<div id="therapy_vital" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_natur" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_natur" class="nav-toggle"></div>
<div id="therapy_natur" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
</ul>
</div>
</section>
</body>
JS:
$(document).ready(function() {
$('.meta').click(function() {
$(this).css('background', 'none');
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$('.meta').click(function() {
$(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
});
$(collapse_content_selector).toggle(function() {});
});
});
(The .mix value makes the Div expands, and the .meta class switch to different background).
Any clue?
EDIT2 (Live example)
http://anubisfiles.com/test/test.html
(Due I am not really familiar with jsFiddle, I prefer to show you it hosted on a website).
Thanks!
Use on function to bind events,
$('element').on('click', function() {
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$(this).find('.meta').css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
$(collapse_content_selector).toggle(function() {});
});
Try this