try this;
[number] is either the SQL row ID of the name (good), or an arbitrary index
(less good).
1) each checkbox gets a html id 'name_[number]_cb'
2) each name gets a html id 'name_[number]_label'
3) each circle gets a html id 'name_[number]_button'
4) each circle gets a html onclick='yournamespace.showInfoForName(this,
event)'
then load this js:
var yournamespace = {
showInfoForName : function (element, event) {
//some vars that you need to intialize;
var parent = $('table#names')[0]; //set only to parent <table> or
<div> of names-list.
//create the view
var view = document.createElement ("DIV");
view.id = element.id+'_view';
view.className = 'namesInputView'; //style layout with CSS
$(view).css ({
visibility : 'visible',
display : none, //override: dont display anything yet
position: 'absolute',
width : '400px', //desired size, change if u want
height : '300px'
})
document.body.appendChild (view); //add it to the DOM somewhere
to prevent IE mem leaks
var viewHTML = '';
viewHTML += 'some INPUT fields and makeup';
view.innerHTML = viewHTML;
//take the size of the view in case contents doesnt fit in it
viewWidth = view.offsetWidth;
viewHeight = view.offsetHeight;
//figure out where to put the view
var t = 0, l = 0, e = element;
while (e!=parent) {
t += e.offsetTop;
l += e.offsetLeft;
e = e.offsetParent;
};
//optional: adjust t and l if the view is out of view (near edges of
browser)
//figure this one out 4 yourself.
//move view to where it belongs in DOM
document.body.removeChild (view);
$(view).css ({
display: 'none',
overflow: 'hidden',
top : t+'px',
left : l+'px',
height : viewHeight+'px', //make sure everything is in view. at
"desired size" you specify the desired width, height is adjusted to whats
needed.
zIndex: 99
});
parent.appendChild (view);
$(view).fadeIn (700); //700 milliseconds
}
};
On Fri, Sep 5, 2008 at 9:51 PM, SEMMatt2 <[EMAIL PROTECTED]> wrote:
>
> Hello,
>
> I am fairly new to JQuery but it's so nice and simple to use that as
> soon as I have some direction I can take it from there. So, my
> question is, can anyone direct me regarding this project:
>
> I have a list of names (maybe a few hundred). Each name will have a
> checkbox next to it. After clicking on a little circle press down
> (forget what there called...) a box should slide open or come up right
> next to the name that let's a user enter in some information (it's
> about the name that they selected). Once they enter the information,
> the box slides back into place. Then, the user scrolls down to the
> bottom of the page and clicks submit. Everything gets submitted
> (checked boxes and the more information).
>
> Thoughts...how would I use Jquery to accomplish this?
>
> Thanks,
> Matt
>
