Alright, I'm launching this website (beta) in an hour but I've just noticed an ugly bug. I've added a new counter (1, 2, 3, etc..) was previously using <ol>.
Look at this picture the before:
everything was even, the vote up button, the text all the way down.
Now the live version after adding new counter: www.leapfm.com is un even. (when it becomes double digits)
Please use FireBug or Chrome Developer Tools, if you need any further code I will provide it ASAP.
original code:
.subtext1 {
font-family: Verdana;
font-size: 7pt;
color: #828282;
}
.song {
height: 42px;
}
.counter {
float: left;
margin-right: 2px;
font-size: 14px;
}
.subtext {
font-family: Verdana;
font-size: 7pt;
color: #828282;
}
.title {
font-family: Verdana;
font-size: 10.3pt;
color: #828282;
}
(I'm adding an answer because I can't preview my code with a comment and they're not giving me enough space.)
Yes, an ol (or table) would've worked. But a quick-fix solution would be to give the counter a fixed width (say 30px). The only problem with this would be if you started having a lot more digits.
If you wanted to fix this using JavaScript (which would work forever), use code like this (jQuery).
<script type="text/javascript">
var counters = $(".counter");
var counterLen = counters.length; //one based
//convert to zero based
var largestWidth = counters[counterLen - 1].offsetWidth + "px";
//WAY ONE: DO IT WITH A STYLESHEET (I recommend this)
var stylesheetDiv = $("<div>");
stylesheetDiv.html("<style type=\"text/css\">.counter{width: " + largestWidth + "}</style>");
$("head").append(stylesheetDiv);
//WAY TWO: DO IT WITH A JQUERY LOOP
counters.css({width: largestWidth});
</script>
I used way one before. I'm pretty sure I have to do the div with a stylesheet inside for IE8.
For .subtext1, give it a margin-left: 15px.
For .counter, give it a height of 100% or 22px.
And delete the multiple between .title and .subtext1.
jsFiddle links are at the bottom.
I have a Phonegap app that I have created with jQuery Mobile. The page transitions were really choppy and inconsistent in the native iOS app until I found this solution. It made my scrolling not so great, so I made a few changes per this follow-up article.
After the first solution and still after I implemented the second solution, the following code stopped working for me in my app:
$('html, body').animate({scrollTop: $('#specificID').offset().top}, 2500);
The above code scrolls the user down the page over 2.5 seconds to the DIV with the ID of specificID.
I have tried multiple things, but nothing seems to work:
$('#container').animate({scrollTop: $('#specificID').offset().top}, 2500);
$('html, body, #container').animate({scrollTop: $('#specificID').offset().top}, 2500);
$('.scrollable').animate({scrollTop: $('#specificID').offset().top}, 2500);
$(".scrollable").animate({ scrollTop: $("#specificID").scrollTop() }, 2500);
So, here is how I adjusted my jquery mobile code to fix the page transitions:
1. I wrapped [data-role="page"] DIV with container DIV
<body>
<div id="container">
<div data-role="page">
2. I added the following Javascript
$(document).one('mobileinit', function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
3. I added the following CSS
body {
margin: 0;
}
div#container {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
div[data-role="header"] {
position: absolute;
top: 0;
left: 0;
right: 0;
}
div[data-role="content"] {
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
}
.scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
/* iOS specific fix, don't use it on Android devices */
.scrollable > * {
-webkit-transform: translateZ(0px);
}
I setup three jsFiddles to show this:
Plain jQuery - scrollTop working: http://jsfiddle.net/pxJcD/1/
Transition Fix - scrollTop NOT working: http://jsfiddle.net/ytqke/3/
Transition Fix w/ Native Scrolling - scrollTop NOT working: http://jsfiddle.net/nrxMj/2/
The last jsFiddle is the solution that I am using and the one that I need to work. I provided the second one to show that the scrollTop functionality stopped before any of the native scrolling changes I made. Any thoughts on what I can do to be able to scroll down the page using javascript?
Iām using jQuery 1.8.2, jQuery Mobile 1.2.0, and Phonegap 2.2.0 (via Build).
Thank you for any help you can offer.
In your CSS, you have set your container's position property to Absolute.
Remove your div#container
It should work.
http://jsfiddle.net/nrxMj/16/
I'm working on a browser based app, currently I'm developing and styling for the ipad safari browser.
I'm looking for two things on the ipad: How can I disable vertical scrolling for pages that don't require it? & how can I disable the elastic bounce effect?
This answer is no longer applicable, unless you are developing for a very old iOS device... Please see other solutions
2011 answer: For a web/html app running inside iOS Safari you want something like
document.ontouchmove = function(event){
event.preventDefault();
}
For iOS 5 you may want to take the following into account: document.ontouchmove and scrolling on iOS 5
Update September 2014:
A more thorough approach can be found here: https://github.com/luster-io/prevent-overscroll. For that and a whole lot of useful webapp advice, see http://www.luster.io/blog/9-29-14-mobile-web-checklist.html
Update March 2016: That last link is no longer active - see https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html for the archived version instead. Thanks #falsarella for pointing that out.
You can also change the position of the body/html to fixed:
body,
html {
position: fixed;
}
To prevent scrolling on modern mobile browsers you need to add the passive: false. I had been pulling my hair out getting this to work until I found this solution. I have only found this mentioned in one other place on the internet.
function preventDefault(e){
e.preventDefault();
}
function disableScroll(){
document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
document.body.removeEventListener('touchmove', preventDefault);
}
You can use this jQuery code snippet to do this:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
This will block the vertical scrolling and also any bounce back effect occurring on your pages.
overflow: scroll;
-webkit-overflow-scrolling: touch;
On container you can set bounce effect inside element
Source: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
I know this is slightly off-piste but I've been using Swiffy to convert Flash into an interactive HTML5 game and came across the same scrolling issue but found no solutions that worked.
The problem I had was that the Swiffy stage was taking up the whole screen, so as soon as it had loaded, the document touchmove event was never triggered.
If I tried to add the same event to the Swiffy container, it was replaced as soon as the stage had loaded.
In the end I solved it (rather messily) by applying the touchmove event to every DIV within the stage. As these divs were also ever-changing, I needed to keep checking them.
This was my solution, which seems to work well. I hope it's helpful for anyone else trying to find the same solution as me.
var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
'touchmove',
function(e) {
e.preventDefault();
}
);}
Code to To remove ipad safari: disable scrolling, and bounce effect
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, { passive: false });
If you have canvas tag inside document, sometime it will affect the usability of object inside Canvas(example: movement of object); so add below code to fix it.
document.getElementById("canvasId").addEventListener("touchmove", function (e) {
e.stopPropagation();
}, { passive: false });
none of the solutions works for me. This is how I do it.
html,body {
position: fixed;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
Try this JS sollutuion:
var xStart, yStart = 0;
document.addEventListener('touchstart', function(e) {
xStart = e.touches[0].screenX;
yStart = e.touches[0].screenY;
});
document.addEventListener('touchmove', function(e) {
var xMovement = Math.abs(e.touches[0].screenX - xStart);
var yMovement = Math.abs(e.touches[0].screenY - yStart);
if((yMovement * 3) > xMovement) {
e.preventDefault();
}
});
Prevents default Safari scrolling and bounce gestures without detaching your touch event listeners.
Tested in iphone. Just use this css on target element container and it will change the scrolling behaviour, which stops when finger leaves the screen.
-webkit-overflow-scrolling: auto
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
improved answer #Ben Bos and commented by #Tim
This css will help prevent scrolling and performance issue with css re-render because position changed / little lagging without width and height
html,
body {
position: fixed;
width: 100%;
height: 100%
}
For those who are using MyScript the Web App and are struggling with the body scrolling/dragging (on iPad and Tablets) instead of actually writing:
<body touch-action="none" unresolved>
That fixed it for me.
You can use js for prevent scroll:
let body = document.body;
let hideScroll = function(e) {
e.preventDefault();
};
function toggleScroll (bool) {
if (bool === true) {
body.addEventListener("touchmove", hideScroll);
} else {
body.removeEventListener("touchmove", hideScroll);
}
}
And than just run/stop toggleScroll func when you opnen/close modal.
Like this toggleScroll(true) / toggleScroll(false)
(This is only for iOS, on Android not working)
Try this JS solution that toggles webkitOverflowScrolling style. The trick here is that this style is off, mobile Safari goes to ordinary scrolling and prevents over-bounce ā alas, it is not able to cancel ongoing drag. This complex solution also tracks onscroll as bounce over the top makes scrollTop negative that may be tracked. This solution was tested on iOS 12.1.1 and has single drawback: while accelerating the scroll single over-bounce still happens as resetting the style may not cancel it immediately.
function preventScrollVerticalBounceEffect(container) {
setTouchScroll(true) //!: enable before the first scroll attempt
container.addEventListener("touchstart", onTouchStart)
container.addEventListener("touchmove", onTouch, { passive: false })
container.addEventListener("touchend", onTouchEnd)
container.addEventListener("scroll", onScroll)
function isTouchScroll() {
return !!container.style.webkitOverflowScrolling
}
let prevScrollTop = 0, prevTouchY, opid = 0
function setTouchScroll(on) {
container.style.webkitOverflowScrolling = on ? "touch" : null
//Hint: auto-enabling after a small pause makes the start
// smoothly accelerated as required. After the pause the
// scroll position is settled, and there is no delta to
// make over-bounce by dragging the finger. But still,
// accelerated content makes short single over-bounce
// as acceleration may not be off instantly.
const xopid = ++opid
!on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)
if(!on && container.scrollTop < 16)
container.scrollTop = 0
prevScrollTop = container.scrollTop
}
function isBounceOverTop() {
const dY = container.scrollTop - prevScrollTop
return dY < 0 && container.scrollTop < 16
}
function isBounceOverBottom(touchY) {
const dY = touchY - prevTouchY
//Hint: trying to bounce over the bottom, the finger moves
// up the screen, thus Y becomes smaller. We prevent this.
return dY < 0 && container.scrollHeight - 16 <=
container.scrollTop + container.offsetHeight
}
function onTouchStart(e) {
prevTouchY = e.touches[0].pageY
}
function onTouch(e) {
const touchY = e.touches[0].pageY
if(isBounceOverBottom(touchY)) {
if(isTouchScroll())
setTouchScroll(false)
e.preventDefault()
}
prevTouchY = touchY
}
function onTouchEnd() {
prevTouchY = undefined
}
function onScroll() {
if(isTouchScroll() && isBounceOverTop()) {
setTouchScroll(false)
}
}
}
Consider the following architecture:
<body> <div id="root"></div> </body>
this css will work:
#root { position: fixed; height: 100%; overflow: auto; }
For those of you who don't want to get rid of the bouncing but just to know when it stops (for example to start some calculation of screen distances), you can do the following (container is the overflowing container element):
const isBouncing = this.container.scrollTop < 0 ||
this.container.scrollTop + this.container.offsetHeight >
this.container.scrollHeight
Disable safari bounce scrolling effect:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
position: fixed;
}
I had an issue with grabbing the html element in the background, when a menu with scroll was open and either at the top or at the bottom at the scroll height. I tried lots of things. Setting html position to fixed was the closest I got to lock the screen, but in the PWA it resulted in a white area at the bottom, that I couldn't fix.
Finally I've found a solution, that worked for me š:
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
height: calc(100vh - 1px)
overflow: hidden;
background-color: 'Whatever color you need to hide the 1px at the bottom'
}
Because it only seems to be an issue on iOS, I have targeted the devices from iPhone X to 12 Pro Max:
body {
margin: 0;
overflow: hidden;
background-color: '#TIP: You can use the color picker from the inspector';
#media only screen and (min-width: 375px) and (max-height: 926px) and (-webkit-device-pixel-ratio: 3) {
height: calc(100vh - 1px);
}
}
This is preventing any kind of scroll, touch or grab in the html or body elements, and scroll is still working in the menu or where else specified. Cheers.
body {
touch-action:none;
}
Using JQuery
// Disable
$("body").css({ "touch-action": "none" })
// Enable
$("body").css({ "touch-action": "auto" })
css overscroll-behavior is now supported in iOS 16. If you are targeting > iOS 16 devices, to prevent elastic bounce effect, add the following CSS to the html root
html {
overscroll-behavior: none;
}
Please note, the solution provided only disables elastic bounce effect when content is larger than viewport.
If you also want to completely disable scrolling in main page on iOS devices, use
html body {
overflow: hidden;
}
Similar to angry kiwi I got it to work using height rather than position:
html,body {
height: 100%;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
Solution tested, works on iOS 12.x
This is problem I was encountering :
<body> <!-- the whole body can be scroll vertically -->
<article>
<my_gallery> <!-- some picture gallery, can be scroll horizontally -->
</my_gallery>
</article>
</body>
While I scrolling my gallery, the body always scrolling itself (human swipe aren't really horizontal), that makes my gallery useless.
Here's what I did while my gallery start scrolling
var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari
And when my gallery end its scrolling...
var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}
Hope this helps~
I am still pretty "green" when it comes to web development and javascript/jQuery programming, so any help is appreciated. Here is what I want to do.
I want to do the same thing that a jQuery UI dialog box does where it puts a semi-transparent image over the entire page and disables clicking of any of the controls underneath.
I want to know how I might put some kind of spinner overlay on top to show that the website is working in the background. If I can use a animated GIF file that would be fine, but I'm not quite sure on the best approach to this.
Here is an example of the grayed-out effect with a dialog box:
jQuery UI Example. I want to know how to produce this effect without the dialog box on top. I do not have a good example of the spinner behavior.
All suggestions, website referrals, and code is appreciated.
EDIT: I do not mean a "spinner control". I will try to find an example of what I am thinking of by spinner.
EDIT: What I mean by "spinner" is a loading gif of some kind like the "Indicator Big" gif on this website: http://ajaxload.info/
I always like to use the jQuery BlockUI plugin:
http://malsup.com/jquery/block/
Check out the demos, you'll probably find something you're looking for there.
One way to do it is to have a div that is hidden by default and has properties to set the background colour to a grey (#666 for instance) and its transparency set to something like 0.8.
When you want to display use jQuery to get the size of the screen/browser window, set the size of your div and display it with a high zindex, so it displays on top. You can also give this div your spinner gif graphic (no repeat, and centered).
Code:
#json-overlay {
background-color: #333;
opacity: 0.8;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('ajax-loader.gif');
background-position: center;
background-repeat: no-repeat;
}
Only things to watch out for are select elements in IE6, as these will show through the div, so you can either use jQuery bgframe to solve that, or what I have done in the past is just hide select elements when displaying the div and showing them again when hiding your div
Why don't you just use "modal:true"?
$(function () {
$("#dialog").dialog($.extend({}, dialogOptions, {
autoOpen: false,
width: 500,
modal: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
}
}));
$("#profile_edit").click(function () {
$("#dialog").dialog("open");
});
$("#save_and_close").click(function () {
$("#dialog").dialog("close");
});
});
You can use something like this jquery code. Pass the id of the element that you want to stay on top of the page:
function startModal(id) {
$("body").prepend("<div id='PopupMask' style='position:fixed;width:100%;height:100%;z-index:10;background-color:gray;'></div>");
$("#PopupMask").css('opacity', 0.5);
$("#"+id).data('saveZindex', $("#"+id).css( "z-index"));
$("#"+id).data('savePosition', $("#"+id).css( "position"));
$("#"+id).css( "z-index" , 11 );
$("#"+id).css( "position" , "fixed" );
}
function stopModal(id) {
if ($("#PopupMask") == null) return;
$("#PopupMask").remove();
$("#"+id).css( "z-index" , $("#"+id).data('saveZindex') );
$("#"+id).css( "position" , $("#"+id).data('savePosition') );
}
you can use simple div and then ajaxstart and ajaxstop event
<div id="cover"></div>
$('#cover')
.hide()
.ajaxStart(function () {
$(this).fadeIn(100);
})
.ajaxStop(function () {
$(this).fadeOut(100);
});
I am using jquery-ui and at some point I use the show and hide functions quite heavily to animate changing images coming in and out.
From some reason, after a few tries all of a sudden the controls on my page stop responding to clicks. After a bit of poking arround using firebug I discovered my page is filled with div's of the class ui-effects-wrapper.
I have no idea why this happens or how to stop it. If I remove these divs I can no longer see the images I've been animating.
Any ideas?
ui-effects-wrapper was added by jquery UI effect plugin.
Here is some code taken from jquery.effects.core.js:
// Wraps the element around a wrapper that copies position properties
createWrapper: function(element) {
// if the element is already wrapped, return it
if (element.parent().is('.ui-effects-wrapper')) {
return element.parent();
}
// wrap the element
var props = {
width: element.outerWidth(true),
height: element.outerHeight(true),
'float': element.css('float')
},
wrapper = $('<div></div>')
.addClass('ui-effects-wrapper')
.css({
fontSize: '100%',
background: 'transparent',
border: 'none',
margin: 0,
padding: 0
});
element.wrap(wrapper);
wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element
// transfer positioning properties to the wrapper
if (element.css('position') == 'static') {
wrapper.css({ position: 'relative' });
element.css({ position: 'relative' });
} else {
$.extend(props, {
position: element.css('position'),
zIndex: element.css('z-index')
});
$.each(['top', 'left', 'bottom', 'right'], function(i, pos) {
props[pos] = element.css(pos);
if (isNaN(parseInt(props[pos], 10))) {
props[pos] = 'auto';
}
});
element.css({position: 'relative', top: 0, left: 0, right: 'auto', bottom: 'auto' });
}
return wrapper.css(props).show();
},
In one function, I had some code that toggled the visibility of two buttons and employed effects such as fadeTo and bounce. Occasionally there would be a wrapper remaining.
I tried adding this to my method, the idea being that it removes the wrappers 1.1 seconds after the effects have been queued up.
setTimeout('$(".ui-effects-wrapper").children().unwrap();', 1100);
This removes the stale wrappers, but there is the chance that it can also remove subsequent wrappers that are being used for effects.
I'd be very interested in seeing any improvements on this technique.