Horizontally scrolling using <div> and mootools?

[pgmarshall]

Does anyone know how to get the horizontal scrolling functionality in the 'Other Recommendations' infobox? I think DejaVu had this site in his signature which has some awesome functionality.

Using something called qscroller? (I think) ...

Link to page with scroller

Any ideas anyone?

Thanks in advance,

[deju]

yep, that's my site. It's a custom mod based on the 'horizontal scroller with text and images', which can be found here:

Javascript to create scrolling text and images with Mootools effects

You just need to mod some queries and html in the modules you wish to install the feature in.

[pgmarshall]

Thanks DejaVu,

Love the site ... really shows what you can create with OSCMAX ... very impressive.

I will have a look at the link you gave me ... and have a hack around see if I can do something similar.

Thanks again,

pgmarshall

[pgmarshall]

DejaVu,

I don't suppose I could really cheaky and ask you to post your code from your also_purchased_products.php module so I can see how you editted the $info_box_contents = array(); to put the <divs> into the while statement?

I have written an IF statement to show/hide the scroller buttons - but am struggling a bit on the html build in the array to get 3 items in each <div> - did you use the row++ count to open and close the <div>s?

Any help gratefully received,

Thanks in advance,

[pgmarshall]

Hi all,

I have been fiddling with this code (qscroller) - I think I have it nearly working - but annoyingly I have installed Lightbox, a plus and minus button mod and a password strength monitor - all of which use prototype.

Which I have just realised conflicts with MooTools ... oops! However, I really want to try and implement this scrolling products boxes on my site ... does anyone know of a javascript function which is similar to the qscroller which works on prototype or scriptilcious? Or should I try and finish the scroller and then install Slimbox2 and try and find alternatives for the other mods?

Thanks in advance ...

[pgmarshall]

Okay - I have now re-written my site to use jquery not prototype!

I have installed qscroller into the also_purchased.tpl.php infobox and I have it working for 1 product at a time.

However, I want to get 3 at a time and I am really struggling with this - everything I try doesn't work and I would really like some help.

The statement I have used is ...

   $row = 0;
      $col = 0;
      $info_box_contents = array();
 
  while ($orders = tep_db_fetch_array($orders_query)) {
 
        $orders['products_name'] = tep_get_products_name($orders['products_id']);
 
  $info_box_contents[$row][$col] = array('align' => 'center',
                                               'params' => 'class="smallText" width="33%" valign="top" ',
                                               'text' => '<div class="hide"><div class="qslide2"><center><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a><br>' . $products_price . '<br><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $orders['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', '' . $orders['products_name'] . '') . '</a></center>');
        $col ++;
 
        if ($col > 2) {
    $info_box_contents[$row][$col] = array('align' => 'center', 'params' => ' ', 'text' => '</div>');
    $col = 0;
          $row ++;
        }
      }

This produces

<tr>
<td align="center" class="smallText" width="33%" valign="top" ><div class="hide"><div class="qslide2"><center><a href="http://l
<td align="center" class="smallText" width="33%" valign="top" ><div class="hide"><div class="qslide2"><center><a href="http://l
<td align="center" class="smallText" width="33%" valign="top" ><div class="hide"><div class="qslide2"><center><a href="http://l
<td align="center"></div></td> </tr>

However, I need to move the <div class="hide"><div class="qslide2"> to only show once for each group of three products rather than on everyone!

So the html would look like this

<tr>
<td><div class="hide"><div class="qslide2">
<td align="center" class="smallText" width="33%" valign="top" ><center><a href="http://l
<td align="center" class="smallText" width="33%" valign="top" ><center><a href="http://l
<td align="center" class="smallText" width="33%" valign="top" ><center><a href="http://l
<td align="center"></div></td> </tr>

I have tried pretty much everything but my lack of php knowledge is letting me down.

Any ideas on how to get this into the while statement?

Any help with this would be much appreciated.

Regards,

[pgmarshall]

After a lot of fiddling around and a complete rewrite I have this functionality working in a similar manner to DejaVu's code on giftygifts.co.uk.

If anyone else is interested in installing this mod please post and I will try and put together some instructions ... it is pretty simple install ...

Thanks to DejaVu for the idea and the pointer to qscroller.

Regards,

[ridexbuilder]

Good job.

I would think quite a few people would appreciate seeing your efforts, pgm
Go on put together some instructions.... you know you want to.

[pgmarshall]

Right!

I have written a few garbled instructions on how to use the qscroller module. All the files and install.txt are zipped here.

I tried to upload it as a project but failed (couldn't find where to put the zip file! Apologies - perhaps if people like this someone could move it for me? Or explain what I missed ... )

Hopefully it is reasonably self explainatory but if you do have any questions please post them here. Don't flame me too badly - I wrote all this in a bit of a rush. Any fixes/improvements greatly received!

Demo here. Screenshot here.

Hope this helps someone.

Regards

[ridexbuilder]

Nicely packaged. Instructions seem straightforward.


Try here: http://www.oscmax.com/node/add/project-project