Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Jquery Slider Help—Almost there? 
 
Simoned
Jr. Member
 
Total Posts:  5
Joined:  2008-07-06
 

Hello everyone,

First off, my skill levels with XHTML/CSS is solid, but I lack entirely in Javascript department. I can read it and modify only the simplest variables.
Which is why I’m here:

I’m currently working on Usmile.ca and have reached an obstacle I can’t seem to tackle…

Excerpt from Firebug:

[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]"  nsresult"0x80004005 (NS_ERROR_FAILURE)"  location"JS frame :: http://usmile.ca/js/proxy.php?c=auto&f;=,prototype/prototype.js,prototype/validation.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,varien/js.js,varien/form.js,varien/menu.js,mage/translate.js,mage/cookies.js,jq/jquery-1.2.6.js,jq/jquery.scrollTo-1.3.3.js,jq/jquery.localscroll-1.2.6.js,jq/jquery.serialScroll-1.2.1.js,jq/coda-slider.js :: anonymous :: line 8738"  datano]
http
://usmile.ca/js/proxy.php?c=auto&f;=,prototype/prototype.js,prototype/validation.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,varien/js.js,varien/form.js,varien/menu.js,mage/translate.js,mage/cookies.js,jq/jquery-1.2.6.js,jq/jquery.scrollTo-1.3.3.js,jq/jquery.localscroll-1.2.6.js,jq/jquery.serialScroll-1.2.1.js,jq/coda-slider.js
Line 8738

Apparently something running in Magento doesn’t like something in jQuery.
I found a tabbed system that I would like to use. It’s build on jQuery and a few of the slider/scroll plug-ins.

Slider Page:
jQuery for Designers - Coda Slider

Demo:
jQuery for Designers - Coda Slider Demo

I’ll post my steps to get to this error:

1. Pasted the following structure into the content field of the front page:

<div id="slider">
  <
ul class="navigation">
    <
li><a href="#intro">Intro</a></li>
    <
li><a href="#safe">It&aposSafe</a></li>
    <
li><a href="#howworks">How it Works</a></li>
    <
li><a href="#FAQ">FAQ</a></li>
    <
li><a href="#order">Order</a></li>
    <
li><a href="#contact">Contact</a></li>
  </
ul>

  <!-- 
element with overflow applied -->
  <
div class="scroll">
    <!-- 
the element that will be scrolled during the effect -->
    <
div class="scrollContainer">
      <!-- 
our individual panels -->
      <
div class="panel" id="intro"Introduction </div>
      <
div class="panel" id="safe"It&aposSafe </div>
      <
div class="panel" id="howworks"How it Works </div>
      <
div class="panel" id="FAQ"FAQ </div>
      <
div class="panel" id="order"Order </div>
      <
div class="panel" id="contact"Contact</div>
    </
div>
  </
div>
</
div>

2. Modified the contents of all the js files to run in a no-conflict mode and then added them to page.xml (minus jQuery itself) . These files were uploaded to the root/js/jq directory:

<action method="addJs"><script>jq/jquery-1.2.6.js</script></action>
                <
action method="addJs"><script>jq/jquery.scrollTo-1.3.3.js</script></action>
                <
action method="addJs"><script>jq/jquery.localscroll-1.2.6.js</script></action>
                <
action method="addJs"><script>jq/jquery.serialScroll-1.2.1.js</script></action>
                <
action method="addJs"><script>jq/coda-slider.js</script></action>

I have read the other pages on the Magento boards and have been guided by them to reach this point. Unfortunately I’m still stuck, any advice would be greatly appreciated.

Thank you,
Simoned

 
Magento Community Magento Community
Magento Community
Magento Community
 
JamesBee
Jr. Member
 
Total Posts:  26
Joined:  2008-01-02
 

Try with jquery-1.2.3.js

I had problems using jquery-1.2.6.js

When I switched to jquery-1.2.3.js it worked

 
Magento Community Magento Community
Magento Community
Magento Community
 
inajardesign
Jr. Member
 
Total Posts:  15
Joined:  2009-04-22
 

Did you have luck with this?

I seem to having similar problem - jQuery vs Prototype - it seems I can have one or the other, but not but.

Need some guidance on implementing the noConflict() workaround - can you help?

Thank you in advance.

 
Magento Community Magento Community
Magento Community
Magento Community
 
BadTrt
Jr. Member
 
Total Posts:  2
Joined:  2009-12-15
 
inajardesign - 12 January 2010 05:41 AM

Need some guidance on implementing the noConflict() workaround - can you help?

Thank you in advance.

http://www.lotusseedsdesign.com/blog/accordion-menu-for-layered-nav/comment-page-1#comment-190

 
Magento Community Magento Community
Magento Community
Magento Community
 
joshbenham
Jr. Member
 
Total Posts:  6
Joined:  2009-08-31
 

You need to instantiate the jQuery event with noConflict

So instead of something like

$(function() { });

You would use

jQuery.noConflict()(function($){});

Also because you are passing $ through the function you can use $ normally within that function instead of having to use jQuery.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Boldbaber
Jr. Member
 
Avatar
Total Posts:  25
Joined:  2010-05-30
 

@joshbenham thanks for the help regarding magento image slider you guys can check this cool post Best Magento Image Slider.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top