flash carousel with dynamic data

so in this project i'm working on, the client wants a flash carousel of images. easy right? easy if the images don't have to change. my problem here is that the images needs to be replaced everytime the user clicks on a tab.

so for example, if i click on a "celebrity" tab, it'll show me images of the recent celebrities added. same goes if i click on "photos", "groups", and etc.

so here's how i did it:

i used flShow Carousel for the flash carousel, jQuery and RoR.

first, i embedded the flash carousel in my index.html.erb.

<div style="width:605px;height:200px;">
<object width="605" height="200">
<param name="movie" value="/flash/Carousel.swf">
<param name="flashvars" value="xmlfile=<%= url_for :action => "carousel_data", :type => 'Person', :only_path => true %>"/>
<embed src="/flash/Carousel.swf?xmlfile=<%= url_for :action => "carousel_data", :type => 'Person', :only_path => true %>" width="605" height="200">
</embed>
</object>
</div>

then, i added a method in my controller to generate the xml.

def carousel_data
@data = params[:type].constantize.find_recent

render :file => "data.xml", :layout => false
return @data
end

then, i added my jQuery script binded to the onclick event of each tab.

embed_flash = '<div style="width:605px;height:200px;"><object width="605" height="200"><param name="movie" value="/flash/Carousel.swf"><param name="flashvars" value="xmlfile=<%= url_for :action => "carousel_data", :type => 'Blog', :only_path => true %>"/><embed src="/flash/Carousel.swf?xmlfile=<%= url_for :action => "carousel_data", :type => 'Blog', :only_path => true %>" width="605" height="200"></embed></object></div>';
$('#coverflow').html(embed_flash);
return false;

in my data.xml file, i added the following:

<slide_show>
<% @data.each do |d| %>
<photo><%= d.image.url(:small) %></photo>
<% end %>
</slide_show>

for more info on the options for configuring the flShow Carousel through xml, view the flShow docuwiki

ror's javascript_tag and html script tag

I had this dilemma in my current project. Somebody created a variable, assigned some stuff to it and placed it in an separate js file. Now in the html file (erb file in ror), he used the ff:

<% javascript_tag do%>
//some javascript stuff here
<% end %>

This returned the ff:

<script type="text/javascript">
//<![CDATA[ //some javascript here //]]>
</script>

It rendered the correct functionality on FF but it won't render on IE (6 & 7). Didn't realize the solution was that simple. lol! I just had to change his code in the main html page to the ff:

<script type="text/javascript">
//some javascript here
</script>

voila! it worked! :D

check box list in RoR

<% form_for :consult, :url => results_consults_path do |f| %>

1. Please select your gender

• <%= f.radio_button :gender, "F" %> Female


• <%= f.radio_button :gender, "M" %> Male

...
...

18. Do you have any of the following hair conditions?

• <%= check_box_tag "consult[conditions][]", 'oily' %> oily


• <%= check_box_tag "consult[conditions][]", 'dry' %> dry


• <%= check_box_tag "consult[conditions][]", 'chemically_dry' %> chemically dry


• <%= check_box_tag "consult[conditions][]", 'dandruff' %> dandruff


• <%= check_box_tag "consult[conditions][]", 'split_ends' %> split ends


• <%= check_box_tag "consult[conditions][]", 'irritation' %> irritation

...
...

<% end %>

this will result into:

Parameters: {"consult" => {"conditions" => [oily, dry]}}

installing flash plugin for linux

1) check adobe's site for the latest flash player for linux and download it.
2) open the terminal
3) change directory to the directory where you saved the plugin file
4) type in sudo dpkg -i install_flash_player_10_linux.deb
*substitute install_flash_player_10_linux.deb with the plugin's filename

how to unzip a tar.gz file

1) open terminal
2) change directory to the directory where you saved the tar.gz file
3) type in tar -xzf foo.tar.gz
*substitute foo.tar.gz with the filename of your tar.gz file

clearing the search field on focus

as i was doing a project, the client wanted the search field to display "search for..." on page load. that's quite easy. so we just added a default value. now they wanted that default value to be cleared when the user focuses on the search field. the first thing we did, we added an attribute to the input tag. "onfocus" was set to change the value to blank.

since it was a search field, the client requested that an autocomplete functionality be added. that was cool. there was a jquery plugin that did just that. so i went ahead and added the plugin and tested the app. now i discovered that when i clicked on one of the results, instead of the value of the result being transferred to the search field, the search field was blank. this was due to the "onfocus" attribute that was added before.

as i'm pretty new to jquery, i decided to experiment with .bind function for 'onfocus'. this didn't work. so i tried some other ways but still couldn't find one that worked. then i finally gave up and asked google for help. so here's the code for clearing the search field on focus.

$("#s").focus(function() {
if( this.value == this.defaultValue ) {
 this.value = "";
}
})

i got the above code from this blog.

first things first

i created this blog not for other people but for me. i have been in the IT industry for quite some time now and i have just realized (after so long) that i need a place to keep the stuff that i find or to keep the stuff that i discover how to do. i'm very forgetful. so this should help me remember.

if you do find my posts useful, then i'm glad i've helped in some way.