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.).
Related
I have made a button using which must include a picture and text. Here is an example of what I have at the moment
https://jsfiddle.net/9c9dnot9/
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>
The reason I have it set up as a table is to properly adjust the alignment and formatting of the image and text within the button.
I can wrap the image and the text in tags to href to the page I want to link to.... but then you have to click the picture or the text. I want the entire button to be clickable and redirect to the URL.
I have tried every tip and trick I could find on numerous forums but can't seem to get it to work. Things either outright fail or completely screw up the formatting.
The purpose of this is to have a series of buttons for a SharePoint site which link to certain corporate departments.
I am somewhat new at coding in general so the more explanation the better! Thank you
Buttons are not intended to be links. The purpose of a button is to interact with HTML forms (e.g. submitting form data).
If you want to have something that looks like a button and behaves like a link, then I would recommend creating a link and styling it with CSS to look like a button.
In your fiddle, you can actually just change your <button> markup to <a> and it should all work fine.
Updated Fiddle
You can wrap the entire button in an a tag and add the display: block property in order to set its height depending on its content. Then, instead of setting the width on the button, set it on the link and add width: 100% to the button instead, so your link won't take the full width of its container and your button will be more maintenable because you won't have to set the width of the link and the button if you decide to change !
Here is a working fiddle: https://jsfiddle.net/d5tcamok/2/
Let's say I have the following section on a form
Form Section:
Data:_____________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
and I want to be able to insert {{ data }} into the section while keeping every line (even if it's unused). I'm doing this for work to replicate an old form. This form has to be identical and that's why I can't simply do something like:
<u>{{ data }}<u>
Thanks in advance for any and all help!
There seem to be a couple of options here;
Hacky: Use multiple text inputs. Style them to have a solid bottom border (as the underline) and use a bit of javascript to handle moving between them on word wrap/arrow key movement. Downside: you'll miss something like handling text readers properly, obscure keyboard shortcuts, etc... Also, while pasting is fairly easy, copying would be a pain.
Use a textarea with a background-image with the lines. This relies on you locking down the font size/line spacing to look right
Html5: look into using contenteditable attribute. you should be able to replicate the appearance fairly easily using css and divs/spans. Then make the right one editable
This post might be helpful. How to underline blank space in CSS?
In their example, you would put your template code in the first span.
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
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.
I have the following HTML (removed some of the form input tags to make the code minimal for readability):
Add Remove
<form action="">
Submit
</form>
Its basically three links, the last link is a link which mimics the functionality of a form submit button (I wanted it as a link and appears the only cross-browser way was with justing using a link with JavaScript - although I understand it would require JavaScript to be enabled).
This is probably second nature to some but I can't seem to get the three links on the same line next to each other, it ends up displaying the the last link on the next line (I believe its because the last link is wrapped in form tags?).
Is there a way to solve this by perhaps wrapping them in a div with a CSS class of some sort (just an idea)?
Add display:inline; or display:inline-block to your form element. Eg:
<form style="display:inline">
Fiddle: http://jsfiddle.net/gJqvr/1/