Google Plus & Javascript - Disable scrolling when choosing circles? - javascript

I've created a lot of Circles. And so when I hover over the "Add to Circles" google plus button, a small div pops up that allows me to vertically scroll through my circles.
The really cool part is that it disable body scrolling. So when I scroll to the bottom of the circles viewer, the body doesn't budge.
How is this possible with javascript?
(I've found a hacky way to do it:
$('body').css({'overflow':'hidden'});
$(document).bind('scroll',function () {
window.scrollTo(0,0);
});
But Google does it better. The body scroll bar stays in place (it doesn't vanish like my code makes it), and the body is still unscrollable...)
It's important to note (and so far overlooked) that the scroll bar on the body page has to stay in place. It can't vanish like overflow:hidden makes it, because that jerks all of the page content to the right. Google solves this problem somehow...
SCREENSHOT:

Try using :
$(document).bind('scroll',function (e) {
e.preventDefault();
e.stopPropagation();
return false;
});

Related

How do I stop the page from expanding when animating an element so it slides in from off screen?

I'm making my first website and I've run into a problem I can't easily fix as I'm not sure how to phrase a google search for it. I need to slide images into the page without making the scroll bar appear or, rather, without the page expanding in width to encompass the newly appeared image while it slides in.
Here's the actual test version of the page:
http://test.dingac.com/accommodation.html
The part I need help with is the sliding of the pictures when you click on the arrows next to the blueprint for each apartment in the accommodation tab.
If you want to look at the code, the relevant code is in the JqueryAnimate.js file but keep in mind, the comments aren't in English, I'm new to this so the code is a bit weird and the CSS isn't fine tuned yet. I've posted the relevant code snippet further down. My current issue is the slide animation. The way I did it right now is for all the images to be there from the start but all but one have display:none. When you click the arrow to the right it fades out and slides out the current picture (using Jquery) and turns on the display of the next picture (which is positioned relatively at left: 2000px) while animating it to left:0px.
In the moment the new image appears, the page sees that a new element is on the page and not everything is being displayed so it expands the width of the page to encompass the off-screen picture. This is only an annoyance on desktop as it only makes the scroll bar appear, but on mobile it makes the whole page zoom out until the new picture is on screen and then zoom back in as the picture slides in.
$("#buttonRight"+apInd).click(function(){
if(status[apInd].circleIndex!=status[apInd].numApPic){
status[apInd].Picture.fadeOut({duration: 1000, queue: false}).animate({left: '-2000px'},1000);
status[apInd].NextPicture.fadeIn({duration: 1000, queue:false}).animate({left: '0px'},1000);
status[apInd].PreviousPicture=status[apInd].Picture;
status[apInd].Picture=status[apInd].NextPicture;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circle");
status[apInd].circleIndex++;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circleSelected");
status[apInd].NextPicture=$("#apPicture"+apInd+"-"+(status[apInd].circleIndex+1));
}
if(status[apInd].circleIndex===status[apInd].numApPic) //hiding/showing arrows when at the edge of the selection
{
status[apInd].arrowDisplay="left";
$("#buttonRight"+apInd).css("opacity",0).css("cursor","default");
}
else
{
if(status[apInd].arrowDisplay!=="both")
{
status[apInd].arrowDisplay="both";
$("#buttonRight"+apInd).css("opacity",1).css("cursor","pointer");
$("#buttonLeft"+apInd).css("opacity",1).css("cursor","pointer");
}
}
});
What I need is for the page width to stay constant or, more specifically, that there be no zooming in mobile and no horizontal scroll bar on desktop.
Use overflow: hidden (or, for more fine grained control, overflow-x: hidden) in your CSS.
For example, if this is the HTML of your page:
<body>
<div id="page-wrap">
Contents
</div>
</body>
You can use overflow like so:
#page-wrap {
overflow-x: hidden; // hides horizontal overflowing elements
overflow-y: auto; // shows scrollbars if the content vertically overflows
}
Link to MDN
Try to add an overflow:hidden on the span with id="apImgBox"

Greyed scrollbar toggles on mouse event

A greyed out scrollbar appears on my webpage whenever there is a mouse event. There are several buttons on the page and clicking them, or mouse-over/out toggles the scrollbar to appear or disappear. I don't know why. When dragging a draggable area, it toggles back and forth very fast on mouse-move. I don't see any css changes when I use the inspect element tools on Chrome.
Has anyone had this problem before or know why this may be happening?
edit:
scrollbar:
If you know that the content will never exceed the size of the container, then you can use css to get rid of the scrollbar entirely
#yourContainerID {
overflow-y: hidden;
}
If you still want there to be a scrollbar when necessary, you could programatically insert one.
var yourContainer = document.getElementById('yourContainerID');
if (yourContainer.offsetHeight < yourContainer.scrollHeight) {
$('#yourContainerID').css('overflow-y', 'scroll');
} else {
$('#yourContainerID').css('overflow-y', 'hidden');
}
Solution was changing 15vw padding to %. I'm still not sure why it fixed it though.
Edit:
Same issue again. I solved it a different way. I think it is to do with the body height not actually taking up the height of its contents, due to the contents perhaps being positioned relatively. I will set up a bare-bones example eventually so I can give a definitive answer to anyone else who experiences this issue.

Click function making page scroll in odd way (not to top of page)

First time asker, long time lurker.
I'm doing a fadein/out toggle that displays 1 of 2 charts depending on which button you click.
That bit works just fine, but I'm getting a weird page-jump glitch. Now, it's not the usual jump-to-the-top behaviour. I have that part covered in the code, and it doesn't do that.
Every time I click on one of the toggles, the page scrolls downward to the point where the chart area is at the bottom of the window.
But it gets weirder. If I make the browser window very short or very narrow (it's a responsive site), it stops doing this glitch. It's also not happening on iPhone or iPad at all, even though if I set the browser width to the same width as it would be on an iPad, the desktop browser still does the jumping.
There are no elements that are added/removed based on the viewport width in the area that's jumping around, and there are no anchor IDs that would be accidentally used as jump points.
Unfortunately I can't show the actual page to you, but I can show the script and a bit of the HTML.
The code for both toggles is the same, just with the IDs switched around.
The script:
$('#left-toggle > a').click(function(c)
{
c.preventDefault();
c.stopPropagation();
$('#right-toggle').removeClass('toggle-active');
$('#left-toggle').addClass('toggle-active');
$(pricing_subscriptionID).fadeOut('fast', function(){
$(pricing_singleID).fadeIn('fast', function(){
});
});
});
The HTML for the toggles:
<div id="chart-toggle">
<div id="left-toggle" class="toggle-active">Single Pricing</div>
<div id="right-toggle">Subscription Pricing</div>
</div>
"toggle-active" is just for styling.
Any ideas?
It seems to be almost wanting to centre the toggles on the page, but it's not quite putting them in the middle either.
JSFiddle: http://jsfiddle.net/TmrLw/
It's because of your link to #. Here are some ways you can fix this:
1. Replace "#" with something else
Instead of
Subscription Pricing
Try this:
Subscription Pricing
This will give you the cursor pointer you're looking for and avoid the page jump.
2. Create a class with the pointer effect
If you use this CSS rule:
.pointer {
cursor: pointer;
}
Then you can wrap your text with this class instead:
<div class="pointer">Subscription Pricing</div>
3. Remove the default effect of "#"
This Javascript will get rid of its default effect:
$('a[href="#"]').click(function(e)
{
// Cancel the default action
e.preventDefault();
});
Hope this helps
Probably its because the link's href is # which links to the top of the document.
try to remove the href attribute

How can I keep iPhone Safari keyboard from scrolling a fixed navbar up?

I'm building an app with PhoneGap and I have a screen that has a fixed navigation bar, a scrollable area below, and a text field in that area (think facebook message screen). When you tap on the text field, keyboard pops up and although nav bar is fixed, it scrolls up and out of the screen. I want it to stay fixed and scrollable area should get narrower.
Is there a way to do this?
Here's a diagram (sorry for poor quality):
diagram
set frames here:
- (void)textFieldDidBeginEditing:(UITextField *)textField
{
// change base view frame
}
- (void)textFieldDidEndEditing:(UITextField *)textField
{
// reset base view frame
}
Rather than using C, just use javascript and window.scrollTo for this (on input focus)
$('input').live('focus', function(e) {
e.preventDefault(); e.stopPropagation();
window.scrollTo(0,0); //no scroll > stays fixed!
});
If you don't want to set a static value for the Y scroll position, feel free to use this short plugin I've written that automatically aligns the keyboard underneath the input field (unless there's no need to scroll). Just call this on focus as shown above:
setKeyboardPos(e.target.id);

HTML fixed large element

I've been racking my brain and my Google Fu for a few hours now trying to find a solution to this one, but can't seem to come up with anything satisfactory.
I want to affix an element to the side of the page for some search criteria, much like Bootstrap's "Affix" plugin. (Demo Here). The problem is that it's going to be very common that the element is much taller than the window. So there will be scrolling of the element itself involved.
Usually this wouldn't be a problem because as the user hits the top + bottom of the document they would be able to see the top and bottom of the fixed element. (See bootstrap example while shrinking you're window very short). But we're planning on using infinite scroll on our results set, meaning there won't be a bottom to hit, and therefore they'll never see the bottom of the fixed element. As the user scrolls down, it needs to be bottom fixed so the user sees all criteria, then on the way up, it needs to be top fixed.
So I started off by modifying Bootstrap's plugin (I'm not actually using bootstrap). Now scrolling down the page is easy, using a fixed point on the bottom of the element means that it's not affixed until you reach the bottom of it.
But scrolling back up again is where I'm hitting issues.
Am I missing something really obvious and easy here (it is Monday morning after all), or does anyone know of a plugin / patch to bootstraps affix.
TL;DR
Need to affix a very tall element to the page and allow it to scroll. So it's fixed on the way down, then as they scroll back up, the element isn't fixed so it's also being scrolled up. Once the top of the element is hit, fix it there.
Is this what you Want to do DEMO
Simple jQuery function that will help.
$(function()
{
affix= $(".affix-top");
var affixHeight = parseInt(affix.height());
var affixTop = parseInt(affix.offset().top);
var affixBottom = parseInt(affixTop + affixHeight);
// Bind a scroll event for the whole page
$(document).bind("scroll", function(e)
{
// Calculate how far down the user has scrolled
var screenBottom = parseInt($(window).height() +$(window).scrollTop() );
// Test if the div has been revealed
if(screenBottom > affixBottom)
{
affix.attr("style","");
affix.css({"bottom":"0px","position":"fixed"});
}
else
{
affix.attr("style","");
affix.css({"top":"0px","position":"relative"});
}
});
});

Categories