I have this textarea element, and i want each line in the box to be clickable and respond to javascript events, is that possible or am i looking for a different type of element?
That is not possible. In order for you do produce such behavior, you would need to design your own "textbox". Google Docs has done this for example, where the entire "textarea" is a complex and highly functional set of divs etc.
A much less intensive version of the multi-div selectable layout could be accomplished with Data Tables. See the tutorial here
They also offer tutorials on edit-in-place as well as select and delete. If you're not already using a grid to present data, it's a great tool for UI.
Related
Is there any best practices?
Say, I need to develop a flip-flop block with title/icon on front and text on reverse side.
And I want that user can simply insert that block in a grid. With params, I said above.
From here - I see only macros-way (simple). I mean - develop each block in macros, so umbraco-engine can paste it (macros) to grid "from-a-box". But, I don't believe it, I can not even create a folder from backoffice for macro!
Harder way - dive into custom property editor, many setups, many moves. And I don't sure - can I paste result into grid?
I see, that people talks about some great package that called "ARCHETYPE", but project is closed for now... Should anyone bet on that?
Which way is right?
If I understand correctly, you are using Umbraco Grid and want to create a custom grid edtior. If that is the case, I would recommend you looking into LeBlender. It basically enables you to create grid types in the same way you make document types, including templates.
I have a existing parent website and I have to design a new website with similar theme and css styles.
I do not have access to the code of the parent website in which I can look into the styling.
Is there a way I can extract or replicate the css style of the website and use it for the new one. I just need to get the same theme going in the new website as well.
I came across that I could use some adobe tools for the same.
Can anyone give a brief idea of how this can be done or is there a generic procedure to be followed in replicating the style.
Replicate given design using your own, most appropriate appropriate markup and CSS rules—and have some sort of QA process that will help you find obvious inconsistencies with appearance and interaction.
Why I don't think you want to copy HTML and CSS from the parent site:
The parent website can change its style later in an unpredictable way. You will have to duplicate these changes. Since you mentioned you don't have the access to the codebase, you can't just diff their changes and apply them to your codebase.
Therefore I'd say it's best to ignore the original HTML and CSS, and just follow your eye and have a QA that will carefully test your work for consistency with the original.
(I had to do a similar thing once, and I think it usually isn't required to follow parent website pixel-perfect—just consistent enough to facilitate painless navigation for the end user.
In cases where pixel-perfect consistency is required it makes more sense to build the additional website off the same codebase as original. You weren't given that possibility, so I doubt that perfection will be requested from you.)
I think Your trying to shoot fly with cannon. All javascript/css/html code is at Your hand when viewing sources. No advanced tools are needed.
For better look on minified files You may try developers tools provided by modern browsers like chrome and firefox.
You may also just use beautification tools for css and html like http://www.codebeautifier.com to get nice, indented document.
Just google html or css beautification and find the one that fit Your needs in best way. Most of them are free online tools.
The css is probably minified. This question shows ways to unminify it so you can read it.
Browsers such as Firefox and Chrome have a built in Code Inspector tool that will show you which styles are applied to each item. Just right-click on a page element (for example, a paragraph or heading), and select "Inspect Element" from the menu that appears. A toolbar will appear at the bottom of your window. Use the arrow on the toolbar to select different elements to examine. Usually the left side of that tool shows the HTML for that element and the right-side shows the CSS styles applied and the line of the css they come from. You can get a similar tool in IE by pressing the F12 key.
If you have a text editor that allows regular expressions in the search (Dreamweaver has this if you have the Creative Suite) use this search term with the "regular expression" box checked: #[a-z|0-9]{3,6}. This will find all of the hexadecimal values for the colors you need. It says to find the pound sign followed by either three or six letters or numbers, which will mostly be hexadecimal values (e.g. #333 or #333333 for dark grey). It may also bring up some IDs and you can ignore those and keep searching. You'll also want to search for rgba because colors may be listed that way. Using this in conjunction with the browser's code inspector will help you figure out the colors that are used on different elements. Some things may have background images, so you'll need to use the code inspector to figure that out. The code inspector will also show you how much padding you'll need, widths, etc.
Is it possible to style the option elements of a select list/dropdown beyond background and font? I'm specifically looking to add some padding/margins so the list isn't as cramped.
Not possible if you want broad browser support. At least IE doesn't support it. There's then no other option than to mimic and progressively enhance the dropdown with <ul><li> and a good shot of JavaScript. You can get here some ideas what's possible with JS (jQuery actually) based dropdowns.
#Alex: we were in the same predicament as you seem to be. We too wanted to control the UI of the dropdown. Unfortunately as others have already mentioned, you have no option with the system dropdown if you want to have cross-browser compatibility also.
so we came up with our own jQuery plugin which works like a system dropdown for most features. It also supports themeing as well as flexibility to provide customized list items by way of templates. You can see the running code samples from the following URLs listed and learn more about it. We are sure you will find it useful.
Sample and documentation - india.assigninfo.com/assignlabs/jaldropdown
Cascading dropdown sample code from coderun.com - coderun.com/ide/?w=GEXVey_kckKrAkLeoIfZNg
Sample code to configure jaldropdown from within scrollable DIVs - coderun.com/ide/?w=BiE5TbXdIEehDOxNk1oajw
It is possible however the functionality is not available in Internet Explorer
Styling form elements using css can be problematic since every browser render tag in different way (just like when safari render checkbox).
Okay lets ignore safari for a while, skinning input and button are rather easy but how to completely skin select, checkbox, radio, etc.
See this pages:
Checkbox skinning
Select skinning
Radio skinning
I've heard some JS framework such as EXTJS or MooTools can do that, but i don't want a large scale framework solution, just independent JS and we can modify the skin as we like, please no JQuery solution, since i don't use it.
Any idea to do that without using some specific framework?
If you want complete control, then you generally have to replace the browser controls completely and fake them with other elements, stylesheets and scripting.
If you don't want to use a framework, then it basically comes down to DIY.
That said, the whole concept have a couple of problems.
Trying to get the controls to behave how the user expects (given input from clicking, double clicking, triple clicking, right clicking, dragging, arrow keys, the control key, etc, etc, etc) is hard.
The controls might not look as the user expects.
Personally, I'd generally try to let form controls stick to the system defaults and not try to deviate from them. Give users what they expect.
Today there are quite many javascript solutions which allow a wide range of customization for form elements styling. A quick google came up with a few nice ones:
Perhaps the best known is the Bootstrap CSS framework:
https://getbootstrap.com/docs/4.0/components/forms
https://www.psd2html.com/js-custom-forms (jQuery plugin)
https://purecss.io/forms
https://github.com/select2/select2
https://github.com/harvesthq/chosen
Checkboxes/Radios:
https://codepen.io/vsync/pen/aBOOZB
https://codepen.io/vsync/pen/wKkuz
https://codepen.io/manabox/pen/raQmpL
Today you can find many kinds of form element styling on Codepen.com
Old answer (from May 16 '09):
yes, it is quite easy.
you can use niceforms, which is independet script for making
nice looking forms, then you can modify the graphics images /
CSS as your wish.
The idea is, coding something that looks the same with same
funcionality but different design, then you need to "give it
life" with some javascript magic :)
then, you have to have ilsteners all over the place, to check
what the user clicked, than you need to reflect that same value
to the pre-hidden form element the corresponds to the "fake"
one. means, to manipulate it. then when you send the form, the
right values are places via JS.
Is there any sort of free control which does what the Occupation field does on http://monster.ca? That is allow for grouping of the options in a drop down box with expandable sections? I just learned about the optgroup tag which is close to what I want, but not quite.
It is just a mock up of a drop down control.
The down arrow is an image, all the remainder is made of divs, the drop down list itself being a big div with overflow containing lot of controls with JavaScript to manage all of this (like collapsing sections).
So you can do that yourself, with a bit of work, and lot of help from a good JavaScript framework...
Basically what the developers at Monster.ca are doing, is emulating a select-control using a div-element with scrollable content.
Take a look at the "overflow" CSS-property.
You can't do this with a traditional <select> control, and I doubt there are ready-made components that fit the bill. If you do want to make this yourself, and don't want to buy into a toolkit like extjs or dojo (which would probably make it easiest to build this), I can recommend the following tree library, as it is very simple to use and BSD licensed: http://www.silverstripe.com/tree-control/
Try this, not sure if the interface is any good for your purposes:
http://flooble.com/scripts/hier.php