0

I have been writting HTML and CSS for a while but am new to the javascript domain. I am using the below code to control the attributes of a jQuery slider. The code works fine, but what I need to do is change some of the elements within it as the browser screen resizes (or loaded on mobile device) to enable the functionality to work correctly on smaller screens. 

 $(document).ready(
        function() {
            $(".container").wtListRotator({
                screen_width:534,
                screen_height:300,
                item_width:210,
                item_height:75,
                item_display:4,
                list_align:"left",
                scroll_type:"mouse_move",
                auto_start:true,
                delay:5000,
                transition:"v.slide",
                transition_speed:800,
                easing:"",
                auto_center:true,
                display_playbutton:false,
                display_number:false,
                display_timer: false,
                display_arrow:true,
                display_thumbs:true,
                display_scrollbar:true,
                mouseover_select:false,
                pause_mouseover: true,
                cpanel_mouseover:false,                 
                text_mouseover:false,
                text_effect:"fade",
                text_sync:true,
                cpanel_align:"TR",
                timer_align:"bottom",
                move_one:false,
                auto_adjust:true,
                shuffle:false,
                play_once:false,
                mousewheel_scroll:true,                 
                block_size:75,
                vert_size:50,
                horz_size:50,
                block_delay:35,
                vstripe_delay:90,
                hstripe_delay:180                   
            });
        }
    );

I have already implemented media queries on the elements in the CSS so they resize and also across the rest of my site, however I am struggling to change the attributes below when the screen size/re-size event occurs and define this in the above javascript.

screen_width:534,
                screen_height:300,
                item_width:210,
                item_height:75,
                item_display:4,

Thanks

Rich

4

1 回答 1

0

有两件事可能对您有所帮助：

1）您始终可以使用window.innerWidth和获取浏览器窗口的当前可用宽度/高度window.innerHeight。

2）您可以“注册”一个在窗口大小发生变化时调用的函数。例子：

window.addEventListener("resize",nameOfFunction);

window.onresize = function() { //do stuff };

如果您还有其他问题，我很乐意为您提供帮助...

于 2012-06-19T23:18:32.913 回答