Develop Reference

How Would I Make a Custom Scrollbar Apply Only to a Specific DIV Tag

Basically, I'm trying to setup a thinner scroll-bar for a Tumblr blog I need to do. How do I specify which div the scrollbar should effect, because I don't want the custom scrollbar (for the div) to replace the web-browser's default scrollbar (the scrollbar on the far right of your screen)?
Any suggestion? I saw the css for the new scrollbar, but it's all webkit, and without HTML, how do I single out which DIV I want it to affect?

You can style your scroll bar for any specific div as this example. I applied the custom scrollbar to the div with class="scroll"
However custom scrollbar css does not work in firefox. However you can use some custom jquery plugins for that (they may not be as good as the css ones but they do the trick) and here's question about that.
Here's a great article about what different properties and styles you can apply to your custom scrollbar.
Here's a fiddle
.scroll{
background-color:green;
width:100px;
height:200px;
overflow:scroll;
}
.scroll::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar{
width: 10px;
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb{
background-color: #000000;
border: 2px solid #555555;
}
<div class="scroll">
sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>
</div>

How to create gutters between pages in a fluid-width carousel?

I'm creating a custom carousel for my current project. Here's a simplified version (only tested in Chrome/Mac):
http://codepen.io/troywarr/pen/LpQzbv
Note that when the carousel scrolls, you can see that each page (1-5) butts up flush against its neighbor on the left and right sides (looking like a single double-thick border). I'd like to add a 5px-wide gutter between the left and right borders of each page so that the borders don't touch.
However, since this is a fluid-width carousel, this has proven to be more difficult than expected.
I need to support IE9+, so I can't rely on calc() values or CSS animations; I'd probably need to do this via jQuery .animate(), but when the horizontal position to which I'm animating is basically 100% + 5px, I can't figure out how to express that in code.
How would I go about that? Is there, perhaps, another clever way to set up the carousel that allows me to use margins, padding, table cell padding, etc. to my benefit? Or, any other ideas? I've played around with different approaches for a couple of hours and I'm running out of ideas.
UPDATE:
Just to clarify what I mean by "gutter" - I'd like there to be a 5px empty gap between the left and right sides of each page in the carousel. Each page should retain its own borders, but there should be empty whitespace between them (only noticeable on scroll). Here's an example that uses calc() and CSS transitions to do exactly what I want (only tested in Chrome):
http://codepen.io/troywarr/pen/GpQYPj
I just need to find a comparable solution that is compatible with IE9+ (which calc() and CSS animations are not).

Applying border-box to everything will allow you to add paddings without breaking the layout.
// See an explanation here:
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
EDIT:
Sorry, you were already doing this. Here is my take on it:
.window {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
// Add these two rules
// The idea is to make a static frame, except for the right column
// which is the one being repainted.
border: 5px solid #666;
border-right: 0;
}
...
.slider li {
float: left;
width: 20%;
height: 100%;
background-color: #ccc;
display: table;
border-right: 5px solid #666; // <- Paint the right column only
}

Horizontally stretching a div background image

I know similar questions have been asked on this but I haven't managed to take any advice from those and get something working. A lot of advice on this topic is also geared towards making full-page background images, which isn't what i'm trying to do.
I am trying to get a background image to stretch horizontally to fit a specific div. The div itself containts child divs with content which should be displayed over the top of the background.
I have html like the following:
<div class="parent">
<div class="child">
<h3>My Header</h3>
<p>A link</p>
<p>Some content</p>
</div>
</div>
and css like this:
.parent{
width: 100%;
height: 145px;
float: left;
clear: both;
background: url(../img/parent-bg.png) top left no-repeat;
}
.child{
width: 960px;
height: 80px;
margin: 0 auto;
text-align: center;
}
parent-bg.png has a gradient fill left to right and is 60 x 142 pixels, which is why I want it to stretch to fit the parent div rather than just use repeat-x (the gradient looks odd when repeated).
The CSS3 background-size:cover property does exactly what I want, but of course doesn't work in IE for versions older than 9. I was curious to see if I could find a solution that works in IE 8 and 7.
I had a look at quick play with this jquery plugin but couldn't get it working: https://github.com/louisremi/jquery.backgroundSize.js#readme. I'm not too keen on burying a style property in javascript anyway, which it was only a 'quick play'.

another solution i found which works for the browsers i'm targeting (IE 7 +, last couple of versions of firefox and chrome) and more, involved using browser prefixes like so:
.parent{
width: 100%;
height: 145px;
float: left;
clear: both;
background: url(../img/parent-bg.png) top left no-repeat;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
}
.footer_inner{
width: 960px;
height: 80px;
margin: 0 auto;
text-align: center;
}
#rgthree's solution is probably more comprehensive in terms of browser coverage though, and involves an excellent working demo.

Where there's a will, there's a way. You should employ a progressive enhancement technique to get the best experience. And here's how you should build this (JS Fiddle Below):
First, have an absolutely positioned <img> under your content which can have a width & height set to 100% so it stretches across.
Next, for browsers that support Background Size hide the aforementioned <img> tag and set the background on .parent with a repeat-y and a background-size:100% auto;
Finally, for browsers that support CSS Gradients use them for the background-image of your .parent
Here's a JSFiddle: http://jsfiddle.net/rgthree/k5gk7/
The JS Fiddle above works across all relevant browsers (the gradient image was randomly taken from google images and is different colors than the CSS Gradients, but you get the picture). It uses Modernizr for capability testing.
If you are not aware of Modernizr, I can't recommend it more for projects like this. It is a library which uses javascript that test for modern browser capabilities and adds classnames to the <html> tag so you can progressively enhance your webpages.

How can I make a div horizontally slide in?

I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.

Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>

My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.

Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.

There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.

This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast

Moving label looks good in Firefox - not so good in other browsers How to change?

I wrote a small script to let a label move out of the way everytime the corresponding input field is needed.
Please check it out here: http://jsfiddle.net/5nZWJ/68/
The problem is: it works just as expected in Firefox, but all other browsers I tried (Chromium, Internet Explorer and others) don't keep the bottom-border justified (hard to explain but you will see it if you try it out).
What do I have to change to make this thing in all browsers look like in Firefox?
Thank you in advance!

I have solved your problem. It is now smooth in all browsers: http://jsfiddle.net/5nZWJ/70/
The key is having #formWrapper positioned absolutely from the bottom. This means when the height is increased it expands from the bottom up and doesn't need to recalculate the position from the top.
CSS:
#wrapper {
background-color: lightblue;
height: 110px;
width: 500px;
position:relative; /* Allows absolute figures to be predictable */
}
#formWrapper {
background-color: yellow;
border-bottom: 4px solid red;
bottom: 29px; /* Changed from top and new measurement added */
left: 120px;
height: 57px;
position: absolute;
z-index: 1;
width: 108px;
}
JavaScript:
I removed all lines of code referring to the position, as it no longer needs to be changed or recalculated.

I think this might be related how different browsers count border pixels
http://ejohn.org/blog/sub-pixel-problems-in-css/
(not actually the same problem, but you get some idea)
Instead of using border, I recommend you add a div wrapper around the element, with the background color set to border color and padding set to the border width.