Member Avatar for nileshbhanu

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>

  • 1 Contributor
  • 1 Reply
  • 519 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by nileshbhanu

Dani AI

Generated

Short version: Colorbox writes the size attributes when a box opens (so you won't find a fixed width/height string buried in the plugin file). The usual, robust approach is to stop passing fixed pixel sizes, use percent values or the plugin's maxWidth/maxHeight options, and call the Colorbox API to resize when the viewport changes. (jacklmoore.com)

Practical steps to apply right away:

  • Set sensible defaults up front (for example, maxWidth/maxHeight in percent) so Colorbox uses scalable sizes instead of fixed pixels.
  • Open your iframe links without forcing a px width/height.
  • Add a debounced resize/orientation handler that checks whether Colorbox is open and then calls the API to resize. A small example:
// set responsive defaults
$.colorbox.settings.maxWidth  = '95%';
$.colorbox.settings.maxHeight = '95%';

// open as iframe (no fixed px width/height)
$('.iframe').colorbox({ iframe: true, scrolling: false });

// debounced resize handler
var _cbTimer;
function resizeColorbox() {
  clearTimeout(_cbTimer);
  _cbTimer = setTimeout(function() {
    if ($('#cboxOverlay').is(':visible')) {
      $.colorbox.resize({
        width:  Math.min($(window).width() * 0.95, 1200),
        height: Math.min($(window).height() * 0.95, 900)
      });
    }
  }, 150);
}
$(window).on('resize orientationchange', resizeColorbox);

That pattern (maxWidth/maxHeight + debounced $.colorbox.resize) is commonly used and keeps the inline styles scalable. If your content is loaded after Colorbox opens (AJAX/iframe timing), bind a resize call to the load/complete hook (cbox_complete / onComplete) so the box sizes to the actual content. (gist.github.com)

Troubleshooting notes: percent values must be strings (e.g., '90%') — missing quotes like width:90% will break. Prefer CSS media queries for fine-tuning sizes at breakpoints rather than heavy user-agent sniffing. If an iframe shows blank, that can be an X-Frame-Options issue unrelated to Colorbox. Finally, make sure colorbox.css is loaded before the script. (jacklmoore.com)

Quick checklist for : remove hard px sizes from your init, use maxWidth/maxHeight (strings), add the debounced resize handler above, and test orientationchange on a real device. If resizing still feels jumpy, use media queries to refine the modal size on small breakpoints. (stackoverflow.com)

Member Avatar for nileshbhanu

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.