Hi, Further to my previous email, In my Apache configuration file (httpd.conf), I set
Header set X-UA-Compatible "IE=8" And it seems, in IE8 its working fine. But it still seems not working in IE7/IE6. I have tried to add, Header set X-UA-Compatible "IE=7" Header set X-UA-Compatible "IE=5" Header set X-UA-Compatible "IE=EmulateIE7" but no luck. Could any one update me, how to fix it. and make it working on IE7/IE6. Awaiting for your reply. Thanks. Note: Initially, this email is failed, hence I resend it.. If you receive it previously, sorry for that. On Wed, Jan 20, 2010 at 8:55 PM, Asharudeen <asharud...@gmail.com> wrote: > Hi, > > I will explain my use case here. > > I am new to JQuery and I am currently working on listing Dynamic Tree list > by using JQuery column navigation plugin. > > Please refer the following link to check the plugin demo page: (Note: The > demo is not a dynamic tree list) > http://source.polaris-digital.com/column-navigation/ (demo page) > http://plugins.jquery.com/project/column-navigation (got from here) > > I am trying to create trees dynamically and need some help regarding this: > > What I am doing is, I have the following files > > > _________________________________________________________________________________________________________________________ > > 1. PHP file (Initially Root drives will be listed here) > > //Some part of code here. > > <script type="text/javascript"> > $(document).ready( function() { > $("#myTree").columnNavigation({ > containerPosition:"relative", > containerWidth:"790px", > containerHeight:"350px", > containerBackgroundColor:"rgb(255,255,255)", > columnWidth:250, > columnFontFamily:"'Helvetica Neue', 'HelveticaNeue', Helvetica, > sans-serif", > columnFontSize:"90%", > columnSeperatorStyle:"1px solid rgb(220,220,220)", > columnDeselectFontWeight:"normal", > columnDeselectColor:"rgb(50,50,50)", > columnSelectFontWeight:"normal", > columnSelectColor:"rgb(255,255,255)", > columnSelectBackgroundColor:"rgb(27,115,213)", > > columnSelectBackgroundImage:"url('styles/common/images/list-selected-background.jpg')", > columnSelectBackgroundRepeat:"repeat-x", > columnSelectBackgroundPosition:"top", > columnItemPadding:"3px 3px 5px 3px", > columnScrollVelocity:200, callBackFunction > : function( obj ) { > alert( $(obj).attr("href") ); > } > }); > }); > </script> > > //Here I list the root drives like below: > > <div id="myTree"> > <ul> > <div> > <li id='someID'> > <a class="document" id="someID" onClick="javascript: Listsubdirs('C:/')"> > C:/ </a> > </li> > <li id='someID'> > <a class="document" id="someID" onClick="javascript: Listsubdirs('D:/')"> > D:/ </a> > </li> > </div> > </ul> > </div> > > When the page load it will list the root drive and apply the styles of > 'columnNavigation' when the document is ready. > > > _________________________________________________________________________________________________________________________ > > > 2. In the Js file, I am using Ajax calls and get the subdireectories and > list those things. > > //Some part of code. Using Ajax calls I get the sub directories for C:/ and > I will construct the html as below and append to the parent using the > parents ID. > > //Construction (the following is the sample, and there could be some quotes > issue.. pls just ignore that.) > Listsubdirs(parent) > { > //AJAX send request > } > > FunctionForAjaxResponse > { > var subtree = "<ul>"; > subtree = subtree + "<div>"; > subtree = subtree + "<li id='someID'>"; > subtree = subtree + "<a class="document" id="someID" > onClick="javascript: Listsubdirs('C:/SubDir1')"> SubDir1 </a>"; > subtree = subtree + "</li>"; > subtree = subtree + "<li id='someID'>"; > subtree = subtree + "<a class="document" id="someID" > onClick="javascript: Listsubdirs('C:/SubDir2')"> SubDir2 </a>"; > subtree = subtree + "</li>"; > subtree = subtree + "</div>"; > subtree = subtree + "</ul>"; > > var parentelement = document.getElementById('<ID of C:/ anchor>'); > > parentelement.innerHTML = parentelement.innerHTML + subtree; > > //When I do this, the html elements get correctly added. But the styles > of 'myTree' has not applied correctly. Hence I copied the columnNavigation > code here as below. After appending I put a function to call that code. > > applyStyles(); > > //After this the styles are applied correctly. But it once again list the > root drives. I think since it apply the styles again. Not sure how to > automatically apply the styles. If I click on the C:/ drive again, it list > the subdirectories. > > //To list the subdirectories, I trigger onclick event for parent drive > manually > > $('parentID').click(); > //Now it seems to list correctly. similarly for subdrives I trigger event > for the parents. (for eg, if I click C:/subdir1 then I trigger event for C:/ > and then subdir1 > } > > > function applyStyles() { > $("#myTree").columnNavigation({ > containerPosition:"relative", > containerWidth:"790px", > containerHeight:"350px", > containerBackgroundColor:"rgb(255,255,255)", > columnWidth:250, > columnFontFamily:"'Helvetica Neue', 'HelveticaNeue', Helvetica, > sans-serif", > columnFontSize:"90%", > columnSeperatorStyle:"1px solid rgb(220,220,220)", > columnDeselectFontWeight:"normal", > columnDeselectColor:"rgb(50,50,50)", > columnSelectFontWeight:"normal", > columnSelectColor:"rgb(255,255,255)", > columnSelectBackgroundColor:"rgb(27,115,213)", > > columnSelectBackgroundImage:"url('styles/common/images/list-selected-background.jpg')", > columnSelectBackgroundRepeat:"repeat-x", > columnSelectBackgroundPosition:"top", > columnItemPadding:"3px 3px 5px 3px", > columnScrollVelocity:200, callBackFunction > : function( obj ) { > alert( $(obj).attr("href") ); > //obj.fn.columnNavigation = function( configuration ) > > } > }); > } > > > _________________________________________________________________________________________________________________________ > > > The above code works fine in Firefox and Chrome browsers. But > Unfortunately, this code has not work on IE 6/IE 7/IE 8 browsers. Only the > root drives listed correctly. I could not find any error on IE browsers. I > am not sure how to make this work on IE browser. I try to debug by using 'IE > Developer Tools'. If I change the 'Compatiblity Mode' to 'Internet Explorer > 7' or 'Internet Explorer 8' it seems to be partially working files. ie, > subtrees working. But it has not work with the default Quirks mode. > > Could any one update me, what I am doing wrong here and how to fix this in > IE browsers. > > Also, is there a way to automically apply the styles instead of calling > 'applyStyles()' and trigger onclick events. > > Note: Currently I am using JQuery 1.2.6 (Also tried with 1.4) > > Thanks in Advance for your response. > > > > > > > > On Tue, Jan 19, 2010 at 10:25 PM, Nathan Klatt <n8kl...@gmail.com> wrote: > >> On Tue, Jan 19, 2010 at 10:03 AM, Asharudeen <asharud...@gmail.com> >> wrote: >> > Unfortunately, It seems trigger is not a issue.. I am trying to list >> dynamic >> > file tree using JQuery. It seems to be work fine in Firefox. But in IE, >> it >> > has not working.. I thought it is related to trigger event. >> >> It might be worthwhile for you to put together a simple example on one >> of the collaborative Javascript sites (e.g., http://jsbin.com) so >> others on the list can easily see it for ourselves and play around. >> >> Nathan >> > >
