Changes between Initial Version and Version 1 of Ticket #5001


Ignore:
Timestamp:
Dec 18, 2007, 6:05:05 PM (12 years ago)
Author:
bill
Comment:

Hmm, I can reproduce the behavior, but the thing is that you are sending the browser to a new URL (by following the #target4 hyperlink), except that the new URL is quite similar to the old one so the page isn't actually refreshing... and dijit really isn't set up for things like that. The only suggestion I can make is to modify those links to do something in javascript, rather than making them tell the browser to go to a different UTL. (You could have an onclick handler that calls dojo.stopEvent(evt),

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #5001

    • Property Status changed from new to closed
    • Property Resolution changed from to wontfix
  • Ticket #5001 – Description

    initial v1  
    1 We use a similar layout like the SplitLayoutExample from dmachi (see http://dojotoolkit.org/~dmachi/examples/SplitLayoutExample.html), the only difference is that the left navigation pane contains links to navigate through the contents in the bottom split area. This works in IE6 but breaks the layout of the inner split pane in FF 2.0.0.8 if the user ckicks on a link in the navigation pane. In order to demonstrate this I modified the SplitLayoutExample from dmachi:
    2 
    3 <head>
    4         <title>Split Layout Example</title>
    5 
    6         <script type="text/javascript" src="../dojo-0.9/dojo/dojo.js"
    7                 djConfig="isDebug: false, parseOnLoad: true"></script>
    8         <script type="text/javascript">
    9                 dojo.require("dijit.layout.SplitContainer");
    10                 dojo.require("dijit.layout.ContentPane");
    11                 dojo.require("dijit.layout.LayoutContainer");
    12                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
    13         </script>
    14         <style type="text/css">
    15                 @import "../dojo-0.9/dojo/resources/dojo.css";
    16                 @import "../dojo-0.9/dijit/themes/tundra/tundra.css";
    17 
    18                 body,html {
    19                         width:100%;
    20                         height: 100%;
    21                         padding: 0px;
    22                         margin: 0px;
    23                         overflow: hidden;
    24                 }
    25 
    26         </style>
    27 </head>
    28 
    29 <body class="tundra">
    30 
    31         <div dojoType="dijit.layout.LayoutContainer" style="width:100%;height:100%;">
    32                 <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="width: 100%; height: 50px; border: 1px solid #454545">
    33                         Header
    34                 </div>
    35        
    36                 <div dojoType="dijit.layout.SplitContainer" orientation="horizontal" sizerWidth="7" activeSizing="false" layoutAlign="client" style="border: 1px solid #454545;">
    37                         <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="20" style="background-color:#efefef;">
    38                                 Left Navigation
    39 <ul>
    40 <li><a href="#target1">Target1</a></li>
    41 <li><a href="#target2">Target2</a></li>
    42 <li><a href="#target3">Target3</a></li>
    43 <li><a href="#target4">Target4</a></li>
    44 <li><a href="#target5">Target5</a></li>
    45 </ul>
    46                         </div>
    47 
    48                         <div dojoType="dijit.layout.SplitContainer" orientation="vertical" sizeMin="20" sizeShare="80" sizerWidth="7" activeSizing="false" style="background-color: #efefef">
    49                                 <div dojoType="dijit.layout.ContentPane" style="background-color: #ababab" sizeShare="90">
    50                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    51                                 </div>
    52 
    53                                 <div dojoType="dijit.layout.ContentPane" style="background-color: #898989" sizeShare="10">
    54                                         Bottom Split Area
    55 <a id="target1">Target 1</a>
    56                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    57 
    58 <a id="target2">Target 2</a>
    59                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    60 
    61 <a id="target3">Target 3</a>
    62                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    63 
    64 <a id="target4">Target 4</a>
    65                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    66 
    67 <a id="target5">Target 5</a>
    68                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum .Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    69 
    70                                 </div>
    71                         </div>
    72                 </div>
    73 
    74         </div>
    75 </body>
     1We use a similar layout like the SplitLayoutExample from dmachi (see http://dojotoolkit.org/~dmachi/examples/SplitLayoutExample.html), the only difference is that the left navigation pane contains links to navigate through the contents in the bottom split area. This works in IE6 but breaks the layout of the inner split pane in FF 2.0.0.8 if the user ckicks on a link in the navigation pane. In order to demonstrate this I modified the SplitLayoutExample from dmachi.  See attached file.