Kivanc Ozuolmez

As you see on the right side I’ve many widgets and planning to add some more. But I think having so many widgets, especially if they are tall, is not visually so nice and effective. I searched for anyone who had the same problem and found Chris’s blog and his a brilliant solution,  “Collapsible Widgets”.

The idea is really nice but on the other hand, setting the display style directly to none or block causes sharp and graceless transition. Hence there are many js codes for animated div transitions; I decided to go for another solution to collapse/expand the widgets with animation. After a quick search I found a handy animation on DynamicDrive.

The rest of work is just to place these js files correctly into BlogEngine and configure it. To do this, fist; add these two js files into js folder (create a new folder named as js in the webroot ) in your webapplication’s root.

Then we need to add these js files into the generated pages on runtime. BlogEngine has a nice page structure and so easy to add js files with the AddJavaScriptInclude function in BlogEngine.Core/ Web /Controls/ BlogBasePage.cs file. Add the following lines to the BlogBasePage.cs in line 89.

   1:  //add JS files for animatedPanel

   2:  AddJavaScriptInclude(Utils.RelativeWebRoot + "js/jquery-1.2.2.pack.js");

   3:  AddJavaScriptInclude(Utils.RelativeWebRoot + "js/animatedcollapse.js");

   4:   

   5:  //and the original code goes on

   6:  AddJavaScriptInclude(Utils.RelativeWebRoot + "blog.js");

   7:  if (User.IsInRole(BlogSettings.Instance.AdministratorRole))

Then, we need to configure widgets to toggle theirselfs to collapse/expand. Editing App_Code/ Controls/ WidgetBase.cs as following will be enough to complate our changes.

   1:  if (ShowTitle)

   2:     //Change the title text to an active link to toggle collapse/expand toggle

   3:     sb.Append("<a href=\"javascript:animatedcollapse.toggle('widgetContent" + WidgetID + "')\"><h4>" + Title + "</h4></a>");

   4:          

   5:     //old title

   6:     //sb.Append("<h4>" + Title + "</h4>");

   7:  else

   8:     sb.Append("<br />");

   9:   

  10:     //Change the contentDiv and give the id starts with widgetContent

  11:     sb.Append("<div  id=\"widgetContent" + WidgetID + "\" class=\"content\">");

  12:   

  13:  writer.Write(sb.ToString());

  14:  base.Render(writer);

  15:  writer.Write("</div>");

  16:  writer.Write("</div>");

  17:   

  18:  //Initialize animatedcollapsepanel for widget.

  19:  writer.Write("<script type=\"text/javascript\"> animatedcollapse.addDiv('widgetContent" + WidgetID + "', 'fade=1'); animatedcollapse.init();</script>");

That’s all, you can see the result on my widgets by clicking their titles.

I think having smooth UI transitions and animated stuff in your webpage is not bad :)

Download the codes : AnimatedWidgets-BlogEngine.NET.rar (21.97 kb) 


 

Here is the javascript that positions the editor zone on the selected webpart.

<script language="javascript" type="text/javascript">
          function PositionEditor(part) {
                if (document.getElementById('EditorZone2') != null) {
                        var tr = document.getElementById('WebPart_' + part).insertRow(1);
                        var td = tr.insertCell();
                        td.appendChild(document.getElementById( 'EditorZone2'));
                      }
          }
</script>  

And for sure, we need to register that function call on the page render as fallows: 

That’s it.