Develop Reference

Close and open div with same button [duplicate]

This question already has answers here:
Open and close side menu with same button
(4 answers)
How do you create a toggle button?
(18 answers)
Closed 5 years ago.
I want to open and close my menu with same button. here is my code.
<script>
$('#open-menu').click(function() {
$("#mySidenav").css("width" , "250px");
$("#l_m").css({"marginLeft": "250px", "position" : "absolute", "width" : "100%"});
// $(this).attr('id','close-menu');
});
$('#close-menu').click(function() {
$("#mySidenav").css("width" , "0");
$("#l_m").css("marginLeft" , "0");
});
</script>
Check this fiddle : https://jsfiddle.net/uyjogg5e/10/
(I tried to add the line that is commented but when I click on it, nothing happens)

You can set the css property in a class:
.side-nav-show{
width : 250px;
}
.l_m-show{
marginLeft:250px;
position:absolute;
width:100%;
}
and then toggle the classes on click of element:
$('#open-menu').click(function() {
$("#mySidenav").toggleClass('side-nav-show');
$("#l_m").toggleClass('l_m-show');
});
Working Demo

var a = 0;
$('#open-menu').click(function() {
if(a % 2 == 0){
$("#mySidenav").css("width" , "250px");
$("#l_m").css({"marginLeft": "250px", "position": "absolute", "width" : "100%"});
}
else{
$("#mySidenav").css("width" , "0");
$("#l_m").css("marginLeft" , "0");
}
a++;
});

JQuery for fixed position of navigation bar [duplicate]

This question already has answers here:
JQuery Position:Fixed 'NAVBAR' by scrolling the page
(2 answers)
Closed 6 years ago.
Hello I am new to JavaScript please can anyone tell me the JQuery for keeping the navigation bar fixed on top while I scroll down.
I am using the following code but i think some contents are missing
Code Snippet :
var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.fixme').css({ position: 'fixed', top: '0', left: '0' });
}
else {
$('.fixme').css({ position: 'static' });
}
});

$( document ).ready(function() {
var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function () {
var currentScroll = $(window).scrollTop();
if (currentScroll > fixmeTop) {
$('.fixme').css({position: 'fixed', top: '0', left: '0'});
} else {
$('.fixme').css({position: 'static'});
}
});
});

If you want it fixed all the time, use something like:
.class_name {
position: fixed;
}
If you want it fixed only when you scroll, but relative when you are at the top of the page, then use something like:
$('body').scroll(function(){
var $class_name = $('.class_name');
if($(this).scrollTop() >= $class_name.height()) {
$class_name.addClass('scrolled');
}
});
You can then use css to change the position based on the class on the element.
.class_name.scrolled {
position: fixed;
}
If you couple this will transition css, you will be able to animate it smoothly.

jquery animate() toggle without hiding the element

Is there a way to toggle a single CSS property using the animate() function without hiding it?
Something like this;
$(".block").animate({ 'border-width': 'toggle' }, 1000);
I cannot use the toggleClass(), addClass() or removeClass(). The reason for this is that it has an unwanted effect on the size of the element that is animated (see JSFiddle).
You can find a JSFiddle here.
What I can think of is this;
if(parseInt($(".block").css('border-width'))) {
$(".block").animate({ 'border-width': '0'});
}
else {
$(".block").animate({ 'border-width': '100px'});
}
..Or something like this by adding a class to the element. But I would prefer not to use an if statement. I wonder if this is possible in a single line of code. Feels like it should be.

try using this, in your css:
.block1,
.block2 {
display: inline-block;
vertical-align: top;
color: white;
height: 100%;
width: 50%;
transition: all, 1s;
}
.no-border-top {
border-top-width: 0;
}
then simply toggle no-border-top class, you can see it here

You can use variables to define toggle effect:
var currentBorderW = 0;
$('.block1').on('click', function(){
var nextBorderW = parseInt($(this).css('border-width'));
$(this).animate({ 'border-width': currentBorderW + 'px' }, 1000);
currentBorderW = nextBorderW;
});
Here is working jsFiddle.

Does this do what you want?
$('.block1').on('click', function(){
$(this).animate({ 'border-width': '-=100px' }, 1000);
});
$('.block2').on('click', function(){
$(this).children().first().show();
$(this).toggleClass('borderTop', 1000);
});
JS Fiddle for this code sample
Everything else is the same: your CSS, HTML, etc. I only changed the property border-width to have a value of -= 100px.
I used the -= operator, per the jQuery API docs:
Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.
EDIT: To make it slide back in again, see this example on JSFiddle
(function(){
var clickCount=0;
$('.block1').click(function(){
if (clickCount%2==0) {
$(this).animate({ 'border-width': '-=100px' }, 1000);
}
else {
$(this).animate({ 'border-width': '+=100px' }, 1000);
}
clickCount++;
});
})();
$('.block2').on('click', function(){
$(this).children().first().show();
$(this).toggleClass('borderTop', 1000);
});

Making a nav bar revert to normal after scrolling to top of page

So i'm trying to learn javascript and jQuery. I was coding a project website and wanted to make the nav smaller and transparent as they scroll around the page. i wrote this and it works fine `
$(document).scroll(function(){
$('.nav').css({"opacity": "0.85", "height": "55px"});
$('.nav-container').css({"margin-top": "-13px", "font-size": "1.4em"})
});
`
But i want it to revert back to normal when they scroll all the way to the top. There doesn't seem to be a jQuery event for this.

I'd personally suggest:
$(document).scroll(function () {
// select the relevant elements:
$('#nav, .nav-container')[
// if the window is at the 'top', we use the 'removeClass' method,
// otherwise we use 'addClass':
$(window).scrollTop() == 0 ? 'removeClass' : 'addClass'
// and pass the 'scrolled' class-name to the method:
]('scrolled');
});
With the CSS:
.nav.scrolled {
opacity: 0.85;
height: 55px;
}
.nav-container.scrolled {
margin-top: -13px;
font-size: 1.4em;
}
JS Fiddle demo.
This also uses corrected (valid HTML).
References:
addClass().
removeClass().
scroll().

I have updated your jsfiddle here
I just changed your .scroll() function:
$(document).scroll(function () {
var scroll = $(this).scrollTop();
if(scroll > 0){
$('.nav').addClass('scrolled');
$('.nav-container').addClass('scrolled');
} else if(scroll == 0){
$('.nav').removeClass('scrolled');
$('.nav-container').removeClass('scrolled');
}
});
and added this css:
.nav.scrolled {
opacity:0.85;
height:55px;
}
.nav-container.scrolled {
margin-top:-13px;
font-size:1.4em;
}

jQuery change css properties smoothly on scroll

I want to change the height of the header and add a class to it on the scroll. However I want to do it smoothly using the jQuery animate (or similar effect).
The idea is to make the header sticky on the scroll and remove the sub header from it when it is in sticky form. That's why I fade out subheader when it is being scrolled. Is there a better way to do that?
I have managed to do that with following code, however if you see the demo, the css changes are not smooth, it somehow jerky.
Demo:
http://jsfiddle.net/kcW9a/
Here's the code:
var height = $('header').outerHeight();
$(window).scroll(function() {
if($(this).scrollTop() > height)
{
$("header .subheader").fadeOut(200);
$('header').addClass('stick');
$('header').stop().animate({'height' : '50'}, 200);
}else if($(this).scrollTop() <= height)
{
$('header').removeClass('stick');
$("header .subheader").fadeIn(200);
$('header').stop().animate({'height' : '100'}, 200);
}
});
$(window).scroll();

Change css style for fixed head with your sticky head effect
header{
height: 100px;
background: green;
position:fixed;
width:100%;
}

Try using a callback to the fadeOut() call. Fiddle: http://jsfiddle.net/myTerminal/kcW9a/1/
fadeOut(200, function () { $('header').addClass('stick'); });

$(window).scroll(function() {
if($('#main').offset().top === 0) {
$('.subheader').fadeIn(600);
$('#main').stop().animate({ height: '100px' }, 300).removeClass('stick');
}
else {
$('.subheader').fadeOut(1);
$('#main').stop().animate({ height: '50px' }, 300).addClass('stick');
}
});