I'm trying to position the jquery validate message under the select box and text box. I've almost have it working for "Change timezone" but not for "Submit". Not sure why the header Email alerts is positioned centered in the fiddle. It doesn't look that way on my page.
Here is the fiddle: http://jsfiddle.net/ALUQB/16/
Click both the change timezone and submit button to see what I mean.
First you missed the container div for he second tag and you need to adjust your position valuues. Here is a reworked example:
Reworked Working Example
Related
Image to show postion
Hello there,
I would like to add a label to the box below (where it says 209) in the same style and aligned to the text above. These boxes are generated trough plugins. I have css styled them a bit, but I am unsure how to add text. Any help would be apreciated, since I am but only a humble noob.
Do it with jQuery:
jQuery('.classNameHere').text('text to be inserted');
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/
I have a html file, which has sections those can be expanded or collapsed. Following image has what I am trying to achieve (when collapsed, when expanded). I have also attached code (jsfiddle.net/MpPE8/).
Question:
I wanted to place the checkbox (which was shown while expanded) between (+) and heading text (Heading One) when collapsed. See following image for more information. I want this to be achieved using CSS ONLY due to environment restriction.
Place the div as a hidden element (eq. display: none) and then show it when the block expands (eq. Display: inline)
Sorry for my late answer but I didn't had time until now. Here is what I understand you need:
jsfiddle.net/MpPE8/2/
Please apply the styling you need. I only worked on the functionality.
BR
I'm struggling to replicate the login form found at the top of the PayPal website.
I have been able to create the username and password fields including the 'blue glow' from searching the web for tutorials; however, I'm unable to find any coding to add the 'clickable' question mark to the field.
I would like to be able to replicate the drop down when the question mark is clicked.
Any help will be greatly appreciated.
I hope I have made it clear.
What you could do is in your form have the question-mark image trigger a java-function... Ex:
<img src="my_image.jpg" onClick="myjava_function()">
Then in your java function you could have a div containing the drop-down displayed.
<script type="text/javascript">
myjava_function(){
document.getElementById('mydiv').style.display="block"
}
</script>
Then in near the form you could have your div that contains the drop down first being hidden but shown on the click.
<div id="mydiv" style="display:none;"><form><select><option value=1>1</option></select></form></div>
This would be my approach to getting it done. Firstly, try and get a log that is similar to the question mark, and position it in the div that you would place your area at. In the CSS for the logo apply float right so that the logo would appear to the right of that div. Then build a whole div that appears when you click the log before hand and give it the CSS display none, hence it would not be shown. Write a javascript function that works with the onclick you apply on the logo that changes the CSS of that div to display block and hence the whole div appears when you click it. The div by itself has a cross mark that could trigger another javascript call to change the CSS to display none. Good luck.
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.