stop the page scrolling when selecting/dragging text - javascript

I have a page where I do not want the user to be able to scroll. In order to prevent it, I just set the body to have a hidden overflow style. This is sufficient up until the point where a user tries to select some text and then drags to the bottom. The window then scrolls with the users dragging. How can I prevent this?

use position: fixed;. If you want the whole body to be non-scrollable:
body
{
position: fixed;
}
EDIT: after receiving the comment from user Sam, I've decided to go back and test this method once again. Now that I reconsider it and Sam's concern that it would mess with styles, I've come to the conclusion that the following would be a better solution:
html
{
position: fixed;
width: 100%;
height: 100%;
}
The prevents some sites (stackoverflow included) from ending up left aligned. It also uses the highest node available, which should have been done in the first place.

I tried Josephs answer but it can mess up a lot of the style on the website.
Another way would be to set the overflow of the website to hidden, this is also far from ideal but it didn't mess up any styling for me, hopefully this is helpful to someone.
body {
overflow-y: hidden;
}

It can be helpfull
html
{
overflow: hidden;
}

Related

Scroll not working on Android Chrome only

For some reason scroll doesn't work on Android Devices in Chrome browser only.
You can see the site at Peshkuiarte.com/mobile
I have tried:
$(document).ready(function() {
$('body').css('touch-action', 'auto');
});
I can't seem to figure it out ... Any help would be greatly appreciated
By scroll do you mean dragging the page with your finger on mobile?
You've set -webkit-user-drag: none; as an inline style for body, which might be the cause.
It's a Webkit-specific property:
CSS property: -webkit-user-drag
Description
Specifies that an entire element should be draggable instead of its contents.
Syntax
-webkit-user-drag: auto | element | none;
Values
auto The default dragging behavior is used.
element The entire element is draggable instead of its contents.
none The element cannot be dragged at all.
It's supported by Chrome 1-17 and Safari 3-5.1: http://www.browsersupport.net/CSS/-webkit-user-drag
we had same problem on Chrome 40.0... and we fixed with css only solution. Maybe it is not clean but works for us:
#media screen and (max-width: 1024px) {
html, body {
z-index: 0 !important;
overflow: scroll !important;
}
}
In my case, I have found touch-action: none added on body element.
Removing it enabled scrolling in android chrome.
Summary
The touch-action CSS property specifies whether, and in
what ways, a given region can be manipulated by the user (for
instance, by panning or zooming).
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Hope it helps people dealing with legacy code :)
e.preventDefault
function handlerSwipe(e){
e.preventDefault();
if(handlerTouch){
if(e.changedTouches[0].clientX>=110)
toggle.checked=true;
else toggle.checked=false;
}
return false;
}
window.addEventListener("touchmove", handlerSwipe, false);
This was the code i used for creating a swipeable navigation drawer because of this scrolling was not working .Just removing the e.preventDefault(); from the above code solved my problem
I am not really sure about the question, you say "scroll" but the accepted answer is talking about "drag". So I am going to give you what I think you are asking (not being able to scroll within an area on a mobile).
The simplest solution is a CSS one rather than a JS one. If you have an area on your page that you need to scroll, for example a code block on a tech blog you can set position relative on the area and have overflow-x set to auto. On the body you will need to have it not move when you touch the screen.
pre {
white-space: pre-wrap;
overflow-y: auto;
position: relative;
}
html,body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can see this solution working on my blog if you look at the code snippet sections and try and scroll on them via chrome mobile.(http://fullstack.life/mapping_arrays.html)
pointer-events
I came across another issue today and I'm going to leave this here for reference. If the element with the overflow-y: scroll; either sets its pointer-events: none; or inherits it, then it won't work either. On this layer, pointer events need to be re-enabled with:
pointer-events: auto;
Here is the fix for this issue that worked for me.
When you call the niceScroll function $("body").niceScroll(); in your javascript class, it appears to add an inline style of: overflow-y: visible on your body element (because it is inline, it overrides any previous overflow: hidden that you may have written in your css file.
Simply add overflow: hidden ! important in the css of your body element.
Also, make sure that your html element has style of
overflow: hidden;
touch-action: none;

Keep div on top when scrolling but keep margin

title is a little bit stupid. I have a page, probably full of errors. Either way, there's a Navi and a text box. Navi left, text box right.
Navi shall scroll up until it raches top of the window and then stay there. I got that to work so far. Copied and used codes I found, since I am a noob in Javascript.
Something happens to the text box though, just at the moment when the Navi changes from relative to fixed position. The text box ignores the Navi and just writes over it.
I had the Navi on fixed before I used the stick to top script and it all worked fine.
Here's the page:
http://test.pluskat.de/StuckWeit/
Ignore background image.
What to do or what to change? I am totally confused myself by now with all the positioning.
Please help. Remember I'm a noob in Javascript. I might be able to follow you, but please describe what is to be done, so others might be able to learn from it too.
Thank You. You guys are my last hope.
To fix this issue you could try adding below style at the end of the style.css file.
#wrapper
{
width: 1024px; /*Add this if you have fixed width layout else ignore*/
position: relative;
}
#textbox
{
position: absolute;
left: 220px;
height: auto;
}
This is how fixed position works: it takes the element out of the document flow. That's why your div occupies the whole width.
You could try to add a class (i.e. "nav-positioned") to a common container element instead of changeing the position property in your JS.
After you can style .nav-positioned .navi1 and .nav-positioned #Text

Fixed div as background on mobile devices

I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?
I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.
You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}

jQuery Mobile, transparent black overlay effect

I am currently using jQuery Mobile for a Phonegap application and I was wondering how could I add a black overlay that is semi transparent over only the content of a page. I don't want it to cover the top and bottom navbars. This would happen while I place an AJAX call to the server.
This effect is similar to the Twitter iOS app, when you are typing in the search bar.
$('#search').ajaxStart(function() {
// what do I put here?
});
Thank you for your help everyone! Much appreciated.
I agree with meagar (who should make his comment an answer so it can be accepted!) but would also add that if you don't want the overlay div to always be present (but just hidden), you can add it on the fly instead:
$('#search').ajaxStart(function() {
$('#content').wrap('<div class="overlay" />');
});
(#content represents whatever you happen to call your content wrapper and .overlay is the name I happened to choose for mine; easily changed!)
Whenever the Ajax complete callback fires (which will also be where the .hide() would be used in meagar's suggestion), just unwrap it again with this:
$('#content').unwrap();
The rest is CSS.
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
}
Keep in mind... this may not in fact be the right CSS approach, depending on what's already on your page. The basic idea is that you want it to span just your content area, but there are traps! Floats, absolute positioning of some things... all conspire to make your overlay not cover only the content area. If you run into that trouble, it's a separate SO question though. ;-)
JSFiddle: http://jsfiddle.net/Ff5wV/

Adding a text footer to the bottom of every printed page when a web page is printed

Is there a technique for adding a text footer the bottom of each page when it is printed? For example "Copyright My Company 2010" - I know there is probably a way to do this with a background image using CSS, but I would really like to use text for this portion so the client can edit it. Any ideas?
CSS doesn't have any notion of page media, so it's going to be impossible to guarantee where the page breaks are going to occur naturally.
EDIT As pointed out below, CSS 2.1 did introduce #page as a way to deal with paged media, but it was never implemented across the common browsers. So, as I wrote above, it doesn't exist, although that's not technically true.
You can set hard page breaks, e.g. by placing a <div class="page-break"> at the approximate locations. You can then style it with page-break-before:always to ensure that a break happens there.
There's also a page-break-after property; but then you don't know how far down the page the element starts. So, when you need to position it, the only thing you can use is position:absolute;bottom:0 which wouldn't fix it to the page media, but to the bottom of the whole document.
If you use page-break-before then you know it always appears at the top of the page. Then, you can use position:absolute without giving a top or bottom, which results in only taking it out of the document flow. Then, giving it a height of 720pt (10 inches) means you have a bottom edge that you can position content against.
Here's how I would tackle it:
/* hide the page footer on screen display */
.page-break { display: none; }
#media print {
/* make a 10-inch high block that sits on top of the page content */
.page-break {
page-break-before: always;
display: block;
position: absolute;
height: 720pt;
}
/* stick the contents of .page-break to the bottom of the 10 inch block */
.page-break .copyright {
position: absolute;
bottom: 0px;
}
}
However, I have no idea how well browsers actually support this in reality. I remember playing with page breaks a while back, and ended up giving up because I couldn't get them to work reliably enough. I suspect it's still either impossible or very hackish and unreliable.
The W3C Working Draft for CSS Paged Media Module Level 3 contains a method to print in the margins.
Try this code, but it might not be widely supported yet.
#page {
margin: 2cm; 2cm; 2cm; 2cm;
#bottom-center { content: "Copyright My Company 2010" }
#top-right { content: counter(page) }
}

Categories