We Keep Coding

Scrollbar not visible on iOS application, it appears when start scrolling. Any resolution for this?

Scrollbar in iOS when start sliding. Here we have a list and sublist. When we select a list we will get a corresponding list sub list. if this sub list overflows we are not able to see scrollbar it appears only when the user starts sliding on the sublist. is there any solution for this?

Well, the question is if you really want to change this default behaviour. Most iOS users are used to it.
However, this should do the job. Add it to the concerning element. It kind of "overwrites" the default behaviour.
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Overflow-y: Scroll not showing scrollbar in Chrome

I am generating a list of organisations of the left hand side of this page: http://www.ihhub.org/member-map/
This list is generated through appending <span> tags that are linked to the corresponding map.
My issue is - the scroll bar does not appear in CHROME but does appear in Firefox and Safari.
Any solutions?
UPDATE:
This issue appears to be isolated to MAC OS.
SOLUTION:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

According to CSS - Overflow: Scroll; - Always show vertical scroll bar?: OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.
CSS fix:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

I am seeing scroll bar well. If you are using Mac, you may want to make sure that scrollbars are always shown

Add this to your css
.list::-webkit-scrollbar {
-webkit-appearance: scrollbartrack-vertical;
}
or
.list::-webkit-scrollbar {
-webkit-appearance: scrollbarthumb-vertical;
}

I am using Windows 8 and Google Chrome version is 48.0.2564.97. And its working perfect. See in image highlighted area.

I am using Crome Version 48.0.2564.97 m
And it is working just fine..
Change it to overflow-y:auto in case if there are not enough items it will not show scroll.

Dynamically changing the height of a div based on content

So I am trying to make a website and have a popup window/box DIV that appears after clicking something. This popup DIV contains text/content, let's name it "Locations," as per my website's design. This Locations Popup DIV has a fixed height and width, and consequently, there is a vertical scroll bar I've created to scroll down and read the text. I would like to add more content to this popup but unfortunately, the text is being cutoff, and the scroll does not continue scrolling down. I have set a pretty large value for the margin/padding in the DIV to make this work for a very long page length, but it is very inefficient and poor programming.
How can I set the style of a div to the height of the total HTML document (which is the dyanamic, changing factor here) using JavaScript or CSS so I can do this intelligently and properly? I don't want to have to manually do this, as the longer the HTML Document becomes if I choose, I will always have to go back and either change the margin/padding value in CSS or do something to the JavaScript.
Below is the CSS for it:
/* Pop Up */
#popupAbout, #popupLocations, #popupContact, #popupBlog {
height: 600px;
width: 900px;
overflow: scroll;
background-color: rgba(0, 0, 0, 0.75);
border: 2px solid #cecece;
z-index: 15;
padding: 20px;
color: #FFF;
-webkit-box-shadow: 0px 0px 4px #000 inset;
-moz-box-shadow: 0px 0px 4px #000 inset;
box-shadow: 0px 0px 4px #000 inset;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: -50px;
visibility: hidden;
}
#popupAbout p, #popupLocations p, #popupContact p, #popupBlog p {
padding-left: 10px;
font-size: 18px;
line-height: 20px;
}
#popupAbout h1, #popupLocations h1, #popupContact h1, #popupBlog h1 {
text-align: left;
font-size: 30px;
letter-spacing: 1px;
border-bottom: 1px dotted #D3D3D3;
padding-bottom: 2px;
margin-bottom: 20px;
}
#popupAboutClose, #popupLocationsClose, #popupContactClose, #popupBlogClose {
right: 6px;
top: 6px;
position: absolute;
display: block;
}
And the appropriate JavaScript:
//Locations Page Pop Up
var popupLocationsStatus = 0;
function loadPopupLocations(){
if(popupLocationsStatus==0){
$("#popupLocations").fadeIn("slow");
popupLocationsStatus = 1;
}
}
function disablePopupLocations(){
if(popupLocationsStatus==1){
$("#popupLocations").fadeOut("slow");
popupLocationsStatus = 0;
}
}
function centerPopupLocations(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupLocationsHeight = $("#popupLocations").height();
var popupLocationsWidth = $("#popupLocations").width();
$("#popupLocations").css({
"position": "absolute",
"top": windowHeight/2-popupLocationsHeight/2,
"left": windowWidth/2-popupLocationsWidth/2
});
}
$(document).ready(function(){
$("#popupLocations").fadeOut();
popupLocationsStatus = 0;
$("#Locations").click(function(){
$("#popupLocations").css({
"visibility": "visible" });
disablePopupAbout();
disablePopupContact();
centerPopupLocations();
loadPopupLocations();
});
$("#popupLocationsClose").click(function(){
disablePopupLocations();
});
});
$(function()
{
$('#popupLocations').jScrollPane();
$('.popupLocations').jScrollPane(
{
showArrows: true,
horizontalGutter: 10
}
);
});
Here is the screenshot I've saved to give a better look at what I am talking about exactly (looking at the bottom of the popup window where the text is being cutoff):
My Website Screenshot
Everyone may view my work so far at: www.zaheeruddinsyed.com, to see exactly what I am talking about.

I believe you're looking for overflow: auto property. Take a look at this fiddle.
If you want to achieve the scrollbar like on sample image, you'll have to play around with css, here is tutorial on how to apply custom style to scrollbar.
Btw, if you want to make popup window, you might want to look at Fancybox, which, in my opinion, looks really good and most of work is already done! The only downside might be that you have to use it with jQuery, but it's already used on most of the webpages today.
Edit
When I've looked at page source, I found the problem in less than a minute. The content of your popup div isn't scrolling to the bottom, it stops for some reason.
This question is similar: Bottom content cutoff using overflow: auto; and jscrollpane
Try and put this code in JavaScript console (Ctrl + Shift + (J in Chrome, K in Firefox):
$("#popupLocations .jspPane").css("top","-800px")
It scrolls down to the bottom where it should. I know that this doesn't solve your problem just yet, but I think I've found a solution (I'm not sure because I can't test it myself). But if you look at that other question, the solution is using autoReinitialise:true. You can try it right away by running this in JavaScript console:
$('.popupLocations').jScrollPane({
showArrows: true,
horizontalGutter: 10,
autoReinitialise:true
}
);
Of course you'll have to put it in your file where you're initializing jScrollPane if you want it to work correctly every time you refresh the page.
And why do you have 2 $(document).ready(function()...) and 2 $(function()... (which is the same) definitions in your file? You should put all the code in one function, which will be called when the DOM is loaded. And for the sake of your users UX, try to reduce the images and files, also try to avoid using millions of different js plugins. It took me almost 11s (according to network profiler) to load for the first time and I have 100Mb/s uplink, I can't imagine someone with mobile internet. The webpage makes over 100 requests, a lot of them are 1x1px pngs. If all that is really necessary, you might want to look into compressing and bundling. It depends on what back-end framework you'll be using. I can say that ASP.NET MVC 4 provides very simple bundle manager but I'm sure that PHP or rails provide something similar.

How to make winJS app scrollable?

I am new to developing Windows 8 store apps, and I am in the process of creating my first one.
The app I am making is a note taking app. I only started the app yesterday, so it's still very basic, but I am having a problem with the scrolling. Here is a screen shot displaying the problem:
As you can see, when a certain number of notes are entered, they start overlapping the screen. What I need to do is make it so that when the notes a certain amount of pixels from the side of the display, it makes it scroll-able.
The divs that the notes are contained in are created as the note is written. The notes also auto change size depending on the amount of text entered.
Does anyone know how I would make it so that they scroll to the left and right instead of overlapping?
EDIT:
Here is the CSS:
body {
overflow-x:auto;
}
#textInput {
padding:20px;
float:left;
margin-top: 20px;
margin-left: 20px;
position:fixed;
}
#noteInput {
display:block;
border-width:5px;
border-color:purple;
box-shadow: 5px 5px 5px;
}
#titleInput {
border-width:5px;
border-color:purple;
width:285px;
box-shadow: 5px 5px 5px;
}
#noteSubmit {
width:295px;
}
#headers {
margin-left:100px;
margin-top:80px;
}
#hr {
margin-right: 40px;
margin-left: 40px;
}
#noteContainer {
float:left;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
margin-left:400px;
}
I haven't really bothered with the UI and design much yet, as I want to get all the background stuff like javascript, jquery, and azure working first.
I am only doing this app as a project for practice, for the 70-481 and 70-482 exams I have in two months, so its never going to be in the store or anything.
Thanks for your help
Cheers
Corey

I strongly recommend using a WinJS.UI.ListView control instead of writing the div elements yourself.
That way you'll not only get a look & feel to your application that's consistent with what the user expects from a Windows 8 Modern UI app but it will also take care of the scrolling and management of the DOM elements for you.
See this tutorial on how to create and style a ListView control.

I agree with #ma_il, but if you do want to add scrolling functionality to custom elements, you simple wrap those elements in a div and add some CSS properties to that div...
overflow-x: auto; /* to scroll horizontally /
overflow-y: auto; / to scroll vertically /
overflow: auto; / to scroll in both directions */
If the contents of that div are wider (or taller or both) than the screen then your screen will automatically become scrolling and touch will be supported.

Iframe Scrollbar css

How do I go about changing the css of an iframe scrollbar?
My problem with the current scrollbar in my iframe is the frame is not very wide and the scrollbar appears bulky in it and takes up too much space.
Using "scrolling="no" makes the scrollbar disappear but then the user cannot scroll.
By the way, My browser is Google Chrome.

This is the css to change the scrollbars in iframes in chrome
body {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
html {
overflow-y: auto;
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
display: none;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 30px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 16px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}

You can make it by getting scrollbar element in the frame, for example use jquery:
$("#iFrameId").contents().find("-webkit-scrollbar").css("width","5px")
But as others said - it's not a pretty solution.

You can't style a scrollbar (other then to turn it on and off) with CSS at all.
There is some proprietary stuff which lets you apply some styling, but this is supported only by IE and Opera.
Chrome provides no mechanism to do this.
As a commenter points out, WebKit now supports a different proprietary mechanism for styling scrollbars. I've no idea if the Chrome build of WebKit has this merged or enabled though.
You could look at replacing the scrollbar wholesale with JavaScript, and jScrollPane appears to do a reasonable job of not breaking the usual interaction rules.
That said, changing the appearance of user controls is something I'd try to avoid, and making something users need to aim a pointer at smaller sets off the flashing red light marked "Fitts's law".
A better solution would probably be to "Not cram so much information into so little space".