Posts Tagged ‘safari’

Font rendering weirdness with @font-face

Monday, August 23rd, 2010
I’m getting poor quality rendering in Safari 5 and Firefox 3 (possibly others as well, though this is what I’ve tested).

I’m using a few fonts from FontSquirrel via their generator. Usually, when the page loads, everything looks fine, but when scrolling around even a little bit, some fonts will redraw poorly. I’ve attached two screencaps of the font, rendering correctly, and then of the font rendering poorly.

These were fonts available on FontSquirrel, so it shouldn’t be a corrupted source file or anything. Google didn’t yield anything about issues here.

Are there any know issues with using @font-face with more than one font on a page? Any theories?

If you’d like to see this on the live site, look here in the sidebar.

Tags: , , , , , , , , ,
Posted in dotnet, vb, vb.net | 1 Comment »

Download plugins by javascript on Chrome, Safari

Monday, August 23rd, 2010

Dear all,

I have implemented the plugin by NPAPI for Firefox, Chrome, Safari, but there is a issue for me is how to download the plugin by javascirpt on chrome, Safari?

I know the .xpi is a extension for Firefox, and I can write the script for downloading the xpi from server and Firefox will equip a xpi to Firefox extension folder.

But how can Chrome and Safari do for downloading the plugin ? As I know the Chrome should put its plugin dll on C:UsersUserNameAppDataLocalGoogleChromeApplicationplugins folder, Safari should put its C:Program FilesSafariPlugins ?

I’m appreciated for any infomation. Thanks

Tags: , , , , , ,
Posted in dotnet, vb, vb.net | No Comments »

CSS looks bad in Opera and IE; where should I start?

Sunday, August 22nd, 2010

I have just completed my website, and it looks good in FF, Safari and Chrome.
Opera looks alright, but not as good as FF.
IE looks very bad.

Is there any application for checking bad CSS and just fix it?
If not, what is the easiest way to cross-browser adjust a website?

Below is only one of the many problems I have with appearance…

I have a form in index.html which contains several inputs. To the right of the inputs, I have a “Search” button which submits the form. This button SHOULD be on the right, but sometimes drops one line to end up on the left below the inputs. This happens only in Opera 10.53 and IE browsers. (haven’t tested any other Opera version).

Here is the code:

<table border="0" align="center">
  <tr>
    <td>
      <div class="nav_container" id="nav_container">
        <div id="nav_container2" class="nav_container2">
          <form id="nav_form_main" name="nav_form_main" action="/search/" target="iframe001" method="get" onSubmit="reset_and_subm();">
            <div class="nav_lists" id="nav_list">
              <input name="nav_querystring" type="text" id="nav_querystring" style="width: 240px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;" value="">
              <select name="nav_category_list" size="1" id="nav_category_list" style="width: 195px;" onChange="subcatSelection();">
                <option value="All categories" selected>-- All categories --</option>
                ALOT OF OPTIONS HERE
              </select>
              <select name="nav_city_list" id="nav_city_list" style="width: 180px;" onChange="areapicker();">
                <option id="Hela Sverige" value="Hela Sverige" selected>-- Hela Sverige --</option>
                ALOT OF OPTIONS HERE
              </select>
              <input type="submit" name="nav_submit" id="nav_submit" value="S?k" style="width: 58px; font-size: 13px;">
            </div>
          </div>
        </td>
      </tr>
    </table>

And here is the CSS involved:

.nav_container2 {
  position:relative;
  left:0px;
  top:10px;
}

.nav_container {
  background-image: url(../Graphics/menu_lvl1.gif);
  height: 101px;
  width: 720px;
  padding:0;
  margin:0;
}

If you need more input just let me know…

Of course, it is IE with the most issues here… Some in Opera as I mentioned above… Rest is fine.

Thanks

Tags: , , ,
Posted in dotnet, vb, vb.net | No Comments »

Safari 5 Extension: How can I detect when a window’s current tab has changed?

Sunday, August 22nd, 2010

I have a Safari 5 extension that contains a toolbar. Whenever the current tab changes, that toolbar should be updated. I would like to do something like this from my bar’s script:

safari.self.browserWindow.addEventListener("activeTab", tabChanged, false);

However, that doesn’t seem to work. I have tried a number of other event names as well:

  • activeTab
  • activeTabChanged
  • onActiveTab
  • onActiveTabChanged
  • tab
  • tabChanged
  • onTab
  • onTabChanged
  • selectionChanged
  • onSelectionChanged

Does anybody know how to detect when the active tab changes?

Not that this is in any way related, but it looks like I would do this in Chrome with:

 chrome.tabs.onSelectionChanged.addListener(tabChanged);

Tags: , ,
Posted in dotnet, vb, vb.net | No Comments »

Is there a way to add a case sensitive attribute using jQuery?

Sunday, August 22nd, 2010

I’m working with jQuery to modify some svg files data on the fly… one of the things I need to do is modify the “viewBox” attribute. When using jQuery as in the snippet below, however, it is doing a toLower() on the attribute so “viewBox” becomes “viewbox”. Normally I wouldn’t care but this seems to break svg rendering (at least on Mac OS X in the finder and in Safari).

Is there a way to modify this natively in jQuery (via flag or something) or am I going to have to do a string replace afterwards?

var $svg = $('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>');
// do some work here
$svg.attr('viewBox', 0 + ' ' + 0 + ' ' + 288 + ' ' + 288);

Tags: , , , , , , , , ,
Posted in dotnet, vb, vb.net | No Comments »

Safari and the z-index flash problem

Sunday, August 22nd, 2010

Hi everybody,
I don’t know if it’s a classic safari 4 bug, but apparently many people cannot display correctly a non-flash content (div, image, etc.) over a flash animation.
I tried everything: The wmode (switching from “opaque” to “transparent”), the z-index and many other div “cheats”.

Did anyone know if there is a safari 4 patch/trick/script to fix this problem?

Thank you very much,
regards.

Tags: , , , ,
Posted in dotnet, vb, vb.net | No Comments »

An explanation of web sockets and server-side Javascript (especially focused on node.js)

Sunday, August 22nd, 2010

I want to create a chat room using HTML5 web sockets, but am pretty lost. From what I can tell, the following is required:

  1. A browser that supports web sockets (Chrome, Safari)
  2. Some kind of server-side scripting
  3. Some kind of client-side scripting

I’ve got #1 down :) but #2 is seriously tripping me up. Beyond amateur PHP work (generally within the context of Drupal), I have pretty much no experience coding on the server-side of things. I tend to code a lot in Javascript, and have read fantastic things about node.js. So I thought I’d try using it to play around with web sockets.

I’ve installed node.js to my Mac Leopard machine (it installs to Home > node), but I really have no idea where to go from there. The node.js website provides a “Hello World” example, which I’ve tried (I put the code into an example.js file, and saved that in the root of the “node” folder), but I only get the following response in Terminal:

Server running at http://127.0.0.1:8124/

I would LOVE a node.js and web sockets for dummies kind of thing. Thanks for any help that can be provided.

Tags: , , , , , , , ,
Posted in dotnet, vb, vb.net | No Comments »

jQuery UI slider doesn’t work in Safari, Chrome or IE8

Sunday, August 22nd, 2010

I received this handy answer to my question Is there a way to make the jQuery UI slider start with 0 on top instead of on bottom?

It worked great, however, in IE8, it always shows the slider pointer (better word?) at the bottom, and it is unmovable.

I followed the example from this code on JSfiddle provided by Nick Craver. The example works fine in IE8.

Because I set the options dynamically, I’ll display what should be their values.

var slideMax = $thumbs.innerHeight() - $thumbs.parent().outerHeight();

$(this).slider({
  min: 0,
  max: slideMax,
  value: slideMax,
  stop: function (event, ui) {
      $thumbs.animate({ top: (slideMax - ui.value) * -1}, 500);
  },
  slide: function (event, ui) {
      $thumbs.css({ top: (slideMax - ui.value) * -1 });
  },
  orientation: 'vertical',
  range: 'max'
});

The page in question is here. The JavaScript file is here. It works fine in Firefox.

If you need any more information, please ask.

Thanks again everyone.

Update

I realised I didn’t understand how jQuery UI worked – I thought there was a base library for it, of which the widgets extended. I was including jQuery UI twice. I’ve since fixed this, but the error remains.

Update

As you can see, now offering 200 rep and many thank you‘s to someone that can help me out here!

The weirdest thing, is when I access the site using IE8 on my localhost, the slider works. Online, it doesn’t. The 2 sliders have different images though, so I’m going to make them the same and see if it still happens.

Update

By explicitly giving the items a height via CSS, it has seemed to work!

Tags: , , , , , , , , , , , , ,
Posted in dotnet, vb, vb.net | No Comments »

iPod Touch Safari vs Mac/PC bug?

Sunday, August 22nd, 2010
Here is the site in question: http://nupper.heliohost.org

I’m having some troubles getting rid of some phantom white spaces only appear on the iPod Touch’s Safari browser.

The odd thing is, as you zoom in on the iPod, the white space either changes or simply disappears (appearing as it should).

I’ve viewed the site on my Mac with Firefox, Chrome, Safari and Opera and also the same browsers on my Windows (along with IE 8). All of them appear just fine in regards to these phantom gaps.

I tried implementing negative margins to close the gaps, but I ditched it in case there was something I was missing

Here are the screen shots from my iPod Touch:

From my quick search I think this may be related to this thread.

Any ideas?

Thanks :D

Tags: , , , , , , , , , ,
Posted in dotnet, vb, vb.net | No Comments »

Trigger resize event on print

Saturday, August 21st, 2010

I have a div in which I create a chart using protovis. The div has width: 100% and height: 100% and the code to create the chart uses $('#chart').width() and $('#chart').height() to get the size of the div at render time and fill the page with the chart. I capture the resize event on the window and adjust the div and the chart so that it resizes when the window resizes.

Now I need to print. I would have hoped that when the browser is rendering the page for the printer it issues a resize but it doesn’t, at least Safari and Firefox don’t. Chrome does something strange in which it resizes only the height but not the width. Is there a way to trigger this behavior just before print?

Tags: , ,
Posted in dotnet, vb, vb.net | No Comments »