Server Side Guy

If you compare your site in multiple browsers and find that the margins are twice as big in IE6, you’ve run into a big called the double margin IE6 issue. A known issue, it happens when you style a margin onto a floated element. Luckily it’s an easy fix: add the style attribute “display:inline” to the column with margin.

Then your IE6 version should obey your stylistic vision. Unless of course you have more style problems, but at least this won’t be one of them…

Facebook fans pages that have been designed by the user stand out much more than if you just used the pages provided by Facebook. I.E Wall, Info, Friend Activity, Photos… However if you can design your own page, you can create content only viewable to those who “like” you page while promoting the “like” action to get more content. This is accomplished through Facebook applications. There are a lot of options, but one that I feel is very under rated is “Static HTML Plus”. It’s free, and they don’t make you have their logo forever imprinted upon your material for it being free.

So after you created your page, you can install the application below to start making tabs:

https://apps.facebook.com/static_html_plus/

You can get more tabs by using the following applications:

https://apps.facebook.com/static_html_two/

https://apps.facebook.com/static_html_three/

https://apps.facebook.com/static_html_four/

I’ve seen these around quite recently and I wanted to know how they did it. “It” being a div that appears to have a dynamic background image. The background would ‘crop’ and scale as needed to fill the entirety of the window.

While looking for the ‘how-to’, I stumbled across a plugin that does this exact thing. Supersized Plug-in

Mystery Solved.

On a previous post I told you all about this amazing plugin I found that would create a slider that takes advantage of the iPad’s touch and drag functionality.

However, if you didn’t use it just for images and had the slides contain text, you may have noticed that the links within the slides would not work. This plugin appears as it was mainly created to swipe through images, and not necessarily for content with text links.

I went into the plugin (jquery.iphone-slide.js) and changed a few things so it would do my bidding:

OLD CODE:

helpers.goto_url(thislink);

NEW CODE:

var thislink = $(event.target).parent("a").attr("href");
if(!thislink){var thislink = $(event.target).attr("href");}
if(thislink){
   window.location(thislink); //similar behavior as clicking on a link
}

Turns out the __mouseup function was preventing the default action and the “helpers.goto_url” function only opened image links. But now it’s set up to do everything, Cheers!

There are a lot of sliders that can cycle through content that will work on the iPhone.  Many of these being powered by some kind of jQuery plugin.  However, I only found one that will actually include the functionality for the iPad to be able to use it’s swipe based interface. (click and drag to see more content)

Here is a link to the jQuery Simple iPhone-Slide plugin.  It has an excellent tutorial for such an awesome plugin.

http://jquery.hinablue.me/jqiphoneslide/

After including all the needed files, setting up the slider was as easy as the following function.  This is what I used for initialization:

$(document).ready(function() {
 
	$('#album').iphoneSlide({
		handler: "#slidePaging",
		pageHandler: ".slidePage",
		nextPageHandler : '.nextPage',
		prevPageHandler : '.prevPage',
		autoPlayTime: 9000,
		bounce: false,
                autoPlay: false,
		pager: {
	        pagerType: "dot",
	        selectorName: ".banner_pager",
	        childrenOnClass: "on",
	        slideToAnimated: true
	        },
		autoCreatePager: true,
                onShiftComplete: function(elem, page) {
                }
	});
});

When coding for mobile developments in flex (Flash Builder), I had a hard time populating the dataGrid element because it doesn’t use arrayCollections like lists do.  The data source is actually bounded to the IList data type.  An example of setting it up is listed below.

<s:Application
    <fx:Script>
        import mx.collections.IList;
        [Bindable] public var dataGrid:IList = new ArrayList([
            {firstName: "John", lastName: "Doe", phone: "1231231234", email: "test@test.com"},
	    // ... whichever variable names in the DataGrid
        ]);
    </fx:Script>
    <s:DataGrid id="dataGrid" dataProvider="{dataGrid}" width="100%" height="100%">
        <s:columns>
            <s:ArrayList>
		<s:GridColumn dataField="firstName"/>
		<s:GridColumn dataField="lastName"/>
		<s:GridColumn dataField="phone"/>
		<s:GridColumn dataField="email"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
</s:Application>

This DataGrid example has a column per property( GridColumn) and dataField attribute is used to select the dataProvider object property to display in that column.  The dataProvider is  a list of the object properties that are defined in the dataGrid (firstname, lastname,phone, email) and their values for that row.

Canonical URL tags help eliminate self-created duplicate content in the index, which is an important addition to good SEO practices.

In the newer version of wordpress (version 2.9+) they included and canonical URL function.  Since any good SEO plugin handles these links in a better format, you can just disable the auto generated one.  Adding the following anywhere in your theme’s functions.php will solve the problem splendidly:

# Remove canonical links function
remove_action('wp_head', 'rel_canonical');

Having an anchor within a div that has the overflow attribute set to ‘hidden’ via applying the equal height column method creates a unique problem.  When selecting an anchor, the columns get “chopped off” at the top as if the entire div moved up and is chopped because the overflow = hidden property of the container.
The culprit of this issue lies within the column that has the structure below:

padding-bottom: 2000em;     /* X + padding-bottom */
margin-bottom: -2000em;     /* X */

When the named anchor is clicked,  the overflow:hidden atrribute and the above CSS structure kills the layout.
So if you need anchor tags in your site, avoid the equal height column method, there are other ways to achieve the same thing.

If interested, here’s some documentation on the problem.  Click here

Note, this may not always be the solution, but it is the solution to something that puzzled me for a while.
The div I wanted to have the drop-shadow was inside a table which had border-collapse set to ‘collapse’.  Turning off the border collapse attribute made it work.  For some reason having that set meant that the box shadow doesn’t draw.
Mischief Managed

If your stuck on how to use expression engine variables dynamically in a php script, you can assign the variable to a php variable using a certain syntax and from there conform it however you like.  First off, make sure the EE template has PHP enabled and then pass it to the php code segment in the following fashion:

...template code...
{if title}
<?php
$phpvar = "{title}";
echo $phpvar;
?>
{/if}
... more template code...