DZone Snippets: tabs code http://snippets.dzone.com/posts Sun, 18 May 2008 03:44:20 GMT DZone Snippets: tabs code create an array or split a long string seperated by tabs newlines carriage returns and commas. http://snippets.dzone.com/posts/show/4120 create an array or split a long string seperated by tabs newlines carriage returns and commas. <br /> <br />EG <br /> <br />emails = "skdjf@sdklfj.com sdflj@kj.com sldfj@klj.com, slkj@kjl.com,lskjdf@lkj.com, \r\nlkjkjl@kjk.com" <br /> <br />becomes <br /> <br />=> ["skdjf@sdklfj.com", "sdflj@kj.com", "sldfj@klj.com", "slkj@kjl.comlskjdf@lkj.com", "lkjkjl@kjk.com"] <br /> <br /><code> <br />emails = emails.split(/,/).join().split() <br /></code> Sat, 09 Jun 2007 00:48:09 GMT http://snippets.dzone.com/posts/show/4120 mcarr (matt) Tabs based on definition list http://snippets.dzone.com/posts/show/4113 // description of your code here <br /> <br /><code> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml"> <br /><head> <br /><style type="text/css"> <br />dl.tabstrip { <br />float:left; <br />width:60em; <br />font-size:120%; <br />line-height:normal; <br />background: url("images/tabstripbottom.png") repeat-x bottom; <br />margin:0; <br />padding:8px 8px 0; <br />} <br /> <br />dl.tabstrip dt { <br />float:left; <br />padding:0; <br />margin:0 2px 0 0; <br />} <br /> <br />dl.tabstrip a { <br />display:block; <br />padding: 4px 12px 4px; <br />color:black; <br />font-family:verdana, sans-serif; <br />text-decoration:none; <br />} <br /> <br />dt.selected { <br />background: url("images/tabright.png") top right no-repeat; <br />} <br /> <br />dt.selected a { <br />background: url("images/tableft.png") top left no-repeat; <br />padding-bottom:5px; <br />} <br /> <br /> <br />dt.unselected { <br />background: url("images/unselectedtabright.png") top right no-repeat; <br />} <br /> <br />dt.unselected a { <br />background: url("images/unselectedtableft.png") top left no-repeat; <br />} <br /> <br />.tabstrip dd { <br />position:fixed; <br />left:8px; <br />top: 2.5em; <br />border: 1px solid #6290d2; <br />border-top:none; <br />background:#fff; <br />margin:0; <br />height:10em; <br />width: 60em; <br />padding:8px 8px 8px 6px; <br />} <br /> <br />dd.selected { <br />display:block; <br />} <br /> <br />dd.unselected { <br />display:none; <br />} <br /></style> <br /></head> <br /> <br /><body> <br /><dl class="tabstrip"> <br /> <dt class="unselected"><a href="#">Tracy</a></dt> <br /> <dd class="unselected"> <br /> <p>Position: President</p> <br /> </dd> <br /> <br /> <dt class="selected"><a href="#">Andy</a></dt> <br /> <dd class="selected"> <br /> <p>Position: Architect</p> <br /> </dd> <br /> <br /> <dt class="unselected"><a href="#">Ron</a></dt> <br /> <dd class="unselected"> <br /> <p>Position: Operations Manager</p> <br /> </dd> <br /></dl> <br /></body> <br /></html></code> Thu, 07 Jun 2007 18:18:00 GMT http://snippets.dzone.com/posts/show/4113 AndyV (Andy Vanasse) DHTML Tabs http://snippets.dzone.com/posts/show/2011 Reformats a structured HTML page with tabs for each section. <br /> <br /><code> <br /><html> <br /><head> <br /><script type="text/javascript"> <br /> TAB_HEADINGS = 'h2'; <br /> TAB_CLASS = 'tab'; <br /> SECTION_CLASS = 'section'; <br /> QUERY_SECTION_ARG = 'section'; <br /> TAB_SELECTED_CLASS = 'selected'; <br /> TAB_NOT_SELECTED_CLASS = 'not-selected'; <br /> LOADING_ELM_ID = 'loading'; <br /> CONTENT_HOLDER_ID = 'content-holder'; <br /> <br /> lastSection = 0 <br /> function checkHash() { <br /> var section = get_selected(); <br /> if(section != lastSection) { <br /> show_section(section); <br /> lastSection = section; <br /> } <br /> } <br /> <br /> function get_elements() { <br /> var divs = document.getElementsByTagName("div"); <br /> var htags = document.getElementsByTagName(TAB_HEADINGS); <br /> sections = []; <br /> tabs = []; <br /> headings = [] <br /> for(var i=0; i<divs.length; i++) { <br /> if(divs[i].className == SECTION_CLASS) sections.push(divs[i]); <br /> } <br /> for(var i=0; i<htags.length; i++) { <br /> if(htags[i].className == TAB_CLASS) { <br /> var span = document.createElement("span"); <br /> span.innerHTML = htags[i].innerHTML; <br /> tabs.push(span); <br /> headings.push(htags[i]); <br /> } <br /> } <br /> }; <br /> <br /> function combine_tabs(){ <br /> if(headings.length == 0)return; <br /> headings[0].innerHTML = ''; <br /> for(var i=0; i<tabs.length; i++) { <br /> // headings[i].removeChild(tabs[i]); <br /> headings[0].appendChild(tabs[i]); <br /> if(i > 0) headings[i].parentNode.removeChild(headings[i]); <br /> } <br /> }; <br /> <br /> function hide_all(){ <br /> for(var i=0; i<sections.length; i++) { <br /> sections[i].style.display = "none"; <br /> } <br /> for(var i=0; i<tabs.length; i++) { <br /> tabs[i].className = TAB_NOT_SELECTED_CLASS <br /> } <br /> }; <br /> <br /> function show_section(index){ <br /> hide_all() <br /> if(sections.length == 0) return; <br /> var section = sections[index]; <br /> if(!section) var section = sections[index=0]; <br /> section.style.display = "block"; <br /> tabs[index].className = TAB_SELECTED_CLASS; <br /> var id = headings[index].getAttribute('id') || sections[index].getAttribute('id'); <br /> if(id && index != lastSection) { <br /> var y = typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop; <br /> if(!navigator.userAgent.match(/Safari/)) location.hash = '#' + id; <br /> window.scrollTo(0, y); <br /> if(typeof load_tab == 'function') load_tab(id); <br /> } <br /> lastSection = index; <br /> }; <br /> <br /> function tab_click(e){ <br /> var target = e && e.target || event.srcElement; <br /> for(var i=0; i<tabs.length; i++) { <br /> if(target == tabs[i] || target.parentNode == tabs[i]){ <br /> show_section(i); <br /> } <br /> } <br /> }; <br /> <br /> function set_handlers(){ <br /> for(var i=0; i<tabs.length; i++) { <br /> tabs[i].onclick = tab_click; <br /> } <br /> }; <br /> <br /> function get_selected(){ <br /> var selected = 0; <br /> if(location.hash) { <br /> selected = location.hash.substring(1); <br /> } else if(location.search) { <br /> var args = location.search.substring(1).split('&'); <br /> for(var i=0; i<args.length; i++) { <br /> var name = args[i].split('=')[0]; <br /> var value = args[i].split('=')[1]; <br /> if(name == QUERY_SECTION_ARG){ <br /> selected = value; <br /> break; <br /> } <br /> } <br /> } <br /> if(isNaN(selected)){ <br /> for(var i=0; i<sections.length; i++){ <br /> if(sections[i].getAttribute('id') == selected || headings[i].getAttribute('id') == selected){ <br /> selected = i; <br /> break; <br /> } <br /> } <br /> } <br /> return selected; <br /> }; <br /> <br /> function set_up() { <br /> get_elements(); <br /> combine_tabs(); <br /> var loadingElm = document.getElementById(LOADING_ELM_ID); <br /> if(loadingElm){ <br /> loadingElm.style.display = "none"; <br /> } <br /> var contentHolderElm = document.getElementById(CONTENT_HOLDER_ID); <br /> if(contentHolderElm) { <br /> contentHolderElm.style.display = "block"; <br /> } <br /> var selected = get_selected(); <br /> show_section(selected); <br /> set_handlers(); <br /> if(!navigator.userAgent.match(/Safari/)) setInterval(checkHash, 100); <br /> }; <br /> <br /> onload = set_up <br /></script> <br /><style type="text/css"> <br /> h2.tab span { <br /> margin-left: 9px; <br /> margin-right: 0px; <br /> padding: 1px 10px 0px 10px; <br /> border-left: 1px solid #ccc; <br /> border-top: 1px solid #ccc; <br /> border-right: 1px solid #ccc; <br /> cursor: pointer; <br /> /* Remove the following if you don't want rounded corners (Mozilla only). */ <br /> -moz-border-radius: 7px 7px 0px 0px; <br /> } <br /> <br /> h2.tab span.not-selected { <br /> background-color: #eee; <br /> border-bottom: 1px solid #ccc; <br /> color: #999; <br /> } <br /> <br /> h2.tab span.selected { <br /> background-color: #fff; <br /> border-bottom: 1px solid #fff; <br /> } <br /> <br /> h2.tab { <br /> border-bottom: none; <br /> font-weight: bold; <br /> font-size: 100%; <br /> margin-bottom: 0px; <br /> font-style: normal; <br /> } <br /> <br /> div.section { <br /> border: 1px solid #ccc; <br /> padding: 15px 5px 5px 5px; <br /> } <br /></style> <br /></head> <br /><body> <br /> <h2 class="tab" id="tab1">Tab 1</h2> <br /> <div class="section"> <br /> content for first tab <br /> </div> <br /> <br /> <h2 class="tab" id="tab2">Tab 2</h2> <br /> <div class="section"> <br /> content for second tab <br /> </div> <br /> <br /> <!-- <br /> You'll notice that each section heading has an "id" attribute. <br /> You'll also notice clicking on each tab changes part of the URL to <br /> the id of the tab you clicked. This allows the Back button to work <br /> in Mozilla-based browsers (an Internet Explorer bug prevents it <br /> from working), and for proper links directly to a specific tab. <br /> For example, #tab2 appended to the URL will cause the second <br /> tab to be selected when the page loads. <br /> --> <br /></body> <br /></html> <br /></code> Sat, 13 May 2006 20:40:43 GMT http://snippets.dzone.com/posts/show/2011 timmorgan (Tim Morgan) vimrc for 2 space tab replacements http://snippets.dzone.com/posts/show/1374 ~/.vimrc: <br /><code> <br />set softtabstop=2 <br />set shiftwidth=2 <br />set tabstop=2 <br />set expandtab <br /></code> Wed, 08 Feb 2006 19:14:49 GMT http://snippets.dzone.com/posts/show/1374 mixonic (Matthew Beale)