CODEWITHSUNDEEP
javascriptjquerycss
Randy Thomas
Randy Thomas

Reputation: 343

Changing the radius of a border in css on the fly

I have a website builder I have created and I have a div that makes a button for people to use. I want them to be able to change the radius and it show in real time on the screen.

I have other stuff working like font-family, color, font-size and so on. They all work great. But I can't get the radius to change except to 0. It will change from something to 0. But it will not change to say 20px or 30px etc..

Here are the pieces of the code.

The Original CSS to start with:

 .button {
    border-radius: <?php echo $r['btnradius'];?>px;
    -moz-border-radius: <?php echo $r['btnradius'];?>px;
    -webkit-border-radius: <?php echo $r['btnradius'];?>px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0);
    -moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0);
    -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0);
    color: #<?php if($r['btntcolor']!='')echo $r['btntcolor'];else echo"FFFFFF";?>;
    border-style: solid;
    border-width: 2px;
    border-color: #000000;
    text-decoration: none;
    background: #<?php if($r['btncolor']!='')echo $r['btncolor'];else echo"00dd10";?>;
    display:inline-block;
    font-size: <?php if($r['btntsize']!='')echo $r['btntsize'];else echo"22";?>px;
    padding: 5px 15px 5px 15px;
    max-width: 95%;
 }

The selection of the radius size:

 <SELECT id="btnradius" name="btnradius" class="form-control"
 style="width:90px; font-size:10px;">
 <option value="<?php echo $r['btnradius']?>"> <?php echo $r['btnradius']? </option>
 <option value="0">0</option>
 <option value="10">10</option>
 <option value="20">20</option>
 <option value="30">30</option>
 <option value="40">40</option>
 <option value="50">50</option>
 <option value="60">60</option>
 </select>

The Code That it should change on the fly:

 <div class="button blank4 color_change tcolor_change tsize_change   
 btnradius" style="border-radius: <?php echo $r['btnradius'];?>px; -moz-
 border-radius: <?php echo $r['btnradius'];?>px; -webkit-border-radius: <?
 php echo $r['btnradius'];?>px;" id="btncolor"><?php echo $r['subtext4']?> 
 </div>

The script to change the above code on the fly:

$('#btnradius').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".btnradius").css("border-radius", valueSelected);
$(".btnradius").css("-moz-border-radius", valueSelected);
$(".btnradius").css("-webkit-border-radius", valueSelected);
 });

Upvotes: 2

Views: 155

Answers (2)

Brett Gregson
Brett Gregson

Reputation: 5913

You're missing the px suffix on your CSS property:

$(".btnradius").css("border-radius", valueSelected + "px");

Fiddle

Upvotes: 3

Nico
Nico

Reputation: 12683

I believe this issue is actually as you have stated.

But I can't get the radius to change except to 0. It will change from something to 0. But it will not change to say 20px or 30px etc..

Now your JavaScript says 

$('#btnradius').on('change', function(e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value; //<-- here is the problem
  $(".btnradius").css("border-radius", valueSelected);
});

Note the this.value well that will be the value from the option selected in your drop down box. Now all the values are missing the px from the end of the value.

This can be changed two ways.

  1. Change the value of the option tags to be #.px (ie 60px)
  2. Modify the valueSelected option to read var valueSelected = this.value + 'px';

The reason that 0 works is 0 does not need a unit specifier. However all other values will (ie px, em, %, etc)

Upvotes: 1

Related Questions