So I have a modal window that is causing the page to scroll down. It adds #login-box to the url but that div id is not a set place. I thought about adding a div to the html but that wouldn't work because my menu is sticky and it would cause them to scroll to wherever that div is.
http://onecraftyshop.com and click "login" in the nav menu. You will see what I'm talking about. Then scroll down and click it again and oyu will see that it scrolls down no matter where you are on the page.
Here is the relevant JS of the modal window:
// Load the modal window
$('a.login-window').click(function() {
// Get the value in the href of our button.
var login_id = $(this).attr('href');
// Add our overlay to the body and fade it in.
$('body').append('<div id="overlay"></div>');
$('#overlay').fadeIn(300);
// Fade in the modal window.
$(login_id).fadeIn(300);
// center our modal window with the browsers.
var margin_left = ($(login_id).width() + 24) / 2;
var margin_top = ($(login_id).height() + 24) / 2;
$(login_id).css({
'margin-left' : -margin_left,
'margin-top' : -margin_top
});
return false;
});
I tried changing
var margin_top = ($(login_id).height() + 24) / 2; to
var margin_top = ($(login_id).height() + 24) / .7; and that stopped the scrolling but the box wasn't centered (it was actually cut off at the top of the page) I then thought "oh easy just change the positioning with css", but then that caused it to start scrolling again!
Visit http://onecraftyshop.com and click "login" in the nav menu. The modal window should pop up and the page will scroll. CSS through firebug or dev tool in chrome.
Let me know if you need anything else.
Thanks for helping me sort this one out!
------------CSS for #overlay as requested--------------------------
background: none repeat scroll 0 0 #000000;
height: 100%;
left: 0;
opacity: 0.8;
position: fixed;
top: 0;
width: 100%;
z-index: 9999999;
To stop scrolling on the page, create this javascript function (written in plain javascript):
scrollingToggleIterates = 0;
function toggleScrolling(event){
if(scrollingToggleIterates%2 == 0){
var scrollPosition = document.documentElement.scrollTop;
document.body.className = 'stopScrolling';
document.documentElement.scrollTop = scrollPosition;
}
else{
var scrollPosition = document.documentElement.scrollTop;
document.body.className = '';
document.documentElement.scrollTop = scrollPosition;
}
scrollingToggleIterates++;
}
Then add this class to your css:
.stopScrolling{
height: 100%;
overflow:hidden;
}
Call the toggleScrolling function when you want to prevent scrolling, then call the function again when you want to restart it. I know you're working in JQuery, but you should be able to intermix it with plain JS.
The plugin that scrolls the window down on fragment links is causing this. If you unhide the login menu you can see the window is scrolling down to it's original location. Since this isn't the default browser behavior, return false or event.preventDefault() will not stop this behavior. You will need to see if there's a class you can add to this link that will stop the plugin from scrolling when this link is clicked.
Another option is to not use the href property for the id of the login window. Make it either href="javascript:void(0)" or just href="#". Then use a data attribute like: data-target="loginMenu" and update your javascript to grab the id from this attribute:
var login_id = $(this).attr('data-target');
Related
I've made a game website that has horizontal and vertical scrolling but I want the website to stop or disable scrolling down the page at the "second arrows" but be able to scroll up the page.
basically I've already tried "overflow-y:hidden" but i still want to beable to scroll back up the page
https://codepen.io/54x1/full/qBBdXGP
check out my codepen to see my design
code for where i want it:
var BotOfWin1 = $(window).scrollTop() + $(window).outerHeight();
var BotOfObj1 = $('.main-rules').position().top + $('.main-rules').outerHeight();
if (BotOfWin1 > BotOfObj1)
{
$('.game-section').css({"display": "block"});
} else {
$('.game-section').css({"display": "none"});
}
I don't know your motivation for disabling scrolling below the second arrows (can the user navigate there other than scolling?). So I'll just go with the assumtion, that you simply want to prevent the user from ever getting there.
Just use display: none in CSS to not display the content.
What I would do is:
Do not display the second page element on pageload
.content-second {
display: none;
}
On scrolling, check if the page has been scrolled to the very right. If so: display second page element.
var win = $(window);
var contentWidth = $('.content-first').width();
win.on('scroll', function () {
var scrolledRight = win.scrollLeft() + win.width() >= contentWidth;
if (scrolledRight) {
$('.content-second').addClass('show');
}
});
See this pen for a simplified example.
let's get straight to the point:
My code looks like the following:
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
</div>
</div>
</div>
And my css:
#keep_up {
position: fixed;
width: 13%;
}
#thread_menu{
height: 80vh;
width: 100%;
float: left;
position: relative;
}
Now i use this for a forum. and this is basically to show the active and new threads on the side of the screen.
However. When watching a thread, the header disappears (Wich makes sense because we are scrolling down).
but i want the thread menu to stay on my side (So that it is always visible). In this case that is happening because my keep_up div has position: fixed. But i only see half of the thread menu becuase it is too long and won't scroll up.
My question:
I want the thread menu to scroll up, untill it reaches the top of my window. From then on i want it to stay there.
How do i do this?
I saw a few examples but none of them worked for me.
EDIT: Code i tried:
<script src="jquery.min.js">
$(window).scroll(function () {
var margin = null;
$(window).on("scroll", function () {
var scrollHeight = $(document).height(),
scrollTop = $(window).scrollTop(),
offsetBottom = 110, // Offset depending on the height of the footer
offsetTop = 100, // Offset depending on the height of the header
positionTop = $(".keep_up").offset().top,
affix;
if (margin != null && (scrollTop + margin <= positionTop)) {
// The sidebar has reached the bottom and is still on the bottom
affix = false;
} else if (positionTop + $(".keep_up").height() >= scrollHeight - offsetBottom) {
// The sidebar has reached the bottom
affix = 'bottom';
} else if (scrollTop <= offsetTop) {
// The sidebar has reached the top
affix = 'top';
} else {
// The sidebar is midway
affix = false;
}
// If the sidebar hasnot changed his state, return;
if ($(".keep_up").hasClass('at' + (affix ? '-' + affix : ''))) return;
if (affix == 'bottom') {
margin = positionTop - scrollTop;
} else {
margin = null;
}
// If the related class is added to the div
$(".keep_up").removeClass('at at-top at-bottom').addClass('at' + (affix ? '-' + affix : ''))
});
});
</script>
And the CSS:
.keep_up{
/*position: fixed;*/
width: 13%;
}
.keep_up.at {
top: 1px;
position: fixed;
}
.keep_up.at-top{
}
.keep_up.at-bottom {
top: 438px;
position: absolute;
}
modify this on HTML:
<div id="prevent"></div>
<div id="keep_up" data-spy="affix" data-offset-top="200">
Add this CSS:
.affix{position: fixed !important; top:0px; z-index:999;}
.affixpatch{margin-top:100px !important;}
this will fix the div when you scroll down 200px. Change data-offset-top value to reach it on different break point.
.affixpatch is a class that will be loaded with next jquery function. it prevents to hide content behind top fixed div. Change margin-top to another value if this don't solves the "hide content" problem that always generate affixing divs.
<script>
$(function() {
//caches a jQuery object containing the header element
var header = $(".affix");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$('#prevent').addClass("affixpatch");
} else {
$('#prevent').removeClass("affixpatch");
}
});
});
</script>
Hope it helps. If not, you may have some class that rewrite or impede the correct function of this affix.
I've tested this hundreds of times, usually to fix navbars.
SCROLL:
Using overflow to scroll content:
#keep_up{
max-height:400px;
width: auto;
overflow:auto;}
This will scroll the content inside #keep_up div (or use it in another one)
NOTE: you must declare a fixed max height for this div. Set max-width only if you need.
You can use %, em, rem... no need to be px for fix the max witdth. (to get a responsive effect, use responsive measurements)
If I understand your scenario correctly, the way to do this might be to use jQuery (or native JS, but you've tagged jQuery so I'm assuming that's in play).
There's a plugin that handles this kind of thing: http://leafo.net/sticky-kit/
I'd suggest you look at the plugin source code to see how it works - an event handler function on $(window).scroll() which then toggles classes on your #thread_menu to fix it in place. To keep your code lightweight, you probably don't need everything the plugin provides.
I have 2 divs on my webpage. first div is "#pattern" (red one), and second on is "#projets".(blue one)
when use scrolls for the first time, the window scrolls automaticaly to the the second div "#projets". I'm using jquery scroll-To plugin.
it works nice, even if when the users scroll with a large amount of scroll there could be on offset from the "#projets" div... If someone has an idea to correct this would be nice, but that's not my main trouble...
Now i'm trying to scroll back to the top of the page ("#pattern" div) as soon as "#pattern" div reappears when scrolling, the red one. so basically it should be as soon as the offset from the top of my screen of my div "#projets" is supperior to 1.
I've tried so many solutions without results, using flags, multiple conditions... it can be the same kind of thing as on this page, but user should be abble to scroll freely inside the page, not scrolling from hash to hash :
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
here is my html :
<div id="pattern"></div>
<div id="projets"></div>
my css :
#pattern {
height:300px;
width: 100%;
background-color:red
}
#projets {
height:800px;
width: 100%;
background-color:blue
}
and my jquery :
var flag=0 ;
$(window).on('scroll',function(){
var top_projets_position = $("#projets").offset().top - $(window).scrollTop();
if((flag==0) && $(window).scrollTop()>1){
$(window).scrollTo('#projets', 500);
flag=1;
}
if($(window).scrollTop()==0){
flag=0;
}
});
here is jsfiddle :
http://jsfiddle.net/jdf9q0sv/
hope someone can help me with this, I can't figure out what I'm doing wrong, maybe a wrong method ! thanks
It looks like you need to track 3 things:
The scroll direction occurs.
The area you are currently viewing.
If scroll animation is currently happening (we need to wait until it's done, or problems will occur).
http://jsfiddle.net/vx69t5Lt/
var prev_scroll = 0; // <-- to determine direction of scrolling
var current_view ="#pattern"; // <-- to determine what element we are viewing
var allowed = true; // <-- to prevent scrolling confusion during animation
var top_projets_position = $("#projets").offset().top + 1;
$(window).on('scroll',function(){
var current_scroll = $(window).scrollTop();
if(current_scroll < top_projets_position && current_view=="#projets" && current_scroll < prev_scroll){
scrollToTarget("#pattern");
}
if($(window).height() + current_scroll > top_projets_position && current_view=="#pattern" && current_scroll > prev_scroll){
scrollToTarget("#projets");
}
prev_scroll = current_scroll;
});
function scrollToTarget(selector){
if(allowed){
allowed = false;
$(window).scrollTo(selector, {
'duration':500,
'onAfter': function(){ allowed = true; current_view = selector;}
});
}
}
This is just a quick solution based on your original code. A better solution would be to do something more Object Oriented (OOP) and track values in an object. Perhaps take an array of elements on object creation, grab all the boundaries and use the boundaries in your scroll handler to determine when to scroll to the next div.
I have an info box (div) on my screen when the user opens my website. As soon as the user scrolls down and the box is not visible to the user any longer, I want the box to appear in the top right corner all the time while scrolling.
I know how to make it visible all the time (position: fixed). The problem is, how do I know when its not visible to the user ans more while scrolling? I can also use JavaScript, if that helps. Id prefer Prototype JS.
Thanks!
You need to make use of getBoundingClientRect(), which returns the element's positions relative to the viewport. If the top value is below 0, then it should be fixed.
HTML:
<div id="stick">
I should be fixed… sometimes
</div>
CSS:
#stick {
position: absolute;
top: 60px;
}
#stick.fixed {
position: fixed;
top: 0;
}
JS:
var stick = document.getElementById('stick');
window.onscroll = function(){
if(stick.getBoundingClientRect().top < 0){
stick.className = 'fixed';
} else if(stick.className.indexOf('fixed') < 0){
stick.className = '';
}
}
Here's a demo.
I'm having some trouble with a script which takes care of smooth scrolling as well as the active state on my main navigation. Plugin: http://tinyurl.com/amz4kob
Please note that the navigation bar is fixed so effectively has no height.
I've got two issues which I can't seem to overcome:
On page load the active state is applied to the contact link. If you scroll down 1px the active state is correctly applied to the home link.
I can't for the life of me figure out how to modify the script to pay attention to anchors within an element with a certain ID? i.e. I only want this script to apply the active state to the elements within the tag.
Any help would be greatly appreciated.
#rrfive
To make life easy here is the commented script:
$(document).ready(function() {
//Get Sections top position
function getTargetTop(elem){
//gets the id of the section header
//from the navigation's href e.g. ("#html")
var id = elem.attr("href");
//Height of the navigation
var offset = 0;
//Gets the distance from the top and subtracts the height of the nav.
return $(id).offset().top - offset;
}
//Smooth scroll when user click link that starts with #
$('a[href^="#"]').click(function(event) {
//gets the distance from the top of the section refenced in the href.
var target = getTargetTop($(this));
//scrolls to that section.
$('html, body').animate({scrollTop:target}, 500);
//prevent the browser from jumping down to section.
event.preventDefault();
});
//Pulling sections from main nav.
var sections = $('a[href^="#"]');
// Go through each section to see if it's at the top.
// if it is add an active class
function checkSectionSelected(scrolledTo){
//How close the top has to be to the section.
var threshold = 54;
var i;
for (i = 0; i < sections.length; i++) {
//get next nav item
var section = $(sections[i]);
//get the distance from top
var target = getTargetTop(section);
//Check if section is at the top of the page.
if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
sections.removeClass("active");
section.addClass("active");
}
};
}
//Check if page is already scrolled to a section.
checkSectionSelected($(window).scrollTop());
$(window).scroll(function(e){
checkSectionSelected($(window).scrollTop())
});
});
The plugin you're using checks the position of the <div class="section"></div> elements on the page, but because you've made them display:none;, all the sections are returning "0 pixels" from the top of the page, and since the "CONTACT" section is the last on the page, it's stopping there.
So, simply remove display:none; from .section in your CSS and it'll work fine.
.section {
/*display: none; <-- Comment this line out. */
height: 100%;
min-width: 990px;
}