So essentially I have blocks of text on a page, essentially just about 10 same sizes boxes of text using CSS. I want to be able to order these though - and so drag and drop one. I can code the backend ordering myself - can anyone recommend where to go for the fronnt-end drag and drop? I'm aware that jquery would probably be my best bet, yet I've never used javascript so if there's any sort of code already created for this then that'd be incredibly helpful.
Thanks!
You mean this? http://jqueryui.com/draggable/
Here's jQueryUI's draggable and droppable:
http://jqueryui.com/draggable/
http://jqueryui.com/droppable/
They're kind kind of cute but might well not do what you want.
Here's a pretty straightforward explanation of how to implement drag and drop the HTML5 way:
http://www.w3schools.com/html/html5_draganddrop.asp
(It mostly convinced me to implement my own rather than wait for better HTML5 drag and drop support.)
Here's an example for older browsers:
http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx
There's also draggable.js (and its jQuery port) neither of which I recommend.
Stuff these examples don't really do includes pretty much anything useful. E.g. what if you want to target PARTS of an object or the spaces BETWEEN objects? How can you make targets dynamics based on what's going on in the page. It all gets very ugly very fast.
Sorry not to have a simpler answer.
Related
I'm looking for a location that can show me how to do this.
I have two text fields, one is a name. The other is a zip. I'm searching businesses that might have more then one office in a state and wanted to use the zip to further narrow down the result. I want to use a Jquery auto complete that is also querying the Mysql DB with 3000 rows.
I'm not a big developer. Are there any URLS that someone could point me to or someone I could pay to do this for me over a few hours for the right person?
Thanks,
I'm sure you could find a developer to do it for you, but this isn't the place to look.
MySQL allows you to do full text search on databases (3,000 lines is a small db, so efficiency definitely won't be a problem). What is your server technology? That'll make a big difference upon how you actually set the whole thing up.
As far as the autocomplete in jQuery, jQueryUI has an excellent autocomplete widget.
This example may help point you in the right direction. Like others have suggested, it uses the jquery ui autocomplete:
Using jQuery Autocomplete to Populate Another Autocomplete
Or, if that's overkill, try this one:
jQuery UI Autocomplete Widget with PHP and MySQL
Oh, I think the other answers are great, but I also want to recommend Better Autocomplete, a customizable jQuery plugin (still under active development) that I am currently maintaining.
I have a client who wants me to do CSS coding only, but doesn't want to give me the php files.
Right now, I just have access to the live website (with no CSS).
It is entirely made with tables and I want to use divs instead
I'm not sure if it is possible to do the coding
I thought about copying and pasting the generated HTML code from each page
Will this cause possible problems with the end result?
Yes, this will cause huge problems: you'll do an awesome job, client will have trouble integrating it with their site, client will abandon your awesome work.
IMO, you should let the client know that you'll do the best you can with what they have given you, but you would be able to save them a lot of work and do a better job if you could have access to the source code.
If you know that you can't make the client happy with what they have given you, though, it would be doing everyone a disservice for you to try.
If you absolutely can't convince them to give you access to the source, then this client sounds stupid:
He has a layout which is table based.
He wants you to magically make it look better with CSS, without having access to the source.
"#Phoenix I don't see any classes or IDs." - there are no classes or ids to hook into.
You might be able to do it if you used some CSS3 selectors to, for example, select the 3rd td inside a td inside the 2nd table to apply styles to ;)
But, that won't help if you have to support older browsers, which makes this impossible at the moment without doing something differently.
I don't have full knowledge of your situation, but here's what I would probably do (if I couldn't convince them to give me access to the source):
Open the live site.
Copy the HTML source code.
Paste it into a new local file.
Add this into the <head> section: <base href="http://the-clients-site.com/" />.
This will let all the assets on the page load from the client's actual site.
Now, you have something to work with.
You have to keep track of ALL changes you make to the file.
The first change should be adding your own blank style tag.
Then, you can add id and class to whichever elements you feel need it.
You should try to avoid moving around elements, unless it's absolutely required. Those changes are a whole lot harder to explain to someone. I know from experience.
You should be able to style the page properly now.
Then, you deliver the completed page, and the documented list of changes you had to make to the HTML (add id, here add class there).
The client should then be able to integrate the changes into his site.
Well, at a bare minimum they'll need to modify ther PHP to reference your CSS. More importantly, you need to be able to hook your CS up to elements - Do tables/rows/etc. have Ids or classes attached?
If they are clever and have some good separation between code and presentation (using a templating engine or similar) then you can probably just edit the template / css.
If they won't let you edit the PHP and you come up with a new awesome layout, they will have a nightmare job trying to integrate it and probably won't bother.
I don't see the problem. You can style tables just as easily as divs. You don't have to know how the wall is built to know how to paint it, which is pretty much all you've been hired to do. Only problem I could see would be if they haven't added any classes or ids to the elements yet. After all, what the browser/client sees is the only thing that needs styling, and since you can see everything that the browser sees, you can see everything that needs styling.
If they have added classes/ids, then just take a copy of a page and style it in a testing area, and then once it looks nice, you take a copy of another page and make sure it looks nice with it too, add to the CSS if there are any new unstyled elements that didn't exist on the first page, once it looks nice, then move on to another page, and another repeating the process until you are satisfied that it appears that every page within reason would look nice with it.
If they haven't added classes/ids, tell them they need to in some capacity before you can work on it, perhaps provide some guidance on the issue.
I'm actually doing this right now for SO.
I'm working on a userscript that provides an alternate "clean" stylesheet for the StackExchange network. I have no access to the SO engine. I am using the Chrome Inspector to look at how the elements are set up. I recommend the same. (Although it is a little different, since I'm modifying the original CSS file.)
You can easily identify what you want to style with the Inspector and then work from there. I would suggest that you ask your client for a list of classes and IDs though. (I got that in the form of an existing stylesheet, you can go about it in a different way, if that suits you and your client.)
Hi all
What is the best jquery treeview that can be used to represent some transactions(leaves,vacations...) items.
i found a great treeview on the internet,but the problem is this tree is for folders and directory and not for text items.
when the user click on sub leave for example it will print some text beside that subleave
note: i work on PHP codeigniter framework.
Thank You
jsTree is a good jQuery plugin. It has a ton of options and API calls for working with the tree. I would say that the learning curve at first might be a little steep but it was worth it for me. If you're familiar with jQuery, you'll be able to manipulate the tree in many different ways.
Here is the home page...... http://www.jstree.com/.
A tree is probably not the best design idiom to use for this information. Consider, perhaps, an accordion.
Trees tend to have small nodes, so hard to click and break Fitt's Law. And they really only make sense to programmers and computer geeks. Accordions are a little better, as they have become more common and are at least easier to manipulate.
They are also way easier to code for. And there are tons of jquery plugins that can do it. Even nested, which it sounds like you need.
The goal isn't always to have the fastest UI, either. Consider how common this task is and if it will be better suited to something easier to learn in the first place. Maybe links and sub-pages are the best way to present the information. Don't disregard the useful but old for the flashy and new.
I've used this JQuery plug-in in the past and it works great :
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
It works in an non-intrusive way over nested ul and li HTML elements.
It can work through AJAX to lazy-load nodes by configuring a URL from which you want to load the children of a node. This works great if your tree is big.
$(document).ready(function() {
$('#concept-tree ul').treeview({
url: 'concepts/node'
});
});
To dynamically load content related to a node in another page element you could use some JQuery. You could set an event handler for a node being clicked and fetch extra content through AJAX and append it to the DOM.
im a pure backend programmer and i find it so difficult to position divs and add css styles.
what are your advices to make this as simple as possible for me?
use dreamweaver? what can it help me with exactly.
i have no idea how to add style to my prototype or handling positionings of divs and elements. some guides? tools? softwares? online scripts?
please all suggestions are welcome! guide me through...im all business logic and none design head.
eg. http://www.workey.se. how do you start with layout, design and all that stuff...
Depends exactly what you need to do, but learning the basics of css is pretty easy, mastering it is far more difficult of course. I'd suggest you just learn CSS and makes sure you get a decent browser add in like firebug so that you can see exactly what is going on. I'm not a fan of dreamweaver personally.
Dreamweaver is a good tool for initial design but I wouldn't recommend it for much more than that. Of course many people use it exclusively.
Why not try some CSS framework like the 960 grid? It can help with positioning elements on the page and leave you to worry about the specific implementation of your design like fonts and colors.
http://960.gs/
If you want simple page layouts something like YUI might help you. It has a large collection of pre-built code for you to use. Particularly the Grid Builder is great for creating multiple sections to populate within pages.
As for tools as long as it has decent syntax highlighting any text editor would be fine. Personally DreamWeaver tries too hard to 'help' and instead gets in the way but then I'm happier just with the raw mark-up.
I agree with some of the posts above, and empathize with the "pixel pushing" difficulties you might encounter when starting out.
I've been creating and recreating HTML layouts for about 5 years now, and after trying YUI, Google Blueprint, several css reset libraries, and my own home-brew layouts, I find YUI's grids, fonts, and resets are the most flexible and useful. Their templates are a little tricky, but only a little.
Here's my answer to a very similar question (in case people would rather not click through to see the answer...if this is spamming or against the rules, please let me know and I will remove the answer)
:
"
All of the above are excellent. Dreamweaver (imho) has the most complete set of features for designing pages (Adobe actually licensed some of the technology from TopStyle a while back to improve their feature set). And it has excellent validation built-in.
Another FREE tool (remember, Dreamweaver will cost you at least a few hundred unless you steal it) is Aptana IDE. It has most code completion options that Dreamweaver has, and similar validation tools.
Aptana and Firebug plugin for Firefox make a pretty good combination. In addition, there are Firebug extensions and other Firefox plugins that are tremendously useful:
Pixel Perfect: allows you to add a semi-transparent background image to line up elements on a page (shows up as extra tab within the Firebug plugin).
Code Burner: adds html & css reference tab to firebug.
ColorZilla (plain FireFOX extension): analyzes your colors and helps you manage them.
MeasureIt (plain FireFOX extension): Helps you measure distances between elements on a page when Firebug isn't enough.
WebDeveloper toolbar: does all sorts of nifty stuff, but I only use it to resize the browser to a specific window size (like 800x600).
"
you should use css templates (a list here)
or download an already made layout (everywhere on the net) and change bits with firebug to see what pleases you. (An example)
Edit : i am 'only code' too, i style my web UIs by hand. But there's a lot of addons for firefox that will greatly help you design your layout. (Here's a list)
I'm working on an information warehousing site for HIV prevention. Lots of collaborators will be posting articles via a tinyMCE GUI.
The graphic designers, of course, want control over page lengths. They would like automatic pagination based on the height of content in the page.
Anyone seen AJAX code to manage this?
Barring that anyone seen PHP code that can do a character count and a look-behind regex to avoid splitting words or tags?
Any links much appreciated!
If it doesn't need to be exact there's no reason you can't use a simple word count function to determine an appropriate place to break the page (at the nearest paragraph I suppose). You could go so far as to reduce the words per page based on whether there are images in the post, even taking the size of the images into account.
That could get ugly fast though, I think the best way to do it is to allow them to manually set the page dividers with a tag in the article that you can parse out. Something like [pagebreak] is pretty straightforward and you'll get much more logical and readable page breaks than any automated solution would achieve.
You don't just have to worry about character count, you also have to worry about image heights if there are images or any other kind of embedded objects in your pages that can take up height. Character count will also not give you an idea of paragraph structure (a single long paragraph with more characters than a page with many paragraphs might be shorter).
If you're willing to use JavaScript, that might be the ideal solution, post the entire article to the client and let JavaScript handle the pagination. From the client you can detect image and object heights. You could use PHP to place markers about where you think the pages should be, and then use JavaScript to make it happen. Unless the pages are very long I don't think you'll need to do several xmlHttpRequests (AJAX).
For just a straight PHP solution is also simple, but probably not ideal as you're not dealing with a matter of managing row counts. You could use a GET variable to determine where you are in the page.
Although this might not be the exact answer you're looking for, but you should really make sure your site doesn't have a fixed height. Flexible width's are really nice, but not as critical as the height.
Especially for a cause like this, and a content-heavy site; it's fair to require flexible heights.
As mentioned by apphacker, you can't really detect the height from within PHP and you're kind of stuck with javascript. If you're absolutely stuck with paging, it's probably better to let your content authors decide when to break off the page, so you break it on a real section, instead of mid-word, sentence, etc.
Edit: usability should dictate design, not the other way around. You're doing it wrong ;)
A good pagination is not a simple task. That's not a simple matter of coding. Scientific research by Plass (1981) proved that the optimal page breaking is in general NP-hard.
You should worry about floating figures, line breaks, different font styles,etc.
And the only thing an HTML engine can help you is parsing a page to a DOM tree. What about sizes? Yes you could have font width and font height, margins and paddings, picture sizes. But that's all. All the layout is on your shoulders. And doing it in javascript... meh...
So the only feasible solution of automatic fixed height pagination would be a server-side. PrinceXML is currently the best HTML2PDF converter. But it costs a lot.
If you are good with different page heights, you could use epalla's suggestion. But this is also not as simple as it seems.
Some references for pagination:
Optimal pagination techniques, Plass, 1981
On the Pagination of Complex Documents, 1998
Pagination reconsidered
Knuth's Digital Typography