osCmax v2.5 User Manual
Page 1 of 3 123 LastLast
Results 1 to 10 of 26

Horizontally scrolling using <div> and mootools?

This is a discussion on Horizontally scrolling using <div> and mootools? within the osCmax v2 Customization/Mods forums, part of the osCmax v2.0 Forums category; Does anyone know how to get the horizontal scrolling functionality in the 'Other Recommendations' infobox? I think DejaVu had this ...

      
  1. #1
    osCMax Development Team
    pgmarshall's Avatar
    Join Date
    Feb 2009
    Location
    London
    Posts
    2,678
    Rep Power
    49


    Default Horizontally scrolling using <div> and mootools?

    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,
    pgmarshall
    _______________________________

  2. #2
    New Member
    Join Date
    Sep 2008
    Posts
    10
    Rep Power
    0


    Default Re: Horizontally scrolling using <div> and mootools?

    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.
    See oscMax in action at Gifty Gifts

  3. #3
    osCMax Development Team
    pgmarshall's Avatar
    Join Date
    Feb 2009
    Location
    London
    Posts
    2,678
    Rep Power
    49


    Default Re: Horizontally scrolling using <div> and mootools?

    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
    _______________________________

  4. #4
    osCMax Development Team
    pgmarshall's Avatar
    Join Date
    Feb 2009
    Location
    London
    Posts
    2,678
    Rep Power
    49


    Red face Re: Horizontally scrolling using <div> and mootools?

    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
    _______________________________

  5. #5
    osCMax Development Team
    pgmarshall's Avatar
    Join Date
    Feb 2009
    Location
    London
    Posts
    2,678
    Rep Power
    49


    Smile Re: Horizontally scrolling using <div> and mootools?

    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
    _______________________________

  6. #6
    osCMax Development Team
    pgmarshall's Avatar
    Join Date
    Feb 2009
    Location
    London
    Posts
    2,678
    Rep Power
    49


    Unhappy Re: Horizontally scrolling using <div> and mootools?

    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 ...

    Code:
       $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
    _______________________________

  7. #7
    osCMax Development Team
    pgmarshall's Avatar
    Join Date
    Feb 2009
    Location
    London
    Posts
    2,678
    Rep Power
    49


    Cool Re: Horizontally scrolling using <div> and mootools?

    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,
    pgmarshall
    _______________________________

  8. #8
    osCMax Development Team
    ridexbuilder's Avatar
    Join Date
    Jul 2008
    Location
    Haggisland
    Posts
    3,014
    Rep Power
    36


    Thumbs up Re: Horizontally scrolling using <div> and mootools?

    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.
    Hosting plans with installation, configuration, contributions, support and maintenance.

  9. #9
    osCMax Development Team
    pgmarshall's Avatar
    Join Date
    Feb 2009
    Location
    London
    Posts
    2,678
    Rep Power
    49


    Cool Re: Horizontally scrolling using <div> and mootools?

    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
    pgmarshall
    _______________________________

  10. #10
    osCMax Development Team
    ridexbuilder's Avatar
    Join Date
    Jul 2008
    Location
    Haggisland
    Posts
    3,014
    Rep Power
    36


    Thumbs up Re: Horizontally scrolling using <div> and mootools?

    Nicely packaged. Instructions seem straightforward.


    Try here: http://www.oscmax.com/node/add/project-project
    Last edited by ridexbuilder; 06-30-2009 at 11:42 AM.
    Hosting plans with installation, configuration, contributions, support and maintenance.

Page 1 of 3 123 LastLast

Similar Threads

  1. Scrolling What's New Box
    By michael_s in forum New osCommerce Contributions
    Replies: 0
    Last Post: 09-01-2008, 02:50 PM
  2. MooTools Web 2.0 Scripting Package
    By michael_s in forum New osCommerce Contributions
    Replies: 0
    Last Post: 12-10-2007, 10:21 AM
  3. MooTools Web 2.0 Scripting Package
    By michael_s in forum New osCommerce Contributions
    Replies: 0
    Last Post: 12-09-2007, 02:30 PM
  4. MooTools Web 2.0 Scripting Package
    By michael_s in forum New osCommerce Contributions
    Replies: 0
    Last Post: 11-23-2007, 09:16 PM
  5. how to display boxes horizontally
    By moisea in forum osCommerce 2.2 Modification Help
    Replies: 1
    Last Post: 10-30-2003, 11:02 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •