I've to build a web-based tool which lets an user change the CSS style of form elements.
E.g. a form contains of two labels, two text fields and a button. The user should now (somehow) be able to set styles like color:red, border:1px or text-align:right (or in any other way define such stuff). This settings should be check (if valid or not) and saved.
In any circumstance it shouldn't be possible to perform an injection attack or to destroy or change (e.g. by removing a text field) the form.
Right now, I'm just seeking for some ideas of how I could handle this request or if there are some useful libraries (PHP, JS, ...). So if anyone want to share his mind if me, I'm more than glad.
This link may be of help http://wrapbootstrap.com/preview/WB0412697
This page makes use of style switcher and the Bootstrap plugin, which changes the colour of the page according to what you select, referring to the code of this 'style switcher' may be the resolution to your problem.
Related
I am working on an old legacy application which used document.forms[index] approach to access elements in the form and to submit the form. My task is to add a new top panel with few textboxes and buttons. I am using a form for this. This top panel is to be included in all the pages in the application. Now, all the pages stop working since form[index] needs to be updated in all the pages. I know using the form name is the best approach. I have around 1000 places to change. What is the best approach to avoid this problem? I still want to use form for my top panel since I am using spring forms to get the data. Any valuable advice will be appreciated. Thanks.
If you looked up the definition of "unmaintainable", that would be a good example.
One trick might be to leave one set of forms, hidden, with the legacy stuff in them, then make another set, lower in the HTML, that the user sees. Then use some JavaScript to map the data back into the original forms in order to continue to work with the expectations of the legacy code. This keeps everything in the same index-order.
I am in the process of converting a Silverlight app into a standard Web app (ie all HTML, CSS and JavaScript via jQuery 1.4.4). I'm not the most experienced when it comes to web development, so I am wondering what would be the best way to convert this custom Silverlight control into a web equivalent?
It boils down to just being a fancy radio button group. The user can click on any type, and only one type can be selected at a time. For the web equivalent, it needs to set a value that will get POSTed to the server.
For now I am just using a standard <select> tag which is of course functional and doesn't require JavaScript (which is nice), but ultimately is not going to fly. I will place a <select> inside of a <noscript> tag to allow non-js people to still be functional.
Can anyone recommend a good approach for tackling this? Any existing plugins/controls out in the wild I could take advantage of?
(I am using ASP.NET MVC 3, but I don't think that's very relevant here)
I would use a <ul> and make the selections a <li>. Styling is easy enough to apply to that, and there are tons of samples online.
Place a click on the li using jQuery to disable. If you are going to disable other selections, you should also include a reset/clear type function to they can choose again in case they made a mistake.
Think of them as an array of buttons. When one is clicked, all others are unselected. Draw a rectangle around the one that was clicked and set a hidden form field equal to the value you expect when the form is submitted.
I'm making a large and complex application and I need to set tabindexes to help user navigate through the pages. This is a private application so I don't have restriction about (ab)using javascript (jquery).
I currently have these questions.
1) How do you force with javascript (jquery) the browser to move the cursor inside a specific textbox as soon as a page has loaded? I noticed that often browsers don't automatically put the cursor inside the first tabindexed input. I want a surefire way that forces it there no matter what.
2) Some fields that activate ui enanchement (namely jquery ui datepicker) have problems with tabbing (like having to push tab two time to go away from it), is there any way to avoid this?
3) How do you read and set tabindex with jquery? I have some fields that get hidden/shown based on user action and they should be able to "give" their tabindex to other fields if they get hidden, is this a problem, does the browser still consider a tabindex after the page has loaded?
Thank you very muchh
To put focus on a specific textbox, do this (assuming textbox id is #firstBox): $('#firstBox').focus(); See more examples here: How do you automatically set the focus...
Not particularly because the DatePicker is also its own UI, so it has various objects within it that can be focused on (which is what tabbing picks up on).
Actually, now that I've thought about it, if you hide a field (AKA, "hidden") it will not have a tabindex and the other tabs will fall in line with what is defined for the browser (typically top to bottom, left to right order). You shouldn't have to worry about setting the tabindex manually.
I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png
I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.
For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.
I'm using Prototype in my Rails project to do in-place editing (via Ajax.InPlaceEditor) of a form. However, I don't want it to immediately post back and do the update - the form itself is pretty complicated and the user may decide to abandon their changes. Only now they can't, because the form has invisibly (to them) updated the database.
So, what I was thinking of doing was using Prototype InPlaceEditor without specifying a postback url (or make it a generic postback url that returns true) and then as part of the "onLeaveEditMode" for the field, have it update a hidden form field with the new value.
That way, when the user gets the fancy look and feel of an in-place editor but still can press "Cancel" at the bottom and undo all the changes.
So, I've embarked on this mission in a little test prototype and it seems to work -- except it means a substantial amount of javascript code and, in a way, feels like bastardizing the InPlaceEditor purpose. This has to be a solved problem but my google-fu doesn't return anything quite like I want.
Something kind of like this (but obviously not a grid form) where you can in-place edit the fields but must press "save" to commit your changes:
http://www.nitobi.com/products/grid/editors/
Couple of questions:
1) Is there an existing rails plugin or Prototype class to do this for me?
2) If not, does my approach sound reasonable?
Thanks!!
If you just want fancy feel of inline editing. Fake it.
Keep form fields border none. So it will look like normal text.
On hover highlight background of field.
On focus show border (by adding class or changing inline styles).
On Blur again hide borders.
You don't need ghost hidden fields. And most of the stuff is css.
Use jquery to minimize javascript code. :-)