We Keep Coding

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.

Curved corners IE 7,8 Issue

i tried to set border radius to a td element, but it isn't work on IE7 and IE8
i tried all possible solutions but it still not working
here's my css classs :
padding: 5 5 5 5;
background-color: gray;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
zoom: 1;
filter: alpha(opacity=70);
opacity: 0.7;
behavior: url(../Bin/PIE.htc);
i tried to use PIE.js and it also not working.

IE7 and IE8 don't support CSS3 rounded corners. You will need to look to other IE specific solutions if you want to emulate this.
How to create rounded corners in ie 8 and < is one method using .htc controls for IE.
I need to add that no solution to your problem I have ever found is 100% they all have drawbacks and can never have the full functionality that CSS3 offers.

Web-kit css div shadow: is it possible to put it onto div with pure css or images are needed?

So what I need is simple: user presses something, user sees a shadow effect on new div (div centered window) on top of all page (with 1/4 size for example) alike
Is it possible with some pure web-kit css art? Or javascript+images combination is needed? And how to do such thing?

What you are looking for can be called a modal window. It can be done using CSS3 properties, but it is supported only in IE9+, Firefox 4, Chrome, and Opera.
For a cross-browser solution, you should look at javascript scripts which can render the same effect. There are many popular packages like Lightbox, ShadowBox, ThickBox, FaceBox, etc.
If you are using ASP.NET, there is the ModalPopupExtender in the AJAXToolkit, which will give you the effect.

You need two things a div for your dialog box with box-shadow and another div that lies behind your dialog box with an opacity of 50% or so. This can be done with some css in most every browser including ie. Read this article on how to get box-shadow work in all browser: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
so your html will look like this:
<div class="overlay"/>
<div class="dialogbox">someContent</div>
and your css:
.overlay {
position:absolute;
height: 100%;
width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
opacity: 0.5;
}
.dialogbox{
width: 200px;
height: 150px;
margin: auto;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

From this quote:
Web-kit css div shadow: is it possible
to put it onto div with pure css
and this one:
user sees a shadow effect on new div
It seems as though you're asking if it's possible to create the "shadow" effect around the inner div using CSS.
Chrome's settings page is using CSS3's box-shadow to do this:
-webkit-box-shadow: 0 5px 80px #505050;
box-shadow works in these browsers: http://caniuse.com/css-boxshadow
and the cross-browser CSS is:
-webkit-box-shadow: 0 5px 80px #505050;
-moz-box-shadow: 0 5px 80px #505050;
box-shadow: 0 5px 80px #505050;
http://jsfiddle.net/XHAbV/
If you need it to work in older versions of IE, you can use CSS3 PIE to emulate the box-shadow in those browsers.
If you're after the JavaScript side of how to do this (a modal window), the other answer covers it quite thoroughly.

iPhone-like jQuery Scrollbar

I'm trying to find a jQuery scrollbar that looks like the one of the iPhone: a simple black bar without the up or down buttons. I've found a few scripts but most tend to do so much more than I need. I basically have a div with a fixed height that is set on overflow:auto to which I would like to apply this scrollbar. Help would greatly be appreciated!

Matteo Spinelli has an iPhone-like scrollbar inside of his iScroll library. You should try looking into whether or not you can adopt it to your needs.

What are your browser requirements?
You should try to avoid javascript solutions since they will increase the complexity of your page. If a third-party scrollbar javascript library breaks, you will have to debug it yourself (been there, done that).
Chrome has full support for CSS3 scrollbars, something like this should make an iPhone like scrollbar
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
IE allows styling scrollbars with vendor specific tags, but its very limited. e.g.:
scrollbar-base-color: #663366;
scrollbar-face-color: #99CCCC;
scrollbar-track-color: #996699;
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;
Here is a jsFiddle with the styled scrollbars:
http://jsfiddle.net/APmLZ/3/