Archive for 04/04/14

Tooltips In only CSS3 And HTML5, Without JavaScript

by in , 0

Tooltips in HTML pages general do not need any effort from a developer’s side, as long as they put proper title attributes to their elements. The title is then used for showing the tooltip, but also for other things, such as providing a screen reader with proper content. Speaking of the use case of tooltips, the visual presentation depends on the browser your site gets visited with. Developers with the need for more control turned to JavaScript bases solutions years ago. Kashagra Gour created Hint.css, which proves as a decent alternative, based completely on CSS and HTML.

Hint.css – Data Attributes, CSS3 Transitions, Pseudo Elements and the Content Property


Read more »

HTML5 Jquery tooltip

by in 0

Tooltips are a square deal. They allow for the placement of important information just in the very location this information is needed, regardless of screen real estate. Tooltipster is a plugin for jQuery aiming at making the process of creating tooltips as easy as possible while providing the biggest functionality available. They conform to HTML5 and can be styled to your own liking using CSS.

Read more »

CSS to align label and input

by in , 0

HTML Code Snippet:
<fieldset id="o-bs-sum-buginfo">
  <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
  <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />

  <label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
  <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
  ....
</fieldset>
Using only CSS (or jquery), irrespective of the browser size, I want to pair label and input elements next to each other. I also do have freedom to change tweak the HTML. if required.



Put the every label with its corresponding input into a p tag. Then add the following css:
label{
  float:left;
  width:100px; //whatever width that suits your needs
}

p{
    margin:10px 0; //manipulate the vertical spaces for each input..  
}



<fieldset >
  <p>
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
    <input type="text"  name="ErrorPrefix" value="" />
  </p>
</fieldset>

jquery disable form submit on enter

by in , 0

You can disable button on Submit but user can Enter to submit.

So you i use this code:

I have the following javascript in my page which does not seem to be working.
$('form').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});
I'd like to disable submitting the form on enter, or better yet, to call my ajax form submit. Either solution is acceptable but the code I'm including above does not prevent the form from submitting.

Solution:

jquery disable form submit on enter


Usually form is submitted on Enter when you have focus on input elements.
We can disable Enter press on input elements within a form:
$("form :input").on("keypress", function(e) {
    return e.keyCode != 13;
});​