id is not defined in Firefox

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mittapallikiran
    New Member
    • Nov 2011
    • 3

    id is not defined in Firefox

    Here is slideshow script and in Firefox alone it is not working, it is working in IE and chrome, can you see what the issue is
    i am getting id not defined at "
    Code:
        setInterval('slideShow(' + divId + ')', 3000);
    "

    Code:
    $(document).ready(function() {
    $('.heroBanner').each(function(index) {    
            var $divObject = $(this);
            show($divObject);
        });
    });
    
    //Slides starts from from 0 index.
    function show(currentDiv) {
        currentDiv.find("ul.carausalWrapper li").eq(0).addClass("activePro");
        currentDiv.find("div.pagination ul li").eq(0).find("a").addClass("active");
        var divId = currentDiv.attr('id');
        //alert(divId);
        setInterval('slideShow(' + divId + ')', 3000);
    }
    
    //Slides the images based on the slide interval.
    function slideShow(currentDivId) {
        //alert(currentDivId);
        var $divObject = $(currentDivId);
        var $active = $divObject.find("ul.carausalWrapper li.activePro");
        var $pageActive = $divObject.find("div.pagination ul li a.active");
        var $inx = $divObject.find("ul.carausalWrapper li.activePro").index();
        var $elemLength = parseInt($divObject.find("ul.carausalWrapper li").length) - 1;
        var $next = 0;
        $active.removeClass('activePro');
        $pageActive.removeClass('active');
        if ($inx < $elemLength) {
            $next = parseInt($inx) + 1;
        }
        if ($inx == $elemLength) {
            $next = 0;
        }
        $divObject.find("ul.carausalWrapper li").eq($next).addClass("activePro");
        $divObject.find("div.pagination ul li").eq($next).find("a").addClass("active");
    }
    Any help is greatly appreciated.
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    On line 13 where you've commented out the alert, did you get the expected value?

    Also, what's the exact error message?

    Could you give some sample ".heroBanne r" divs?

    Comment

    • johny10151981
      Top Contributor
      • Jan 2010
      • 1059

      #3
      even if .heroBanner then you will have to use jQuery like below:
      Code:
      $('#.heroBanner')........

      Comment

      • mittapallikiran
        New Member
        • Nov 2011
        • 3

        #4
        I just kept alerts for testing, and here is some sample html
        Code:
        <div style="width:100%" class="heroBanner slideBody" id="dnn_ctr642_MultiView_ctl00_divSimpleSlideShow">
            <ul class="carausalWrapper">
                
                         <li style="width:100%" class="activePro">
                            <div>
                                <span class="carausalWrapper-span heroBannerImage" style="width: 270px;">
                                    <img alt="" src="/cmsfiles/media/images/banner_hero_img.jpg" class="carausalWrapper-img" style="width: 250px; height: 150px;">
                                </span><span>
                                    <p>
                                        <a href="http://localhost/dotnetnuke/awin/ArticlesStory.aspx?id=/article-xml/avd_10_12_2010_p04-02-260873.xml">
                                            <b>
                                                Virgin Blue Faces $20M Hit From Computer Outage</b></a></p>
                                    <p>
                                        Virgin Blue (VB) estimates an 11-day disruption caused by a computer s...
                                        <a href="http://localhost/dotnetnuke/awin/ArticlesStory.aspx?id=/article-xml/avd_10_12_2010_p04-02-260873.xml">
                                            + See full article</a>
                                    </p>
                                </span>
                            </div>
                        </li>
                    
                         <li style="width:100%">
                            <div>
                                <span class="carausalWrapper-span heroBannerImage" style="width: 270px;">
                                    <img alt="" src="/cmsfiles/media/images/Banner_img.gif" class="carausalWrapper-img" style="width: 250px; height: 150px;">
                                </span><span>
                                    <p>
                                        <a href="http://localhost/dotnetnuke/awin/ArticlesStory.aspx?id=/article-xml/AW_08_15_2011_p20-357727.xml">
                                            <b>
                                                Technology Push</b></a></p>
                                    <p>
                                        U.S. space-technology researchers soon will be able to start work on s...
                                        <a href="http://localhost/dotnetnuke/awin/ArticlesStory.aspx?id=/article-xml/AW_08_15_2011_p20-357727.xml">
                                            + See full article</a>
                                    </p>
                                </span>
                            </div>
                        </li>                              
            </ul>
            <div align="center" class="nav pagination">
                <table align="center" style="height:100%;">
                    <tbody><tr>
                        <td valign="middle">
                            <ul class="images-button">
                                
                                        <li class="images-button-li"><a href="javascript:void(0);" class="active">
                                            1
                                        </a></li>
                                    
                                        <li class="images-button-li"><a href="javascript:void(0);">
                                            2
                                        </a></li>
        </ul>
                        </td>
                    </tr>
                </tbody></table>
            </div>
        </div>

        Comment

        • mittapallikiran
          New Member
          • Nov 2011
          • 3

          #5
          johny,

          $('#.heroBanner ')........ didn't worked

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            I know you used the alerts for testing. I was asking if they give the expected ID value?

            You didn't answer my question on the exact error message you see in Firefox?

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032

              #7
              even if .heroBanner then you will have to use jQuery like below:
              Code:
              $('#.heroBanner')........
              That's not going to work. # is for ID and . is for selecting classes.

              See http://api.jquery.com/category/selec...css-selectors/

              Comment

              Working...