By default shows a minimized view inside a div, when user click on the div,the form pop up for user to edit.
How to implement this? Or is there a ready plugin to achieve this with jQuery?
A:
Just create it and have it small with the overflow set to hidden.
Then on click have it animate larger.
edit:
oh right. So you want it ALL to be small?
Hmm, well I don't think there is an "easy" way. What you could do it use the % on width and hight (and text size) on a search though all the compontants on the form.
Could work, that is just theory off the top of my head though.
example:
$("#container").click(function () {
$(this).siblings().css({width:25%, height:25%, font-size:25%});
})
etc...
Dorjan
2009-08-25 10:58:27
No,I need everything in that form to scale.
Shore
2009-08-25 11:02:29
oh right. So you want it ALL to be small?Hmm, well I don't think there is an "easy" way. What you could do it use the % on width and hight (and text size) on a search though all the compontants on the form.Could work, that is just theory off the top of my head though.
Dorjan
2009-08-25 11:11:51
It'll be much better if there's a ready-to-use plugin with jQuery:)
Shore
2009-08-25 11:15:31
Well, I just gave a way of possibly doing it in one line (the shrinking).Doesn't seem like a big job to me (assuming this works at all).
Dorjan
2009-08-25 11:18:35
I don't think font size will scale with width or height of parent div:(
Shore
2009-08-25 11:19:47
Yeah, I think you're right, but with a little fiddling I'm sure you'll be able to get it right!
Dorjan
2009-08-25 11:20:45
In my case,the width and height of minimized div is specified.
Shore
2009-08-25 11:21:05
Great! Then you can work out what you want it to be smaller.(I.e design the CSS when it is small) and then just flip between two CSS objects.
Dorjan
2009-08-25 11:23:34
var cssObj = { "background-color": "#ddd", "font-weight": "", color: "rgb(0,40,244)" }example of a CSS object
Dorjan
2009-08-25 11:24:14
A:
You just need to specify a style that is bigger and one that is smaller and flip back and forth between them:
jQuery('#my-div').click(function(){
jQuery(this).removeClass('smaller').addClass('bigger');
});
jQuery('#my-div').blur(function(){
jQuery(this).removeClass('bigger').addClass('smaller');
});
Or something similar to that.
SeanJA
2009-08-25 11:27:19
Yeah, he wants it for all the child elements too so this wouldn't work, but pretty much on the line I was talking to him about in the comments of my post.
Dorjan
2009-08-25 11:40:00