i have use this code but it result inline css like width:1220px;height:600px depending upon screen size from jquery.colorbox.js .and if i want to use media query for responsive colorbox first i have to remove this inline css but i am not able to find width and height in jquery.colorbox.js.help me how i can make colorbox responsive.

<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)){
    if(window.orientation==90 || window.orientation==-90){
          $(".iframe").colorbox({iframe:true, width:"99%", height:"98%"});
        }
       else{
        $(".iframe").colorbox({iframe:true, width:"98%", height:"53%"});
       }
// Listen for orientation changes
   window.addEventListener("orientationchange", function() {
    if(window.orientation == 90 || window.orientation == -90 ) {
         $('meta[name="viewport"]').attr('content', 'width=device-height');
         $(".iframe").colorbox({iframe:true, width:"99%", height:"98%"});

        }
       else{
         $('meta[name="viewport"]').attr('content', 'width=device-height');
        $(".iframe").colorbox({iframe:true, width:"98%", height:"53%"});
       }
    }, false);              
}
else
{
$(".iframe").colorbox({iframe:true, width:90%,height:98%,scrolling:false});
}
});

</script>

any one please reply me?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.