Петър М. Петров

You want WP-Polls in a Slider Box like the one on the right side?

Though the example is in Bulgarian you can catch the idea.
Just click on the blue arrows at its bottom.

Here is the way you can make it.
What you need:

1. Installed WP-Polls 2.40.

Note: Usage WITHOUT Widget.

2. At least 3 polls created.

3. jQuery Library 1.2.6 or higher.

Note: Download the latest version from here.

4. This JS Library: init.js

5. Following CSS files:

   - polls_general.css;
   - ie6.css; and
   - ie7.css.

6. Following images: images.zip
What to do:

1. Upload jQuery Library and init.js file in the js folder of your theme (wp-content/themes/<YOUR THEME NAME>/js/).

2. Open ie6.css and replace <YOUR THEME NAME> in the filter property of #left_nav and #right_nav with the name of your theme.

3. Upload polls_general.css, ie6.css and ie7.css in the css folder of your theme (wp-content/themes/<YOUR THEME NAME>/css/).

4. Unpack images.zip and upload the content in wp-content/themes/<YOUR THEME NAME>/images/.

5. Add following function (offered by Ttech) into your wp-polls.php file located in wp-content/plugins/wp-polls/:

6. Open header.php located in wp-content/themes/<YOUR THEME NAME> and add following lines into the head section of HTML code:

Note: Instead of the above jquery-1.2.6.pack.js you have to type the name of jQuery Library you uploaded at the first step. For instance it could be jquery-1.3.1.min.js

7. Open sidebar.php located in wp-content/themes/<YOUR THEME NAME> and replace following code

<?php if (function_exists('vote_poll') && !in_pollarchive()): ?>
   <li>
      <h2>Polls</h2>
      <ul>
         <li><?php get_poll();?></li>
      </ul>
      <?php display_polls_archive_link(); ?>
   </li>
<?php endif; ?>

with this one

<div id="poll_center">
   <div class="pollhead">Polls</div>
   <div id="inner_div">
      <?php
         $total_polls=3;
         get_active_polls($total_polls);
      ?>
   <script type="text/javascript">
      var total_polls=<?php echo $total_polls; ?>;
   </script>
   </div>
   <div id="polls_navigation">
      <a id="left_nav" title="Previous"></a>
      <div id="center_more">«« More Polls »»</div>
      <a id="right_nav" title="Next"></a>
   </div>
</div>

Adjusting:

Most probably at certain time you will have to adjust following variables/properties:

$total_polls: This is the number of polls you want to have in the slider. The variable is located in the code you have just added in sidebar.php (the above step 7). You can put the number of all your active polls or smaller figure. If you choose a smaller figure the latest specified polls will be exhibited. In this example the variable is set to 3.

Slider’s height is 285px by default. If a poll of yours consists of more than 6 questions/answers that height may not be enough. You can adjust it by changing the height of #inner_div in polls_general.css (respectively in ie6.css and ie7.css). The change of that property has to be reflected in two more places. You need to change respectively the height of #poll_center in ie7.css and the top property of #polls_navigation in the three css files (polls_general.css, ie6.css and ie7.css).

Instead of images you can use text links for navigation controls by changing the HTML code you added in sidebar.php and the style of #polls_navigation, #left_nav and #right_nav elements in polls_general.css, ie6.css and ie7.css.
How it works:

The function you added in wp-polls.php loads the specified number of polls. Another function in init.js shows one of them on random basis – thus all polls have equal chance to appear when people visit your site. The other polls can be displayed by clicking navigation controls at the Slider bottom (Previous or Next). Easing bounceOut and inOutQuad functions in init.js are used for transitions between two polls. When a Next/Previous link is clicked both controls become inactive for the time of transition, thus preventing from another click before transition completes.
Things to consider:

1. The above way to achieve „All in One“ may not work if you use WP-Polls WITH Widget. Probably some slight changes have to be done. If you are experienced you can try.
2. Loading time depends on $total_polls value. You probably should not keep it too big.
3. Do not forget that init.js takes information from polls_general.css, ie6.css, ie7.css and sidebar.php hence cannot work without them.
Final words:

The idea is tested on Firefox 3.0.5+, Opera 9.63, Safari 3.2.1, Chrome 1.0, IE 7 and IE 6. The two files ie7.css and ie6.css are added because the style of some elements in IE needs to be different in order to get same results like in the rest browsers. Therefore if you make changes in polls_general.css you may have to change certain values in ie6.css and ie7.css.

Enjoy!