Home/ Questions/Q 5971787
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T20:33:58+00:00

I am trying to expand on the code authored by AutoSponge http://www.endusersharepoint.com/2008/12/22/jquery-for-everyone-cleaning-windows-pt2/ Instead of

  • 0

I am trying to expand on the code authored by AutoSponge
http://www.endusersharepoint.com/2008/12/22/jquery-for-everyone-cleaning-windows-pt2/

Instead of using <input type="checkbox" ... /> to trigger the event, I am trying to use 

<input type="image" class="toggleClass" id="LeftRight" 
       value="tr:lt(9)" src="../../img/topcollapse.jpg" />

and 

<input type="image" class="toggleClass" id="UpDown" 
       value="#TitleAreaImageCell, #LeftNavigationAreaCell" 
       src="../../img/leftcollapse.jpg" />

to trigger the function. The collapse functions works but the img source does not change. I think that I am not calling it out correctly but I have not been able to figure out why. Thank you in advance for any help on this. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript">

         //initialize checkboxes  

         $(function () {

             $("input.toggleClass:image").each(function (i, e) {

                 var v = e.value;
                 var g = GetCookie(v); //SP function
                 var src = ($("#UpDown").attr("src") === "img/up_arrow.bmp")

                 if (g == "1") {    
                     e.checked = true;
                     $(v).hide();
                 }
             });
         });

         //set cookie on click and hide element  

         $(function () {

             $("input.toggleClass:image").click(function (e) {

                 var v = $(e.target).val();
                 var g = GetCookie(v);
                 if (g == "1") {
                     $(v).show();
                     SetCookie(v, "", "/"); //SP function  
                 } else {
                     $(v).hide();
                     SetCookie(v, "1", "/");
                 }
             });
         });

        $(document).ready(function () {
            $("#UpDown").bind("click", function () {
                var src = ($("#UpDown").attr("src") === "../../img/topcollapse.jpg")
                ? "../../img/downcollapse.jpg"
                : "../../img/topcollapse.jpg";
                $("#UpDown").attr("src", src);
            });
        });

        $(document).ready(function () {
            $("#LeftRight").bind("click", function () {
                var src = ($("#LeftRight").attr("src") === "../../img/leftcollapse.jpg")
                ? "../../img/rightcollapse.jpg"
                : "../../img/leftcollapse.jpg";
                $("#LeftRight").attr("src", src);
            });
        });
</script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    <input type="image" class="toggleClass" id="UpDown" value="#TitleAreaImageCell, #LeftNavigationAreaCell" src="img/leftcollapse.jpg" /><br /><br />
    <input type="image" class="toggleClass" id="LeftRight" value="tr:lt(9)" src="img/topcollapse.jpg" />
    </div>
    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Left Nav Pane

    Top Panel

    //initialize images
    $(function() {
    $("input.toggleClass:image").each(function(i,e) {
    var v = e.value;
    var g = GetCookie(v); //SP function

        if (g == "1") {

            if (e.src.indexOf("topcollapse.jpg") >= 0)
              {
                e.src = "/_layouts/images/downcollapse.jpg";
              }
           else {
              if (e.src.indexOf("downcollapse.jpg") >= 0)
                 {
                   e.src = "/_layouts/images/topcollapse.jpg";
                 }
            } 

            if (e.src.indexOf("leftcollapse.jpg") >= 0)
              {
                e.src = "/_layouts/images/rightcollapse.jpg";
              }
           else {
              if (e.src.indexOf("rightcollapse.jpg") >= 0)
                 {
                   e.src = "/_layouts/images/leftcollapse.jpg";
                 }
            } 

        //e.checked = true;
        $(v).hide();
    }
});

    });
    //set cookie on click and hide element
    $(function() {
    $("input.toggleClass:image").click(function(e) {
    var v = $(e.target).val();
    var g = GetCookie(v);
    if (g == "1") {
    $(v).show();
    SetCookie(v, "", "/"); //SP function
    }else{
    $(v).hide();
    SetCookie(v, "1", "/");
    }
    });
    });

    • 0