[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 476
  • Last Modified:

Nivo-Slider

Hello:

I can not make Nivo-Slider (JQuery Slide show) to work. The error is in the call to JQuery. I have successfully installed this slider in my Joomla website (Using Jumi) -- The site is not up yet, though).

   <script type="text/javascript">
myfunc();
    $(document).ready(function() {
    Error Spot -->  $('#slider').nivoSlider(/* {effect: 'random',directionNav: false,controlNav: false,controlNavThumbs: false} */);
    });
    </script>

Error Msg:   Object doesn't support this property or method.

I have tried all I could. The google search indicated that broken HTML will also make JQuery not work. I fixed that as well. I moved around the directories. So far, no luck.
There is where I need expert advice.

Here is my code: Index.php
<?php
 Require ('header.php');
 Require('menu.php');
...
...
?>

The JQuery code is in header.php. Here is the code:

<td id = "rotatingBanner" name = "rotatingBanner">
<?php // require ("../nivo-slider/demo/demo.html"); ?>
    <div id="wrapper" style = "border: 1px solid green;">
        <div class="slider-wrapper theme-default">
            <div id="slider" name="slider" class="nivoSlider">
                <img src="/abc/nivo-slider/demo/images/skywithclouds.jpg" data-thumb="/abc/nivo-slider/demo/images/skywithclouds.jpg" alt="" title=""/>
                <img src="/abc/nivo-slider/demo/images/sunbreaking.jpg" data-thumb="/abc/nivo-slider/demo/images/sunbreaking.jpg" alt="" title=""/>
                <img src="/abc/nivo-slider/demo/images/BirdsFlying.jpg" data-thumb="/abc/nivo-slider/demo/images/BirdsFlying.jpg" alt="" title="" />

        </div>
</td>

Open in new window


Thanks,
<<< Ali >>>
0
MohammadAliQureshi
Asked:
MohammadAliQureshi
  • 7
  • 5
1 Solution
 
HagayMandelCommented:
$('#slider').nivoSlider(/* {effect: 'random',directionNav: false,controlNav: false,controlNavThumbs: false} */);

I guess you need to remove the slashes and the asterisks.

$('#slider').nivoSlider({
effect: 'random',
directionNav: false,
controlNav: false,
controlNavThumbs: false
});

Open in new window

0
 
MohammadAliQureshiAuthor Commented:
Hello HagayMandel:

I tried that as well. The reason I have commented them out is to use defaults for all options. I am attaching a screen shot that show where the error occurs. Hopefully, it will help. Note that the file was generated by debugging within IE developer's tool.

Note: The same error occurs even if I use class (.nivoslier) instead of div ID
(#slider)

Thanks,
<<< Ali >>>
error.jpg
0
 
HagayMandelCommented:
I really don't understand what the rendered HTML code that you've attached means:

The code in the file is: $('.#slider').myfunc() ....
I think it should be: $('.#slider').nivoSlider({...

myfunc() is not a native jQuery function.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
MohammadAliQureshiAuthor Commented:
Hello  HagayMandel:

Sorry for the confusion,  Here is my explanation.

(1) Initially, I thought that the browser is totally skiping the the code where JQuery is being called. Therefore, I created a small function myfunc (Which only has alert in it) to ensure that we are indeed excuting that part of the code. By the Way, the Alert does come up before the error is displayed.

(2) you are correct. The call should be $('#slider').nivoSlider({..}). However, this is where the error occurs.  I just looked at the attachment in my earlier post and realized my mistake - Incorrect file was attached.
The correct file is being attached,

Again, sorry for the confusion.

<<< Ali >>>
error.jpg
0
 
MohammadAliQureshiAuthor Commented:
Hello:

Update ....

I made the slider work by taking out $(document).ready(function(). Now, I am using the slider as follows:

    $('#slider').nivoSlider();

Now, the question is why document.ready function does not work?
0
 
HagayMandelCommented:
Please provide the complete code.
0
 
MohammadAliQureshiAuthor Commented:
Hello:

Attached is the whole code.
Code.htm
0
 
HagayMandelCommented:
On line #130, your'e loading for the second time, an older version of jQuery. Remove it!
0
 
MohammadAliQureshiAuthor Commented:
Hello  HagayMandel:

It worked. However, there is a twist ....

The code works only if I include JQuery right above the Slider code (Not in the head section).

Any ideas why ...

Thanks,
<<< Ali >>>
0
 
HagayMandelCommented:
I'm happy that it works.
It's not that important where you call the script. so why bother.
0
 
MohammadAliQureshiAuthor Commented:
Hello  HagayMandel:

First, thanks for your help and patient..

Second, I agree with you. Does not matter where you call the script. However, if I could include the script in the head section, then it would be a neater code. Thats all.

Any way, "if it aint brole, dont fix it" is what I will act upon.

thanks again.

<<< Ali >>>
0
 
MohammadAliQureshiAuthor Commented:
Thanks
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now