Centering div’s content on a page

Centering a div on a page is easy.  If you don’t know how to do it, a quick google search will turn up tons or answers for it.

Today, I had to stop and think for a few minutes.  I wanted to center a div on a page, but I didn’t know the exact width that the div needed to be.  This proposed a slight problem to me because the contents of my div happened to not fill up the entire div.  So if I just centered the div on the page using margin:auto, there would be a huge whitespace off to the right side.

I guess I could have accomplished this in javascript, but since I wanted to do it in CSS, I did, and thought I would share.

You first need to set a container div to 100%.

<div style=”width:100%”>

Next, you need to get the width of the div contents and reposition the div to 50% of the screen.  We get the div’s contents width by using width:auto.  This can only be used with float: and with position:absolute.

<div style=”float:left; width:auto; position:relative; left:50%;”>

Now we need to backtrack out content div to be 50% less than it’s current position.

<div style=”float:left; position:relative; left:-50%;”>

You final code should look like this:

<div style=”width:100%”>

<div style=”float:left; width:auto; position:relative; left:50%;”>

<div style=”float:left; position:relative; left:-50%;”>

Content Here

</div>

</div>

</div>

A little cumbersome, but it works.

Tabbing in MODx Manager (Administative)

One of the most annoying things about text boxes on the internet that seek to mimic a desktop publisher, is that you can never TAB inside of them.  The TAB always takes you to the submit button or the to the next form element.

Seriously, how do they expect you to keep you code nice and neat when you can’t TAB?

If you are using MODx….or any webpage that has a TEXTAREA…..where you find yourself needing to TAB, here a little javascript to fix all your troubles:

<script language="javascript" type="text/javascript">
function check(e){
if(e.keyCode == 9){ //If TAB, insert a TAB instead of going to next FORM field
e.returnValue = false;
t = e.currentTarget;
i = t.selectionStart;
text = t.value;
t.value = text.substring(0, i) + "\t" + text.substring(i);
t.setSelectionRange(i+1,i+1);
}
}
</script>

Then in your textarea element, put this attribute: onkeydown=”check(event)”.  So it looks like this:

<textarea name="code" onkeydown="check(event)">Code Here</textarea>

This only works in Firefox, Chrome, and possibly Opera and Safari.  Internet Explorer will need additional code as it does not handle selectionStart.   I have only tested in Chrome, so please post your findings in the comments so others can stay up to date.  You can do this in Internet Explorer, but it will require additional code.

Using WordPress inside of MODx

Well, this was a terrible implementation! 🙂  I wish that RSS feeds provided a more bandwidth friendly way to get information.

Please do not use the information from this post.  Instead, check out our WordPress Tools at http://allebrum.com/current_projects/allebrum-wordpress-tools-for-modx.  It was written for use in MODx so that is what the documentation targets, but it can be used anywhere.

WordPress (well, most blogs for that matter), do not make a good way to get some information.  So if you use Allebrum’s WordPress  Tools, please provide some feedback on ways that it can be improved so others can benefit.  Some calls seem to take a little while to process, but I guess that’s the nature of XML-RPC sometimes…..or Godaddy shared hosts, heh.  Not really sure which.  I should probably check into getting off a shared server at some point real soon!

This is not a complete solution!  It should get you started in the right direction.  I will probably add more to it in the future.

Step 1:  Log into your MODx manager and then browse to Elements>Manage Elements>Snippets>Add New Snippet.

Step 2: Add the following code into your snippet then save it as “WordPress”

<?php
$xmldoc = new DOMDocument();
$xmldoc->load($url);
$info = "";
$content = "";
foreach ($xmldoc->getElementsByTagName('item') as $feeditem){
  $info .= '<h2>'.$feeditem->getElementsByTagName('title')->item(0)->nodeValue.'</h2>';
  //$info .= '<h2>'.$feeditem->getElementsByTagName('description')->item(0)->nodeValue.'</h2>';
  $content = $feeditem->getElementsByTagName('encoded')->item(0)->nodeValue;
  $info .= $content;
}
return $info;
?>

Step 3: Create a new Resource and put the following code in there:

[[Wordpress? &url=`https://allebrum.wordpress.com/feed/`]]

removeEventListener that was defined with an inline function

Removing an event Listener in ActionScript 3 or Flex that was defined with an inline function is a snap!

I love Event Listeners….”They’re the best”, as Nacho Libre would say. One thing I hated about them was that I always had to create a separate function for the function call. I tried to stay away from inline functions because it is important to clean up after yourself, so when you don’t need the function any longer, you should remove it. Until I stumbled upon this very simple technique, I was always disheartened every time I searched on Google, only to find, “Stay away from inline function in event listeners because there is No Way to remove them.”

Here is the solution:

this.addEventListener(Event.ENTER_FRAME, function cool(e:Event):void{
   this.removeEventListener(Event.ENTER_FRAME, cool);
});

That’s it! Just give your inline function a name. Then you can reference it later to remove the event listener in ActionScript 3