We Keep Coding

How to customize Input slider to make volume bar

I'm trying to make volume bar with input slider with styled-components.
I could find many useful information but cannot find about how to customize valued area.
For example, if I set volume as 80, default html input range color from 0 to 80 blue. I want to change this color but couldn't find any information about it. When I set -webkit-appearance: none; I could find it becomes transparent but I just want to change colors of it. (Not the background. I know I can do that with background).
edit) This is my code
const StyledTrackVolumeSlide = styled.input`
width: 100%;
// -webkit-appearance: none; I know this code will reset default css
background: #555;
height: 0.25em;
outline: none;
&::-webkit-slider-thumb {
-webkit-appearance: none;
}
I tried these properties, but could not find one with the blue valued background color. And also cannot find in chrome dev tools. Tried all the stuffs from here
&::-webkit-slider-thumb{
}
&:focus{
}
&::-ms-track{
}
Is there any possible way to customize input slider's valued color with plain CSS?

Check out this tool: https://toughengineer.github.io/demo/slider-styler
Among other things it allows to style progress indication.
To make the slider vertical you'll have to use CSS transform, though.
Here is an example:
for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
e.style.setProperty('--value', e.value);
e.style.setProperty('--min', e.min == '' ? '0' : e.min);
e.style.setProperty('--max', e.max == '' ? '100' : e.max);
e.addEventListener('input', () => e.style.setProperty('--value', e.value));
}
/*generated with Input range slider CSS style generator (version 20201223)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
height: 2.2em;
-webkit-appearance: none;
}
/*progress support*/
input[type=range].styled-slider.slider-progress {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
}
input[type=range].styled-slider:focus {
outline: none;
}
/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
width: 2em;
height: 2em;
border-radius: 1em;
background: #007cf8;
border: none;
box-shadow: 0 0 2px black;
margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - 2em * 0.5);
-webkit-appearance: none;
}
input[type=range].styled-slider::-webkit-slider-runnable-track {
height: 1em;
border-radius: 0.5em;
background: #efefef;
border: 1px solid #b2b2b2;
box-shadow: none;
}
input[type=range].styled-slider::-webkit-slider-thumb:hover {
background: #0061c3;
}
input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
background: #e5e5e5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-webkit-slider-thumb:active {
background: #2f98f9;
}
input[type=range].styled-slider:active::-webkit-slider-runnable-track {
background: #f5f5f5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef;
}
input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5;
}
input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5;
}
/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
width: 2em;
height: 2em;
border-radius: 1em;
background: #007cf8;
border: none;
box-shadow: 0 0 2px black;
}
input[type=range].styled-slider::-moz-range-track {
height: max(calc(1em - 1px - 1px),0px);
border-radius: 0.5em;
background: #efefef;
border: 1px solid #b2b2b2;
box-shadow: none;
}
input[type=range].styled-slider::-moz-range-thumb:hover {
background: #0061c3;
}
input[type=range].styled-slider:hover::-moz-range-track {
background: #e5e5e5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-moz-range-thumb:active {
background: #2f98f9;
}
input[type=range].styled-slider:active::-moz-range-track {
background: #f5f5f5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-moz-range-track {
background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef;
}
input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5;
}
input[type=range].styled-slider.slider-progress:active::-moz-range-track {
background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5;
}
/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-fill-lower {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-thumb {
width: 2em;
height: 2em;
border-radius: 1em;
background: #007cf8;
border: none;
box-shadow: 0 0 2px black;
margin-top: 0;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-track {
height: 1em;
border-radius: 0.5em;
background: #efefef;
border: 1px solid #b2b2b2;
box-shadow: none;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-thumb:hover {
background: #0061c3;
}
input[type=range].styled-slider:hover::-ms-track {
background: #e5e5e5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-ms-thumb:active {
background: #2f98f9;
}
input[type=range].styled-slider:active::-ms-track {
background: #f5f5f5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-ms-fill-lower {
height: max(calc(1em - 1px - 1px),0px);
border-radius: 0.5em 0 0 0.5em;
margin: -1px 0 -1px -1px;
background: #007cf8;
border: 1px solid #b2b2b2;
border-right-width: 0;
}
input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
background: #0061c3;
border-color: #9a9a9a;
}
input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
background: #2f98f9;
border-color: #c1c1c1;
}
<input type="range" class="styled-slider slider-progress" style="width: 25em;" />
<br />
<!--this div is needed to cut off all that's not needed, you have to specify width explicitly-->
<div style="display: inline-block; width: 2.2em; overflow: hidden;">
<!--this div catches the size of the child block-->
<div style="display: inline-block;">
<!--this div sizes itself to the width of the <input> and makes itself square, also rotates contents-->
<div style="display: inline-block; height: 0; padding: 0 0 100% 0; transform: rotate(-90deg);">
<!--style <input> as usual as if it is horizontal-->
<input type="range" class="styled-slider slider-progress" style="width: 10em;" />
</div>
</div>
</div>
more content to the right of the vertical slider

"default html input range color" doesn't exist, the element is rendered by your browser.
You must specify -webkit-appearance: none; (depends browser), for telling to the browser "don't design the input, I take care of that".
another tutorial
Sadly you must recreate input element, you can't just override color.

Jquery Sparkle effect not working

I am having a sparkle effect in jquery but the sparkle is working on background is there anyway i can get those sparkle on image and not on background.
Here is my code:
(function () {
var sparkle = new Sparkle();
sparkle.init('.summs');
})();
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
a{background:transparent}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
img{border:0}
svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}
b,strong,optgroup{font-weight:700}
pre,textarea{overflow:auto}
html {
height: 100%;
}
body {
color: #AAA;
background-color: #000;
line-height: 1.4;
margin: 50px;
}
h1 {
color: #FFF;
}
h2 {
padding: 10px 0;
border-bottom: 1px solid #444;
}
a {
color: inherit;
}
em {
font-family: monospace;
font-size: 16px;
font-style: normal;
background-color: #333;
border-radius: 3px;
padding: 3px 5px;
}
pre {
color: #FFF;
background-color: #444;
padding: 0 25px;
border-radius: 3px;
}
#wrapper {
width: 20%;
margin: auto;
border:red solid 1px
}
div.summs {
background: rgba(0, 0, 0, 0) url("https://custom.cvent.com/9BC2D0988F874B5C8C15E9D14B6E2F3B/pix/21abaeaeb5d94c73b6814e90cf55d240.jpg") no-repeat scroll center top;
height: 516px;
margin: 0 auto;
position: relative;
text-align: center;
top: -40px;
width: 1000px;
}
<script src="https://s3-us-west-1.amazonaws.com/creative-event/sparkle-effect/sparkle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summs">
<div class="onslide2">
<h1 class="bold"><strong>Sparkling Beauty Sparkling Service</strong></h1>
<br>
<br>
<h1 class="l2">GALA DINNER<br>
Sparkling Dior Ambassadress</h1>
<h1 class="l3">26<sup>th</sup> May 2016<br>
JW Marriott Hotel, Macau</h1>
<h1 class="l4">Dress Code: Rose Gold and Champagne </h1>
<h2>Remember to bring your sparkling outfit.<br>
There will be a prize for best-dressed.</h2>
</div>
</div>
Fiddle
I am sorry I don't know how make it a link here. Request you to please copy the url and paste.
need help

I created this myself. Would be nice if you gave me credits somewhere if you use this. But hey, you do what you want.
https://jsfiddle.net/virginieLGB/mL6uf3xm/5/
Only thing you need to change is
mySparkle.init( $( ".summs" ) , 150 );
I guess you'll want to keep the element here, but you can change '150' with any number of stars you want.
Have fun

fadeTo with Jquery not working in Chrome on Retina Macbook Pro

I'm trying to use jQuery to fade out elements in a scrolling div (not the main window) as they scroll out of view. I'm using the fadeTo function and checking for the position of the element as the user scrolls.
See this stackoverflow thread for what I'm basing my code on.
Everything seems to work fine on my non-retina monitor (using Chrome). The top element is fading out right at the top of the scrolling div like its supposed to.
However, when I perform the same actions using my macbook pro w/ retina display, I get weird behavior. For some of the elements (not all) in the scrolling div, The fadeTo animation only fades a part of the div (the bottom part). The top half (or more sometimes) is unchanged.
EDIT: WAS ABLE TO MAKE A DEMO (Try viewing demo on monitor vs. retina screen).
Any idea why this would happen? Why would this behave differently on my retina screen than on my monitor (both using same version of Chrome)?
I should also mention that all of this html is being injected into existing web pages, so that the scroll div sits on top of the page in the top right corner (fixed position). I'm building a chrome extension... My code:
$('#volleyThreadDiv' + objectId).scroll(function() {
console.log('userDidscroll...');
$('.volleyComment').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
$('.volleyReply').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
});
#volleyDiv {
position:fixed;
top: 20px;
right: 30px;
padding: 10px;
z-index: 999999999999999999999999999;
box-sizing: initial;
background: none;
border: none;
}
.volleyThreadDiv, #volleyActivityDiv {
position: static;
display: none;
max-height: 300px;
overflow-y: scroll;
background: none;
border: none;
}
.volleyThreadDiv::-webkit-scrollbar, #volleyActivityDiv::-webkit-scrollbar {
background-color: transparent;
}
.volleyComment, .volleyReply {
margin: 5px 5px 5px 5px;
padding: 5px;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
width: 155px;
background: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
.volleyCommentStatus, .volleyReplyStatus {
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #262626;
line-height: 1.5;
word-wrap: break-word;
}
.volleyCommentStatus, .volleyReplyStatus {
text-align: left;
}
.volleyCommentStatus > a:link, .volleyReplyStatus > a:link, .volleyCommentStatus > a:visited, .volleyReplyStatus > a:visited {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: #63c5e2 !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentStatus > a:hover, .volleyReplyStatus > a:hover {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: gray !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentAuthor, .volleyReplyAuthor, .volleyCommentDate, .volleyReplyDate {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-style: italic;
font-size: 10px;
font-weight: normal;
color: gray;
margin: 0px 5px 0px 0px;
line-height: 1.5;
}
.volleyReplyAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentDate, .volleyReplyDate {
float: right;
margin: 0px 5px 0px 7px;
}
.volleyCommentReply {
float: right;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
background: #63c5e2;
padding: 2px 10px 2px 10px;
margin: 0px 0px 100px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="volleyDiv" style="display: block;">
<div class="volleyThreadDiv" id="volleyThreadDivUAuCOyQuav" style="display: block;">
<div class="volleyComment" id="volleyCommentUAuCOyQuav">
<p class="volleyCommentDate">Feb 28th</p>
<p class="volleyCommentStatus">First comment!</p>
<p class="volleyCommentAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply0wblbTaP1R">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">First comment!</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplywBS0WFoUDH">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Testing two comments on a a page.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply5zw2ww9GBo">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Will it blend?</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplythWrBLrkjy">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Stay with me.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyCommentReply" id="volleyCommentReplyUAuCOyQuav">Reply</div>
</div>
</div>
</body>
</html>

The solution I found was to add position: relative in the css for .volleyCommentStatus, .volleyReplyStatus.
It seems it was inheriting position: static which I assume was causing the retina screen problem.

one page website with css transition to sweep content in from alternating sides

I am trying to create a one page website with 7 navigation links. See my fiddle below.
The first navigation link is located in the top left corner, for now its text called "home". The other 6 links are located underneath my "middle" div.
I am trying to achieve the following effect:
the home page is always displayed upon landing
the 6 links underneath the "middle" div should appear from either the left side of the screen or right side simply depending on this logic: 1st transition enter screen from right side, 2nd transition enter screen from left side, all subsequent transitions to alternate sides.
Each transition should push the existing content off the screen instead of overlapping it.
If the navigation links are explored in sequence from page 1 to page 6, each time a link is clicked the transition should alternate sides. In my current fiddle (although not working correctly) the pages 1 through 6 will all enter the screen from right hand side and if you navigate backwards from 6 to 1 they all enter the screen from the left. This is not what I am looking for. I want alternating sides regardless of which link is clicked except home link in top left.
when the home link is clicked when viewing another links content the transition should appear from top of the screen and push the existing content off the bottom of the screen. This transition should happen behind all the other divs ie. header and footer.
If anyone is able to help me I would really appreciate it as this has taken me quite some time and research.
Here is my html:
<div class="main">
<div class="main_header">
<div id="navigation">
<a id="home_link" href="index.php">Home</a>
<form action="url" method="post" class="formTop">
<input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" />
<input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" />
<input type="submit" class="submitButton" value="Log in" />
Sign Up
</form>
</div> <!--navigation-->
</div> <!--main_header-->
<div class="main_header_bottom"></div>
<div id="middle">
<div id="page1_content" class "content">Page 1 Content</div>
<div id="page2_content" class "content">Page 2 Content</div>
<div id="page3_content" class "content">Page 3 Content</div>
<div id="page4_content" class "content">Page 4 Content</div>
<div id="page5_content" class "content">Page 5 Content</div>
<div id="page6_content" class "content">Page 6 Content</div>
</div> <!--middle-->
<div class="sub_footer">
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
</div> <!--sub_footer-->
<div class="footer">
<p>| Contact |
<br />
<SCRIPT LANGUAGE="JavaScript">
today = new Date();
y0 = today.getFullYear();
</SCRIPT>Copyright © 2012-
<SCRIPT LANGUAGE="JavaScript">
document.write(y0);
</SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p>
</div> <!--footer-->
</div> <!--main-->
Here is my CSS
body {
background-color: #F5F5F5;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #CCC;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
color: #454545;
overflow-x: hidden;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
align:center;
margin: 0 0 0px 0;
line-height: 1.5em;
}
.main {
margin: 0;
overflow: hidden;
}
.main_header {
background-color: #6E6D71;
height: 75px;
}
.main_header_bottom {
height: 20px;
}
#navigation {
height: 75px;
margin: 0;
padding-left: 100px;
box-shadow: inset 0 -20px 20px -20px #000;
}
#home_link {
float: left;
background-image: url(http://wwwdrumtranscriptions/new/home.png);
background-repeat: no-repeat;
height: 36px;
margin-top: 20px;
width: 40px;
}
.formTop {
float: right;
margin-top: 15px;
margin-right: 75px;
height: 45px;
padding: 5px 8px 0px;
}
.login {
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0 0 4px ##333;
-webkit-box-shadow:inset 0 0 4px #333;
-moz-box-shadow:inset 0 0 4px #333;
color: #6E6D71;
font-size: 12px;
background-color: #CCC;
padding: 8px;
}
#middle {
background-color: blue;
padding-top: 5px;
height: 200px;
/* test only */
margin-left: 110%;
/* Start position: right outside */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
#middle.page1_inside {
margin-left: 0;
}
#middle.page2_inside {
margin-left: -100%;
}
#middle.page3_inside {
margin-left: -200%;
}
#middle.page4_inside {
margin-left: -300%;
}
#middle.page5_inside {
margin-left: -400%;
}
#middle.page6_inside {
margin-left: -500%;
}
#middle.transition {
/* Effects only */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.content {
width: 100%;
margin-right: 10px;
}
#page1_content {
margin-left: 0;
background-color: black;
color: yellow;
}
#page2_content {
margin-left: 100%;
background-color: yellow;
color: black;
}
#page3_content {
margin-left: 200%;
background-color: purple;
color: red;
}
#page4_content {
margin-left: 300%;
background-color: green;
color: orange;
}
#page5_content {
margin-left: 400%;
background-color: red;
color: purple;
}
#page6_content {
margin-left: 500%;
background-color: purple;
color: green;
}
.sub_footer {
text-align: center;
}
.links {
display: inline-block;
padding: 0px 15px 0px 15px;
}
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
Here is my js
$(document).on("click", ".links", function () {
$("#middle").removeClass(); /* Remove all classes */
$("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */
});
Here is my Fiddle
Thanks

I suggest using .animate() I had the same idea and when I tried it it worked perfectly also if you want to have the old ones pushed off use a <ul> inside a div with overflow: hidden; then on the li's use display: inline; and list-style-type: none;
Here is a working fiddle
http://jsfiddle.net/X4URc/3/

Here's an example of how to get this working page1-page6:
#middle.page2_inside #page2_content {
margin-left: 50%;
margin-top: -16px;
}
#middle.page3_inside #page3_content {
margin-left: 66.66%; // margin-left is [(pageNum-1)/pageNum]*100% = 100% * 2/3
margin-top: -64px;
}
#middle.page4_inside #page4_content {
    margin-left: 75%; // 100% * 3/4
margin-top: -112px;
}
#middle.page5_inside #page5_content {
margin-left: 80%; // 100% * 4/5
margin-top: -160px;
}
#middle.page6_inside #page6_content {
margin-left: 83.33%; // 100% * 5/6
margin-top: -208px;
}
Demo

Having a problem with selectors

The problem I'm having is not being able to select the divs inside the 'menuItem' class divs. I've tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don't know about that prevents me from doing so?
$('.menu')
.hover( function() {
$(this).toggleClass('highlighted');
})
.click(function() {
$(this).parent().children('.menuItem').children('#wtf').slideDown();
});
Also tried these for the click(), but none of them work..
$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div ID='wtf' class='test'>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
<div>
<div class='menu'>Products</div>
</div>
<div>
<div class='menu'>Contact</div>
</div>
</div>
body { font-size: 16px; }
.box {
background: blue;
border: 1px;
padding: 4 6 4 6;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
}
.box div {
float: left;
text-align:center;
}
.menu {
background: lightblue;
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-weight: bold;
font-family:'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid gray;
}
.highlighted {
background: lime;
color: navy;
}
.menuItem {
clear: left;
position: absolute;
margin-top: 30px;
}
.menuItem div {
display: none;
background: lightblue;
opacity: .7;
filter: alpha(opacity=.7);
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-size: 10px;
font-family: 'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid white;
clear: left;
}

Have you tried?
$(this+' > .menuItem div')

I applied a background color to your style and your jQuery selector wasn't selecting properly. I tried this and it changed the background color, but I don't have CSS in place for the visual of the slideDown() to work - you'll have to write your CSS up correctly.
$(this).siblings().find("#wtf").css("background-color","#cccccc").slideDown();