prosinac 2008 - Posts

• Anchor is not clickable in Firefox and Safari when it's inside of the div tag which has image as background

  That's one of mine older issues which I was facing few months ago and today, while I was browsing through my pending blog posts, I decided to post few words about it hoping that it will save you few minutes of work if you ran into the same problem as I was. So, let's imagine that you want to put some link (anchor tag) inside a div tag which has some image as a background and that your link need to positioned somewhere inside of the image (div's background). Your HTML code will then be something like this: <div class="divsCSSClass">     <a href="Default.aspx" style="left: 133px; position:relative; top: 7px;"> some_text </a> </div> and your CSS will then be something like this: .divsCSSClass {      background: url('image_name.png');      width:392px;      height:45px; } Above code will work in IE and Opera, but in Firefox and Safari link (anchor) will not be clickable. The solution is extremely simple. All you need to do is to add position:relative; to div's CSS class. CSS will then be something like this:  .divsCSSClass {      background: url('image_name.png');      width:392px;      height:45px;      position: relative; } Posted pro 11 2008, 04:05 by boris.sevo with 4 comment(s) Filed under: CSS, Firefox

• Using jQuery to prevent form submit when enter is pressed

  I was recently working on a ASP.NET RIA which has a web form with the input field in which users can type some search term and press the search button or hit enter key. Search is invoked by an asynchronous call and done on the server. The text field is placed inside of form tag and because of that, when someone hits the enter key, instead of the desired behavior (asynchronous call), the whole form is submitted to the server. There is more then one possible solution for this kind of problem, but because I was already using jQuery for building the whole application's UI, I fixed the problem with the following elegant jQuery's cross-browser code snippet:      $(document).ready(function() {          $("form").bind("keypress", function(e) {              if (e.keyCode == 13) {                  search($("#searchTerm").attr('value'));                  return false;             }          });      }); Posted pro 11 2008, 11:51 by boris.sevo with 8 comment(s) Filed under: jQuery