Posts filed under ‘non php code’

reorder taskbar buttons

if you are like me who expect buttons in my taskbar to be a certain order, you will find it frustrating that you can’t easily reorder them. it will be nice if they implement the drag and move functionality with those like the tabs in firefox. but even in vista they didn’t do anything like that. but taskArrange seems to be a good tool to use. you don’t need to install anything. just unzip the downloaded file and double click on the exe that best fits your criteria to easily reorder your taskbar buttons.

just want to strangle IE

for a minor revamp of the web application i’m working on at work, i want to implment this css vertical menu. i was thrilled to find that it works great in IE 5.5 which is something we still need to support. after i put everything together, i realized it is not going to work due to this notorious SELECT z-index IE bug. basically IE ignores the rule of z-index when it comes to select tag. this means when the css menu popup out in the area where there is a select tag, in IE, the select tag will be rendered on top of the popup menu. the ONLY way you can place a layer on top of any SELECT tag in IE is by adding an iframe in the html source on top of the select. altho there is a pure css way to fix this issue, it’s far from pretty.

i’ve applied the fix to my css vertical menu now and it works locally. BUT i know i’m gonna run into more issues. because the app will be on a secure server (https) and in IE it will show security alert when you have iframe tag without the src attribute. i ran into this problem before trying to use the thickbox script. i had to put a real https URL in the iframe tag for IE to shut up. but i really don’t know how everything’s gonna turn out until i’ve switched everything over and the app is deployed to the secure server.

this is the wonderful IE. you have to use ugly hacks to fix its shortcomings and then add more unnecessary code to get around the problem the hacks cause.

isn’t it lovely?

the good way to fix float issue in container

MUST LEARN CSS TRICK!!

this issue has been bugging me for too long. i finally got off my lazy butt and researched for a solution. if you do a lot of css layouting, sooner or later you will run into this issue.

How To Clear Floats Without Structural Markup tutorial gives the best solution i can find for it.

in case that site goes down or disappears, i’ve saved a backup copy here. it’s too precious to be lost :)

and yes i’m actually working on a new layout for pure essence. WOW the sun is rising from the west. FYI i’m ditching support for 800?600 resolution in the new layout. if you still use 800×600 you either need to get a bigger monitor or use the horizontal scrollbar.

OH YEA, i also turned big fat 25 today! i had a lot of fun playing cards with family. we went to this Sushi House restaurant in Cedar Rapids. it is THE BEST place for Japanese and Chinese food around here!!! SERIOUSLY!

jquery and script.aculo.us

if i ever need any interactive javascript, i will definitely choose jquery.

it is the new way for javascript coding. look at these awesome dynamic interaction that can be accomplished in a few lines of code with jquery.

jquery.com

aww i just found another js library for similar task. this one might be even better developed: script.aculo.us

label IDs and input effects

this is nothing new but i didn’t learn about it until yesterday and it totally made my day. basically if you use code like:
<label for="checkme">Check me:</label> <input type="checkbox" id="checkme"/> <br /> <br /> <label for="radio1">Radio 1:</label> <input type="radio" id="radio1" name="something" value="on"/> <label for="radio2">Radio 2:</label> <input type="radio" id="radio2" name="something" value="off"/>
clicking on the corresponding label text will check/uncheck the checkbox & radio buttons for you.

click for an example.

as long as the label for attribute matches the id attribute inside of the input tag, clicking on the text always have some type of effect on the input field. mostly just set the focus on the input field. the coolest ones are the checkbox and the radio buttons as you can see in the example.

wp lightbox plugin (make css validate)

Rainie Yang

wee - i installed this really cool
lightbox wordprerss plugin. it overlays photos in your wordpress. it’s so awesome. the girl in this photo is a chinese singer named rainie yang. if you wish to hear some of her songs,
go here.

inline binary data display

would it be nice that all browsers can handle inline binary data display? actually just images will be fine. so no more image uploading.. just do something like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAAAAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D" alt="" />

demo:

this particular line is supported in firefox, safari and konqueror but not IE (yet). I will try out IE 7 next week. to read more interesting stuff about finding the limits in web browsers, learn about the acid2 test.

edit: found a very unpretty way to embed inline images in IE but bow to the author who made it work.

time calculator

i had to add some time in hh:mm:ss format at work. i was like there was no way i would add those manually. so i looked for a program/script to do the work. since i didn’t find anything, i wrote my own.

here it is.

the most time consuming part is not the addition (which is very easy) but the frontend javascript to move the cursor & insert 10 more rows when the link is clicked. those were fun to write :)

rel=”external”

for those who did not know this trick (someone emailed me and asked), I will share it with you here. since xhtml 1.0 strict does not allow the tag target=”_blank” you can still open links in new windows by using the tag rel=”external” to accomplish the same thing. but you will need to link an external js.

create a .js file with the content
function externalLinks() { if (!document.getElementsByTagName) return; var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") anchor.target = "_blank"; } } window.onload = externalLinks;

save & upload it. then link it in your header like any other external javascripts. that’s all :)

XHTML strict validated flash code

i put up a slideshow of the silver jewelry club photos i’ve saved. after i added the code given to me directly from slide.com, my site no longer validates with XHTML 1.0 strict rules. So I researched on valid flash embed code and found this nifty javascript trick for embedding flash.

The code given to me from the slide.com:
<embed src="http://widget.slide.com/widgets/slideticker.swf" quality="high" scale="noscale" salign="l" flashvars="site=widget.slide.com&channel=181375" wmode="transparent" bgcolor="#f5f5f5" width="205" height="97" name="flashticker" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>

The final code I put up that works & validates:
<div id="slideshow">If you don't see the slideshow, <a href="http://www.flickr.com/photos/68167759@N00/">click here.</a>.</div> <script type="text/javascript"> // <![CDATA[ var fo = new FlashObject("http://widget.slide.com/widgets/slideticker.swf?site=widget.slide.com&amp;channel=181375", "flashticker", "205", "97", "6", "#ffffff"); fo.addVariable("wmode", "transparent"); fo.addVariable("quality", "high"); fo.addVariable("scale", "noscale"); fo.addVariable("salign", "l"); fo.addVariable("align", "middle"); fo.write("slideshow"); // ]]> </script>

given that I’ve properly uploaded flashobject.js and included in the header of my HTML with:
<script type="text/javascript" src="/js/flashobject.js"></script>

Page 2 of 3«123»