Javascript file requires access to images folder

Last post 04-16-2008 8:38 AM by PeterBrunone. 8 replies.

Sort Posts:

  • Javascript file requires access to images folder

    04-14-2008, 6:07 PM
    • Member
      11 point Member
    • jhuezo
    • Member since 03-14-2006, 3:23 PM
    • Posts 9

    my current project has a masterpage, and the master page utilizes a user control that renders a menu. This menu uses a javascript file that contain methods that help it contract and expand based on the current node selected.

     

    The main.js file is the file that has all the methods that help it accomplishes this and its is stored in the /scripts directory and utilizes images stored in another directory which is set up like this images/buttons.

     

    I have hardcoded in the js file the path to the images. On the server it will not work once we point a domain to this project.

     I tried to use a hidden field and page.resolve in the page load method to get the path to the images folder.   

    I later discovered via the page life cycle the object’s value was not set once I tried to run the pages in directories below the root.   I have created a base page for my project that all my other pages inherit from, but at this point I am stuck and out of out of ideas.

     

    I would basically like to know what would be the best way to proceed with this with out a major overhaul.

     

  • Re: Javascript file requires access to images folder

    04-15-2008, 12:15 AM
    • All-Star
      20,690 point All-Star
    • A1ien51
    • Member since 05-06-2005, 6:46 PM
    • MD USA
    • Posts 3,806
    Not sure what is the matter. If the directory for the images is located on the net, you should just be referencing it with http://yourDomain/images/foo/bar.gif. Eric
  • Re: Javascript file requires access to images folder

    04-15-2008, 9:30 AM
    • Member
      11 point Member
    • jhuezo
    • Member since 03-14-2006, 3:23 PM
    • Posts 9

    Sorry Eric I apologize for not explaining myself, I will post some code to better illustrate.

     


    I will most likey point several domains to this site, and i cannot hard code any paths. 


    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    In the master page I make the following call

    protected void Page_Load(object sender, EventArgs e){

    this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "Global", this.ResolveClientUrl("~/scripts/main.js"));

    }

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    User Control that get called from master page

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    public partial class UserControls_leftMenu : System.Web.UI.UserControl
    {
     protected void Page_Load(object sender, EventArgs e)
     {
      string currentNode = "";
      string menuHTML = "";
      SiteMapNode AllParents = SiteMap.CurrentNode;
      int nLevels = 0;
      while (AllParents.Title != SiteMap.CurrentNode.RootNode.Title)
      {
       nLevels++;
       AllParents = AllParents.ParentNode;
      }

      foreach (SiteMapNode level0NodesEnumerator in SiteMap.CurrentNode.RootNode.ChildNodes)
      {
       if (level0NodesEnumerator.Title == "Business Units")
       {
        menuHTML = menuHTML + @"<table width='100%' cellspacing='0' cellpadding='0' border='0' align='left' id='menuControlTable' >";
        // Write Root Node
        if (SiteMap.CurrentNode.RootNode.HasChildNodes)
        {
         foreach (SiteMapNode level1NodesEnumerator in level0NodesEnumerator.ChildNodes)
         {
          menuHTML = menuHTML + @"<tr>" +
          @"<td class='colapseImg'>" +
          @"<a href="" mce_href=""javascript:collapseMenu('" +
          level1NodesEnumerator.Title.Replace(" ", "_") +
          @"');"" >" +
          @"<img src='images/buttons/winMinus.gif' alt='Expand " + level1NodesEnumerator.Title + "' border='0' align='absmiddle' id='" + level1NodesEnumerator.Title.Replace(" ", "_") + "CollImg'  /></a>" +
          @"</td>";
          switch (level1NodesEnumerator.Title)
          {
           case "1":
            menuHTML = menuHTML + "<td class='rootMenuPE'>";
            break;
           case "2":
            menuHTML = menuHTML + "<td class='rootMenuRM'>";
            break;
           case "3":
            menuHTML = menuHTML + "<td class='rootMenu'>";
            break;
           default:
            menuHTML = menuHTML + "<td class='rootMenu'>";
            break;
          }
          menuHTML = menuHTML + "<img src='images/shim.gif' width='1' height='18' border='0' alt='' align='absmiddle' />";
          if (SiteMap.CurrentNode.Url == level1NodesEnumerator.Url)
          {
           menuHTML = menuHTML + @"<span style=""text-decoration:underline; color:#FFFFFF;"">" + level1NodesEnumerator.Title + @"</span>";
          }
          else
          {
           menuHTML = menuHTML + @"<a href='" + level1NodesEnumerator.Url + @"' id='" + level1NodesEnumerator.Title.Replace(" ", "_") + "_Link' >" +
         level1NodesEnumerator.Title + "</a>";
          }
          menuHTML = menuHTML + "</td></tr>";
          if (level1NodesEnumerator.HasChildNodes)
          {
           menuHTML = menuHTML + "<tr><td colspan='2'>\n";
           menuHTML = menuHTML + "     <div id='" + level1NodesEnumerator.Title.Replace(" ", "_") + "'>\n";
           menuHTML = menuHTML + "     <table width='100%' cellspacing='0' cellpadding='0' border='0' align='left'>";
           //Write level 2 submenu
           foreach (SiteMapNode level2NodesEnumerator in level1NodesEnumerator.ChildNodes)
           {
            menuHTML = menuHTML + "         <tr>\n";
            menuHTML = menuHTML + "         <td class='colapseImg'>\n";
            menuHTML = menuHTML +
            @"<a href="" mce_href=""javascript:collapseMenu('" +
            level2NodesEnumerator.Title.Replace(" ", "_") +
            @"');"" >" +
            "<img src='images/buttons/winMinus.gif' alt='Collapse " +
            level2NodesEnumerator.Title +
            "' border='0' align='absmiddle' id='"
            + level2NodesEnumerator.Title.Replace(" ", "_") + "CollImg'  /></a>\n";
            menuHTML = menuHTML + "         </td>\n";
            menuHTML = menuHTML + "         <td class='parentNodeSubMenu'>";
            if (SiteMap.CurrentNode.Url == level2NodesEnumerator.Url)
            {
             menuHTML = menuHTML +
             @"<a href="" mce_href=""#"" id='" + level2NodesEnumerator.Title.Replace(" ", "_") + "_Link'" +
             @" style=""text-decoration:underline;"">" +
             level2NodesEnumerator.Title + "</a>";
            }
            else
            {
             menuHTML = menuHTML +
             @"<a href='" + level2NodesEnumerator.Url + "' id='" + level2NodesEnumerator.Title.Replace(" ", "_") + "_Link'>" +
             level2NodesEnumerator.Title + "</a>";
            }
            menuHTML = menuHTML + "</td></tr>\n";
            if (level2NodesEnumerator.HasChildNodes)
            {
             //Write level 3 submenu
             menuHTML = menuHTML + "<tr><td colspan='2'>";
             menuHTML = menuHTML + "                 <div id='" + level2NodesEnumerator.Title.Replace(" ", "_") + "'>\n";
             menuHTML = menuHTML + "                 <table width='100%' cellspacing='0' cellpadding='0' border='0' align='left'>\n";
             foreach (SiteMapNode level3NodesEnumerator in level2NodesEnumerator.ChildNodes)
             {
              menuHTML = menuHTML + "                 <tr>\n";
              menuHTML = menuHTML + "                 <td class='colapseImg'><img src='images/shim.gif' width='1' height='20' border='0' alt='' align='absmiddle' /></td>";
              menuHTML = menuHTML + "                 <td class='staticSubMenu'>";
              if (level3NodesEnumerator.Url == SiteMap.CurrentNode.Url)
              {
               menuHTML = menuHTML +
               @"<a href="" mce_href=""#"" id='" + level3NodesEnumerator.Title.Replace(" ", "_") + @"_Link' style=""text-decoration:underline;"">" + level3NodesEnumerator.Title + "</a>";
              }
              else
              {
               menuHTML = menuHTML +
                     @"<a href='" + level3NodesEnumerator.Url + "' id='" + level3NodesEnumerator.Title.Replace(" ", "_") + "_Link'>" + level3NodesEnumerator.Title + "</a>";
              }
              menuHTML = menuHTML + "</td></tr>\n";
              if (level3NodesEnumerator.HasChildNodes)
              {
                //Write level 3 submenu
               //menuHTML = menuHTML + "<tr><td colspan='2'>";
               //menuHTML = menuHTML + "                 <div id='" + level2NodesEnumerator.Title.Replace(" ", "_") + "'>\n";
               //menuHTML = menuHTML + "                 <table width='100%' cellspacing='0' cellpadding='0' border='0' align='left'>\n";
                foreach (SiteMapNode level4NodesEnumerator in level3NodesEnumerator.ChildNodes)
                {
                //menuHTML = menuHTML + "                 <tr>\n";
                //menuHTML = menuHTML + "                 <td class='colapseImg'><img src='images/shim.gif' width='1' height='20' border='0' alt='' align='absmiddle' /></td>";
                //menuHTML = menuHTML + "                 <td class='staticSubMenu'>";
                  if (level4NodesEnumerator.Url == SiteMap.CurrentNode.Url)
                  {
                 //menuHTML = menuHTML + "                 <tr>\n";
                 //menuHTML = menuHTML + "                 <td class='colapseImg'><img src='images/shim.gif' width='1' height='20' border='0' alt='' align='absmiddle' /></td>";
                 //menuHTML = menuHTML + "                 <td class='staticSubMenu'>";
                 //menuHTML = menuHTML +
                 //       @"<a href='" + level3NodesEnumerator.Url + "' id='" + level3NodesEnumerator.Title.Replace(" ", "_") + "_Link'>" + level3NodesEnumerator.Title + "</a>";
                 currentNode = level3NodesEnumerator.Title;
                 
                 //menuHTML = menuHTML +
                 //@"<a href="" mce_href=""#"" id='" + level4NodesEnumerator.Title.Replace(" ", "_") + @"_Link' style=""text-decoration:underline;"">" + level4NodesEnumerator.Title + "</a>";
                  }
                  else
                  {
                 //menuHTML = menuHTML +
                 //           @"<a href='" + level4NodesEnumerator.Url + "' id='" + level4NodesEnumerator.Title.Replace(" ", "_") + "_Link'>" + level4NodesEnumerator.Title + "</a>";
                  }
                  //menuHTML = menuHTML + "                 </td></tr>\n";
                }

              }
             }
             menuHTML = menuHTML + "                 </table>\n                  </div>\n";
             menuHTML = menuHTML + "</td></tr>";
            }
           }
           menuHTML = menuHTML + "             </table>\n</div>\n";
           menuHTML = menuHTML + "     </td></tr>\n";
          }
         }
        }
        if (nLevels > 2 && nLevels <= 4)
        {
         menuHTML = menuHTML + @"<script language=""javascript"" type=""text/javascript"">" +
               @"displayMenu(""" + SiteMap.CurrentNode.Title.Replace(" ", "_") + @"_Link"");" +
               @"</script>";
        }
        else if (nLevels > 4)
        {
         menuHTML = menuHTML + @"<script language=""javascript"" type=""text/javascript"">" +
               @"displayMenu(""" + currentNode.Replace(" ", "_") + @"_Link"");" +
               @"</script>";
        }
        menuControl1.InnerHtml = menuHTML + "</table>\n";
       }
      }
     }
    }


    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


    Main.js file located in scripts/main.js utilizes images in this directory images/buttons/

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    /* =========================================================================
    This function collapse and expand the left menu items at the left of the website
    when the user clicks on the images
    ============================================================================
    */
        function collapseMenu(x)
        {
            var actDiv = document.getElementById(x);
            var actImg = x + "CollImg";
            var imgDoc = document.images[actImg];
            if(actDiv.style.display != "none")
            {
                actDiv.style.display = "none";
                imgDoc.src="images/buttons/winPlus.gif" mce_src="images/buttons/winPlus.gif";
                imgDoc.alt ="Expand " + x.replace('_', ' ');
               
                        }
            else
            {
               actDiv.style.display = "";
               imgDoc.src="images/buttons/winMinus.gif" mce_src="images/buttons/winMinus.gif";
               imgDoc.alt ="Collapse " + x.replace('_', ' ');
            }
      /* ==================================================================================
      the following funtion initiate the left menu depending of their unit.
      ======================================================================================*/
           
        }
        function CollExpRD(d)
        {
        var rdTil = 'R1';
        var rdId = rdTil.replace(" ", "_");
        var rdDiv = document.getElementById(rdId);
        var rdImg = document.images[rdId + 'CollImg'];
            if(d==0)
            {
                rdDiv.style.display = "none";
                rdImg.src="images/buttons/winPlus.gif" mce_src="images/buttons/winPlus.gif";
                rdImg.alt = "Expand " + rdTil;
            }
            else
            {
                rdDiv.style.display = "";
                rdImg.src="images/buttons/winMinus.gif" mce_src="images/buttons/winMinus.gif";
                rdImg.alt = "Collapse " + rdTil;
            }
        }
        function CollExpPE(e)
        {
        var peTil = 'P1';
        var peId = peTil.replace(" ", "_");
        var peDiv = document.getElementById(peId);
        var peImg = document.images[peId + 'CollImg'];
            if(e==0)
            {
                peDiv.style.display = "none";
                peImg.src="images/buttons/winPlus.gif" mce_src="images/buttons/winPlus.gif";
                peImg.alt = "Expand " + peTil;
            }
            else
            {
                peDiv.style.display = "";
                peImg.src="images/buttons/winMinus.gif" mce_src="images/buttons/winMinus.gif";
                peImg.alt = "Collapse " + peTil;       
            }
       
        }
       
            function CollExpRM(f)
        {
        var rmTil = 'R1';
        var rmId = rmTil.replace(" ", "_");
        var rmDiv = document.getElementById(rmId);
        var rmImg = document.images[rmId + 'CollImg'];
               if(f==0)
            {
                rmDiv.style.display = "none";
                rmImg.src="images/buttons/winPlus.gif" mce_src="images/buttons/winPlus.gif";
                rmImg.alt = "Expand " + rmTil;
            }
            else
            {
                rmDiv.style.display = "";
                rmImg.src="images/buttons/winMinus.gif" mce_src="images/buttons/winMinus.gif";
                rmImg.alt = "Collapse " + rmTil;       
            }
       
        }
       
        function showLavel2(n)
        {
                        var a = document.getElementById(n).getElementsByTagName("div");
                        var m = document.getElementById(n).getElementsByTagName("img");
                for(i=0; i< a.length; i++){
                        a[i].style.display = "none";
                                        }
               for (i=0; i< m.length; i++)
               {
                if(m[i].id.indexOf('CollImg') > 0)
                {
                    m[i].src="images/buttons/winPlus.gif" mce_src="images/buttons/winPlus.gif";
                    m[i].alt = "Expand"
               }
        }
        }
       
        function initiMenu(){
        if(document.getElementById("menuTitleDiv")){
        var winLoc = window.location.href;
        if(winLoc.indexOf("/rd/") != -1){        
            CollExpRD(1);
            CollExpRM(0);
            CollExpPE(0);
      
       } 
         else if(winLoc.indexOf("/pe/") != -1)
         {
                CollExpRM(0);
                CollExpPE(1);
                CollExpRD(0);
         }
         else if(winLoc.indexOf("/rm/") != -1)
         {
                CollExpRM(1);
                CollExpPE(0);
                CollExpRD(0);
         }
         else
         {
                CollExpRM(1);
                CollExpPE(1);
                CollExpRD(1);
                showLavel2('R1');
                showLavel2('P2');
                showLavel2('R3');
         }
        
        
         }
        }
    //This function expands and collapse the menu control according to its current sitemap node.   
    function displayMenu(x)
    {
    if(document.getElementById(x))
    {
    var thisNode = document.getElementById(x);
    var parentDiv = thisNode.parentNode;
    var thisDiv = thisNode.id.replace("_Link", "");
    var t = document.getElementById("menuControlTable");
    var a = t.getElementsByTagName("div");
    var m = t.getElementsByTagName("img");
    var f = "";
    //Hide all the menus
        for(i=0; i< a.length; i++)
        {
            a[i].style.display = "none";
        }
        //Display the right buttons
        for (i=0; i< m.length; i++)
               {
                if(m[i].id.indexOf('CollImg') > 0)
                {
                    m[i].src="images/buttons/winPlus.gif" mce_src="images/buttons/winPlus.gif";
                    m[i].alt = "Expand"
               }
        }
        // Open the menu in the current node.
        if(document.getElementById(thisDiv))
        {
            document.getElementById(thisDiv).style.display = "";
            f = document.getElementById(thisDiv).id + "CollImg" ;
            if (document.images[f])
            {
                document.images[f].alt = "Collapse "
                document.images[f].src="images/buttons/winMinus.gif" mce_src="images/buttons/winMinus.gif";
            }
        }
        while (parentDiv.id != "menuControlTable" )
        {
            parentDiv.style.display = "";
            f = parentDiv.id + "CollImg" ;
            if (document.images[f])
            {
                document.images[f].alt = "Collapse "
                document.images[f].src="images/buttons/winMinus.gif" mce_src="images/buttons/winMinus.gif";
            }
            parentDiv = parentDiv.parentNode;
           
         }
        }
    }


     

  • Re: Javascript file requires access to images folder

    04-15-2008, 10:39 AM
    • All-Star
      18,400 point All-Star
    • PeterBrunone
    • Member since 06-19-2002, 5:15 AM
    • I'm standing behind you.
    • Posts 3,683
    • TrustedFriends-MVPs

    Does the website user account have permissions on the folder?  Usually if you're just running a straight anonymous site, this account will be called IUSR_servername (where servername is the name of the box).

     

    Peter Brunone
    MS MVP, ASP.NET
    Founder, EasyListBox.com
    Do the impossible, and go home early.
  • Re: Javascript file requires access to images folder

    04-15-2008, 11:46 AM
    • Member
      11 point Member
    • jhuezo
    • Member since 03-14-2006, 3:23 PM
    • Posts 9
    I guess my post is some what ambiguous ,  What I should have asked is can I do this in my main.js file  Many thanks .. function CollExpRD(d)
        {
        var rdTil = 'R1';
        var rdId = rdTil.replace(" ", "_");
        var rdDiv = document.getElementById(rdId);
        var rdImg = document.images[rdId + 'CollImg'];
            if(d==0)
            {
                rdDiv.style.display = "none";
                rdImg.src = '<%=ResolveClientUrl("~/images/buttons/winPlus.gif")%>’  
    rdImg.alt = "Expand " + rdTil;
            }
            else
            {
                rdDiv.style.display = "";
                rdImg.src="images/buttons/winMinus.gif" mce_src="images/buttons/winMinus.gif";
                rdImg.alt = "Collapse " + rdTil;
            }
        }

     

  • Re: Javascript file requires access to images folder

    04-15-2008, 11:56 AM
    • All-Star
      18,400 point All-Star
    • PeterBrunone
    • Member since 06-19-2002, 5:15 AM
    • I'm standing behind you.
    • Posts 3,683
    • TrustedFriends-MVPs

    Well, no, you can't have ASP notation in a .js file (at least not without altering the ISAPI filter settings in IIS).

    You'd have to define the path value as a global Javascript variable in the aspx of the parent page, and then your separate JS file would be able to use it.

    Cheers, 

    Peter Brunone
    MS MVP, ASP.NET
    Founder, EasyListBox.com
    Do the impossible, and go home early.
  • Re: Javascript file requires access to images folder

    04-15-2008, 10:34 PM
    Answer
    • Participant
      1,037 point Participant
    • bubblesnout
    • Member since 08-08-2007, 10:54 PM
    • Posts 238

    You can, actually. Rename the js file to whatever.aspx. Then in your script declaration, just change it to:
    <script type="text/javascript" src="whatever.aspx" /> (or wherever it is, and what it's called).

    The scripts will still run fine, it will build without a problem, and because it is an aspx file, the server will parse those code blocks and you will achieve the results you want.

    Basically, just rename them to use a .aspx extension instead of a .js one. 

  • Re: Javascript file requires access to images folder

    04-16-2008, 3:14 AM
    • Member
      11 point Member
    • jhuezo
    • Member since 03-14-2006, 3:23 PM
    • Posts 9

    Cool All i have to say is Wow. It worked. thank you very much to all who replied to this post.

  • Re: Javascript file requires access to images folder

    04-16-2008, 8:38 AM
    • All-Star
      18,400 point All-Star
    • PeterBrunone
    • Member since 06-19-2002, 5:15 AM
    • I'm standing behind you.
    • Posts 3,683
    • TrustedFriends-MVPs

     Thanks for the reminder, bubblesnout :)  Sometimes we can forget the simple things...

    Peter Brunone
    MS MVP, ASP.NET
    Founder, EasyListBox.com
    Do the impossible, and go home early.
Page 1 of 1 (9 items)