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.
Related
I'm aware that for input and textarea tags you can specify autocapitalize as off. Is there a way to do this when you are using a content editable div, as they do not have the autocapitalize attribute?
I have seen similar thinks achieved elsewhere, on the likes of online code editors. The orion editor for example uses an editable div and doesn't suffer this problem.
I have found a workaround to this. I fill the content editable with a zero width space () that the user can't see. Then when they tap and start typing, no auto upper casing!
Add this to the divs style :)
text-transform:lowercase;
I hope this helps!
EDIT
Okay now I understand fully. In an editable div this is not possible to achieve. The variable for this function cannot be controlled by HTML or JS. This is hardcoded into the objective-c of IOS. Nothing can change this unfortuatnly. The only way you could possible achieve what you are trying to do and that is to change the div to an input field, and then use the auto-capitalisation: off.
Apologies its not good news but I hope this helps!
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?
How to create a Mootools tooltip information while focus on a text feild like http://vadikom.com/demos/poshytip/#form-tooltips
Thanks
You may find this useful:
http://mootools.net/forge/p/floatingtips
It's a plugin I developed some time ago. You can see a demo using it for text fields focus here:
http://jsfiddle.net/X37C9/
It works with Mootools 1.4 and 1.3.
I made very minor adjustments to an old script by Ryan J.Salva corresponding to your request:
http://jsfiddle.net/ghazal/K7uaQ/
PS : changes commented and only for mootools 1.4.2 with compatibility. Hope it'll help.
There are various ways to achieve something like this.
The simplest would be to create a hidden element after the field, once you focus a field, fetch the element with the tooltip, and animate the position and opacity with Fx.Morph. On blur do the opposite.
Another way would be to create a single element at the bottom of the page, then fetch the position of each field with getCoordinates, adjust the position of the tooltip, inject the tooltip text from, say a data-tooltip property of the input, animate it to appear.
Using JsFiddle to prototype a solution would be the easiest.
I want to create a button in my rails web application. It Should contain an image & text.
Also that button should call a link.
I am using button_to tag to create button for a link.The link must be processed as html request not js call.My problem is how to add image in that button?
Please help.Thank you.
Try this:
<%= button_to("TEXT",question_path,:style=>"background-image: url('/images/image.extension');") %>
And yes Yuri's right, "Button always should do an action, link should always redirect somewhere (except pseudo-links, which could do some average — i.e. open hidden blocks, etc.)."
Here is a working example using HTML and CSS in JS Fiddle
http://jsfiddle.net/G3x8p/
Ive used almost all the attributes you need to get it working how you want, just change them to suit your needs.
Keeping it in an external CSS keeps it neat and tidy, and removes the need for messy inline CSS code.
On the one hand you can style an A tag to looks like button with CSS or use BUTTON tag, but, on the other hand, remember, you should avoid to use buttons with the link behavior. Button always should do an action, link should always redirect somewhere (except pseudo-links, which could do some average — i.e. open hidden blocks, etc.).
I need to find a way to hide HTML Rows (or Tables) from view without blocking them from being rendered. Setting this.myTable.Visible = false would seem to be the easiest way to hide tables from the user, but it prevents the HTML Table from being sent to the browser and that causes a problem because I am using Validators and need to make sure the non-visible elements are validated (because of page navigation logic, only some elements will be made visible to the user at a time).
I was attempting to change the Style property but asp.net says it is read-only so I cannot make it invisible using CSS. Also I would prefer not to use Javascript but if there is a simple solution with JS that is fine.
Any help is greatly appreciated.
You could make your <tr>s server tags. To do this, change your rows in
<tr id="rowID" runat="server">
So you can access their properties, such as rowID.style or class properties.
You can set this server-side by adding a display property to the style collection. The style collection property itself is read-only (you can't replace it), but you can an element to it to reflect setting that style property.
table.Style.Add("display","none")
or
table.Style["display"] = "none";
The same is true for table rows as the Style collection is inherited from HtmlGenericControl.
EDIT: The HTML control needs to be runat="server" for this to work, which I'm assuming yours is since you are able to set the Visible property.
To hide a complete table (but still render it to the client), wrap it in a div with style="display:none":
<div style="display:none;">
asp.net table goes here
</div>
Although, for single rows, this does not work. You will probably have to use some javascript (e.g. jquery, as another user recommended).
Besides using the style property, you can always put the style on the element either right on the tag itself, or in code via element.Attributes["style"] = "display: none;";. To do it in code, you need to make them server controls by adding runat="server" and setting an ID.
Thanks for the useful information guys. I was able to actually combine two of the earlier answers to come up with a great solution. For reference here it is:
I used div tags around the tables I wanted to show and hide like:
<div style="display:none;" id="tblHideItems1" runat="server">
I referenced these in the code-behind like this:
Definition:
protected System.Web.UI.HtmlControls.HtmlGenericControl tblHideItems1;
To show:
this.tblHideItems1.Style.Add("display", "inline");
To hide:
this.tblHideItems1.Style.Add("display", "none");
This allows me to show or hide the tables, without taking up blank space on the page when they are hidden, but still rendering them so they'll work with Validation controls (that was my ultimate goal) while hidden or showing.
The style tag in the definition may not be necessary but since it works now as it is, I will probably just leave it since it is being modified at runtime.
Again thanks for the insight!!
guys even table.Visible = False works
provided
u've set the runat= "server" for the table ofcourse