I am a real noob in RoR, and missing basic concepts of programming in it.
I created a table with 3 boolean fields and corresponding show/edit/delete etc.
I have, as default, checkboxes for changing/creating those boolean fields.
Q: I would like to create a button instead of checkbox, which acts like checkbox and in case of 'checked' or 'unchecked' it sets corresponding color/image on button.
Edit: For those who negged this - at least tell me whats wrong with the question if that's so trivial to you
Cheers
Aledj
It seems that you simply want to give the checkbox a different style. While this can be accomplished by writing the CSS directly, you might be better off using a front-end framework like Bootstrap or a jQuery-UI theme which will do it for you, with some pre-defined styles.
Bootstrap
jQuery UI Themes
You can just use css to make most things look like most things:
CSS: styled a checkbox to look like a button, is there a hover?
Related
I want to create a tool as shown here where the user is able to change the style of the webpage dynamically.
I've searched around but am still not entirely sure on how I could do this.
Any direction on where to look to achieve something like this would be very appreciated!
First you need to create some way for the user to select the colour they want to use in the interface, and then store that value in a string, for example "userColour". You need to make sure it's a valid CSS colour value, so either '#33aa55' or 'green' (check the CSS reference for named colours which would be easier for you to implement).
If you define the HTML of the page using classes or IDs on the divs and spans etc. that the page is made up of, like this:
<div class="myColour"> your content </div>
or
<div id="myColour"> your content </div>
Then you can use Javascript to change the css attributes like this:
document.getElementsByClassName("myColour").style.background-color = userColour;
or
document.getElementById("myColour").style.background-color = userColour;
For class and id respectively.
You could also use something like jQuery which would give you much better browser compatibility and ease of DOM manipulation to apply styles to your markup dynamically, but the principles are the same.
Very simple question but I've been googling for hours and haven't found anything
How can i style the content/option/popup of a dropdownlist on the right side of the 'open button' like in this image/screenshot: https://www.dropbox.com/s/joqj00ahjrwqs0p/Capture.PNG?dl=0 ?
You cannot style it. You need to create a replacement element. Some browser elements can not be changed, or almost not be changed, with regard to their styling. They are so-called "native" (referring to the operating system) controls.
Check here for some jQuery based replacements which you can style whatever way you like:
http://jquery-plugins.net/fancyselect-jquery-plugin-for-custom-select-box
I need a combobox of checkboxes. I found this: http://code.google.com/p/dropdown-check-list and it looks like exactly what I need. But I really don't like it's style (appearance) and it doesn't fit the rest of my page.
Is there any way to have this control with "traditional" style - the same style normal <select> and <input type="checkbox"> have?
If not - is there any other custom control available that does the same but has the "normal" style? Or is there any simple (and short) way to create one by myself?
I've searched quite a bit, but all results reference using a custom image. I'm working with fluid layouts/retina displays and I'd like the button to be purely HTML/CSS.
Does anyone know a workaround/method?
Without seeing some code, I'd say hide the image with jQuery, then again use jQuery to create a new element with whatever content you want inside what I presume is the anchor tag used.
If javascript isn't supported, it'll show the image, if not, it'll show your new element (which you can style accordingly)
edit: ok, some clarification... use jquery to hide the existing input type="image"... then use jquery again to create a new input of type submit, do whatever you need it to do
Here's a fiddle to explain: http://jsfiddle.net/erinfreeman/PFZY8/
If there's a better way of doing it, I'm all ears. As below, I don't think jpann can add any additional code else it would simply be a case of hiding the existing input field and adding another.
Hi I was working on a project and the client wanted custom paypal buttons. I found a great site that provided custom code for the button: http://www.daddydesign.com/wordpress/how-to-create-a-custom-paypal-button-without-images/
You simply replace the input type="image" tag with an input type="submit" and style it. Hope this helps.
Can the size of a radio button be changed in CSS--in all browsers that is? I cannot figure out how this can be done. If you know this is not possible, please let me know so I don't waste my time. I have not looked into CSS 3 for HTML 5 yet. Hmmmm...
Although radio buttons look is controlled by operating system there is some method for applying style for form elements like radio buttons: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
AFAIK it is not recommended to modify it.
CSS allows for some manipulation of the form element - so you should be able to set it's height and width as with any element. However the OS and Browser still have an impact on the final output.
The code in this demo demonstrates CSS rules and how they are used to style the radio buttons:
http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/
The easiest way to avoid using CSS - which is actually the more difficult way to accomplish this change - is to use javascript and css to replace the radio buttons and other form elements with custom images :
http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/