Develop Reference

CSS / Jquery How to auto-size containers and images

I am having trouble with getting a particular jQuery library (Windy Slider) to auto-size. I have uploaded the code into CodePen which can be found here http://codepen.io/zyoung0206/pen/rLmXbV
The problem I am having is that, when you click the wireframe & mockups blue circle button, a window should popup with a image slider inside it. These container codes are:
.windy-demo {
/*width: 1024px;*/
width: 60%;
margin: 40px auto;
color: #aaa;
}
.windy-demo ul.wi-container {
/* width: 1044px;
height: 788px;*/
width: 60%;
height: 80%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
which can be found on top of the CSS portion of the CodePen.
What I am accomplish is to make these containers 60% width of the screen, and if the image inside is too big (let's say, the container is 800px width but image is 1024px), then the image to resize to fit inside the container.
I have tried manually setting the width of the containers (which resulted in fixed pixels of window size) and then tried setting it as width: 60%, but it is not working out well for the images that are larger than the container.

I think img { width: 100%; height: auto; } will do it. I have just played around with your fiddle and as far as I can see, this should work.
I have just updated my answer, these are the first lines of CSS that worked for me, rebuilding your example locally:
.windy-demo {
width: 60%;
margin: 40px auto;
color: #aaa;
}
.windy-demo ul.wi-container {
padding: 0;
margin: 0;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.windy-demo ul.wi-container li {
display: block; /* Make list items to block in order to stretch 100% */
overflow-y: hidden; /* Hides the scroll bar y-axis */
}
.windy-demo ul.wi-container li img {
width: 100%; /* makes the image fit 100% of available space */
height: auto;
}
.windy-demo h4 {
padding: 0 10px;
line-height: 26px;
margin: 0;
}
.windy-demo ul.wi-container li {
padding: 0;
border: 10px solid #fff;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#slider ......

Rotate custom image acting as arrow inside dropdown

I followed a tutorial online that helped me to replace browsers' default dropdown selection arrow with my own image. This has worked fine and you can see the example here.
.headerDropdown {
border-radius: 6px;
border: 2px solid #d4d4d4;
height: 34px;
}
.headerDropdown select {
height: 34px;
line-height: 34px;
padding-left: 10px;
padding-right: 5px;
margin-right: 20px;
font-size: 16px;
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url("http://enyojs.com/enyo-2.5.1/lib/moonstone/images/caret-black-small-up-icon.png") right no-repeat;
width: 100%;
background-position: 98% 50%;
background-color: white;
text-indent: 0.01px;
text-overflow: "";
transition: 0.2s;
}
.headerDropdown select::-ms-expand {
display: none;
}
.headerDropdown select::-moz-focus-inner {
border: 0;
padding: 0;
}
.rotateCaret {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
It looks a bit stiff so I want to rotate my image when the dropdown is being opened. I found a lot of examples online dealing with the problem but they all solve it when it is actually a separate object (image, for instance, not a background attribute like in my case).
$("#mainnavigation").on("click", function() {
$(this).toggleClass("rotateCaret");
});
My question is - how can I rotate my dropdown selection image without affecting the entire dropdown? I need only the image next to the content, so to say.
Thanks in advance!
PS. Ignore my poor choice of image, I used it only as an example.

Add another element for the caret and rotate it separately. You can create a custom CSS animation and manipulate it as you wish.
https://jsfiddle.net/johnniebenson/xajzuxn4/

IE9 Double drop down issue

Customize image was added to the select box, every browser it was displaying fine except in IE9. I can see two arrows one is customized arrow image and another drop down Icon. How can i remove that Drop down Icon that come on IE9. Please help me if any one knows.
.dropdown {
height: 90px;
overflow: hidden;
background: url(../images\valdropdown.png) no-repeat right;
background-size: 10% 100%;
position:relative;
display:inline-block;
}
.dropdown select {
background: transparent;
-o-appearance:none;
-prefix-appearance: none;
-ms-box-sizing:content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
appearance:none
padding:5px;
font-size: 16px;
line-height: 1;
border: none;
border-radius: 0;
height: 50px;
z-index: -1;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}

It can be done something like this. Fiddle here
In example, a fixed width set on select and wrap a div with a lower width and overflow:hidden in order to mask/hide the dropdown. It has full support and essentially does hide the arrow in all browsers.
HTML
<div>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
CSS
div {
width: 80px;
overflow: hidden;
border: 1px solid black;
}
select {
width: 100px;
border: 0px;
}
OR with pure CSS
select::-ms-expand {
display: none;
}
OR with jQuery selectbox replacement.
It's a jQuery plugin.
jQuery selectbox plugin

Dual range slider without using jQuery

I want to create a dual range UI slider without using jQuery, most of the dual range sliders have dependency of jQuery and I can't use jQuery in my project. I tried overlapping 2 range inputs but I am stucked at CSS and functionality. Is there any way to make non jQuery dual range slider?
Ref-
http://refreshless.com/nouislider/

There doesn't seem to be any JS range slider around that's not made using jQuery. I'd suggest to use noUiSlider, which at least doesn't depend on jQuery UI.
PS: jQuery UI with slider only: 24kb, noUiSlider: 10kb. And it even has more/better functionality imo.

You could give fdSlider a try. It does not depend on any other library.

Here is an only HTLM/CSS dual slider with custom styling:
CSS:
.slider {
-webkit-appearance: none;
width: 90%;
height: 25px;
position: absolute;
background: #a4a4a4;
outline: none;
}
.slider input {
pointer-events: none;
position: absolute;
overflow: hidden;
left: 25%;
top: 15px;
width: 50%;
outline: none;
height: 18px;
margin: 0;
padding: 0;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 35px;
height: 35px;
background: #ea4550;
cursor: pointer;
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #ea4550;
cursor: pointer;
pointer-events: all;
position: relative;
z-index: 10;
-moz-appearance: none;
width: 9px;
}
.slider input::-moz-range-track {
position: relative;
z-index: -1;
border: 0;
}
.slider input:last-of-type::-moz-range-track {
-moz-appearance: none;
background: none transparent;
border: 0;
}
.slider input[type=range]::-moz-focus-outer {
border: 0;
}
HTML:
<input type="range" min="12" max="2175" value="12" class="slider" id="lower">
<input type="range" min="12" max="2175" value="2175" class="slider" id="higher">

You can code your own custom dual slider (html, css and the javascript) but I'm sure that using a jquery plugin is the best approach

Apply background-image for dropdown is not working on IE

Applied Background image for a Drop-down it works fine in FF and other modern browser but not in IE(all version)
here is my code:
div.timeslots select {
background: url("./images/imag1e.png") no-repeat scroll 0 -48px transparent;
border: 0 none;
color: #999999;
font-size: 12px;
height: 30px;
padding: 6px;
width: 242px;
}
can anyone help me to fix this issues

There is no fix. It is not supported.