Change position of div onClick using CSS and jQuery - javascript

I would like to know how can I change attributes of a div onClick.
To make myself clear, I want to know how can I make a div that looks like the one on the Mozilla Developer Network site.
When you click the "Mozilla" button, the banner slides down to reveal behind it a hidden div.
I know this hiding thing is based on the z-index of the overlapping slide and the absolute position.
My question is how can I make the div slide position (e.g. top: 0px to top: 150px) and stay there when removing finger from mouse.
Thank you folks.

Related

Change element's position via animation in ReactJS

I am trying to change the position of my slip element via animation transition whenever a user scrolls to the bottom of the page. The problem that I'm having is that I don't know how to switch the positioning from flex to relative. The slip element needs to be positioned above the footer.
I've managed to achieve this with only switching classes but I don't like the jerking animation so I wanted to add some transition but now I don't know how to make it stick above the footer.
How do I make the slip element stick on top of the footer and not be fixed when a user scrolls to the bottom of the page? The goal is to achieve this with a smooth transition/animation.
Here is my stackblitz example of the problem.
This isn't really a ReactJS question, it's more of a question about HTML and CSS styling.
I would get the position of the footer: footer.offsetTop, and then I could get the user's scroll position: window.scrollY and the window height: window.innerHeight. Using all of these values, I would determine if the user has scrolled to the point where the footer is visible, and if so, make the slip element have an absolute position where the bottom is set to the footer.offsetTop
That should, in theory, work.
I actually found a stack overflow question just for determining if an element is scrolled into view: How to check if element is visible after scrolling? so that should help some.

Avoid reverting to top of page when setting <body> position to fixed with jQuery

I am using a fixed overlay div on my page to show additional content when the user clicks on a certain button.
The trouble with this is that on iOS, the content behind tends to scroll rather than the overlay div.
The only effective solution I have found to this is to use jQuery to alter the class of and toggle its position to fixed (and overflow: hidden) whenever the overlay div is selected to appear (and then back again on closing the overlay). E.g.
$(document).ready(function(){
$("#filter-btn, .close-filter").click(function(){
$("body").toggleClass("fix");
});
});
Whilst this works, it also causes the content within the body itself to move up to the top of the page when changing to 'fixed' to the top which is monentarily visible whilst the fixed overlay div fades in.
Is there anyway I can prevent this from happening?
This can generally be solved by setting body height to 100% and overflow:hidden within the css rule for class applied to the body

hide with window scroll not container scroll

I've a tricky problem. So I have two fixed element with space in between under those two elements I have a relative positioned element, everything is ok so far. Now when I scroll the relative positioned element will scroll and appear in between the two fixed elements and on top of the first one, here is the jsfiddle to make it clearer. I'd like the relative positioned content not to appear when scroll, like if it was a box scrolling with an overflow hidden.
The goal is to do a kind of box scrolling but with a window scrolling.
I'd like a css solution but I'm also opened to any js solution.
What about this?
http://jsbin.com/uSEfUMA/2/edit
fixed has a background
you can also add padding to body if you don't want to set a background to fixed
Could make a zindexed div with a background set to the same color as the page bg, put that over the relative positioned div and under the absolutes so when the relative div scrolls to that point of the page it appears to dissapear how I believe you want it to, or just use overflow hidden and absolute positioning to lock it into place and clip the content.

Stop page from scrolling when div is scrolled to the bottom

Basically, I have a scrolling div. I want the div to scroll obviously, but once scrolled all the way to the bottom, if the user continues to scroll, I don't want the page itself to scroll. Basically, when the mouse is in the div, I want the scrolling to be only within the div, and then when the mouse is outside of the div i want the page to scroll. Is there any way of doing this? I'm using jquery for other aspects of the site as well so I have that if it helps.
Well, the only thing i could see happening is that the focus is not set to the div when you move into it, and then loose focus when you move out.
Example JavaScript:
<div onMouseOver="JavaScript:this.focus();" onMouseOut="JavaScript:this.blur();">
Also, be sure that your CSS Class for your Div has the following, in this specific order:
overflow: auto;
overflow-y: scroll;

Position:fixed in css: depending on scrollbar position, the div appears in a different position

I have a "loading" div with a GIF, that shows when the page starts to unLoad. It is position:fixed by CSS, and suposed to remain centered. The problem is that depending on where you are in the page when you trigger the event that shows the DIV, the position where it appears changes, the closest to the end of the page you are, more it moves. BUT it doesnt appear if you scroll down, it is like hidden in a non-visible part of the browser =/.
http://img69.imageshack.us/img69/4580/ss1nn.jpg
http://img513.imageshack.us/img513/7783/ss2df.jpg
Hope it is clear enough.
Thanks in advance!
inorder to center an element -- do not use position:fixed use position:relative and add margin: 0 auto; the 0 is the margin-top which you can give as per your needs.

Categories