One Of These Days http://www.oneofthesedaysblog.com I'm going to cut you into little peices Thu, 25 Jun 2009 07:57:13 +0000 http://wordpress.org/?v=2.7 en hourly 1 Cross Browser CSS Dropdown http://www.oneofthesedaysblog.com/cross-browser-css-dropdown/ http://www.oneofthesedaysblog.com/cross-browser-css-dropdown/#comments Sat, 28 Feb 2009 05:01:52 +0000 oneofthesedays http://www.oneofthesedaysblog.com/?p=65 The CSS dropdown from the last post works in all browsers except IE6! I’ve made a few minor changes to ensure it displays correctly in IE7 however.


.Navigation li ul {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #000000;
padding:4px;
position:absolute;
width:720px;
top:30px;
overflow:visible;
height:42px;
left:-135px;
z-index:10;
}

A z-index was applied to keep it above any content that might be below, and a left position was added to move the dropdown over slightly.

Now as for IE6, we can get it to work with some simple javascript. Not the most accessible solution but really, if you’re using IE6 and you have javascript disabled, you deserve it.

Using jQuery we can add the hover event to our list with a few lines

$(function() {
$(".Navigation ul li").hover(
function () {
$(this).css("overflow", "visible");
},
function () {
$(this).css("overflow", "hidden");
});
});

and voila! Simply setting the overflow property when each list element is hovered is enough to make the dropdown work.

Now if you don’t want the extra overhead of the jquery library you can use conditional comments to only grab it if they’re using IE.

<!--[if IE 6]>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".Navigation ul li").hover(
function () {
$(this).css("overflow", "visible");
},
function () {
$(this).css("overflow", "hidden");
});
});
</script>
<![endif]–>

]]> http://www.oneofthesedaysblog.com/cross-browser-css-dropdown/feed/ Pure CSS Dropdown for Firefox http://www.oneofthesedaysblog.com/pure-css-dropdown-for-firefox/ http://www.oneofthesedaysblog.com/pure-css-dropdown-for-firefox/#comments Fri, 27 Feb 2009 06:13:56 +0000 oneofthesedays http://www.oneofthesedaysblog.com/?p=58 Here’s a quick and dirty pure CSS dropdown that at present only works in Firefox. 

.Navigation li {
	position:relative; display:block;
	float:left;
	height:26px;
	overflow:hidden;
	display:inline;
	padding:0px 10px;
}
.Navigation li:hover { color:orange; cursor:pointer; overflow:visible;}

.Navigation li ul {
	background:#FFFFFF none repeat scroll 0 0;
	border:1px solid #000000;
	padding:4px;
	position:absolute;
	width:600px;
	top:30px;
	overflow:visible;
	height:42px;
}
.Navigation li ul li { display:inline; color:#000; }

That’s all the CSS needed, along with this HTML:


<div class="Navigation">
<ul>
<li><a>Home</a></li>
<li>
<a>About Us</a>
<ul>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
</ul>
</li>
<li><a>Products</a></li>
<li><a>Contact</a></li>
</ul>
</div>

By floating each list element as a block element, we can hide the sub menu by hiding the overflow content of the div. Hovering over an element sets overflow to visible, and so the sub menu appears.

Now if only it worked in IE..

]]> http://www.oneofthesedaysblog.com/pure-css-dropdown-for-firefox/feed/ Running YUI Rich Text Editor Inside Thickbox http://www.oneofthesedaysblog.com/running-yui-rich-text-editor-inside-thickbox/ http://www.oneofthesedaysblog.com/running-yui-rich-text-editor-inside-thickbox/#comments Wed, 04 Feb 2009 07:56:07 +0000 oneofthesedays http://www.oneofthesedaysblog.com/?p=45 The latest project at work required me to get a rich text editor (RTE) running inside jquery thickbox. After trying out a few different RTEs I finally settled on the Yahoo YUI editor as it looks the nicest, and is easily customized.

After 5 lines, YUI editor was up and running inside thickbox. Sweet, no problems there. However the insert image and link boxes failed completely, in all browsers.

The boxes were created and inserted alongside thickbox, instead of inside. Thankfully thanks to all of YUI editor’s events this was an easy fix.

editor.on('windowInsertImageRender', function() {
document.getElementById('dd-editor').appendChild(this.get('panel').element);
});

Here, “dd-editor” is the ID of the div surrounding by YUI editor and ‘editor’ is the name of my YUI editor object. We simply set it to listen to the ‘windowInsertImageRender’ event and, when it occurs, attach it to the same div that the editor is in.

That fixed, it seemed to be working very smoothly until, surprise, it fails in IE.

yui-thickbox-scroll-bug

When the thickbox is too small to hold all of the content and scrollbars appear, scrolling down creates all manners of positioning problems with the toolbar. Drilling down with the IE developer toolbar revealed that scrolling works down to the list element with a class of “yui-toolbar-groupitem”. It is the elements inside that bug out.

After an hour of trying various css positionings and styles, I managed to fix the content area and title bar in place with a bit of jquery.

$("#editor_editor").attr("position", "static")

A fix for the buttons was eventually found as well, however it isn’t so much a fix as it is a sluggish, ungainly hack.


$("#TB_ajaxContent").scroll(function () { editor.toolbar.collapse(true); editor.toolbar.collapse(false); } );

Hooking in to the scroll event on the thickbox window, each time it moves we collapse and then redisplay the toolbar. This causes the buttons to jump into the correct place at the cost of a very slow scrolling time.

Note: the above 2 lines need to be called after the editor has fulled rendered and only in IE. This can be done by using the windowRender event and a bit of jquery, like so:

if ($.browser.msie) {
editor.on('windowRender', function() {
$("#editor_editor").attr("position", "static");
$("#TB_ajaxContent").scroll(function () { editor.toolbar.collapse(true); editor.toolbar.collapse(false); } );
});
}

]]> http://www.oneofthesedaysblog.com/running-yui-rich-text-editor-inside-thickbox/feed/ Checking your account data with Zend_Http_Client http://www.oneofthesedaysblog.com/checking-your-account-data-with-zend_http_client/ http://www.oneofthesedaysblog.com/checking-your-account-data-with-zend_http_client/#comments Mon, 26 Jan 2009 10:15:49 +0000 oneofthesedays http://www.oneofthesedaysblog.com/?p=30 I live in a flat with 2 other avid internet users. Some months our bandwidth gets used up within a week yet my computer tells me I’ve only used a few hundred megabytes. In order to get accurate accountability for my internet usage, in comparrison to my flatmates, I wrote a PHP script to give me my usage as a percentage of the total usage for each day.

Our ISP provides a web portal which gives statistics such as daily and monthly usage. To get the statistics from my own usage, I installed vnstat.

To combine the 2 I decided I would use PHP as an excuse to try out the Zend_Http_Client component.

First off I needed to grab the stats from my computer. This is quite straightforward with the system() function.

<?php

ob_start();
system('vnstat -d -s');
$vnstat = ob_get_contents();
ob_end_clean();

?>

Output buffering is used to capture the information that the system command normally sends to the browser. As the system command only returns the last line of output from the command, we can get the entire output by using ob_get_contents().

The options for vnstat make it return statistics for just today (-d) and in short form (-s), looking like this

rx / tx / total / estimated
wlan0:
yesterday 162.76 MB / 78.25 MB / 241.00 MB
today 138.14 MB / 89.97 MB / 228.11 MB / 523 MB

Now we need to get just the total for today:

<?php

//make an array of the output
$vnstatComponents = split("/", $vnstat);
//get today's usage (2nd to last element of the array) and remove whitespace
$netUsage = trim($vnstatComponents[count($vnstatComponents) - 2]);
//remove 'MB', giving us just the number
$myUsage = substr($netUsage, 0, strlen($netUsage) - 3);

?>

We’re now ready to start using Zend_Http_Client. 

<?php

//open a link to isp website
$client = new Zend_Http_Client("https://the.vodafone.co.nz/acnts/myaccounts.pl/login");
$client->setMethod(Zend_Http_Client::POST);
$client->setParameterPost(array(
    'login'  => 'myusername',
    'password' => 'mypassword'
));
$response = $client->request();

//grab our cookies
$cookiejar = Zend_Http_CookieJar::fromResponse($response, $client->getUri());

?>

The link we open a connection to is the link that the login form will submit to. Firebug can be handy to quickly find this out. You’ll also need to set the array keys in the setParameterPost method to match the names of the username and password fields on the login form.

The last part of the code is what will enable us to persist our login credentials. Zend_Http_CookieJar is fairly self explanatory in it’s name. We pass in the request object and the uri of the site we’re posting to and it will store the cookies that the browser would receive if we were actually visiting the site.

Now let’s try and log in to the usage page with our new cookies.

<?php

//if we're logged in ok, open account page
if ($response->getMessage() == "OK") {
    $client = new Zend_Http_Client("https://the.vodafone.co.nz/acnts/myaccount-int.pl/usage-data");
    $client->setCookieJar($cookiejar);
    $usageResponse = $client->request();
}

?>

And that’s it! We’ve now got an object that contains the entire content for the page we specified in the Zend_Http_Client constructor. Now this data might be a little unwieldy to dissect so we can use another handy Zend component, Zend_Dom_Query.

<?php

$dom = new Zend_Dom_Query($usageResponse->getBody());

?>

If you have any experience with CSS then the usage of this object for getting data will seem quite natural.

<?php

$dom->query('.tdDataRight');

?>

This will return an array of all elements with the class ‘tdDataRight’.

While this example is rather specific, it shows how to use Zend_Http_Client in a way that will no doubt apply to many other situations.

]]> http://www.oneofthesedaysblog.com/checking-your-account-data-with-zend_http_client/feed/ New on the blog scene http://www.oneofthesedaysblog.com/new-on-the-blog-scene/ http://www.oneofthesedaysblog.com/new-on-the-blog-scene/#comments Sun, 25 Jan 2009 02:24:08 +0000 oneofthesedays http://www.flataccounting.net/blog/?p=1 After reading many blogs for many months I have finally managed to enter the blogosphere.

First, a little about myself. I’m currently in my third year of studying Software Engineering at the University of Auckland, New Zealand. I’ve also been doing freelance web development for the better part of 4 years. I also have a job as a developer/IT support guy at a company that deals with online learning solutions.

I love to work with PHP; it’s a very no fuss language that gives you a lot of flexibility, while still providing the strength required to make complex applications. As far as frameworks go, I’m all for them and use the Zend Framework.

I’ve also worked with the .NET framework with C# for both web and windows development and I have to say that I really enjoy using it. It’s a very powerful system that makes coding easy and fun. Unfortunately it’s not so great to develop from a Linux machine, which is my primary computer, and the licensing costs are only viable when you have a company paying for everything.

If you’re interested in some of my work, check out my portfolio at www.spdalton.com.

Now that work is out of the way, some more about my personal self.

I’m an absolute music nut and spend my days listening to the likes of Pink Floyd, Led Zeppelin, Beethoven, Bach, Miles Davis, BB King, Tool, The Doors, Don McLean and other such blues/classic rock/classical/jazz bands, artists and composers. I’ve been learning Japanese for about 8 years now and really enjoy doing so. I play guitar in a band too.

What’s my reason for blogging? Many times I’ve found a solution to a problem that I simply was not able to find on the internet. I hope that by posting about problems and solutions that I come across, it will help others who find themselves in the same spot. As well as this, it’s a place for me to collect my thoughts and write about things that interest me, and hopefully others.

]]> http://www.oneofthesedaysblog.com/new-on-the-blog-scene/feed/