Support forums » Products » Cute Editor for .NET » Tab content is not correct anymore

Tab content is not correct anymore

  •  02-16-2011, 4:49 AM

    Tab content is not correct anymore

    Reply Quote
    Hi,
    We have problem with tab content.
     
    Steps to reproduce:
    1. Copy the following html code to "HTML" view.
    1. <ul id="countrytabs" class="shadetabs">  
    2. <li><a href="#" rel="country1" class="selected">Tab 1</a></li>  
    3. <li><a href="#" rel="country2">Tab 2</a></li>  
    4. <li><a href="#" rel="country3">Tab 3</a></li>  
    5. <li><a href="#" rel="country4">Tab 4</a></li>  
    6. <li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Dynamic Drive</a></li>  
    7. </ul>  
    2. Swith to "Normal" view.
    3. Swith back to "HTML" view. Notice that "rel=country1" is now inside the "href" of the second list item.
    1. <ul id="countrytabs" class="shadetabs">  
    2.     <li><a class="selected" href="#">Tab 1</a></li>  
    3.     <li><a href=" rel=country1#" rel="country2">Tab 2</a></li>  
    4.     <li><a href="#">Tab 3</a></li>  
    5.     <li><a href=" rel=country3#" rel="country4">Tab 4</a></li>  
    6.     <li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Dynamic Drive</a> </li>  
    7. </ul>  
    After the content is saved, the mouse click event of the first tab does not fire anymore. I attached the full html code which I extracted from http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm at the bottom of this post.
     
    Please advise. Thanks.
     
    Regards,
    Kok Foo
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml" >  
    3. <head>  
    4.     <title>Untitled Page</title>  
    5. </head>  
    6. <body>  
    7. <style type="text/css">    
    8. /* ######### CSS for Shade Tabs. Remove if not using ######### */   
    9.   
    10. .shadetabs{   
    11. padding: 3px 0;   
    12. margin-left: 0;   
    13. margin-top: 1px;   
    14. margin-bottom: 0;   
    15. font: bold 12px Verdana;   
    16. list-style-type: none;   
    17. text-align: left; /*set to left, center, or right to align the menu as desired*/   
    18. }   
    19.   
    20. .shadetabs li{   
    21. display: inline;   
    22. margin: 0;   
    23. }   
    24.   
    25. .shadetabs li a{   
    26. text-decoration: none;   
    27. position: relative;   
    28. z-index: 1;   
    29. padding: 3px 7px;   
    30. margin-right: 3px;   
    31. border: 1px solid #778;   
    32. color: #2d2b2b;   
    33. background: white url(shade.gif) top left repeat-x;   
    34. }   
    35.   
    36. .shadetabs li a:visited{   
    37. color: #2d2b2b;   
    38. }   
    39.   
    40. .shadetabs li a:hover{   
    41. text-decoration: underline;   
    42. color: #2d2b2b;   
    43. }   
    44.   
    45. .shadetabs li a.selected{ /*selected main tab style */   
    46. position: relative;   
    47. top: 1px;   
    48. }   
    49.   
    50. .shadetabs li a.selected{ /*selected main tab style */   
    51. background-image: url(shadeactive.gif);   
    52. border-bottom-color: white;   
    53. }   
    54.   
    55. .shadetabs li a.selected:hover{ /*selected main tab style */   
    56. text-decoration: none;   
    57. }   
    58.   
    59. .tabcontent{   
    60. display:none;   
    61. }   
    62.   
    63. @media print {   
    64. .tabcontent {   
    65. display:block !important;   
    66. }   
    67. }   
    68.   
    69. /* ######### CSS for Inverted Modern Bricks II Tabs. Remove if not using ######### */   
    70.   
    71. .modernbricksmenu2{   
    72. padding: 0;   
    73. width: 362px;   
    74. border-top: 5px solid #D25A0B; /*Brown color theme*/    
    75. background: transparent;   
    76. voice-family: "\"}\"";   
    77. voice-family: inherit;   
    78. }   
    79.   
    80. .modernbricksmenu2 ul{   
    81. margin:0;   
    82. margin-left: 10px; /*margin between first menu item and left browser edge*/   
    83. padding: 0;   
    84. list-style: none;   
    85. }   
    86.   
    87. .modernbricksmenu2 li{   
    88. display: inline;   
    89. margin: 0 2px 0 0;   
    90. padding: 0;   
    91. text-transform:uppercase;   
    92. }   
    93.   
    94. .modernbricksmenu2 a{   
    95. float: left;   
    96. display: block;   
    97. font: bold 11px Arial;   
    98. color: white;   
    99. text-decoration: none;   
    100. margin: 0 1px 0 0; /*Margin between each menu item*/   
    101. padding: 5px 10px;   
    102. background-color: black; /*Brown color theme*/    
    103. border-top: 1px solid white;   
    104. }   
    105.   
    106. .modernbricksmenu2 a:hover{   
    107. background-color: #D25A0B; /*Brown color theme*/    
    108. color: white;   
    109. }   
    110.   
    111. .modernbricksmenu2 a.selected{ /*currently selected tab*/   
    112. background-color: #D25A0B; /*Brown color theme*/    
    113. color: white;   
    114. border-color: #D25A0B; /*Brown color theme*/    
    115. }   
    116.   
    117. .tabcontent{   
    118. display:none;   
    119. }   
    120.   
    121. @media print {   
    122. .tabcontent {   
    123. display:block !important;   
    124. }   
    125. }   
    126.   
    127. /* ######### CSS for Indented CSS Tabs. Remove if not using ######### */   
    128.   
    129.   
    130. .indentmenu{   
    131. font: bold 13px Arial;   
    132. width: 100%; /*leave this value as is in most cases*/   
    133. }   
    134.   
    135. .indentmenu ul{   
    136. margin: 0;   
    137. padding: 0;   
    138. float: left;   
    139. /* width: 80%; width of menu*/   
    140. border-top: 1px solid navy; /*navy border*/   
    141. background: black url(indentbg.gif) center center repeat-x;   
    142. }   
    143.   
    144. .indentmenu ul li{   
    145. display: inline;   
    146. }   
    147.   
    148. .indentmenu ul li a{   
    149. float: left;   
    150. color: white; /*text color*/   
    151. padding: 5px 11px;   
    152. text-decoration: none;   
    153. border-right: 1px solid navy; /*navy divider between menu items*/   
    154. }   
    155.   
    156. .indentmenu ul li a:visited{   
    157. color: white;   
    158. }   
    159.   
    160. .indentmenu ul li a.selected{   
    161. color: white !important;   
    162. padding-top: 6px; /*shift text down 1px*/   
    163. padding-bottom: 4px;   
    164. background: black url(indentbg2.gif) center center repeat-x;   
    165. }   
    166.   
    167.   
    168. .tabcontentstyle{ /*style of tab content oontainer*/   
    169. border: 1px solid gray;   
    170. width: 450px;   
    171. margin-bottom: 1em;   
    172. padding: 10px;   
    173. }   
    174.   
    175. .tabcontent{   
    176. display:none;   
    177. }   
    178.   
    179. @media print {   
    180. .tabcontent {   
    181. display:block !important;   
    182. }   
    183. }   
    184. </style>  
    185.   
    186. <ul id="countrytabs" class="shadetabs">  
    187. <li><a href="#" rel="country1" class="selected">Tab 1</a></li>  
    188. <li><a href="#" rel="country2">Tab 2</a></li>  
    189. <li><a href="#" rel="country3">Tab 3</a></li>  
    190. <li><a href="#" rel="country4">Tab 4</a></li>  
    191. <li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Dynamic Drive</a></li>  
    192. </ul>  
    193.   
    194. <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">  
    195.   
    196. <div id="country1" class="tabcontent">  
    197. Tab content 1 here<br />Tab content 1 here<br />  
    198. </div>  
    199.   
    200. <div id="country2" class="tabcontent">  
    201. Tab content 2 here<br />Tab content 2 here<br />  
    202. </div>  
    203.   
    204. <div id="country3" class="tabcontent">  
    205. Tab content 3 here<br />Tab content 3 here<br />  
    206. </div>  
    207.   
    208. <div id="country4" class="tabcontent">  
    209. Tab content 4 here<br />Tab content 4 here<br />  
    210. </div>  
    211.   
    212. </div>  
    213.   
    214. <p><b><a href="BLOCKED SCRIPTcountries.expandit(3)">Click here to select last tab</a></b></p>  
    215.   
    216. <script type="text/javascript">  
    217.     //** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)   
    218.     //** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:   
    219.     //   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected   
    220.     //   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted   
    221.     //   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)   
    222.     //   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container   
    223.     //** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically   
    224.     //** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0)    
    225.   
    226.     ////NO NEED TO EDIT BELOW////////////////////////   
    227.   
    228.     function ddtabcontent(tabinterfaceid) {   
    229.         this.tabinterfaceid = tabinterfaceid //ID of Tab Menu main container   
    230.         this.tabs = document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container   
    231.         this.enabletabpersistence = true  
    232.         this.hottabspositions = [] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container   
    233.         this.currentTabIndex = 0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array   
    234.         this.subcontentids = [] //Array to store ids of the sub contents ("rel" attr values)   
    235.         this.revcontentids = [] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)   
    236.         this.selectedClassTarget = "link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")   
    237.     }   
    238.   
    239.     ddtabcontent.getCookie = function(Name) {   
    240.         var re = new RegExp(Name + "=[^;]+", "i"); //construct RE to search for target name/value pair   
    241.         if (document.cookie.match(re)) //if cookie found   
    242.             return document.cookie.match(re)[0].split("=")[1] //return its value   
    243.         return ""   
    244.     }   
    245.   
    246.     ddtabcontent.setCookie = function(name, value) {   
    247.         document.cookie = name + "=" + value + ";path=/" //cookie value is domain wide (path=/)   
    248.     }   
    249.   
    250.     ddtabcontent.prototype = {   
    251.   
    252.         expandit: function(tabid_or_position) { //PUBLIC function to select a tab either by its ID or position(int) within its peers   
    253.             this.cancelautorun() //stop auto cycling of tabs (if running)   
    254.             var tabref = ""  
    255.             try {   
    256.                 if (typeof tabid_or_position == "string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr   
    257.                     tabref = document.getElementById(tabid_or_position)   
    258.                 else if (parseInt(tabid_or_position) != NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr   
    259.                     tabref = this.tabs[tabid_or_position]   
    260.             }   
    261.             catch (err) { alert("Invalid Tab ID or position entered!") }   
    262.             if (tabref != "") //if a valid tab is found based on function parameter   
    263.                 this.expandtab(tabref) //expand this tab   
    264.         },   
    265.   
    266.         cycleit: function(dir, autorun) { //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )   
    267.             if (dir == "next") {   
    268.                 var currentTabIndex = (this.currentTabIndex < this.hottabspositions.length - 1) ? this.currentTabIndex + 1 : 0   
    269.             }   
    270.             else if (dir == "prev") {   
    271.                 var currentTabIndex = (this.currentTabIndex > 0) ? this.currentTabIndex - 1 : this.hottabspositions.length - 1   
    272.             }   
    273.             if (typeof autorun == "undefined") //if cycleit() is being called by user, versus autorun() function   
    274.                 this.cancelautorun() //stop auto cycling of tabs (if running)   
    275.             this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])   
    276.         },   
    277.   
    278.         setpersist: function(bool) { //PUBLIC function to toggle persistence feature   
    279.             this.enabletabpersistence = bool  
    280.         },   
    281.   
    282.         setselectedClassTarget: function(objstr) { //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")   
    283.             this.selectedClassTarget = objstr || "link"   
    284.         },   
    285.   
    286.         getselectedClassTarget: function(tabref) { //Returns target element to assign "selected" CSS class to   
    287.             return (this.selectedClassTarget == ("linkparent".toLowerCase())) ? tabref.parentNode : tabref   
    288.         },   
    289.   
    290.         urlparamselect: function(tabinterfaceid) {   
    291.             var result = window.location.search.match(new RegExp(tabinterfaceid + "=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL   
    292.             return (result == null) ? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index   
    293.         },   
    294.   
    295.         expandtab: function(tabref) {   
    296.             var subcontentid = tabref.getAttribute("rel") //Get id of subcontent to expand   
    297.             //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through   
    298.             var associatedrevids = (tabref.getAttribute("rev")) ? "," + tabref.getAttribute("rev").replace(/\s+/, "") + "," : ""   
    299.             this.expandsubcontent(subcontentid)   
    300.             this.expandrevcontent(associatedrevids)   
    301.             for (var i = 0; i < this.tabs.length; i++) { //Loop through all tabs, and assign only the selected tab the CSS class "selected"   
    302.                 this.getselectedClassTarget(this.tabs[i]).className = (this.tabs[i].getAttribute("rel") == subcontentid) ? "selected" : ""   
    303.             }   
    304.             if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers   
    305.                 ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)   
    306.             this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array   
    307.         },   
    308.   
    309.         expandsubcontent: function(subcontentid) {   
    310.             for (var i = 0; i < this.subcontentids.length; i++) {   
    311.                 var subcontent = document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)   
    312.                 subcontent.style.display = (subcontent.id == subcontentid) ? "block" : "none" //"show" or hide sub content based on matching id attr value   
    313.             }   
    314.         },   
    315.   
    316.         expandrevcontent: function(associatedrevids) {   
    317.             var allrevids = this.revcontentids   
    318.             for (var i = 0; i < allrevids.length; i++) { //Loop through rev attributes for all tabs in this tab interface   
    319.                 //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it   
    320.                 document.getElementById(allrevids[i]).style.display = (associatedrevids.indexOf("," + allrevids[i] + ",") != -1) ? "block" : "none"   
    321.             }   
    322.         },   
    323.   
    324.         setcurrenttabindex: function(tabposition) { //store current position of tab (within hottabspositions[] array)   
    325.             for (var i = 0; i < this.hottabspositions.length; i++) {   
    326.                 if (tabposition == this.hottabspositions[i]) {   
    327.                     this.currentTabIndex = i   
    328.                     break   
    329.                 }   
    330.             }   
    331.         },   
    332.   
    333.         autorun: function() { //function to auto cycle through and select tabs based on a set interval   
    334.             this.cycleit('next', true)   
    335.         },   
    336.   
    337.         cancelautorun: function() {   
    338.             if (typeof this.autoruntimer != "undefined")   
    339.                 clearInterval(this.autoruntimer)   
    340.         },   
    341.   
    342.         init: function(automodeperiod) {   
    343.             var persistedtab = ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)   
    344.             var selectedtab = -1 //Currently selected tab index (-1 meaning none)   
    345.             var selectedtabfromurl = this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index  
    346.             this.automodeperiod = automodeperiod || 0   
    347.             for (var i = 0; i < this.tabs.length; i++) {   
    348.                 this.tabs[i].tabposition = i //remember position of tab relative to its peers   
    349.                 if (this.tabs[i].getAttribute("rel")) {   
    350.                     var tabinstance = this  
    351.                     this.hottabspositions[this.hottabspositions.length] = i //store position of "hot" tab ("rel" attr defined) relative to its peers   
    352.                     this.subcontentids[this.subcontentids.length] = this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)   
    353.                     this.tabs[i].onclick = function() {   
    354.                         tabinstance.expandtab(this)   
    355.                         tabinstance.cancelautorun() //stop auto cycling of tabs (if running)   
    356.                         return false   
    357.                     }   
    358.                     if (this.tabs[i].getAttribute("rev")) { //if "rev" attr defined, store each value within "rev" as an array element   
    359.                         thisthis.revcontentids = this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))   
    360.                     }   
    361.                     if (selectedtabfromurl == i || this.enabletabpersistence && selectedtab == -1 && parseInt(persistedtab) == i || !this.enabletabpersistence && selectedtab == -1 && this.getselectedClassTarget(this.tabs[i]).className == "selected") {   
    362.                         selectedtab = i //Selected tab index, if found   
    363.                     }   
    364.                 }   
    365.             } //END for loop   
    366.             if (selectedtab != -1) //if a valid default selected tab index is found   
    367.                 this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)   
    368.             else //if no valid default selected index found   
    369.                 this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr   
    370.             if (parseInt(this.automodeperiod) > 500 && this.hottabspositions.length > 1) {   
    371.                 this.autoruntimer = setInterval(function() { tabinstance.autorun() }, this.automodeperiod)   
    372.             }   
    373.         } //END int() function   
    374.   
    375. } //END Prototype assignment   
    376.   
    377.         var countries = new ddtabcontent("countrytabs")   
    378.         countries.setpersist(true)   
    379.         countries.setselectedClassTarget("link") //"link" or "linkparent"   
    380.         countries.init()   
    381. </script>  
    382. </body>  
    383. </html>  
     
     
     
     
     
     
     
     
View Complete Thread