I have a jquery modal window which I show with the following code
function ViewProfile(Profiles) {
var url = 'Add.aspx?DashboardView=1&CloseOnUpdate=1&ProfileID=' + Profiles
$('body').addClass('stop-scrolling');
//calculate height
var winW = $(window).width() - 50;
var winH = $(window).height() - 50;
$.showModalDialog({
url: url,
height: winH,
width: winW,
position: { my: 'center', at: 'center', of: window },
scrollable: true,
closeClass: 'ui-icon-circle-close',
onClose: enableScroll
});
}
function enableScroll()
{
$('body').removeClass('stop-scrolling');
}
I execute the code with a span onclick even like this
<span onclick='ViewProfile(4)' class='btn btn-sm btn-info'>View</span>
The span is located inside of a grid (a custom grid from Obout), when a user scrolls all the way down a window and clicks on a span, it centers the modal window perfectly, but after about a second it jumps off place. At first I thought it was the window that was jumping off place but noticed the scroll position is now off, therefore the IE/Chrome window is the one that moved, not the modal window. Has anyone experienced this? Any ideas how to fix it?
Related
I have an offcanvas menu and a container with content. When I scroll down the website and open and close the menu I'm tryng to keep the scrolled position on exactly the position I was at. Right now when closing the menu it scrolls back to the top of the site.
That is caused by some css styling I gave to the container to prevent scrolling I guess.
When I console.log offsetY then it shows when closing the menu 0 as offset.
So what I'm I doing wrong?
So what I have is this:
mainHeader.on('click', '.nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
mainHeader.addClass('nav-open');
$('.push-content, .offcanvas').addClass('nav-open');
var offsetY = window.pageYOffset,
$win = $(window),
$body = $('.container-fluid') ; // the content container
// Block scrolling
$body.css({
'position': 'fixed',
'top': -offsetY + 'px'
});
$win.scrollTop(offsetY);
});
$('.mobile-trigger').on('click', function(){ // btn to close menu again
var offsetY = window.pageYOffset,
$win = $(window),
$body = $('.container-fluid') ;
$body.css({
'position': 'relative',
'top': -offsetY + 'px'
});
mainHeader.removeClass('nav-open');
$('.push-content, .offcanvas').removeClass('nav-open');
});
Any help greatly appreciated.
I find it easier to make a class, for instance .no-scroll, and make the overflow-y property hidden. This will keep the content from being scrolled either direction and when you close the menu you can just remove the class. Also, by doing this it should maintain your current scroll position.
On my website, I have a sidebar DIV on the left and a text DIV on the right. I wanted to make the sidebar follow the reader as he or she scrolls down so I DuckDuckGo'ed a bit and found this then modified it slightly to my needs:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
var $sidebar = $('#sidebar'),
sidebarOffset = $sidebar.offset(),
$window = $(window),
gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
footerHeight = $('#footer').outerHeight();
$window.scroll(function(){
distance = ($window.scrollTop()) - (sidebarOffset.top - gap);
if ( distance > 0 ) {
$sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
} else {
$sidebar.css({'top': '0', 'position': 'relative'});
}
})
});
});//]]>
</script>
And it works just like I want it to. However, my website uses Skeleton framework to handle responsive design. I've designed it so that when it goes down to mobile devices (horizontal then vertical), sidebar moves from being to the left of the text to being above it so that text DIV can take 100% width. As you can probably imagine, this script causes the sidebar to cover parts of text as you scroll down.
I am completely new to jQuery and I am doing my best through trial-and-error but I've given up. What I need help with is to make this script not execute if a certain DIV has a certain CSS value (i.e. #header-logo is display: none).
Ideally, the script should check for this when user resizes the browser, not on website load, in case user resizes the browser window from normal size to mobile size.
I imagine it should be enough to wrap it in some IF-ELSE statement but I am starting to pull the hair out of my head by now. And since I don't have too much hair anyway, I need help!
Thanks a lot in advance!
This function will execute on window resize and will check if #header-logo is visible.
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
// Your code
}
});
I think you need to check this on load to, because you don't know if the user will start with mobile view or not. You could do something like this:
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
// Your code
}
}).resize();
This will get executed on load and on resize.
EDIT: You will probably need to turn off the scroll function if #header-logo is not visible. So, instead of create the function inside the scroll event, you need to create it outside:
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
var $sidebar = $('#sidebar'),
sidebarOffset = $sidebar.offset(),
$window = $(window),
gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
footerHeight = $('#footer').outerHeight();
function myScroll() {
distance = ($window.scrollTop()) - (sidebarOffset.top - gap);
if ( distance > 0 ) {
$sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
} else {
$sidebar.css({'top': '0', 'position': 'relative'});
}
}
$window.on('scroll', myScroll);
} else {
$(window).off('scroll', myScroll);
}
});
Didn't test it, but you get the idea.
$("#headerLogo").css("display") will get you the value.
http://api.jquery.com/css/
I also see you only want this to happen on resize, so wrap it in jquery's resize() function:
https://api.jquery.com/resize/
I'm using this javascript/jQuery to open a dialog, however when I scroll down on the page and open another window after closing the first one, the window will open at my selection position, plus the position I scrolled down. When I try to move it around, it will keep jumping down, causing a very annoying result.
function showDialog(url) {
dialogFrame = $('<iframe style="width:100% !important;" frameborder="0" id="Dialog" src="' + url + '" />').dialog({
autoOpen: true,
height: 500,
width: 1000,
title: 'myWindow',
resizable: false,
modal: true,
position: {
my: "center",
at: "center",
of: window
}
});
}
How can I prevent this behavior? It's probably the position : { } but what should it be?
I had the same issues with a jQuery UI dialog when the body had the CSS property position:relative;. You might want to check if that is the case.
In my case I could not remove the position:relative; so I decided to override the top value and use a fixed positioning:
$(".dialogFrame").dialog({
// ...
open: function(event, ui) {
$(event.target).parent().css('position', 'fixed');
$(event.target).parent().css('top', '20px');
}
// ...
});
The script could be optimized by calculating the effective center of the screen.
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');
I want a circle div to lock in the header when the user scrolls past in.
I'm using the following code but it doesn't work
var circle$ = $('.circle'),
oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
window$ = $(window);
window$.scroll(function() {
if (window$.scrollTop() > oCircleBottom) {
}
}.bind(this));
I want to perform an action when the user scrolls pass the circle div; however, the code above does not seem to work. Is oCircleBottom computed correctly?
Enclose your code in $(document).ready function
$(document).ready(function () {
var circle$ = $('.circle'),
oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
window$ = $(window);
window$.scroll(function () {
if (window$.scrollTop() > oCircleBottom) {
$('.circle').css({
position: 'fixed',
top: '0',
left: '0'
});
}
else{
$('.circle').css({
position: 'static'});
}
}.bind(this));
});
You need to take window height into account because if the height of the page isnt enough to scroll down, your code doesnt work. Take a look at this example
However, if the increase page height, you code will work fine without subtracting window height. Take a look at this example
Hence, its better to subtract the window height. jsFiddle
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.circle').offset().top + $('.circle').innerHeight() - window.innerHeight) {
//Do you stuff
}
});