How can I change a width parameter in jQuery given as a pixels integer into a percentage?

I'm working with a custom scrolling div jQuery plugin. I want the div to fill 100% of the width of its parent to change size depending on the browser window size.

The script takes a given width parameter, and uses it throughout the script. The customizable parameters of the script seem to only allow me to specify the width in pixels, as an integer:

$.fn.hoverscroll.params = {

vertical:   false,      // Display the list vertically or not
width:      1280,        // Width of the list
height:     230,         // Height of the list
arrows:     true,       // Display arrows to the left and top or the top and bottom
arrowsOpacity:  0.4,    // Maximum opacity of the arrows if fixedArrows
fixedArrows: false,     // Fix the displayed arrows to the side of the list
rtl:        false,      // Set display mode to "Right to Left"
debug:      false       // Display some debugging information in firebug console

};

I tried quoting the percentage, '100%', but that didn't work. Is there a way to use a percentage here?

If not, is there a way to use a script like the one below, which determines the width of the window, make the script output the width in pixels, and开发者_运维问答 use that integer as the width parameter in the jQuery script?

<script type="text/javascript">
    function alertSize() {
    var myWidth = 0;
    if( typeof( window.innerWidth ) == 'number' ) {

    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth ) ) {

    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth ) ) {

    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
    //window.alert( myWidth );
}
</script>

For reference, here is the full script of the plugin that I'm using: http://rascarlito.free.fr/hoverscroll/js/hoverscroll/jquery.hoverscroll.js

If you want the width of the hoverscroll region to be some percentage of a container on ready, you can always use jQuery. Wrap your start-up routine in a ready() expression:

$(document).ready(function() {
   var w = $(window).width();
   var p = 0.95 /* Your percentage */
   $.fn.hoverscroll.params = {
       width:   w * p,   // Width of the list
       ...
   };
   // Start your hoverscroll like normal;
});

That ... is just there to indicate "the other stuff goes here." I didn't want to fill the answer up with repetitious code.

Although in normal practice, you would never modify the defaults in place, but pass them as arguments:

$(document).ready(function() {
   var w = $(window).width();
   var p = 0.95 /* Your percentage */
   $('#mylist').hoverscroll({
       width:   w * p   // Width of the list
   });
});

Note that I'm only passing in the width; everything else uses the defaults. You only have to set the ones that differ from the defaults-- in this example, I've only set the width.