JS Menu sliding (always jumps to top of page) - javascript

I created some sliding menu and all works great without one small problem. When I slide the menu, I'm automatically transported to the top of page (the slide effect works good, but why I'm transported to the top of page when I try to open the menu, when I scrolling page, when I'm not of the top?)
Position of the menu is fixed, so I can slide it when I'm in the center of page, for example.
So in short: I want to slide my menu without automatically jumping to the top of page (when I do it).
Code of js:
<script>
jQuery('.arrowleft').click(function () {
jQuery(".other_sidebar_background").css("display", "block");
jQuery(".other_sidebar").toggle("slide");
});
jQuery('.back_sidebar').click(function () {
jQuery(".other_sidebar").toggle("slide");
});
</script>
My menu is showing when I click image in .arrowleft div (and hiding when I click image in .back_sidebar div). .other_sidebar_background and .other_sidebar it divs of my slide menu.
.other_sidebar {
z-index: 999999 !important;
display: none;
background: rgba(21,21,21,0.98);
z-index: 9999;
height: 100%;
position: fixed;
width: 270px;
padding: 10px;
}
.other_sidebar_background {
display: none;
background: #2c2c2c;
}

The divs (back_sidebar and arrowleft) were between tags and the link "#" caused the problem.
I fixed it by changing the <a href="#"> to <a style="cursor: pointer;"> (I wanted a cursor link).

Related

Jumping navigation bar issue

My problem is quite complex (difficult to explain at least).
I have a responsive navigation bar that is by default NOT on the top of the page but you have to scroll down a bit for the navbar to reach the top of the browser window.
On desktop (48em<) one can simply scroll through the navbar (so it simply disappears when scrolling down) but when scrolling back up, it gets a "sticky" class (thanks to JS) and appears on top.
On mobile, the navbar gets sticky once the scroll position reaches the navbar element.
My problem is with the mobile view. I had to add a piece of CSS code so that the page content won't flicker (jump) when scrolling down. (I only need it when the sticky class is added by JS.)
.sticky + .content {
padding-top: 58px;
}
Which works just fine when the hamburger menu is CLOSED.
When the menu is opened, the navbar's height changes and it requires more padding on top for it not to make the page content jump. See the gif below. 🤔
If I change this padding to 248px then the content doesn't jump when the menu is opened, but it jumps when it's closed. 🤦‍♂️
.sticky + .content {
padding-top: 248px;
}
I guess I should write a piece of JS code that would do this:
If nav checkbox is checked then change .sticky + .content {padding-top: 248px;}
If it's unchecked change it back to .sticky + .content {padding-top: 58px;}
All this only below 48em. On desktop the padding is supposed to be 0.
Here's a fiddle with the code:
https://jsfiddle.net/zsoltszilvai/t0zLv7yn/48/
I don't know much about JS so any help would be appreciated.
The problem is not in the padding-top.. Actually you shouldn't manipulate your sticky class. CSS position: sticky does for you all the job automatically. You have to fix 3 things:
You don't need to toggle .sticky class on scroll.. You have to remove this code:
// You don't need this all
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
you permanently add class sticky to the header
<header class="header sticky" id="navbar">
You remove
#media (max-width: 767px) {
.sticky {
/* position: fixed; You don't need this */
}
}
Check this fiddle:
https://jsfiddle.net/tyminko/coetd4jx/1/
The modern answer to you problem is to position submenu with absolute.
.big-wrapper-main {
position: relative;
}
.menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 5;
background-color: white;
}
Submenu positioned that way doesn't change the height of the parent, is positioned after it (because of top: 100% - 100% stands for 100% height of the parent).
The problem is that you are using float and clear and we don't do it in web development for the while now and the height of your .big-wrapper-main is 0px so you have to add position relative to #navbar (when it is not fixed).
I had to add .header.sticky to overwrite position relative.
.header.sticky {
position: fixed;
}

Safari on iOS only showing fixed elements after scroll stopped

I'm coding a "return to top" button that should be visible only when the user scrolls down my web page, and be hidden when the user scrolls up.
The rule is like this:
if the page scrollTop is > 100px then the button is shown
if the page scrollTop is <= 100px then the button is hidden
When running that page with Safari on iOS9 (iPad mini) the button shows only when the scroll animation has ended, however it hides immediately when the scroll up reach the scroll limit.
You can see a sample of the way I do it here:
http://jsfiddle.net/jkwqq59a/
HTML:
<div class="container">
<div class="box"></div>
</div>
CSS:
.container
{
position: relative;
height: 3000px;
background-color: blue;
}
.box
{
display: none;
position: fixed;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
background-color: yellow;
}
JS:
$(window).on('scroll', function()
{
if ($(window).scrollTop() > 100 && !$('.box').is(':visible'))
$('.box').show();
else if ($(window).scrollTop() <= 100 && $('.box').is(':visible'))
$('.box').hide();
});
My question is: on iPad why do the button shows only AFTER scroll down is finished when it hides immediately on scroll up? How can I make it shows immediately, like it does with any web browser on my Mac?
I had the same issue before and my fix was not having a fixed position container into a fixed position container. Meaning by this that fixed elements alone work fine, but not nested.

Enable scroll for a div but lock it for another one

this is my website http://www.yarrutfranken.com/
if you press the 'plus' button on the homepage my contact information will show up. But I can not scroll on the black page. (try making window smaller then you will see).
There's some text falling off when you are on a 11" or 13" laptop.
so wrap up:
need scroll on black information page
if information page is active scroll must be blocked on 'homepage'.
please help me.
ps: i'm not a hero in javascript or other stuff. Just;
html
css
jquery
Add overflow-y: auto; to your #actinfo css rule in order to allow it to scroll if the content is higher than the element's height.
#actinfo {
width: 80%;
height: 100%;
background-color: black;
position: fixed;
z-index: 4000;
overflow-y: auto;
}

How to make lightbox scroll the lightbox and not the page

I am using the lightbox_me jquery plugin to open a lightbox when a user clicks on a product. Often the lightbox content stretches below the fold, and at the moment the right scrollbar moves the entire page when you scroll down.
I'd like it to work like the pinterest lightbox, whereby the right scrollbar only scrolls the lightbox, and the rest of the page stays fixed. I've seen a few posts on this, but nothing seems to work for me.
jQuery(function(){
$('.productBoxLink').click(function(e) {
var box = $(this).siblings(".productLightboxContent").html();
$('.lightBox').lightbox_me({
centered: false,
modalCSS: {top: '50px'},
onLoad: function() {
$('.productLightbox').html(box);
$('.productUpdateInner').show();
},
onClose: function() {
$('.productUpdateInner').hide();
}
});
return false;
});
});
.lightBox {
width: 450px;
background-color: #fff;
top: 400px;
position: fixed;
padding: 30px;
text-align: center;
display: none;
clear: both;
-moz-box-shadow: 0 0 5px #5C5C5C;
-webkit-box-shadow: 0 0 5px #5C5C5C;
box-shadow: 0 0 5px #5C5C5C;
border-radius: 5px;
}
I've read that this can be done with a few changes to my CSS. Does anyone know how I can achieve this with the code shown? Thanks!
Add this to .lightBox:
height:600px; /* You need to set a specific height - px or %*/
overflow-x:scroll; /* Tell the container to scroll if the content goes beyond bounds*/
Update
width:100%;
overflow-x:scroll;
If you want to let it size larger than the viewport, it's most likely because of your position: fixed line. Change it to position: absolute and you should be good.
Both fixed and absolute take the element out of the document flow, so there should be no net change in how it presents, but fixed fixes it to that specific position and forces it to not move ever.
I guess a general answer would be to make the background of the lighbox (i.e. the content before lightbox; the main content wrapper) position: fixed; and adjust its top value with javascript to a negative value corresponding to the position of user scroll in the moment of lightbox opening. Besides that, the lightbox would need to be position: absolute; with the same top / left values as if it was fixed.
When the user closes the lightbox, the previous values would need to be restored.
Add to html a class when lightbox is opening. For example:
.lightbox-active{overflow:hidden}
Also, your lightbox should have the next style:
.lightbox{overflow-x:hidden;overflow-y:scroll}
When you close the lightbox, you have remove the lightbox-active class from html.

Javascript: having a scrollable fixed position element

I'm trying to achieve the following:
I have a pop-in menu docked to the left side of the screen.
The menu has only a small tab visible. Upon hover - it pops to accommodate its content.
The problem is, my pages are sometimes a few screens in height.
And sometime, so is my menu.
I wish to be able to dock my menu to a fixed position (so the tab is always visible), and have the menu scrollable, without the ugly scrollbars.
How could this be achieved?
Add to your css:
html,body { height: 100%; }
#menu { height: 100%; overflow: auto; position: absolute; top: 0px; }
Make sure the #menu is a direct child of body.
If this doesn't work, give me a link to a demo, or make one in http://jsfiddle.net/

Categories

Resources