Warning: strpos() [function.strpos]: needle is not a string or an integer in /home/chaosorg/bugfeatures.com/blog/index.php on line 49
Bug Features - Free bug report and feature request service for your Web site. - Improved IE select trick
Improved IE select trick 
I was experiencing problems with the blur handler not firing inside iframes so this is my new and improved version of the code below:


function grow_select(){
if (document.all){
$('product').style.width='auto';
$('product').style.position='absolute';
$('product').style.zIndex=100;
}
}
function shrink_select(){
$('product').style.position='relative';
$('product').style.width='150px';
}


function checkLocation(e)
{
if (e.srcElement) {
el = (e.srcElement);
}
else if (e.target) {
el = (e.target);
}
if (el != \$('product')){
shrink_select();
}
}

Event.observe(document, 'mousemove', checkLocation);

  |  [ 0 trackbacks ]   |  permalink  |  related link  |   ( 3 / 1029 )
IE truncated select list workaround 
Ever had a drop down list that you needed to set the width for? Then you probably noticed that options that are longer than the desired width are cropped in IE (of course firefox handles this problem nicely - the select list is the correct width).

Well under duress from a client I came up with a simple solution - set the width dynamically on rollover and reset it on the obblur event.

Here's a simplified version of the javascript:


function grow_select(el){
el.style.width='auto';
el.style.position='absolute';
el.style.zIndex=100;
}
function shrink_select(el){
el.style.width='50px';
}

And an example select list

<select name="amount" style="width: 50px;" onfocus="grow_select(this)" onblur="shrink_select(this)">
<option value="1">One</option>
<option value="1000000">A Million</option>
<option value="1000000000000">A Million Million!</option>


Of course some improvements would be:

* Store the old width in a variable
* Use a window timeout to auto-reset the element if a mouseover check fails


  |  [ 0 trackbacks ]   |  permalink  |  related link  |   ( 3 / 1033 )
IE7 Hack 
There's always some DHTML positioning that just doesn't work in all browsers... here's a nice little workaround for IE6, IE7, Safari and Firefox:


#products_menu{
margin-left: -90px; /* IE7 */
_margin-left: 410px; /* IE6 */
}

*:lang(en) #products_menu{
margin-left: 410px !important /* FF */
}
#item:products_menu {
margin-left: 410px !important /* SAFARI */
}

  |  [ 0 trackbacks ]   |  permalink  |  related link  |   ( 3 / 1028 )
Floatbox & Prototype 
Having trouble using floatbox AND prototype? Well I was until I found the offending code in floatbox and patched it. Basically, floatbox was trying to run prototype's onload handler by assuming it was a simple function...

Change this:

fb_prevOnload = window.onload;
window.onload = function() {
if (typeof fb_prevOnload === 'function') fb_prevOnload();
initfb();
};


To this:

Event.observe(window,'load',function(){initfb();});

There, much better :)
  |  [ 0 trackbacks ]   |  permalink  |  related link  |   ( 3 / 1014 )
sfGuard - adding email to the user profile 
There are lots of scattered bits of information about how to do this, so I thought I'd write a quick all-in-one guide...

1. Install sfPropelAlternativeSchemaPlugin from the command line php symfony plugin-install http://plugins.symfony-project.org/sfPr ... hemaPlugin

2. Update the plugin from the repository (no, the PEAR 'stable' version doesn't work in Windows) http://svn.symfony-project.com/plugins/ ... emaPlugin/ (copy the three files in the lib folder to your plugin lib folder)

3. Create a sfGuardPlugin_schema.custom.yml in your config folder

4. Enter your new sfGardUser fields:

propel:
sf_guard_user:
_attributes: { phpName: sfGuardUser }
firstname:
type: VARCHAR
size: 255
lastname:
type: VARCHAR
size: 255
email:
type: VARCHAR
size: 255


5. Run symfony-propel-build-all

6. Create a sfGuardUser module in your app

7. Copy the generator.yml file from the plugins/sfGuardUser/config folder to your sfGuardUser/config folder

8. Add your new fields to the config:


display:
"NONE": [ _firstname, lastname, email, username, _password, _validate_password ]


9. You're done!
  |  [ 0 trackbacks ]   |  permalink  |  related link  |   ( 3 / 1027 )
IE Tester lets you run multiple versions of IE 
I usually use a VMWare machine to test Web sites on IE6 - but that's a whole lot of resources to dedicate to a single app. I recently discovered IETester and I have to say I'm impressed - it runs IE5.5, 6, 7 and 8 all in the one app... now all I need is a FireFox tester and life will be complete!


  |  [ 0 trackbacks ]   |  permalink  |  related link  |   ( 3 / 999 )
Ultra-lightweight Scriptaculous Horizontal Accordion 
After trying this one out and having very little success on anything but the most simplest of pages, I decided that I had to go it alone...

And what I got was a rock solid horizontal accordion in about 30 minutes and less than 100 lines of code - including CSS, HTML and JavaScript!

So here it is:

<div class="acc_container">
<div class="acc_handle" id="handle_1">H1</div>
<div class="acc_panel" id="panel_1">Content 1</div>
<div class="acc_handle">H2</div>
<div class="acc_panel">Content 2</div>
<div class="acc_handle">H3</div>
<div class="acc_panel">Content 3</div>
</div>

<style>
.acc_container{
height: 500px;
min-height: 500px;
}

.acc_handle{
float: left;
width: 55px;
height: 500px;
min-height: 500px;
background-color: #dddddd;
cursor: pointer;
border: solid 1px #666666;
font-size: 9px;
}

.acc_handle:hover{
background-color: #eeeeee;
}

.acc_handle_active{
float: left;
width: 55px;
height: 500px;
min-height: 500px;
cursor: pointer;
border: solid 1px #66bb66;
font-size: 9px;
background-color: #ddeedd;
}

.acc_panel{
float: left;
}
</style>
<script>
function acc_open(event){
var element = Event.element(event);
x= get_nextsibling(element);
$$('.acc_panel').each(function (el) {
if (el != x && el.style.display != 'none'){
new Effect.Squish(el);
}
});
$$('.acc_handle_active').each(function (el) {
el.className='acc_handle';
});
if (x.style.display == 'none'){
new Effect.Grow(x);
element.className='acc_handle_active';
}
}

function get_nextsibling(n){
x=n.nextSibling;
while (x.nodeType!=1){
x=x.nextSibling;
}
return x;
}
Event.observe(window,'load',function(){
$$('.acc_handle').each(function (el) {
el.observe('click', acc_open);
});
$$('.acc_panel').each(function (el) {
el.style.display = 'none';
});
new Effect.Grow($('panel_1'));
$('handle_1').className='acc_handle_active';
});

</script>


Of course, you can style this with active and hover classes etc...
  |  [ 0 trackbacks ]   |  permalink  |  related link  |   ( 3 / 995 )
Symfony propel select MAX() 
I know it's simple but it's one of those things you need to do often but not often enough to commit the technique to memory. So this is a code snippet for those times...
//get most recent sales date
$connection = Propel::getConnection();
$c = new Criteria();
$query = 'SELECT MAX(%s) AS max FROM %s';
$query = sprintf($query, PurchasePeer::FINISH_DATE,PurchasePeer::TABLE_NAME);
$statement = $connection->prepareStatement($query);
$resultset = $statement->executeQuery();
$resultset->next();
$this->sales_date = strtotime($resultset->get('max'));

  |  [ 0 trackbacks ]   |  permalink  |  related link  |   ( 3 / 1080 )
Upload from one Symfony backend to another domain frontend 
I have a backend for 7 domains sitting on its own domain - with all 8 domains running inside the one Symfony installation.

The problem we faced was how to upload files inside an FCKedtor in the backend domain and have the frontend domains pick up the files without exposing the backend domain in the image tag SRC attribute.

For some of the sites we did this on an ad hoc basis using readfile within the view - but this was for images uploaded into the database, so we knew the record ID from the URL.

When using FCKedit we don;t know anything about the files until we pull the HTML out of the database and parse it.

After much deliberation the solution was to use a filter...

class backendAssetsFilter extends sfFilter
{
public function execute ($filterChain)
{

// execute next filter
$filterChain->execute();

//sfLoader::loadHelpers(array('Url'));
$local_url = "/uploads/assets/";
$readfile = '/home/asset?file=';
$response = $this->getContext()->getResponse();
$response->setContent(str_ireplace($local_url, $readfile, $response->getContent()));


}
}


This filter simply replaces the /uploads/assets string with a URL that performs the readfile. As the URL can contain subfolder names, the filter works for /uploads/assets/images as well as /uploads/assets/flash etc.

And while it is a bit of a hit on the server, it works across the whole domain for all HTML content managed by FCKedit., which is worth it :)
  |  [ 0 trackbacks ]   |  permalink  |  related link  |   ( 3 / 1025 )
Using view helpers from a controller revisited 
Damn, I should have realised you can call url_for() from a controller - you just have to load the helper first!

sfLoader::loadHelpers(array('I18N', 'Url'));

url_for('@somerouting')

  |  [ 0 trackbacks ]   |  permalink  |  related link  |   ( 3 / 1018 )

Back Next