Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-4 of 4 total  RSS 

create an array or split a long string seperated by tabs newlines carriage returns and commas.

create an array or split a long string seperated by tabs newlines carriage returns and commas.

EG

emails = "skdjf@sdklfj.com sdflj@kj.com sldfj@klj.com, slkj@kjl.com,lskjdf@lkj.com, \r\nlkjkjl@kjk.com"

becomes

=> ["skdjf@sdklfj.com", "sdflj@kj.com", "sldfj@klj.com", "slkj@kjl.comlskjdf@lkj.com", "lkjkjl@kjk.com"]

emails = emails.split(/,/).join().split()
to strings on tabs and seperating splitting based newlines carriage returns commas by mcarr on Jun 08, 2007

Tabs based on definition list

// description of your code here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
dl.tabstrip {
float:left;
width:60em;
font-size:120%;
line-height:normal;
background: url("images/tabstripbottom.png") repeat-x bottom;
margin:0;
padding:8px 8px 0;
}

dl.tabstrip dt {
float:left;
padding:0;
margin:0 2px 0 0;
}

dl.tabstrip a {
display:block;
padding: 4px 12px 4px;
color:black;
font-family:verdana, sans-serif;
text-decoration:none;
}

dt.selected {
background: url("images/tabright.png") top right no-repeat;
}

dt.selected a {
background: url("images/tableft.png") top left no-repeat;
padding-bottom:5px;
}


dt.unselected {
background: url("images/unselectedtabright.png") top right no-repeat;
}

dt.unselected a {
background: url("images/unselectedtableft.png") top left no-repeat;
}

.tabstrip dd {
position:fixed;
left:8px;
top: 2.5em;
border: 1px solid #6290d2;
border-top:none;
background:#fff;
margin:0;
height:10em;
width: 60em;
padding:8px 8px 8px 6px;
}

dd.selected {
display:block;
}

dd.unselected {
display:none;
}
</style>
</head>

<body>
<dl class="tabstrip">
	<dt class="unselected"><a href="#">Tracy</a></dt>
	<dd class="unselected">
		<p>Position: President</p>
	</dd>

	<dt class="selected"><a href="#">Andy</a></dt>
	<dd class="selected">
		<p>Position: Architect</p>
	</dd>

	<dt class="unselected"><a href="#">Ron</a></dt>
	<dd class="unselected">
		<p>Position: Operations Manager</p>
	</dd>
</dl>
</body>
</html>
to html tabs by AndyV on Jun 07, 2007

DHTML Tabs

Reformats a structured HTML page with tabs for each section.

<html>
<head>
<script type="text/javascript">
  TAB_HEADINGS = 'h2';
  TAB_CLASS = 'tab';
  SECTION_CLASS = 'section';
  QUERY_SECTION_ARG = 'section';
  TAB_SELECTED_CLASS = 'selected';
  TAB_NOT_SELECTED_CLASS = 'not-selected';
  LOADING_ELM_ID = 'loading';
  CONTENT_HOLDER_ID = 'content-holder';

  lastSection = 0
  function checkHash() {
    var section = get_selected();
    if(section != lastSection) {
      show_section(section);
      lastSection = section;
    }
  }

  function get_elements() {
    var divs = document.getElementsByTagName("div");
    var htags = document.getElementsByTagName(TAB_HEADINGS);
    sections = [];
    tabs = [];
    headings = []
    for(var i=0; i<divs.length; i++) {
      if(divs[i].className == SECTION_CLASS) sections.push(divs[i]);
    }
    for(var i=0; i<htags.length; i++) {
      if(htags[i].className == TAB_CLASS) {
        var span = document.createElement("span");
        span.innerHTML = htags[i].innerHTML;
        tabs.push(span);
        headings.push(htags[i]);
      }
    }
  };

  function combine_tabs(){
    if(headings.length == 0)return;
    headings[0].innerHTML = '';
    for(var i=0; i<tabs.length; i++) {
  //    headings[i].removeChild(tabs[i]);
      headings[0].appendChild(tabs[i]);
      if(i > 0) headings[i].parentNode.removeChild(headings[i]);
    }
  };

  function hide_all(){
    for(var i=0; i<sections.length; i++) {
      sections[i].style.display = "none";
    }
    for(var i=0; i<tabs.length; i++) {
      tabs[i].className = TAB_NOT_SELECTED_CLASS
    }
  };

  function show_section(index){
    hide_all()
    if(sections.length == 0) return;
    var section = sections[index];
    if(!section) var section = sections[index=0];
    section.style.display = "block";
    tabs[index].className = TAB_SELECTED_CLASS;
    var id = headings[index].getAttribute('id') || sections[index].getAttribute('id');
    if(id && index != lastSection) {
      var y = typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop;
      if(!navigator.userAgent.match(/Safari/)) location.hash = '#' + id;
      window.scrollTo(0, y);
      if(typeof load_tab == 'function') load_tab(id);
    }
    lastSection = index;
  };

  function tab_click(e){
    var target = e && e.target || event.srcElement;
    for(var i=0; i<tabs.length; i++) {
      if(target == tabs[i] || target.parentNode == tabs[i]){
        show_section(i);
      }
    }
  };

  function set_handlers(){
    for(var i=0; i<tabs.length; i++) {
      tabs[i].onclick = tab_click;
    }
  };

  function get_selected(){
    var selected = 0;
    if(location.hash) {
      selected = location.hash.substring(1);
    } else if(location.search) {
      var args = location.search.substring(1).split('&');
      for(var i=0; i<args.length; i++) {
        var name = args[i].split('=')[0];
        var value = args[i].split('=')[1];
        if(name == QUERY_SECTION_ARG){
            selected = value;
            break;
        }
      }
    }
    if(isNaN(selected)){
      for(var i=0; i<sections.length; i++){
        if(sections[i].getAttribute('id') == selected || headings[i].getAttribute('id') == selected){
          selected = i;
          break;
        }
      }
    }
    return selected;
  };

  function set_up() {
    get_elements();
    combine_tabs();
    var loadingElm = document.getElementById(LOADING_ELM_ID);
    if(loadingElm){
      loadingElm.style.display = "none";
    }
    var contentHolderElm = document.getElementById(CONTENT_HOLDER_ID);
    if(contentHolderElm) {
      contentHolderElm.style.display = "block";
    }
    var selected = get_selected();
    show_section(selected);
    set_handlers();
    if(!navigator.userAgent.match(/Safari/)) setInterval(checkHash, 100);
  };

  onload = set_up
</script>
<style type="text/css">
  h2.tab span {
    margin-left: 9px;
    margin-right: 0px;
    padding: 1px 10px 0px 10px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    cursor: pointer;
    /* Remove the following if you don't want rounded corners (Mozilla only). */
    -moz-border-radius: 7px 7px 0px 0px;
  }

  h2.tab span.not-selected {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    color: #999;
  }

  h2.tab span.selected {
    background-color: #fff;
    border-bottom: 1px solid #fff;
  }

  h2.tab {
    border-bottom: none;
    font-weight: bold;
    font-size: 100%;
    margin-bottom: 0px;
    font-style: normal;
  }

  div.section {
    border: 1px solid #ccc;
    padding: 15px 5px 5px 5px;
  }
</style>
</head>
<body>
  <h2 class="tab" id="tab1">Tab 1</h2>
  <div class="section">
    content for first tab
  </div>

  <h2 class="tab" id="tab2">Tab 2</h2>
  <div class="section">
    content for second tab
  </div>

  <!--
    You'll notice that each section heading has an "id" attribute.
    You'll also notice clicking on each tab changes part of the URL to
    the id of the tab you clicked. This allows the Back button to work
    in Mozilla-based browsers (an Internet Explorer bug prevents it
    from working), and for proper links directly to a specific tab.
    For example, #tab2 appended to the URL will cause the second
   tab to be selected when the page loads.
  -->
</body>
</html>
to html javascript dhtml tabs by timmorgan on May 13, 2006

vimrc for 2 space tab replacements

~/.vimrc:
set softtabstop=2
set shiftwidth=2
set tabstop=2
set expandtab
to formatting vim tabs by mixonic on Feb 08, 2006
« Newer Snippets
Older Snippets »
Showing 1-4 of 4 total  RSS