IOS Scrollbar missing on Skrollr Parallax Implementation - javascript

I've built a demo site using Skrollr's fixed position parallax code:
http://dev-jfw-sample-parallax-2.gotpantheon.com/
And though scrolling works great on my iPhone, the vertical scrollbar has disappeared -- and I'd like how the scrollbar there to indicate there's additional content.
Now when I look at the Skrollr demo page -- which also uses fixed positioning -- on an iPhone I see a scrollbar:
http://prinzhorn.github.io/skrollr/
I'm doing this in Drupal so the content is now nested in multiple divs, is that's what's eliminating the scrollbars?

I got an answer from the developer:
There are no scrollbars added by skrollr. Add one yourself, you can easily animate the scrollbar using skrollr.
Take http://prinzhorn.github.io/skrollr/ as an example
<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>
#scrollbar {position:fixed; right:2px; height:50px; width:6px; background:#444; background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.6); z-index:300; border-radius:3px;}
.skrollr-desktop #scrollbar {display:none;}

Related

Styling scrollbar for iOS safari

I'm using ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-track to style a scrollbar in a DIV, and it's working perfectly.
But while I was testing it on iOS safari, I noticed that the scrolling isn't smooth (doesn't use "Momentum Scrolling"). I could fix it by using the following css on it:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
That made the scrolling smooth, but the styling is gone.
So my question: is there any way to keep the scrollbar smooth on iOS devices while the scrollbar styling is taking effect?

Dojo mobile show scroll bar

Is it possible to show the scroll bar in dojox mobile when the page is viewed from desktop browser?
This is my scrollablePane in which i want to show the scrollbar
<div id="resultViewScrollPane" data-dojo-type="dojox/mobile/ScrollablePane">
<div id="resultViewContentPane" data-dojo-type="dojox/mobile/ContentPane"></div>
</div>
To show the desktop browser scrollbar, you can override the overflow: hidden statement in dojox/mobile/themes/*/ScrollablePane.css in your own stylesheet:
.mblScrollablePane {
overflow: auto !important;
}
However, I don't think this is what you're looking for, as the client scrollbar seems to be pretty confused, because ScrollablePane is using webkit transforms to emulate scrolling in an inner div (see comments near top of dojox/mobile/scrollable.js). Try the above to see what I mean.
If you're just looking to keep dojox/mobile's custom scrollbar visible, you can override hideScrollBar() in scrollable.js, though it won't act like a normal desktop scrollbar (can't click and drag it, etc). I'd suggest not using a dojox/mobile ScrollablePane when the page is viewed on a desktop, and inserting a different widget such as a regular ContentPane.

IE9 Shrinks image in Nivo Slider

I'm using Nivo slider and Fancy box together and I'm getting this problem that I cannot seem to correct.
I've created a JSFiddle to try and replicate the problem I'm having.
.nivoSlider {
position:relative;
width:100%;
height:auto 265px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
display: none;
}
If you look very closely, you can see that the image are slightly shrinking and expanding, that the problem I'm having but you can see it, but its on a larger scale.
I have my suspicions that its something to do with the positioning in the CSS after looking here on SO but I've commented out the positioning tag in a few places and nothing has made a difference. Apparently IE9 doesn't count the auto CSS tag for height or width, this may be a problem, I have removed every auto tag, but that still hasn't made a difference.
Like I say it works fine across every browser including IE10 and IE11.
Also my version of jQuery is 2.1.1 could this be a problem

fixed positioned element flicker in IE only, how to solve?

Weird problem in IE11, the fixed background of the following project flickers when using mousewheel or cursor keys only. This is a bug, for sure.
website: http://gerbrandy.zitemedia.nl:88/
I use a script to resize the background proportional but this is not the problem because the resize event does not fire when scrolling, so it is not a problem of the script. It has something to do with a fixed positioned element. This script works okay for several years in all other browsers.
I have no idea how to fix this. Tried several things, but don't know how to disable javascript for example but should not be the case. I'm using IE11 on Windows 8.1.
Does somebody has some same experience with this and do you know how to work around this problem?
Three things can cause IE 11 flickering/choppy/delay for fixed position element while scrolling:
If you have an "overflow: auto;" on the parent container element, remove it.
Remove background-attachment:fixed; from the fixed position element.
Remove border-radius from the fixed position element (mobile IE only).
I was having the same issue, it seems to be a bug that occurs when there is too much going on inside the page for your computer specs to handle, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
#element {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 9994;
...other stuff and then
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
We can remove grey flicker on IE9, IE10, IE11, MEdge<=20 by setting overflow of html and body like
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
Apparently the "bug" only affects IE11 on Windows 8.1, or maybe 8.0 too. Removing background-attachmend:fixed worked for me. Apparently that rule was redundant, since the background image displays correctly in every browser without that rule. A second solution is to disable Smooth Scrolling in the IE settings, but that's not optimal since it's enabled in a default installation.
Flickering CSS:
#element_id{
position:fixed;
height:100%;
left:0;
bottom:0;
right:0;
background-image:url('path/to/jpg');
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}
...and new code (1 line removed):
#element_id{
position:fixed;
height:100%;
left:0;
bottom:0;
right:0;
background-image:url('path/to/jpg');
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
A hardware acceleration technique as follow caused mine.
outline: 1px solid transparent;
Remove it and it might be the cause.
Another reason for flickering can obviously be another fixed element inside the fixed element. At least that was the reason in my case. The false behaviour of Edge appears to be random.
This behaviour is due to a bug with Microsofts "Smooth Scroll" feature. Happens in IE10 and 11 on Win7 and up. I wouldn't recommend to alter your perfectly working code to fix yet another MS bug. Instead disable their "feature" by opening Internet Explorers Settings, go to Advanced and in the category "Browsing" it's the last option which you need to disable "Use smooth scrolling".
My Website's body was set to position: relative.
Removing that did the trick for my IE-exclusive flickering/jumping problem.

Pop up window using javascript and css

My app needs to generate a pop up window on button click. The app is specifically for mobile devices in android and IOS.
I have received the same using this code:
.popup
{
position:absolute; left:0; top:0; width:132;
border-style:solid;
border-width:4;
border-color:blue;
background-color:black;
padding:5px;
color:white;
font-family:Arial;
font-weight:bold;
font-size:10pt;
z-index:2;
visibility:hidden;
}
But what I need is for the background to be blurred and disabled while the pop up window is open. How do I achieve that?
The code being in JavaScript or CSS is fine with me.
<div id="popup">
<div style="position:absolute;width:100%;height:100%;z-index:9000;opacity:.5,background-color:#000;"></div>
<div style="position:absolute;width:400px;height:400px;left:30%;top:20%;z-index:9001;">MY POPUP WINDOW</div>
</div>
Consider using a jquery plugin such as jQuery Tool's overlay.
You just have to put a div above everthing with position absolute and its z-index to something high like 9999.
you can take a look here http://www.w3schools.com/cssref/pr_pos_z-index.asp or use some plugin as mentioned by kamchatka.
If you are looking to develop for IOS as you mentioned in one of your comments, you could check out JQuery Mobile.
Disabling the background or creating a modal lightbox is pretty simple and covered in the other comments. Just be sure you set focus to new lightbox window or users using a screen reader will be lost.
Creating a blur is challenging. Webkit has introduced a CSS blur effect into their nightlies
http://bit.ly/AuBZJO
I believe this is ultimately the solution. For now we can use RGBA to set the background div to be somewhat transparent as the other commenters noted.
Or you can tilt at windmills and hack together something using canvas to first do a screen capture
Can you take a "screenshot" of the page using Canvas?
Then blur the generated image
http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Categories