Member Avatar for turpentyne

I'm trying to reuse a function and it isn't working. I put it like so, and it works fine:

$('.square-container').on('click', '.square', function(event)  {    

    $("#testit").removeClass("main_page");

    if ( $(this).hasClass('active') ) {
    /* actions here */
    }  else if ( $(this).hasClass('one') ) {
    /* actions here */
    }  else {       
        alert('error - nothing found');
};

But if I try this, it runs the function but can't detect anything, and gives the message ' error - nothing found'.

function pic_shift(){
    $("#testit").removeClass("main_page");

    if ( $(this).hasClass('active') ) {
        /* actions here */
        }  else if ( $(this).hasClass('one') ) {
        /* actions here */
        }  else {       
        alert('error - nothing found');
    };  

}

$('.square-container').on('click', '.square', function(event)  {    

    pic_shift();

};
  • 2 Contributors
  • 5 Replies
  • 200 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by EvolutionFallen
Member Avatar for EvolutionFallen

Your function probably doesn't know what $(this). Try passing it as a parameter maybe?

function pic_shift(square){
    $("#testit").removeClass("main_page");
    if ( square.hasClass('active') ) {
        /* actions here */
        }  else if ( square.hasClass('one') ) {
        /* actions here */
        }  else {       
        alert('error - nothing found');
    };  
}
$('.square-container').on('click', '.square', function(event)  {    
    pic_shift( $(this) );
};
Member Avatar for turpentyne

hmmmm... same error when I try that.

I put this. The alert(this) comes up as [object HTMLDivElement], and I still get the error alert.

$('.square-container').on('click', '.square', function(event)  {
    alert(this);    

    pic_shift( $(this) );


    });
Member Avatar for EvolutionFallen

EDITED:
this and $(this) are two different things. And alert() isn't that great for debugging. Use console.log($(this)) instead. Also, can you provide the structure of your HTML?

Edited by EvolutionFallen
Member Avatar for turpentyne

Yikes...

I tried this and $(this) just to see and I get the same result. I'm not sure I'm using console.log correctly. or Maybe I just don't know where to look?

I added that after the error alert, in the function. Then when I used the page, I watched the console at the bottom (firefox) and there's a ({0;({}), length:1}). If I click on this, I get a pop-up with a huge list of different issues??? toggles, ajaxsend, start, etc. all kinds of stuff. New stuff to me, so I don't know where to find the specific problem.

I'm not sure if the html will help, but it looks like this:

<!DOCTYPE html>

<html>
<head>
    <title>The site</title>

    <link rel="stylesheet" type="text/css" href="css/nest.css">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300,300italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    <script src="http://code.jquery.com/jquery-latest.js"></script>       
    <script src="js/functions.js"></script>
    <script src="jquery.easing.1.3.js"></script>
    <script src="js/jquery.easing.compatibility.js"></script>

    <meta name="description" content="The Nest">
    <meta name="keywords" content="toronto, ontario, loft, condos, condominiums, construction,etc. etc.">
    <meta name="author" content="The Walsh Group">
    <meta name="zipcode" content="x" >


</head>

<body>

<div id="testit" class="main_page"></div>

<div id="content" style="">
    <div class="container">
        <div class="header">
            <div class="navbox">
                <!-- later this nav will be separated out as an include -->
                <ul class="main-nav">
                    <li><a href="#" class="main ee" id="link_nest">Text link one</a></li>
                    <li><a href="#" class="main bb" id="link_hillcrest">link 2</a></li>
                    <li><a href="#" class="main cc" id="link_3little">link3</a></li>
                    <li><a href="#" class="main dd" id="link_early">link4</a>
                        <ul id="sub-nav">
                            <li class="subnav"> <span class="subnav-separators">: :</span> </li>
                            <li class="subnav"><a href="#" class="main ff"id="link_rockport"> sublink 1</a></li>   
                            <li class="subnav"><span class="subnav-separators">|</span></li>  
                            <li class="subnav"><a href="#"class="main gg" id="link_ii_by_iv"> sublink 2 </a></li>  
                            <li class="subnav"><span class="subnav-separators">|</span></li> 
                            <li class="subnav"><a href="#" class="main hh" id="link_raw"> sublink 3 </a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="main contact" id="link_contact">link 5</a>
                    </li>
                </ul>
            </div>

            <div class="logo-main">
                <ul class="main-nav">
                    <li>
                        <a href="#" class="main aa"><img src="images/logo.png"></a>
                    </li>
                </ul>
            </div>
        </div>


    <div class="square-container" id="sq_fadein"> 


        <div class="square one" id="sq1" style="overflow:hidden;">
            <div id="square_caption1" class="square_captions">The Nest</div>
            <div id="cf" style="overflow:hidden;height:100%;width:100%;">
                <img class="bottom" style="width:100%;" src="images/residences_1_color.jpg" id="pic_1">
                <img class="top" style="width:100%;" src="images/the_nest_residences_1.jpg"  id="pic_1_color">
            </div>           
        </div>

        <div class="gallery-subs" style="height:0px;overflow:visible; position:relative; top:340px;left:65px;z-index:40; display:none;opacity:0;">
            <div style="height:30px;width:30px;background-color:#000000;float:left;margin-right:20px;">
                <a href="images/examples/image-1.gif" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_1"><img src="images/gallery/nest_thumb1.jpg" id="nest_thumbs_1" class="gallery_thumbs"></a>
            </div>
            <div style="height:30px;width:30px;background-color:#ffffff;float:left;margin-right:20px;">
                <a href="images/examples/image-2.jpg" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_2"><img src="images/gallery/nest_thumb2.jpg" id="nest_thumbs_2" class="gallery_thumbs"></a>
            </div>
            <div style="height:30px;width:30px;background-color:#000000;float:left;margin-right:20px;">
                <a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_3"><img src="images/gallery/nest_thumb3.jpg" id="nest_thumbs_3" class="gallery_thumbs"></a>
            </div>
            <div id="bigthumb" style="height:30px;width:30px;background-color:#000000;position:absolute;left:8px;top:-200px;z-index:top;">
                <a href="images/examples/image-16.jpg" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_4"><img src="images/gallery/nest_thumb16.jpg" id="nest_thumbs_4" class="gallery_thumbs"></a>
            </div>
            <div id="bigthumb2" style="height:30px;width:30px;background-color:#000000;position:absolute;left:1px;top:-325px;z-index:top;display:none;">
                <a href="images/examples/image-16.jpg" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_5"><img src="images/gallery/nest_thumb16.jpg" id="nest_thumbs_5" class="gallery_thumbs"></a>
            </div>

        </div>



        <div class="square two" id="sq2" style="">
            <div id="square_caption2" class="square_captions">caption x</div>
            <div id="cf" style="overflow:hidden;height:100%;width:100%;"">
                <img class="bottom" style="height:120%;" src="images/the_nest_residences_2_color.jpg" id="pic_hillcrest_bw">
                <img class="top" style="height:120%;" src="images/the_nest_residences_2.jpg" id="pic_hillcrest_color">
            </div>

        </div>

        <div class="square three" id="sq3" style="left-margin:20px;">
            <div id="square_caption3" class="square_captions">caption 2</div>
            <div id="cf" style="overflow:hidden;height:100%;width:100%;"">
                <img class="bottom" style="width:100%;" src="images/residences_3_color.jpg"  id="pic_3">
                <img class="top" style="width:100%;" src="images/residences_3.jpg"  id="pic_3_color">
            </div>
        </div>

        <div class="square four" id="sq4" style="">
            <div id="square_caption4" class="square_captions">asdf</div>
            <div id="cf" style="overflow:hidden;height:100%;width:100%;"">
                <img class="bottom" style="width:100%;" src="images/residences_4_color.jpg"  id="pic_4">
                <img class="top" style="width:100%;" src="images/residences_4.jpg"  id="pic_4_color">
            </div>
        </div>

        <div class="home-register">
            <p class="reg1">asdf</p>
            <p class="reg2">asdf</p>
            <p class="reg3"><a href="#" class="main dd"><i>Click to Register</i></a></p>  
            </div>
        </div>

        <div class="details">
            <h1>Text</h1>

            <div class="article">
        &nbsp;

            </div>


        </div>



        <div class="foot-container"> 
            <div class="foot-logo"><a href="http://www.link.net/" target="_new"><img src="images/logo-2.png" border="0"></a><br/>
            </div>

            <div class="foot-nav" style="">
            <!-- later this nav will be separated out as an include -->
            <span class="privacy_policy"><a href="#" class="main privacy_link" id="link_privacy">PRIVACY POLICY</a></span> | <a href="http://www.x.com" target="_new"></a> | <a href="#" id="music_control" class="">MUSIC OFF</a>
            </div>

        </div>       
    </div>
</div>



<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>


<script>
  jQuery(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });

      $('.showOlderChanges').on('click', function(e){
        $('.changelog .old').slideDown('slow');
        $(this).fadeOut();
        e.preventDefault();
      })
  });

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2196019-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>



<div id="music">
    <embed src="http://thewalshgroup.ca/dev/the-nest/music/12_full_prom-night_0132.mp3"autostart="true" loop="true"
width="2" height="0" id="player"></embed> 
</div>

</body>
</html>
Member Avatar for EvolutionFallen

Sorry it took me a while to get back to this -- do you have the page online where we can test?
Just a note, your code has some HTML issues. Three of the divs that have the id "cf" have an extra " after the style=. Ex: <div id="cf" style="overflow:hidden;height:100%;width:100%;"**"**>. Also, not that an id shouldn't appear for more than one element on a given page. So you shouldn't have multiple id="cf". For that, use class: class="cf". Of course, this will require changing CSS selectors from using # to ..

Also, looks like you're including jQuery twice? Lines 11 & 155.

Edited by EvolutionFallen
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.