Bootstrap Snippet Select image using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<input type="text" value="" id="trace"/>
            <div id="image-dropdown" >
            <input checked="checked" type="radio" id="line1" name="line-style" value="1"  /><label for="line1"></label>
            <input type="radio" id="line2" name="line-style" value="2"  /><label for="line2"></label>
            <input type="radio" id="line3" name="line-style" value="3"  /><label for="line3"></label>
            <input type="radio" id="line4" name="line-style" value="4"  /><label for="line4"></label>
            <input type="radio" id="line5" name="line-style" value="5"  /><label for="line5"></label>
            <input type="radio" id="line6" name="line-style" value="6"  /><label for="line6"></label>
            <input type="radio" id="line7" name="line-style" value="7"  /><label for="line7"></label>
            </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*o.v.*/
#image-dropdown {
    /*style the "box" in its minimzed state*/
    border:1px solid black; width:300px; height:50px; overflow:hidden;
    /*animate collapsing the dropdown from open to closed state (v. fast)*/
    -moz-transition: height 0.1s; 
    -webkit-transition: height 0.1s; 
    -ms-transition: height 0.1s;  
    -o-transition: height 0.1s;  
    transition: height 0.1s;
}
#image-dropdown:hover {
    /*when expanded, the dropdown will get native means of scrolling*/
    height:200px; overflow-y:scroll;
    /*nice and smooth expand - speed this up at your preference or remove animation altogether*/
    -moz-transition: height 0.5s; 
    -webkit-transition: height 0.5s; 
    -ms-transition: height 0.5s;  
    -o-transition: height 0.5s;  
    transition: height 0.5s;
}
#image-dropdown input {
    /*hide the nasty default radio buttons. like, completely!*/
    position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown label {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:2px; height:100%; opacity:0.2;
    border-bottom-style: solid;
    border-color: rgba(153, 153, 153, 0.78);
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://clipartix.com/wp-content/uploads/2016/04/Red-banner-clipart-picture.png") 50% 50% no-repeat;
    background-size: contain;
    background-position: center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
/*the only js is to continuously checking the value of the dropdown. for posterity*/
var i = setInterval(function(){$("#trace").val($("input[name=line-style]:checked").val());},100);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Select image"
Bootstrap 3.3.0 Snippet by XhamirM

Related: See More

Questions / Comments:

"Select image" Bootstrap 3.3.0 Snippet by XhamirM

Related: See More

Questions / Comments:

"Select image"
Bootstrap 3.3.0 Snippet by XhamirM