"CSS Size Changer"
Bootstrap 3.1.0 Snippet by escapedlion

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Support</title> <!-- Force IE to turn off past version compatibility mode and use current version mode --> <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"> <!-- Get the width of the users display--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Text encoded as UTF-8 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- icons --> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <!-- bootstrap --> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="default"> <!-- theme --> <link href="http://netdna.bootstrapcdn.com/bootswatch/3.1.0/bootstrap/bootstrap.min.css" rel="stylesheet" title="theme"> <style> body { font-family: sans-serif; font-size: 90%; color: #222; background-color: #fff; } h1 { font-weight: normal; } p { margin-top;100px; text-align: center; clear: both; width: 512px; margin: 0 auto 40px auto; background-size: auto; border: 1px solid #000000; border-radius: 4px; background-color: #eee; } code { font-size: 1.2em; padding: 1px 4px; background-color: #eee; } div.example { clear: both; height: 384px; width: 512px; margin: 0 auto 40px auto; background: url("http://immediatenet.com/t/fs?Size=1024x768&URL=http://theheartofdallasbowl.com/"); border: 5px solid #060; border-radius: 5px; } div.example.auto { background-size: auto;} div.example.resize {background-size: 512px;} div.example.resizewh {background-size: 512px; 384px} div.example.width {background-size: 100% auto;} div.example.height {background-size: auto 100%;} div.example.cover {background-size: cover;} div.example.contain {background-size: contain;} } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-default" role="navigation" style="margin-bottom:25px;"> <div class="container-fluid"> <h4 class="navbar-text">CSS3 Style Change</h4> <form class="navbar-form navbar-right" id="getID" role="search"> <div class="input-group" > <span class="input-group-btn btn-block"> <button class="btn btn-default btn-dash dropdown-toggle" type="button" data-toggle="dropdown" id="button1" width="120px;"> <span class="icon-label">Search By</span> <span class="caret"></span> </button> <ul class="dropdown-menu pull-left" role="menu" width="120px;"> <!-- <li> <a href="#" data-ID="#000000"><span class="icon-label"> black </span></a></li> <li> <a href="#" data-ID="#00FF00"><span class="icon-label"> Red </span></a> </li> <li> <a href="#" data-ID="#00FF00"><span class="icon-label"> green </span></a></li> <li> <a href="#" data-ID="#0000FF"><span class="icon-label"> blue </span></a></li> <li> <a href="#" data-ID="#00FFFF"><span class="icon-label"> cyan </span></a></li> <li> <a href="#" data-ID="#FF00FF"><span class="icon-label"> purple </span></a></li> <li> <a href="#" data-ID="#FFFF00"><span class="icon-label"> yellow </span></a></li> <li> <a href="#" data-ID="#C0C0C0"><span class="icon-label"> gray </span></a></li> --> <li><a href="#" data-ID="background-size: auto"><span class="icon-label">auto</span></a></li> <li><a href="#" data-ID="background-size: width: 580px"><span class="icon-label">resize</span></a></li> <li><a href="#" data-ID="background-size: height: 336px width:580px"><span class="icon-label">resizewh</span></a></li> <li><a href="#" data-ID="background-size: height: 100% width: auto"><span class="icon-label">width</span></a></li> <li><a href="#" data-ID="background-size: height: auto width: 100%"><span class="icon-label">height</span></a> </li> <li><a href="#" data-ID="background-size: cover"><span class="icon-label">cover</span></a> </li> <li><a href="#" data-ID="background-size: contain"><span class="icon-label">contain</span></a> </li> </ul> </span> </div> </form> </div> </nav> <br> <p class="info"> <strong class="css_code"> </strong><br> <code class="css_desc"> </code><br> </p> <div class="example"></div> </div> </div> </div> <script type="text/javascript"> $(function(){ $(".dropdown-menu li").click(function(){ var selectedText = $(this).find('a .icon-label').html(); var selectedID = $(this).find('a').attr('data-ID'); //console.log(selectedText); //console.log(selectedID); // console.log(selectedID+" "+selectedText); //working version - for multiple buttons // $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selectedText+ '<span class="caret"></span>'); $(".example").attr("class",'example '+selectedText); $(".css_code").html(selectedText); $(".css_desc").html(selectedID); }); }); </script> </body> </html>

Related: See More

Rotating CSS Card

Questions / Comments: