Design, Programming, Global Domination, General Geekery
When googling for something I was working on for a contract I noticed my site came up. I was surprised by this since I don’t optimize for searching, even more so when I noticed the page was listed as uncategorized. I went through and fixed those and will go through and add tags and possibly excerpts to things that are missing them. Nothing major today.
Later (probably this weekend) I’ll make a post or two, have a few things I’d like to post but just haven’t really had the time.
Long time to post, between being sick and doing a bunch of really boring coding work nothing of value to post has come up recently, until now. Last week I was working on a contract where they have the entire layout as a series of tables set to 100% width (I know tables, how retro). Anyway I was trying to do something I had done hundreds of times before on their site, a text area thats 100% wide (so it flexes with the width of the page) that has a button next to as (as opposed to below it like would naturally happen). After spending some time on it i figured it out and decided I would post it here on the weekend so I would always be able to find it. Come today and wouldn’t you know it I forgot how I did it, so I played around a bit and found a solution. It’s not the same as the one I used for them but the end effect is the same. First it requires you to but some code around your input (it’s never that simple), a mini example table is below.
| Enter Text |
|
Snipplr: http://snipplr.com/view/52532/100-width-text-area-with-adjacent-button/
The last 2 empty table cells are not important, there just there because thats the same style that the contract sets everything up with. Anyways as you can see you have to wrap the entire input in a div, then just the text area in a div. Another thing you have to do it give your button a width, I usually use 95px since it seems to fit the majority of buttons out there (after all buttons names are usually things like “Submit” or “Load” not “Press here to do the thing you want to do”). That width of the button, along with any margins or passing you add to it to make the format clean, as then added as right padding to the cell this div cluster is placed in so in this case 95+5 to make the final product look clean is a nice round 100px. That code there is paired with the css below (it’s normal CSS here but it works just as well being all inline).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
div.input_master{ width:100%; display:inline-block; white-space: nowrap; } div.input_subset{ display:inline; width:100%; } input.text{ width:100%; } input.button{ width:90px; margin-right:5px; display:inline; } |
Snipplr: http://snipplr.com/view/52532/100-width-text-area-with-adjacent-button/
That css code prevents wrapping and plays with margins (equal to the amount of padding above, button width + margin) to get a nice clean look when your done. The simplest way to description what it does it in throws the button off the end, outside of the box, but the box is made shorter (by the inline padding added to that cell) to compensate and move it look as if it’s in the box.
One thing to note, if your going to use jQuery to pull values from the box laters you probably want to avoid the child selector “>” to make it easier, just use a space as it acts as a simple inside selector going all the say down when looking for elements, in this example that text area could easily be selected with #(“table input[type=’text’]”).
You can see it on the worlds more boring example page here: 100% width text area with adjacent button.
I know this is a poor way to do this, and if I run across any of my old code that does it in a better way I’ll update according, but this effectively works and I can now at least reference this myself later, even if nobody else is ever helped by it. If you know of a better way to achieve the same thing please comment.
Using multiple inline nested sortable jquery lists is a great way to build drop down menu systems. Unfortunately the sortable function fails to handle inline lists well. To overcome this I generated a small function to get a string I can use later (after sending it via ajax) to get the new locations of the items. The list will come in the same order they are on the page, and will attached both the items ID and it’s parents ID (if it has one).
Some things to know about how the list system was set up, first, every item that was going to be saved has an ID tag attached to it that contained it’s ID in the database. The subitems were stored in the same table, but with a “parentid” field that, if on the top level says 0, otherwise it had the id of it’s direct parent. The output script in the end loops through based on id of item and id in parent id (it’s a simple system, any questions can be posted and I can go over it in more detail).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function update_menu_positions(btnpress){ $("ul.menubuilder:first > li").each(function(){ arr += ','+$(this).attr('id') if($(this).has('ul')){ subitems($(this).attr('id')); } }); function subitems(pid){ $("#"+pid+" > ul.menubuilder:first > li").each(function(){ if($(this).attr('id')!='null'){ arr += ','+$(this).attr('id')+'/'+pid; } if($(this).has('ul')){ subitems($(this).attr('id')); } }); } } |
Snipplr: http://snipplr.com/view/50855/saving-nested-jquery-sortable-lists/
First, yes, those functions are nested inside each other (since nothing else is going to use the subitems function). Also, the output is just a long string, theres nothing saying it can’t be a array except I guess, but sending JSON to PHP to un JSON it to work on it is more steps then just sending the string and working on it. The string will start with a comma (unless you find a good use for it, the production code this was ripped fro, uses it for the entire menus ID) and it can easily be exploded on the comma to break down items, then on the / to get id/parentid (see what I did there). It all looks rather messy and disorganized but it works very well in the end.
The code snippet above has a bunch of implementation specific code in it (I just ripped it from the test production code) but since this sort of thing isn’t very beginner friendly I don’t see that as being a problem, if you do have question you can post them and I’ll try my best to help, it’s simpler than it may seem.