How to make sidebar fixed (without using actual "fixed" property) with javascript? - javascript

I’m a beginner and I’m stuck. And I would really use some help. Have two questions regarding js.
Namely, I have a sidebar on the left that has a toggle option. In order to solve the problem of keeping my sidebar in sight when scrolling, I added javascript code that constantly raises it to the top of the page. But that doesn't seem like the optimal solution.
Is there a way to use javascript to set the menu to be fixed to the top of the page whenever the toggle is open.
Here is the following js code:
$(function() {
var $sidebar = $("#menu"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 60;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
Here is the html:
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper" style="background-image: url('geogebra6.png'); scroll-margin: 120px;"> <!--Dodao side baru scroll marginu -->
<div class="sidebar-heading">Sadržaj</div>
<div class="list-group list-group-flush" style="background-image: url('geogebra1.png');" id="menu">
<b>1. Uvod</b>
<b>2. Realni nizovi </b>
<!-- class="dropdown-toggle" style="color: black; "-->
<b>3. Funkcionalni nizovi</b>
<ul class="collapse list-unstyled" id="homeSubmenu" >
<li>
<b>3.1. Obična konvergencija</b>
</li>
<li>
<b>3.2. Ravnomerna konvergencija</b>
</li>
</ul>
</div>
</div>
Of course, using position:fixed does not get the job done because it breaks the flow and mu side bar has the toggle option.
While we are here, is there any way of editing this line of code to make sidebar closed by default and then to open when clicked on the button? I've tried several different solutions but none of them seems optimal.
Here is the code in question:
<!-- Menu Toggle Script -->
// $("#wrapper").toggleClass("toggled");
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
Here is the actual link of the site:
http://alas.matf.bg.ac.rs/~ml05184/

Related

Collapse Side-nav on click responsive

I adjust a bougth onepage-template for my wishes, but unfortunately I'm not good in JS.
So, I have a side menu, which stays in desktop version. But on mobile/tablet-version I have a toggle menu icon. On click the menu opens, but when I click on a navigation-point the menu stays open. I would like to have it closed after clicking.
Thanks for your help
<aside class="nav_sidebar">
<div class="menu_wrapper">
<div class="header_top">
<div class="head_img_wrap">
<img src="images/logo.svg" alt="Images">
</div>
</div>
<div class="main_menu">
<ul>
<li class="active"><p>Home</p></li>
<li><p>Über mich</p></li>
<li><p>services</p></li>
<li><p>portfolio</p></li>
<li><p>blog</p></li>
<li><p>kontakt</p></li>
</ul>
</div>
</div>
</aside><!-- end header -->
<!-- menu toggler -->
<div class="menu_toggler">
<span class="fa fa-bars" aria-hidden="true"></span>
</div>
<!-- menu toggler -->
// Mobile menu css
var $menu_toggler = $('.menu_toggler'),
$menuSidebar = $('aside.nav_sidebar');
$menu_toggler.on('click',function () {
$(this).toggleClass('open');
$menuSidebar.toggleClass('open');
});
if(windowWidth < 768){$menuSidebar.toggleClass('shrinked');}
// collapsible menu css
$('.toggle_icon span').on('click', function () {
$menuSidebar.toggleClass('collapse');
});
Have you tried something like this?
$menuSidebar.on("mouseup", function() {
$menuSidebar.removeClass('open');
});
When something is clicked in the sidebar, it will trigger the mouseup event
Ok I tried this:
// Mobile menu css
var $menu_toggler = $('.menu_toggler'),
$menuSidebar = $('aside.nav_sidebar');
$menu_toggler.on('click',function () {
$(this).toggleClass('open');
$menuSidebar.toggleClass('open');
});
if(windowWidth < 768){$menuSidebar.toggleClass('shrinked');}
// collapsible menu css
$menuSidebar.on("mouseup", function() {
$menuSidebar.removeClass('open');
});
and it works but the toggle icon stays in the middle after closing. It should go back on the left side. Someone help for this problem?
You are using the open class on both the menu and the button, so:
$menuSidebar.on("mouseup", function() {
$menuSidebar.removeClass("open");
$menu_toggler.removeClass("open");
});

jQuery scrollTo resize issue

Update: the script and scrollTo animation now work fine. I've uploaded the correct solution.
I'm working on a Bootstrap 3 based website and I'm having some scrollTo issues, this is the code for a navbar (links from the nav lead to three different sections within the page):
HTML:
<header id="page-header" class="container">
<h1> NMS website </h1>
<img src="assets/images/group-logo.png" alt="group logo">
<nav class='navbar navbar-default navbar-fixed-top' role='navigation'>
<h2> Page navigation </h2>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<div class='collapse navbar-collapse' id='collapse'>
<div class="container">
<ul class="nav navbar-nav">
<li>Brands</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</header> <!-- end of page header -->
JavaScript (Modernizr library included for media query support, also I've used offset because the navbar is fixed and is overlapping the content area after scrollTo animation by default):
$(function () {
// making our anchors "scrollable"
var x;
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-x
}, 700);
return false;
}
}
});
function responsive () {
if(Modernizr.mq('(min-width: 768px)')) {
x = 85;
}
if(Modernizr.mq('(max-width: 767px)')) {
x = 180;
}
}
responsive();
$(window).resize(function () {
responsive();
});
});
and as you can see, I'm using this piece of code - https://css-tricks.com/snippets/jquery/smooth-scrolling/ for making scrollTo effects. Scrolling doesn't work that great, the problem occurs when I resize the browser window. When I go from desktop to mobile (without refreshing the page) the scrolling animation won't work that well (it doesn't recognize the "mobile" script first, so when I click on a link in the menu it will first run the offset from non-mobile script, and then it will run the offset for mobile script, which makes a non-pretty animation). But if I resize the window to mobile and then refresh the page (just like opening the page from a mobile device for the first time), my scrolling works great. Same thing goes for non-mobile window sizes as well. I hope I made this question clear? Thanks.

Javascript stopping scroll from jumping

I have a page where you can click to slideDown an element from the top of the page.
I am trying to create a rule that says if the push down is visible and the screen has scrolled further than the height of the push down then it should be hidden again. Meaning the user will have to push the button to get it to show again.
In my HTML I have:
<div class="row" id="learn-more" style="display:none">
<div class="small-12 columns" id="close">
<p id="close-learn">
<i class="fa fa-times pull-right fa-2x"></i>
</p>
</div>
<div class="small-12 columns" id="learn-content">
<h1>Content for Pushdown</h1>
</div>
</div>
<div class="row" id="hero">
<div class="small-12 columns small-centered">
<p id="learn"><a class="transition">Learn More</a></p>
</div>
</div>
In my Javascript I have:
// Open and close learn more section
$("#learn").on("click", function() {
$("#learn-more").slideDown();
});
$("#close-learn").on("click", function() {
$("#learn-more").slideUp();
});
// Close learn-more based on scroll position
$(window).on("scroll", function() {
var scrollPosition = $(window).scrollTop();
if ($("#learn-more").is(":visible") && scrollPosition > $("#learn-more").height()) {
$("#learn-more").slideUp()
}
});
This all works but when the #learn-more element slides up the page jumps down about 500 pixels which is the height of the #learn-more element. I would like mine to work in the same way as Airbnb's new homepage when you click the 'how it works' button and then scroll below the push down element.
Any advice would be much appreciated.
Seems that this situation occurs because $(window).scrollTop position is preserved after the the slideUp() is called.
But we can memorize the visible position of Learn More button relative to the top of the window and after text block is hidden return to this position. Also, i suggest to use hide() instead of slideUp() here.
Here is what I suggest to do on scroll:
$(window).on("scroll", function(event) {
var scrollPosition = $(window).scrollTop();
var learnMore = $("#learn-more");
if (learnMore.is(":visible") && scrollPosition > learnMore.height()) {
var learnMoreButtonTop = $("#learn").offset().top - scrollPosition;
learnMore.hide();
$(window).scrollTop(learnMoreButtonTop);
}
});
Working example

IE skips animate() opacity on the first attempt

I'm trying to get my jQuery animations to work properly in older versions of IE but for some reason it will skip the second .animate() process when first attempted for each div. I'm guessing it must have to do with the order of how I apply css and assign classes but I can't figure out how to fix it.
Essentially what I want to have happen is:
1. user clicks on a name/label for a customer testimonial
2. the current testimonial fades out (opacity:0)
3. the height of the testimonial's containing div adjusts to either the height of the sidebar menu or the height of target testimonial (whichever is larger)
4. the targeted testimonials fades in (opacity:1)
I have a demo page online here.
Here's my code:
Javascript::
jQuery(document).ready(function($){
var targetTestimonial = $('div.current');
$('#testimonialMenu a').click(function(e){
e.preventDefault(); // disable default link behavior (no page change)
targetTestimonial = $('#' + $(this).attr('rel'));
if (!targetTestimonial.hasClass('current')){
var tempHeight = Math.max($('#testimonialMenuMask').outerHeight(), $(targetTestimonial).outerHeight());
$('div.current').animate({opacity:0}, 500, function(){
$('#testimonialContainer').animate({height: tempHeight}, 500, function(){
$('div.current').removeClass('current').css({display:'none'});
$(targetTestimonial).css({display:'block'}).animate({opacity:1.0}, 500, function(){
$(this).addClass('current');
});
});
});
}
$('#testimonialMenu a').removeClass('current');
$(this).addClass('current');
});
});
HTML::
<div id="testimonialMenuMask">
<h3>Select a Testimonial:</h3>
<ul id="testimonialMenu">
<li>
<ul>
<li>Marianne</li>
<li>Dillon</li>
</ul>
</li>
</ul>
</div>
<div id="testimonialContainer">
<div id="marianne" class="testimonialMask current">
<!-- HTML CONTENT -- >
</div><div id="dillon" class="testimonialMask">
<!-- HTML CONTENT -- >
</div>
</div>

Shrinking div on Click - Jquery 1.9

I want a particular div to shrink, (Complete data should be visible) every time when user clicks on the particular icon. Here I have the class, legend-icon. so I want the anotherID,for example #Chart to shrink when user click
HTML
<div id="id1">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="legend-icon"></i> <b class="caret"></b>
</a>
<div id="legend_container" class="dropdown-menu">
<div id="smoother" title="Smoothing"></div><div id="legend"></div>
</div>
</li>
</ul>
</div>
<div id="in">
<div id="chart">
//my data
</div>
</div>
I tried like
$("i.legend-icon").click(function(){
$("#chart").animate({width: '-=50px',},"slow");
});
But Its not working. Its completely not displaying the div to -50px.. But I just want the div to shrink What should I do here?
Could you show your css for this elements to?
you can check my demo on jsfiddle, it works as you expect. But its not with your html and css, but it should be the same.
click me
<div class="animate-me"></div>
.animate-me {
width: 300px;
height: 100px;
background-color: aqua;
}
$(".click-me").click(function(){
$(".animate-me").animate({width: '-=50px',},"slow");
return false;
});
This seems to work just fine....
Maybe just try a bigger value, it really depends on how big your element is...
In my example, its 500px wide, and I shrink it 450...
Example Here
$("i.legend-icon").click(function(){
$("#chart").animate({width: '-=450px',},"slow");
});
try to be more specific on what you want the container to be after shrinking. animat can have much more controls:
... animate(
{
"left":<positionafter shrinking>,
"width":["toggle", "swing"]
},
{
"duration": 0,
"step": function( now, fx ){},
"complete": function(){
have a look at the animate doc on the details.

Categories