I'm currently using jQuery Stickyfloat for a "back to top" button on a page that has alot of content. It works perfectly, however, the link is visible at the top when the user goes to the page. I would like it to be hidden on page load and when the user scrolls down (around 400px), it becomes visible and initiates the stickyfloat. When the user scrolls back up to the page, the link goes away.
The jQuery:
$('a#back-to-top').stickyfloat({duration: 150});
The HTML:
<div id="content">
// Content goes here
Top
</div>
The link is absolutely positioned to the main content div. The CSS:
#content {
position: relative;
}
a#back-to-top {
position: absolute;
top:0;
right:0;
}
How would I go about doing this?
You want to hide the floating element initially via CSS. You can probably initialize the stickyfloat like normal. Then you want to attach a handler to the scroll event of the element being scrolled (BODY, DIV..).
In the handler you want to check the scrollTop of the element. Once it reaches your desired height, fadeIn the floating element.
Vice-versa for hiding it.
.floating-element
{
display:none
}
$('el').scroll(function(e){
// check target.scrollTop...
// fade in target
})
Related
I have a div .layer that darkens the entire page to highlight a modal, but when I trigger the event there is a problem to occupying 100% of the screen, and is that the scroll bar of the original browser is deleted
Is there any fancy way to make the div .layer, when is visible, keep the original bar scroll of the page?
In smartphones / tablet I do not find any problem when shooting the event .layer").show(); but on desktop screens the original scroll bar of browser is eliminated and the whole html document moves to right, taking its place.
What would be the correct way to avoid html to the right?
Thanks in advance!
HTML:
<div class="layer"></div>
<div class="open-modal">Open</div>
<div class="modal">
<div class="close-modal">Close</div>
</div>
CSS:
html {width:100%;min-height:100%;margin:0 auto;top:0;left:0;padding:0}
body {top:0;left:0;margin:0;padding:0;min-height:100%}
.layer {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
min-height:100vh;
background:rgba(0,0,0,.9);
z-index:2
}
.modal {display:none;z-index:1}
SCRIPT:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer").show();
$("body").css("overflow","hidden");
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
$("body").css("overflow","");
});
});
You need to get rid of your use of "overflow". I've included a link below to the Mozilla Developer Network docs for "overflow", but below is a quick quote explaining what's happening.
"hidden
Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container."
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Also, after one cycle of clicking Open and Close, if you were to click Open again, the word Close won't show up. That's because you're not using the .show() method to show that text upon clicking Open. Updated JavaScript below.
JavaScript:
$(document).ready(function(){
$(".open-modal").click(function(){
$(".modal,.layer,.close-modal").show();
});
$(".close-modal,.layer").click(function(){
$(".close-modal,.layer").hide();
});
});
I'm working on a page in our project.
I want div element with class attribute "site-info" put in bottom of page. I try {position:absolute;bottom:0} this element put in center of page. div with class called "modal-dialog" don't get height of page and div element called "site-info"
is in below this element but Appeared on center of page.
You can use css for this.
.site-info{
position: fixed;
bottom: 0;
width: 100%;}
There is a SO resource related to this... Make div stay at bottom of page's content all the time even when there are scrollbars
In my Angularjs app I have a dropdown menu that appears when I click on a link. To stop scrolling on the page while the menu is showing I use overflow:hidden and add the class to the body when the menu is showing:
However, using overflow:hidden also removes the vertical scrollbar completely from Windows based browsers meaning the whole page shifts to the right (by the width of the scrollbar) when the menu opens.
Can I stop the scrolling without completely removing the scrollbar? Perhaps keep the scrollbar container in place but hide the handle.
Example
Take a look at https://fancy.com/ - click on the login link and the modal should appear. The scrollbar handle disappears but the scrollbar container remains. How can I achieve this effect?
Take a look at https://fancy.com/ - click on the login link and the modal should appear. The scrollbar handle disappears but the scrollbar container remains. How can I achieve this effect?
Looks like they are simply doing this by having overflow-y: scroll set for body to begin with, and then a class fixed is added to the html element when you click “login”.
And then that class affects the main content container of the page, setting it to fixed position:
.fixed #container-wrapper {position:fixed;left:0;width:100%; /*[…]*/
Put the menu into a wrapper div and set overflow-x: and overflow-y: as you need for this div.
As I mentioned in the comments, this can easily be done with nested divs. Yes it could be done using the body tag but that is a very simple change from my code below. You can see the effect here: https://jsfiddle.net/udgj3ot5/
Note: I doubt you will be calling the function straight from the child div so another means to pointing to the element other than this will probably need to be used.
CSS
html, body {
padding:0;
margin:0;
width:100%;
height:100%;
}
div.parentDiv { /*Set this to the body if you don't want two divs*/
width:inherit;
height:inherit;
overflow-y:scroll;
}
JavaScript
function toggleChildDiv(elem) {
if (elem.style.overflow == "hidden") {
elem.style.width = "auto";
elem.style.height = "auto";
elem.style.overflow = "visible"
} else {
elem.style.width = "100%";
elem.style.height = "100%";
elem.style.overflow = "hidden"
}
}
HTML
<div class="parentDiv">
<div onclick="toggleChildDiv(this)">
YOUR PAGE CONTENT
</div>
</div>
I'm using Bootstrap 3.2.0.
I can show the modal just fine and the background stays in place. The modal contains a textarea. When I tap or focus on that textarea and the virtual keyboard comes up, the background scrolls to the top.
This only happens with iOS 8 and not iOS 7.
It's like iOS 8 wants to put whatever is focused on in the middle of the screen and it scrolls until that element is in the middle. It scrolls up and up and up until it hits the top THEN pulls the modal down a little.
Very frustrating. Has anyone experienced this yet? Any solutions?
Update: I'm thinking it has to do with the fact that the modal is fixed position and not absolute. iOS wants to put the focused element in the middle of the screen so it scrolls the viewport or document up until the element is in center but scrolling does nothing because the element is position fixed.
The solution for me was to set the modal involved to position:absolute; (by default it is position: fixed;) and instead of placing the modal at the bottom of my HTML by appending it to the body, I appended it to the parent element of the button that I clicked to show the modal. I also needed to ensure that the element that I was appending the modal into had a position of relative.
CSS
.modal.fade.my-special-modal {
position: absolute;
/* 'top' is not required but I did it for my taste */
top: 15px;
}
.my-special-modal-container {
position: relative;
}
HTML
<div class="my-special-modal-container">
<button>Show the modal</button>
<!-- js will inject the modal here -->
</div>
Thanks to #Christina for helping me discover this solution.
you can add this property globally:
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
}
i have a situation of:
<div class="hey1"><img class="img1"></img></div>
<div class="hey2"><img class="img2"></img></div>
<div class="hey3"><img class="img3"></img></div>
so .img imgaes are in position:absolute; binded to right top corner of related .hey div
when i fadeOut(); for example .hey1 div, the other .hey2,.hey3 divs scrolls more on top (right) but images binded remains on same absolute position, what i would like is to bind .img images also when fading out related div
any way to do that?
Make sure your container divs have position.
Example: http://jsfiddle.net/redler/D6Ucg/
In the example, click a yellow box to make it fade out. Then see what happens if you re-run the test after removing the div { position: relative; } style.
Instead of positioning img elements absolutely with in div elements, position them relatively. This way they will move along with the div when div is re-positioned through scroll or programmatically.