Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to use 'this'

    All,

    I am trying to open one box at a time, the problem is that in my code I am opening all boxes. I have been looking at the use of 'thi's to focus on the box you are clicking on but so far have had no success modifying the following. Hoping someone can help:

    PHP Code:
    //The boxes:
        <div class="box col5">
            <?php
    /*Start of dynamic content open*/
    echo "<p>$title</p>";
    echo 
    "<img src=$source_image />";
    <
    div class="panel_button" style="display: visible;"><img src="../images/expand.png"  alt="expand"/> <a href="#"><?php $item_title?></a> </div> 
     <div class="panel_button" id="hide_button" style="display: none;"><img src="../images/collapse.png" alt="collapse" /> <a href="#">Hide</a> 
     <div class="panel_button" id="hide_button" style= "display: none;">   <object type="text/html" data='<?php $item_url;?>' width="100%" height="800px" style="overflow:auto;border:5px ridge blue"> 
        </object>   
            </div> 
          </div> 
        </div>
    Now for the Javascript, I have tried, this.($document).ready(function){, along with this.$("div.panel_button... (trying to show I have tried something at least):

    Code:
       <script>
    $(document).ready(function() {
        $("div.panel_button").click(
    <wbr>
            function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle()<wbr>;
                }); $("div#hide_button").click(<wbr>function(){              
            $("div#panel").animate({
                height: "0px"
            });
       });       
    });
    
    $(document).ready(function() {
        $("div.panel_button").click(
    <wbr>
            function(){ $("div#panel").animate({ height: "500px" }) .animate({
            height: "400px" }, "fast"); $("div.panel_button").toggle()<wbr>;
                }); $("div#hide_button").click(<wbr>function(){
            $("div#panel").animate({
                height: "0px"
     
            }, "fast"); 
          });       
    });
    </script>
    Thanks,

    G

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,877
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    You need to loop through the items (.each())before you can use “this”. Something like:
    Code:
    $("div.panel_button").each(function() {
      $(this).click(…
    …
    …
    });
    And what’s with the <wbr> tags in the JS code there? Did the forum’s WYSIWYG editor insert that or did you do this? In any case, they can’t be there.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •