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.
精彩评论