Geoff Evason » cross browser http://geoff.evason.name Wed, 30 Nov 2011 03:41:06 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Simple Javascript to detect browser details http://geoff.evason.name/2008/03/10/simple-jjvascript-to-detect-browser-details/ http://geoff.evason.name/2008/03/10/simple-jjvascript-to-detect-browser-details/#comments Mon, 10 Mar 2008 15:00:16 +0000 Geoff http://startingrails.com/2008/03/10/simple-jjvascript-to-detect-browser-details/ Sometimes users of MomentVille will report a problem. It may be a javascript or css problem. Often, the first bit of info I need to find out is what browser they are using, and what their screen resolution is.

I thought it might be too tricky to get them to give me these details reliably, so I made a simple page that gives me the details I want. I just ask them to go to that page and copy and paste the text in an email. (Fortunately I don’t have to use it too often, but when I do it makes things easy).

The file looks as follows:


<html>
 <head>
  <title>Browser Check</title>
 </head>
 <body>
  <h3> Browser Info </h3>
  <br>
<script language="JavaScript" type="text/javascript">
<!--
document.write("navigator.appName " + navigator.appName + "<BR>");
document.write("navigator.userAgent " + navigator.userAgent + "<BR>");
document.write("navigator.appVersion " + navigator.appVersion + "<BR>");
//-->
</script>
  <h3> Resolution Info </h3>
<script language="JavaScript" type="text/javascript">
<!--
document.write("screen.width " + screen.width + "<BR>");
document.write("screen.height " + screen.height + "<BR>");
document.write("document.body.clientWidth" + document.body.clientWidth + "<BR>");
document.write("document.body.clientHeight" + document.body.clientHeight + "<BR>");
//-->
</script>
</body>
</html>

To see it in action check out: http://www.momentville.com/check_browser.html

]]> http://geoff.evason.name/2008/03/10/simple-jjvascript-to-detect-browser-details/feed/ 0 CSS For Sliding Door Input Buttons In Rails http://geoff.evason.name/2008/02/26/css-for-sliding-door-input-buttons-in-rails/ http://geoff.evason.name/2008/02/26/css-for-sliding-door-input-buttons-in-rails/#comments Tue, 26 Feb 2008 02:36:38 +0000 Geoff http://startingrails.com/2008/02/26/css-for-sliding-door-input-buttons-in-rails/ UPDATE: This article appears to get a reasonable amount of traffic from google so I figured I’d update/correct it. The solution I outline below ended up not working as nicely as I had hoped, so I scrapped it. Instead, I just created a single image and making all my button text fit within the length of that single image. Sliding doors isn’t worth the trouble (i.m.h.o), and what I wrote below isn’t a perfect solution anyway.

——

This is one of those annoying things that took me all day to figure out, and the stuff I was able to find on the internets wasn’t very helpful….

I wanted to create some fancy looking buttons with curved corners. But I wanted them to be real buttons (http:post) , not links (http:get) that just look like buttons.

I looked for a way to do it and found a way to do it using links and a way to do it using the <button> element. Neither of these did what I wanted. Rails uses <input type=”button” /> rather than <button>. After learning more about the difference between buttons and inputs I’m still not sure why, but I figured there must be a good reason. I did try <button> but IE was giving me headaches (I couldn’t click on the button) so I gave up. I tried adapting these methods and they weren’t working for me.

One of the methods linked above worked briefly, but it required floating one of the elements left, which makes layout a REAL pain!

So, I (perhaps by accident) found an easier way. I took the opposite approach from using the outer html element for the left image.

First, I made my own button helpers like so:


module ButtonHelper
  def fancy_button_to(button_text, action_text, button_class = "button")
    return '<form method="post" action="' + action_text + '">' + button_base(button_class, button_text) + '</form>'
  end

def button(button_text, button_class = "button")
    return button_base("button", button_text)
end

protected

  def button_base(button_class, button_text)
    return '<p class="button_wrapper"><span class="' + button_class + '"><input value="' + button_text + '" type="submit" /></span>'
  end

end

Then, the css looks like this:


span.button input {
 border:0;
 cursor:pointer;
 white-space:nowrap;
 color: #fff;
 text-align:center;
 font-weight: bold;
}

span.button {
 background: transparent url(/images/small_button_left.gif) no-repeat top left;
 padding: 6px 0px 6px 5px;
}

span.button input{
 background: transparent url(/images/small_button_right.png) no-repeat top right;
 padding-right: 5px;
 font-size: 15px;
 height: 25px;
}

You will need to create some sliding door images (see links at the beginning of this post). The values measured in pixels in the css will depend on those images.

Of course, there is some conditional css, but it’s pretty short. You just have to use different padding amounts for IE6 and IE7. So, I created a new css file call button_ie.css. I conditionally include it in the html file like so:


<!--[if lte IE 7]>
  <link href="/stylesheets/button_ie.css" media="screen" rel="Stylesheet" type="text/css"></link>
<![endif]-->

The button_ie.css looks like this:


span.button {
  padding: 0px 0px 0px 5px;
}

This isn’t perfect. Occasionally there is an error of 1 pixel in firefox 2, but IE6, IE7, & Safari seem to work fine.

Hopefully this will save someone else the frustration I faced today. Though to be honest, I’m actually thinking of moving to fix width buttons.

]]> http://geoff.evason.name/2008/02/26/css-for-sliding-door-input-buttons-in-rails/feed/ 2 Cross Browser Testing & Tools http://geoff.evason.name/2007/09/09/cross-browser-testing-tools/ http://geoff.evason.name/2007/09/09/cross-browser-testing-tools/#comments Sun, 09 Sep 2007 04:56:02 +0000 Geoff http://startingrails.com/?p=12 So, at least for the site I’ve been working on, cross browser verification has been troublesome. This is probably the worst case scenario since it is javascript heavy, has a complex Dom, and has themes (34 and growing)…

So – how have I been testing it? (if I’m missing anything – please let me know!!!)

Well first, I have 4 browsers installed on my machine:

  1. Firefox 2.0 : http://en.www.mozilla.com/en/firefox/
  2. Safari for windows : http://www.apple.com/safari/ (firefox is better for developing, but Safari just tends to look really good and work really well)
  3. IE7 : http://www.microsoft.com/windows/downloads/ie/getitnow.mspx
  4. IE6 standalone http://browsers.evolt.org/download.php?/ie/32bit/standalone/ie6eolas_nt.zip

Beyond that, there are 2 other things I found very useful, each corresponding to the 2 things that are needed for cross browser testing: Styles & Behaviour

1- BrowserCam : http://www.browsercam.com/ It takes screenshots of your webpage using a whole range of browsers on a whole range of platforms. If you’re stingy you can get a demo account, but it’s worth signing up for at least a month. This helps ensure cross browser compatibility for styles.

2 – Selenium : http://www.openqa.org/selenium/ Selenium test drives your apps using javascript. It’s really ingenuous. You write (or record using Selenium IDE) scripts to perform actions, like type data, click, drag and drop, etc. You can also create assertions on page titles, dom elements, page contents, etc. If you have a javascript heavy site, Selenium is a must!

You can write selenium scripts in a variety of languages, and run it from either the front end or the backend. That is, you can drive it from a local server and test any site on the web, or, using selenium on rails, http://www.openqa.org/selenium-on-rails/ write some tests, and then just run them by visiting (test.myapp.com/selenium). I actually recommend the former, after having tried both. I’ll write more about selenium sometime later, as there is lots to cover.

I’m putting together a list of the other tools I use (plugins, etc) and will post that shortly.

]]> http://geoff.evason.name/2007/09/09/cross-browser-testing-tools/feed/ 0