notifyr.org

[themoose]

hey

Check out my latest creation - www.notifyr.org

Mainly comments on design for now, but also some on functionality of the website if you have time!

Note it's currently in Alpha Beta so don't rely on it too much at this point in time.

Thanks

-TM

P.S. If you like it please Digg me (http://www.digg.com/software/New_site_notifies_you_when_a_page_updates)! Thanks.

[Mole]

Design looks great the top of it looks kinda plain

6 -7 -8 -9

[Paul White]

You did it again, looks amazing! On the pop-up box to create a new notifier set a margin from the top of the page though! :) Otherwise it looks great ;)

[brutetal]

That image, onetwothree.gif, is way to big make it smaller!

[themoose]

Design looks great the top of it looks kinda plain

6 -7 -8 -9

How can I improve?


You did it again, looks amazing! On the pop-up box to create a new notifier set a margin from the top of the page though! :) Otherwise it looks great ;)

Thanks :)


That image, onetwothree.gif, is way to big make it smaller!

I personally think it's fine.. meant to look big. Who else agrees with him?

[Keagle]

It's great, it promotes the simplicity of what needs doing (The Onetwothree thing).

I love the site, however something seems to be missing at the top :)

7 - 8 -9 - 10

[iBrightDev]

still dont like the huge pixilated icons at the top. think you need to make them normal. other than that, it is just another great site but the great moose

[themoose]

justin, got some normal ones. Load time is a lot more (16KB -> 79KB), is it worth it?

[brutetal]

Okay, now it looks fine.

[themoose]

Thanks ~

[Tree]

The blue cuts off at the page break again.

[iBrightDev]

ned to fix the logo for the other pages like i told you about the home page yesterday. you should load it using css is it would be the same on all pages. also, when you click new notifyr link, the page shifts to the right a little. not sure why, but you should look into that too. also, now that you are back to png images, the back is all greyed out using ie6 or earlier versions, so, you need gif or make a white back behind them. i know they work in FF and IE7, but to many people havent switched to 7 yet.

[fireshark]

or you could use a js to make ie6 support PNG correctly.

[themoose]

or you could use a js to make ie6 support PNG correctly.

How would I do that?

[iBrightDev]

or you could use a js to make ie6 support PNG correctly.
good idea, but like moose said, how? is that possible?

****EDIT****

moosey, i found a could ways that are supposed to work. give them a try



<DIV ID="myDiv" STYLE="position:relative; height:250px; width:250px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sr c='myimage.png',sizingMethod='scale');"></DIV>


or you can use javascript



Using a slightly tweaked version of Chris Nott’s Browser Detect Lite, we set some global variables to this effect that we can use later on.

// if IE5.5+ on Win32, then display PNGs with AlphaImageLoader
if ((browser.isIE55 || browser.isIE6up) && browser.isWin32) {
var pngAlpha = true;
// else, if the browser can display PNGs normally, then do that
} else if ((browser.isGecko) |&#187;
| (browser.isIE5up && browser.isMac) |&#187;
| (browser.isOpera && browser.isWin &#187;
&& browser.versionMajor >= 6) |&#187;
| (browser.isOpera && browser.isUnix &#187;
&& browser.versionMajor >= 6) |&#187;
| (browser.isOpera && browser.isMac &#187;
&& browser.versionMajor >= 5) |&#187;
| (browser.isOmniweb && &#187;
browser.versionMinor >= 3.1) |&#187;
| (browser.isIcab && &#187;
browser.versionMinor >= 1.9) |&#187;
| (browser.isWebtv) |&#187;
| (browser.isDreamcast)) {
var pngNormal = true;
}
function od_displayImage(strId, strPath, intWidth, &#187;
intHeight, strClass, strAlt) {
if (pngAlpha) {
document.write('<div style="height:'+intHeight+'px;&#187;
width:'+intWidth+'px;&#187;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader&#187;
(src=\''+strPath+'.png\', sizingMethod=\'scale\')" &#187;
id="'+strId+'" class="'+strClass+'"></div>');
} else if (pngNormal) {
document.write('<img src="'+strPath+'.png" &#187;
width="'+intWidth+'"&#187;
height="'+intHeight+'" name="'+strId+'" &#187;
border="0" class="'+strClass+'" alt="'+strAlt+'" />');
} else {
document.write('<img src="'+strPath+'.gif" &#187;
width="'+intWidth+'"&#187;
height="'+intHeight+'" name="'+strId+'" &#187;
border="0" class="'+strClass+'" alt="'+strAlt+'" />');
}
}

So now we have a JavaScript object to display PNGs. Here’s how we use it:


<html><head>
<script language="javascript"
src="browserdetect_lite.js"
type="text/javascript">
</script>
<script language="javascript"
src="opacity.js"
type="text/javascript"></script>
<script type="text/javascript">
var objMyImg = null;
function init() {
objMyImg = new OpacityObject('myimg','/images/myimage');
objMyImg.setBackground();
}
</script>

<style type="text/css">

#myimg {
background: url('back.png')
repeat; position:absolute;
left: 10px; top: 10px;
width: 200px;
height: 200px;
}

</style>

</head>


<body onload="init()" background="back.jpg">

<div id="myimg"></div>
</body>
</html>

i would try the css way first. seems easier.

[fireshark]

Hey where did my post go?

Anyhow, it's easier if you do IE conditional comments. Here's the site:
http://homepage.ntlworld.com/bobosola/

[iBrightDev]

Hey where did my post go?

Anyhow, it's easier if you do IE conditional comments. Here's the site:
http://homepage.ntlworld.com/bobosola/

very nice find, might keep around if i want to use a tone of transparent png images that arent defined in the css already, otherwise, i tested the css way that i posted, and it works great too. very easy, especially if you are already using css to difine certain images in a class or id.

****EDIT****

I noticed a problem with the css method not working in FF, and was filtering the png all todether, so i added a little extra stuff to it, so that if it is IE it will do one thing, and if it is FF, it will do another, and i noted it. here is a sample html page to show how it would work


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#myDiv {
position: relative;
height:250px;
width:250px;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(en abled=true, sizingMethod=scale src='myimage.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
#myDiv[id] {
background-image:url(myimage.png);
}
</style>
</head>

<body bgcolor="#0000CC">

<div id="myDiv"></div>

</body>
</html>

working demo here (http://methodcomptech.com/png test). I hope that helps you moosey. :P

[themoose]

Tried fireshark's method. Can somebody with IE6 test it out for me?

[iBrightDev]

Tried fireshark's method. Can somebody with IE6 test it out for me?

when using the js file, it takes it a sec to filter the png file, but if you use the css, it is immediate. just tested it.

but, once it loads, it looks great.

also, the "new notifyr" page sitll jumps to the right, and when you close the pop up, it jumps back to the left.

[themoose]

huh, what jumps?

[iBrightDev]

huh, what jumps?

the whole page. it does it in IE, not FF. crossbrowser chack bro.

[fireshark]

Yeah, probably implementing it in CSS is better, but the point of the script was to drop in and fix everything. It also breaks some things in CSS, and doesnt filter CSS defined background:'s and things like that.

[iBrightDev]

Yeah, probably implementing it in CSS is better, but the point of the script was to drop in and fix everything. It also breaks some things in CSS, and doesnt filter CSS defined background:'s and things like that.

that could be why it takes it a second longer to filter it in IE since he is using the js. :S not sure though.

[Nug]

Love the icons :D Very nice.. Up to the TM standed :D