Font rendering with spry fade?

Hi,
I am doing a simple fade in of a DIV using spry fade.
Works perfectly fine on firefox, but on IE it fades ok but the text doesnt render correctly (blocky), in any font.
Checked the js as best I could, tried removing CSS styles etc, no good.
Code is below.
Anyone had this problem?
Thanks!
Rich
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/HSE.css" type="text/css">
</head>
<body onload="showContent.start();" leftmargin="0" topmargin="0" >
<div id="text1"
    style="position:absolute; width:400px; height:214px; z-index:3; left: 37px; top: 47px; visibility: hidden;"
    class="bodytext">
Welcome to this page!
</div>
<div id="fred"
    style="position:absolute; left:0px; top:0px; width:800px; height:446px; z-index:2"></div>
<script>var showContent = new Spry.Effect.Fade("text1", {from: "0%", to: "100%"})</script>
</body>
</html>

Genius! Thanks very much! All perfect now
R

Similar Messages

Image rollovers with Spry fade possible?

Does anyone know of a way to implement the Spry Fade effect
so that the result is an image that will fade onmouseover and fade
out onmouseout?
Ideally I would use .hover, but this is not available, so I
have to use onmouseover and onmouseout.
The problem with this is that if you roll out of the image
before the fade is complete, when you roll in again, the image
starts the fade again and does not fade from where it had gotten
to.
I could use setInterval and clearInterval, but I was hoping
that Spry would have a good, fast work around.
Basically I want a button image that fades seamlessly when
you rollover it.
Many thanks.

quote:
Originally posted by:
wriggs
Does anyone know of a way to implement the Spry Fade effect
so that the result is an image that will fade onmouseover and fade
out onmouseout?
Ideally I would use .hover, but this is not available, so I
have to use onmouseover and onmouseout.
The problem with this is that if you roll out of the image
before the fade is complete, when you roll in again, the image
starts the fade again and does not fade from where it had gotten
to.
I could use setInterval and clearInterval, but I was hoping
that Spry would have a good, fast work around.
Basically I want a button image that fades seamlessly when
you rollover it.
Many thanks.
Hi, I have no relevant eixperience with the Spry ajax
framework, but it can be solved with
mootools framework easily.
<img src="yourbutton" id="button" onmouseover="fadein();"
onmouseout="fadeout();"/>
<script>
function fadein() {
new Fx.Style( "button", 'opacity', {duration: 1000 }
).start(0.5,1);}
function fadeout() {
new Fx.Style( "button", 'opacity', {duration: 1000 }
).start(1,0.5);}
</script>
Of course you will need to set the 0.5 opacity property via
css.
Regards
Bagi Zoltán

Ugly fonts rendering with poppler-qt-lcd

Hello,
These patches don't work on my system.
All fonts rendering are beautiful, but pdf documents in okular are ugly.
I have tried ubuntu cairo patches without effects on this issue.
I have tried also to change hinting parameters in fontconfig without success.
Here is screenshots.
With extra/poppler-qt :
with aur/poppler-qt-lcd :
The rendering is worst with poppler-qt-lcd !
Anybody other has this issue ?
Thank you

I'm afraid this is a problem with the Cairo backend; the patches just create a bridge between the Qt bindings and the Cairo backend, and instruct Cairo to use subpixel rendering. Unfortunately, it doesn't always comply. Since Cairo 1.10 came out, more documents are affected. You'll notice the following comment was posted on AUR around the time Cairo 1.10 came out:
Sadly, it seems an increasing number of documents are not properly subpixel-rendered in the Cairo backend, even with these patches. I'm afraid that issue is for other people with more understanding of Cairo internals to solve. (See here: https://bugs.freedesktop.org/show_bug.cgi?id=3307 ).

Java Applets font rendering with no AA

So I've exhausted all possibilities on my end here and have no idea how to get anti aliasing to work with java applets. I've followed all of the suggestions from the wiki entry for the subject here:
https://wiki.archlinux.org/index.php/Ja … ment_Fonts
I've attached a screenshot of a few browsers and the appletviewer running a script from a book I am following at the moment. It's consistent, but it's an itch I haven't been able to scratch. OCD at it's finest here. It doesn't halt production or anything, but it bugs me.
Thanks for any help offered!
http://cigii.com/javajunk.png
Moderator Edit: Redacted in-line picture and converted it to a url link
Last edited by ewaller (2011-12-01 04:13:44)

transmutated:
The picture in your original post was well beyond the size permitted by our policy. If you would like to include a thumbnail picture, go ahead and edit that post with image tags that point to the thumbnail inside the url tags. Have the url tags point at the big picture. That way your readers can see the thumbnail and click through it to see the full image.
Thanks

ClearType support for font rendering on Windows?

JavaFX 2.1 or higher supports LCD text - that's fine. But there is a big rendering difference to native font rending on Windows - JavaFX 2 text doesn't look as sharpen as Windows native apps looks. It's because we need clear type support like in JavaSwing!
Is it planned to implement native font rendering with clear type?
Best regards,
Tobi

Check out the announcement at the top of this forum listing:
https://forums.oracle.com/forums/ann.jspa?annID=1713

Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry

Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
And click on the "Using Spry.Utils.updateContent()"
The 3rd example shows how to use a fade transition whenever the content changes.
I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
Tabs code;
<ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab">
               <table class="Button" >
                    <tr>
                    <td style="padding-right:0px" title ="Home">
                    <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
                    </td>
                    </tr>
               </table>
          </li>
etc
etc
etc
and the panel code:
<div class="TabbedPanelsContent" id="Home">
     CONTENT
</div>
I hoped i can use the example code from the link into my tabbed panels.
I thought this code:
onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
could be added to the tab code like this:
<a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
But the content doesnt fade...
I know i need to change the header etc.
The following is from the link:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquo Events</title>
<script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
<script src="../../../includes/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<style type="text/css">
/* IE HACK to prevent bad rendering when fading. */
#event { background-color: white; }
</style>
</head>
So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
Is there a way to keep my tabbed panel (or change as less as possible) and let
A. The fade work
B. The loading work.
The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
And the fading part is just because its nice...

It doesnt show in the post but off course i changed this link;
"data/AquoThonFrag.html"
into;
"javascript:TabbedPanels1.showPanel(1);"
I must say i dont know if this even works...

Performance issues with Spry

Hi all,
I'm facing some performance issues with Spry. I'm using it
for handling a menubar acting as a rollover menu : its color
changes under mouse cursor, and a submenu does appear at the same
time.
I have no problem when working with Firefox, but in IE6, it
renders too slowly
Is there something I've missed in the configuration or code
(or is there some tips for this kind of problem) ?
For information, I used UL and LI html tags, and I've
configured Spry to render these as a menubar (with multiple levels)
Thanks for your response

Sorry, there are no public access to this application
:-(

Font Rendering Got Bad After 32.0 Update

After the recent update, the font started to get badly rendered. Kind of blurry with jagged edges and transparent parts. It used to be okay D:
Sometimes it becomes okay for a moment as I scroll down on pages, and sometimes when I stop scrolling, the font stays as it is; as if there are specific positions for the text to render properly. However, not all of the fonts are affected. Only the ones inside the scroll area.
On times that the font renders properly, the bookmarks font, title bar, and tab names are unaffected and still appear not-smooth. Same thing does not happen on other browsers. All my other system fonts look okay; it's really just Firefox.
Restarting Firefox = didn't work
Restarting Computer = didn't work
Tried setting up Clear Type = didn't work
Tried enabling and disabling Hardware Acceleration on Firefox = didn't work
Tried enabling and disabling the Graphics card itself = didn't work
Tried just about all of the suggestions I found on Google = none worked
Tried complete uninstall and re-install of Firefox 32.0 = didn't work
Graphics Driver are updated ~
Windows is updated ~
I'm using Windows 7 Ultimate 32 bit
Graphics AMD Radeon HD 6800
I fixed it by downgrading to Firefox 31 which makes me sure that 32.0 is the culprit. As I was about to send the message on top; I tried downgrading as my last resort and it worked. Now I'm only sending this as a report. I am hoping you'll figure out what caused it because I am quite strict (OC) that everything in my PC must remain updated >_<; thus I want to use Firefox 32.0 as much as possible.

No one to help on this ??????

Font rendering differences between Xfce and KDE

Hi,
I am using both KDE and Xfce (mostly Xfce with KDE apps) and I observed that there is a font rendering difference between Gtk (Xfce) and QT (KDE) apps.
In both desktop environments I use dejavu sans font, size 9 and I have set RGB subpixel rendering and hinting to full.
I created some screenshots of dolphin and thunar to illustrate the differences (right click and select view image to see the screenshots in full resolution)
Can somebody help me to make gtk app fonts to look the same as qt ones? Or at least tell me why there is this difference.
Thank you.

I cant tell you why there is a difference, but this page may help you. https://wiki.archlinux.org/index.php/Font_Configuration
I ended up installing the Ubuntu patched packages in the AUR, but there are different options.

Please help me with spry bar menu

I have laid out my page with the div tags in Dreamweaver. I defined the different sections by putting colors in them until i am ready to put stuff into them however when i insert the spry menu bar into my navigation section, the area below it is behaving like a drop down box of color. What i mean is that the area below which is supposed to stretch from left to right as a single box is now broken up by a different color box the width of the spry bar and goes down to the next box. When i preview it in the browser the page appears normal. How can i get rid of the intruding box in dreamweaver.

HI
I am practicing for the webmaster design course pratical exam. The web page i will be asked to construct will consist of a home page with two or three other pages pages in the site it will have to link to. I know how to do most of the steps individualy but i do not know in what order some of them are done. What i mean is this. ... after setting up the root folder..images..laying out the divs .. i would like to know ... at what point do i do the various things like, set up a styles folder...make a template... make the other pages of the site ..etc. I think i am able to do nearly all of these things but not sure in what order they should be done so the site will work.
I have reached the point where i have established the site and layout, i.e. the wrapper, logo, navigation,header,bodycontent,right and left columns, clearbar, footer. i would like someone to list the sequence i should follow after this. I am praticing on a trial CS5.5 which seems to simplfy to a freat extent what we learned on the course because it is a later version. The version we used on course was CS4 and if the pratical is in this version then i will need to know how it is done in this format.
Date: Sun, 22 Jan 2012 17:45:18 -0700
From: [email protected]
To: [email protected]
Subject: Please help me with spry bar menu
Re: Please help me with spry bar menu created by Nancy O. in Dreamweaver - View the full discussion
If this only happens in DW Design View, use Live View or turn off your CSS display.
View > Style Rendering > un-tick Display Styles.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4157994#4157994
To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4157994#4157994. In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Dreamweaver by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Can I make a non-italic font italic with indesign.

I have a client who insists I can take a font they want me to use that does not come in italic and make it italic? I think I remember you used to be able to do this in quark but is there some way to do it in indesign?

To expand on Peter's responses ...
You can oblique text as he describes, however, that does not make a true italic style. It is only a “slanted” version of the orignal style. A number of san serif font families have oblique styles instead of true italic styles where such slanted (“obliqued”) version of typefaces are provided as part of the font family although in many such cases, the font style is still labelled (or maybe better put, mislabelled) as “italic” as opposed to “oblique.” This hackery is much less common for serif font families.
A true italic font actually have a different design that the underlying “normal” / “regular” style. Typically, these differences are most pronounced in a lower case “a” or “g” for example.
You may want to point this out to your client, contrasting text rendered with the artifically obliqued font with that rendered with a true italic font in a similar font family. They may or may not actually care, but at least they won't complain about it afterwards.
- Dov

Font rendering OS X issues

Hi people,
I baught a MacBook Air and I am new to OS X. I have this machine since 1 month and I simply cannot get used to the font rendering of OS X. I thought I get used to it after a while, but I don't. I feel like I have body lotion in my eyes all the time, fonts are really blurry and I can only work on that machine for some time. On my windows machine I worked all day long, with no such problems, but not in OS X. It is set to native resolution and I already set the font smoothing to 1, but this is still not enough, while turning font smoothing completely off makes everything look very ugly.
I wonder why no one ever mentioned that in reviews, etc.? Does it not bother mac users? However, is there some other option (besides scaling down to lower resolution)? I have headache almost every evening, so this is really a problem to me.
Thanks in advance.

Do any other applications behave like that? Or just these two?

Weird Font Rendering Issue?

Okay i was looking fo some back up drives online, and i stumbled upon:
http://www.circuitcity.com/ssm/Seagate-Barracuda-7200-9-500GB-Internal-Drive-ST3 500641ARK/sem/rpsm/oid/168899/catOid/-12976/rpem/ccd/productDetail.do
it renders like this:
http://img512.imageshack.us/img512/4641/picture3rn0.png
http://img218.imageshack.us/my.php?image=picture4dr1.png
but for some reason on my MacPro 2.66 the font renders odd in FireFox (doenst do it on Safari. and ive tried this exact sit eon my MacBookPro and it looks fine on Firefox.
I have the following installed (on both machines)
-FireFox 2.0.0.9
-Microsoft Office 2004
-Adobe CS2
-Macromedia Studio 8
theyre practically identical with programs & fonts installed, the only fonts that are installe are the ones that wer epreinstalled with the system, and that came with Office 04 and CS2
any way to maybe fix this issue?

hey! well i tried your site url on my MacPro and i have the same issue, so it must be a macpro thing? lol
im running the latest firefox and no additional fonts installed other than the ones you have listed yourself (office, cs2, macromedia)
so dont fret. i tried using font finangler and onyx to clean the font cache, (not sure i fhtat was a good idea,) but it shows up on mine so your not the only one! ive tried on two different macpros one wiht out any programs and it does the same thing. so it must be something with the wya its rendering on these machines.
at first it hought maybe something got corrupted in my system aswell
hope that helps!!

Font rendering issue after motherboard upgrade

This is a strange one.
Took hard-disc containing 10.6.7 out of a 2006 MacBook and put it in a 2007 MacBook.
Everything is working 100%, except for some slight differences in fonts. In some apps, they are rendered thicker (seeming only when shadowed), but in one web page (GitHub.com looking at chagesets), a section is rendered with weird Capital A with a box around it (like a WebDing of a picture of a key cap).
Of course, only Safari renders this page that way. OmniWeb and FireFox don't.
Any ideas?

Hi Nigel --
Welcome to Apple Discussions!
We're not staff, but other Mac users here, asking questions and sharing solutions.
We've got a font expert here, and here is Kurt Lang's opinion on capital A's in boxes:
Quote from Kurt Lang on this subject:
+A’s with boxes around them is always a sign of trouble with the main system+
+font, Lucida Grande.+
+Quick possible fix is to remove ALL font cache files from the system to see+
+if it's just bad cache data. For that, you need to use OnyX or other utility+
+which will remove both system and user cache files. A Safe Mode boot won't+
+work since it only removes cache data from the user account you do a safe+
+boot to.+
+If after that the problem returns, then Lucida Grande itself is damaged and+
+needs to be replaced.+

Font Rendering Issues-Help Required Please

In the past week, any Google search on Firefox or Chrome (but not Opera) gives me results where the fonts look gappy. Sometimes there are additional dots above the letters. I uninstalled and reinstalled Firefox from scratch in case an add-on was at fault but even with a clean install I am still seeing the issue. I checked my font settings and do not have any minimum font size set. I have allow pages to choose their own font ticked.
I've uploaded an image where I can see some correctly rendered text and some gappy looking text (not from a Google search but a Mozilla query). It also happens when commenting online sometimes, during typing it will be gappy but it will show properly once submitted. Any ideas for a fix would be warmly welcomed and I can give more examples if that would help. Although it's not Firefox related, I did restore all defaults in Chrome and it didn't fix the issue there either.
I uninstalled the most recent Windows Update since the problem is recent but it didn't change anything. I'm not sure if browsers would even look to my computers fonts.

hi Auds77, this is probably caused by microsoft update kb3013455 which can cause font rendering issues on vista:
<blockquote>After you install security update 3013455, you may notice some text quality degradation in certain scenarios. The problem only occurs on systems that are running Windows Vista SP2 or Windows Server 2003 SP2. Microsoft is researching this problem and will post more information in this article when the information becomes available. </blockquote>
<sup>reference: https://support.microsoft.com/kb/3013455</sup>
one option may be to [http://windows.microsoft.com/en-us/windows/remove-update#1TC=windows-vista roll-back this particular update] for now until there is a fix by microsoft or you could also look if there is a [[Upgrade your graphics drivers to use hardware acceleration and WebGL|graphics driver update]] available on the website of the vendor (intel/amd/nvidia) which might also resolve this problem in some cases.

Font rendering with spry fade?

Similar Messages

Maybe you are looking for