CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Jothi Kannan
Jothi Kannan

Reputation: 3358

Colorpicker is not working inside the bootstrap popover

am having a bootstrap popover to with 2 tabs inside, on the First tab user can upload the images, on second tab user can pick colors with the colorpicker , the popover is working, and tabs inside the popover are working, but the colorpicker is not working on Document Ready,

Jquery

$('.specular_color').colpick({
flat:true,
layout:'hex',
submit:0,
onChange:function(hsb,hex,rgb,el,bySetColor) 
{   
$('.specular_color').css('border-color','#'+hex);
specularmap_color='#'+hex;
specularmap_texture="";
$(".specular_img").css("display","none");
$( ".specular_img" ).parent().css("background-color",'#'+hex);
specular_color=hex;
meshphong.specular=increase_brightness(specular_color, 0);
load_meshphong();
}
});
$('.emission_color').colpick({
flat:true,
layout:'hex',
submit:0,
onChange:function(hsb,hex,rgb,el,bySetColor) 
{   
$('.emission_color').css('border-color','#'+hex);
specularmap_color='#'+hex;
specularmap_texture="";
$(".specular_img").css("display","none");
$( ".specular_img" ).parent().css("background-color",'#'+hex);
emission_color=hex;
meshphong.emissive=increase_brightness(emission_color, 0);
load_meshphong();
}
});

HTML :

<div class="tabbable hide" id="specular_popover">
<ul class="nav nav-tabs clsacc_Tab">
<li class="active"><a href=".specular1" data-toggle="tab">Texture</a></li>
<li class="tab"><a href=".specular2" data-toggle="tab">Color</a></li>
</ul>
<div class="tab-content" style="padding-top: 15px">
<div class="tab-pane active specular1" >
<div class="children">
<div class="widget button-widget">
<button class="btn btn-primary" data-toggle="modal" data-target="#textures_modal">Manage textures</button>
</div>
<?php 
if($textures=get_data('mv_textures',array('user_id'=>user_id()))->result())
{
?>
<select name="specular1textures" class="form-control">
<?php
$cnt=0; 
foreach($textures as $row)
{
$cnt++;?>
<option value="<?php echo $row->textures_file?>">
<?php  if(!$row->textures_file) echo'Material '.$cnt.': ';else echo $row->textures_file;?>
</option>
<?php 
}
?>
</select>
<?php 
}?>
</div>
</div>
<div class="tab-pane specular2">
<div class="panel-body specular_color" id=""></div>
</div>
</div>
</div>

and the example fiddles for the popover with the tabs

Example fiddle is : Fiddle

Upvotes: 1

Views: 1415

Answers (1)

JoeSloth
JoeSloth

Reputation: 236

It works if you initiate the popover after the color picker.

$('.specular_color').colpick({
    flat:true,
    layout:'hex',
    submit:0,
 });

 $(".specular_popover_trigger").popover({html: true,trigger:"click",placement:      "bottom",content: $('#specular_popover').html()});

Upvotes: 1

Related Questions