Possible to have moving cart icon with Joomla 3?

Hi,

I'm building a site based on Gamebox and Joomla 3.1. It didn't include the shopping cart icon that appears in the Joomla 2.5 demo:

http://demo.gavick.com/joomla25/storebox/

... so I uncommented a few lines of code to make it appear (I also changed it to say "Reserve" since it's for a hotel site.)

It appears properly, but I noticed a great effect on the Joomla 2.5 demo site. When I scroll down the page, the cart icon moves along too, always appearing in the same upper-right corner. This doesn't happen on my client's Joomla 3.1 - if I scroll down, the icon moves up along with the rest of the page and is lost from view. Any idea how I can have the cart move like in the Joomla 2.5 demo, so it's always visible even when people scroll down?

Cheers,
Chris

reserve.jpg

Here's a picture of the floating cart icon from the Joomla 2.5 demo site.

Sorry, should have posted this in the "Storebox" forum - just noticed I put it in "Gamebox" accidentally. Perhaps a moderator can move it...

Hi

Topic moved as requested. This icon was made for Virtuemart, so since there is no Virtuemart for joomla 3.0 available so it was not needed please show me Your site now.

Hi

Topic moved as requested. This icon was made for Virtuemart, so since there is no Virtuemart for joomla 3.0 available so it was not needed please show me Your site now.

It's under development and I can't post the link publicly yet; I'll send you a private message with the link.

Thanks!
Chris

Hi

Please try to add this code to the end of /js/gk.scripts.js file:

Code: Select all

      if(document.id('gkPopupCart')) {
         var btn = document.id('btnCart');
         
         window.addEvent('scroll', function(e) {
            var scroll = window.getScroll().y;
            var max = document.id('gkMainWrap').getSize().y;
            var final = 0;
            if(scroll > 70) {
               if(scroll < max - 122) {
                  final = scroll - 50;
               } else {
                  final = max - 172;
               }
            } else {
               final = 20;
            }
            btn.setStyle('top', final + "px");
         });
         
         popup_cart = document.id('gkPopupCart');
         popup_cart.setStyle('display', 'block');
         popup_cart_h = popup_cart.getElement('.gkPopupWrap').getSize().y;
         popup_cart_fx = new Fx.Morph(popup_cart, {duration:200, transition: Fx.Transitions.Circ.easeInOut}).set({'opacity': 0, 'height': 0 });
         var wait_for_results = true;
         var wait = false;
      }


Hi

Please try to add this code to the end of /js/gk.scripts.js file:

Thanks! That was very helpful. At first it didn't work, but then I placed it INSIDE the last function in that file and it worked (I had to make a few other changes too - if anyone else is interested, see attached screen captures).

Chris

inserted.jpg

default.jpg

css.jpg

Here's the final screenshot showing how I got it working (I could only attach three to my previous reply.)

Chris

commented.jpg

Hi

Thank You for shearing the solutions with us

Can you enable screenshots?

Can you enable screenshots?

Perhaps one of the moderators can figure out why the screen captures are no longer displaying? Unfortunately I don't have copies of them (I make dozens of screen captures per week)...

Chris

Hi

I'm sorry, but we have changed a forum system and old images attached was not possible to move to a new system.