Wednesday, February 23, 2011

FAQs with Jquery

Step 1.

Create a page with FAQs formatted in the following manner:

  <div class="faq">
<div class="question">Question here</div>
<div class="answer">Answer here</div>
</div>

Add an ordered list at the top of the page with id="questions":


<ol id="questions">
</ol>


Then, add this javascript to your page (with jQuery already loaded, of course):
<script type="text/javascript">
$().ready(function(){
$('.faq').each(function(index, value){
$('#questions').append($("<li>").append($("<a>").attr('href', '#faq' + index).text($(value).find('.question').text())));


$(value).find('.question').text((index + 1) + '. ' + $(value).find('.question').text());
$(value).find('.answer').after(
$("<a href='#' class='top'>Top</a>")
);
$(value).before($("<a name='faq" + index + "'></a>"));
});
});
</script>
And here's some CSS to make it look pretty:
<style>
ol#questions {
margin-left: 40px;
margin-bottom: 80px;
}

ol#questions li {
font-size: 16px;
line-height: 200%;
}

div.faq {
border-bottom: 1px solid #CCCCCC;
margin: 20px;
padding-bottom: 10px;
font-size: 16px;
}

div.question {
font-weight: bold;
color: #078CF9;
margin-bottom: 5px;
}
div.answer {
margin-bottom: 5px;
}
</style>


Wednesday, March 11, 2009

Getting PDT into Symfony mode

Here's how to setup Eclipse PDT to ease Symfony development.

  1. Download an all in one PDT distro from http://www.eclipse.org/pdt/downloads/
  2. Install RSE so you can develop directly on a remote server or sync your current project. (update site: http://download.eclipse.org/dsdp/tm/updates/3.0/, search for "Remote" when installing to make sure you get all aspects of the plugin. Make sure you select the RSE core!)
  3. Install Terminal so you can SSH to a remote server and execute Symfony commands. (Update site is the same as for RSE.)
  4. Install SQLExplorer to talk directly to your database from Eclipse (update site: http://eclipsesql.sourceforge.net/)
  5. Follow the directions at (http://trac.symfony-project.org/wiki/SymfonyAndPDT) to install the YAML editor and get code completion working. This will only work if you are developing a project on your machine. If you're developing directly on a server using RSE, this method will not work.
  6. Add the symfony code completion templates at (http://www.symfony-framework.com/2008/06/03/speed-symfony-developing-with-eclipse-snippets-templates/) to at least get some snippet help when developing remotely.

Upgrading sfFlickrGalleryPlugin

Well, I figure it's probably time for another post, and perhaps a real one this time!

Recently I got into Symfony and wanted to install a photo gallery type plugin in one of my projects. I took a look at sfFlickrGalleryPlugin which is compatible with Symfony 0.1.1 but my project is in crispy new 1.2.4. I upgraded the plugin manually for now, and I decided it would be a good idea to make a post on how this is done. (It was not exactly trivial.)

Here's what it'll take for you to get the plugin to work in 1.2.4:

  1. Install the plugin in your project and follow the rest of the directions in the plugin README.
  2. Modify Request.php in the included Phlickr library by changing the submitHttpPost function to look as follows:


    static function submitHttpPost($url, $postParams = null, $timeout = self::TIMEOUT_TOTAL)
    {
    $ch = curl_init();

    // set up the request
    curl_setopt($ch, CURLOPT_URL, $url);
    // make sure we submit this as a post
    curl_setopt($ch, CURLOPT_POST, true);
    if (isset($postParams)) {
    curl_setopt($ch, CURLOPT_POSTFIELDS, $postParams);
    }
    else curl_setopt($ch, CURLOPT_POSTFIELDS, '');



    (solution found at http://www.milk-hub.net/blog/2008/08/26/curl_error_26#comments-77)


  3. Modify Photo.php also in the Phlickr library to include:

    public function getFarm(){
    if (!isset($this->_cachedXml['farm'])) {
    $this->load();
    }
    return (integer) $this->_cachedXml['farm'];
    }


  4. Modify line 547 in Photo.php's buildImgUrl so that it looks as follows:

    $url = sprintf("http://farm%d.static.flickr.com/%d/%s_%s%s.%s",
    $this->getFarm(), $this->getServer(), $this->getId(), $this->getSecret(), $sizeStr, $type);


    (Discovered here: http://forum.symfony-project.org/index.php/m/53102/)
    You need to use %s instead of %d because Flickr has exceeded integer bounds or photo ids. (http://andrewsblog.org/2007/12/30/use-bigint-for-flickr-photo-ids/)



  5. Change all references to $this->setFlash in the plugin's modules to be $this->getUser()->setFlash

That's it! You should be good to go!

Sunday, August 3, 2008

My first post

This is my first post on my site. I'm testing it to see how it will look with the CSS and XHTML. Let me know what you think. Testing, testing, 123.
2008 joshnankin.com | Based on template from Free CSS Templates