Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Nivo-Slider

Posted on 2013-01-05
12
Medium Priority
?
475 Views
Last Modified: 2013-01-14
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
Comment
Question by:MohammadAliQureshi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38748318
$('#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
 

Author Comment

by:MohammadAliQureshi
ID: 38748605
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
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38748636
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:MohammadAliQureshi
ID: 38749507
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
 

Author Comment

by:MohammadAliQureshi
ID: 38749611
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
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38749921
Please provide the complete code.
0
 

Author Comment

by:MohammadAliQureshi
ID: 38757156
Hello:

Attached is the whole code.
Code.htm
0
 
LVL 16

Accepted Solution

by:
HagayMandel earned 1600 total points
ID: 38757882
On line #130, your'e loading for the second time, an older version of jQuery. Remove it!
0
 

Author Comment

by:MohammadAliQureshi
ID: 38771047
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
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38771260
I'm happy that it works.
It's not that important where you call the script. so why bother.
0
 

Author Comment

by:MohammadAliQureshi
ID: 38774546
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
 

Author Closing Comment

by:MohammadAliQureshi
ID: 38774555
Thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question