开发者

trigger resize event with jquery?

Hello I'm looking for a simple way to resize the content of my body , something equivalent to what happens when the user hits Ctrl+ or Ctrl- , but I want to trigger it automatically based on the size of the browser size:

for example :

if($(window).width() > 120开发者_如何转开发0){

//do resize

}

can somebody help? thanks a lot!


Shouldn't something like this be simple enough with the proper CSS styling? I'm thinking assigning rules that rely on percentage values that resize along with the containing element (like a browser viewport).

Granted, that may not work with every CSS element (I'm thinking mmmmm maybe font-size?). I'd suggest going for a CSS approach if what you want to resize can be done in CSS anyway.

UPDATE

Based on what you said on the comments, what you want to do sounds a tad bit complex, but I'd probably tackle it by doing the following:

Declare a viewport benchmark

// working on just width
var basewidth = 960;

Declare base values for your CSS styles

var basecss = {
    fontsize: 12,
    borderwidth: 2
}

Then trigger some calculations on resize

$(window).resize(function(){
    var ratio = $(this).width() / basewidth;
    $('#baseContainer *').each(
        $(this).css({
            'font-size' : basecss.fontsize * ratio + 'pt',
            'border-width' : basecss.borderwidth * ratio + 'px'
        });
    );
});

or something along those lines. of course, going for the * selector is overkill.


jQuery trigger should do this with the resize event, no? http://api.jquery.com/trigger/


You should give a look to matchMedia() https://developer.mozilla.org/fr/docs/DOM/window.matchMedia


In your browser window, there are resize handles. Just have your users grab those and resize your window when you think the size is right.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜