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

About this user

Tim Morgan http://timmorgan.org

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

Auto Resizing Iframe

I use this to visually integrate a Rails web app into an iframe within a Livlink intranet instance. YMMV.

   1  
   2  <script type="text/javascript">
   3    URL = '/path/to/app';
   4  
   5    var dec = (typeof decodeURIComponent == 'function') ? decodeURIComponent : decode;
   6    function resize_ifrm() {
   7      var ifrm = document.getElementById('ifrm');
   8      if(window.frames['ifrm'] && window.frames['ifrm'].document) {
   9        window.frames['ifrm'].window.scroll(0,0);
  10        var body = window.frames['ifrm'].document.body;
  11        if(body) {
  12          ifrm.style.height = (body.scrollHeight || body.offsetHeight) + 'px';
  13        }
  14      }
  15    }
  16    src_checked = false;
  17    function check_src() {
  18      if(src_checked) return;
  19      src_checked = true;
  20      var ifrm = document.getElementById('ifrm');
  21      var urlPos = location.search.indexOf("iframeUrl=");
  22      if(urlPos > -1) {
  23        var src = dec(location.search.substring(urlPos+10));
  24      } else {
  25        var src = URL;
  26      }
  27      if(src != ifrm.src) ifrm.src = src;
  28    }
  29  </script>
  30  
  31  <iframe name="ifrm" id="ifrm" src="/blank.html"
  32    style="width:100%;height:100px;border:none;" scrolling="no" frameborder="0"
  33    onload="resize_ifrm();check_src();setInterval('resize_ifrm()', 1000);"></iframe>
to html javascript iframe by timmorgan on Jun 12, 2006

HTML Redirect

I know this is a lame snippet, but I'm tired of writing this from scratch every time.

   1  
   2  <html>
   3  <head>
   4    <title>Page Title</title>
   5    <meta http-equiv="Refresh" content="2; URL=http://the.url">
   6    <script type="text/javascript">
   7      location.replace('http://the.url');
   8    </script>
   9  </head>
  10  <body>
  11    <p><a href="http://the.url">Page Title</a></p>
  12  </body>
  13  </html>
to html redirect by timmorgan on May 18, 2006

DHTML Tabs

Reformats a structured HTML page with tabs for each section.

   1  
   2  <html>
   3  <head>
   4  <script type="text/javascript">
   5    TAB_HEADINGS = 'h2';
   6    TAB_CLASS = 'tab';
   7    SECTION_CLASS = 'section';
   8    QUERY_SECTION_ARG = 'section';
   9    TAB_SELECTED_CLASS = 'selected';
  10    TAB_NOT_SELECTED_CLASS = 'not-selected';
  11    LOADING_ELM_ID = 'loading';
  12    CONTENT_HOLDER_ID = 'content-holder';
  13  
  14    lastSection = 0
  15    function checkHash() {
  16      var section = get_selected();
  17      if(section != lastSection) {
  18        show_section(section);
  19        lastSection = section;
  20      }
  21    }
  22  
  23    function get_elements() {
  24      var divs = document.getElementsByTagName("div");
  25      var htags = document.getElementsByTagName(TAB_HEADINGS);
  26      sections = [];
  27      tabs = [];
  28      headings = []
  29      for(var i=0; i<divs.length; i++) {
  30        if(divs[i].className == SECTION_CLASS) sections.push(divs[i]);
  31      }
  32      for(var i=0; i<htags.length; i++) {
  33        if(htags[i].className == TAB_CLASS) {
  34          var span = document.createElement("span");
  35          span.innerHTML = htags[i].innerHTML;
  36          tabs.push(span);
  37          headings.push(htags[i]);
  38        }
  39      }
  40    };
  41  
  42    function combine_tabs(){
  43      if(headings.length == 0)return;
  44      headings[0].innerHTML = '';
  45      for(var i=0; i<tabs.length; i++) {
  46    //    headings[i].removeChild(tabs[i]);
  47        headings[0].appendChild(tabs[i]);
  48        if(i > 0) headings[i].parentNode.removeChild(headings[i]);
  49      }
  50    };
  51  
  52    function hide_all(){
  53      for(var i=0; i<sections.length; i++) {
  54        sections[i].style.display = "none";
  55      }
  56      for(var i=0; i<tabs.length; i++) {
  57        tabs[i].className = TAB_NOT_SELECTED_CLASS
  58      }
  59    };
  60  
  61    function show_section(index){
  62      hide_all()
  63      if(sections.length == 0) return;
  64      var section = sections[index];
  65      if(!section) var section = sections[index=0];
  66      section.style.display = "block";
  67      tabs[index].className = TAB_SELECTED_CLASS;
  68      var id = headings[index].getAttribute('id') || sections[index].getAttribute('id');
  69      if(id && index != lastSection) {
  70        var y = typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop;
  71        if(!navigator.userAgent.match(/Safari/)) location.hash = '#' + id;
  72        window.scrollTo(0, y);
  73        if(typeof load_tab == 'function') load_tab(id);
  74      }
  75      lastSection = index;
  76    };
  77  
  78    function tab_click(e){
  79      var target = e && e.target || event.srcElement;
  80      for(var i=0; i<tabs.length; i++) {
  81        if(target == tabs[i] || target.parentNode == tabs[i]){
  82          show_section(i);
  83        }
  84      }
  85    };
  86  
  87    function set_handlers(){
  88      for(var i=0; i<tabs.length; i++) {
  89        tabs[i].onclick = tab_click;
  90      }
  91    };
  92  
  93    function get_selected(){
  94      var selected = 0;
  95      if(location.hash) {
  96        selected = location.hash.substring(1);
  97      } else if(location.search) {
  98        var args = location.search.substring(1).split('&');
  99        for(var i=0; i<args.length; i++) {
 100          var name = args[i].split('=')[0];
 101          var value = args[i].split('=')[1];
 102          if(name == QUERY_SECTION_ARG){
 103              selected = value;
 104              break;
 105          }
 106        }
 107      }
 108      if(isNaN(selected)){
 109        for(var i=0; i<sections.length; i++){
 110          if(sections[i].getAttribute('id') == selected || headings[i].getAttribute('id') == selected){
 111            selected = i;
 112            break;
 113          }
 114        }
 115      }
 116      return selected;
 117    };
 118  
 119    function set_up() {
 120      get_elements();
 121      combine_tabs();
 122      var loadingElm = document.getElementById(LOADING_ELM_ID);
 123      if(loadingElm){
 124        loadingElm.style.display = "none";
 125      }
 126      var contentHolderElm = document.getElementById(CONTENT_HOLDER_ID);
 127      if(contentHolderElm) {
 128        contentHolderElm.style.display = "block";
 129      }
 130      var selected = get_selected();
 131      show_section(selected);
 132      set_handlers();
 133      if(!navigator.userAgent.match(/Safari/)) setInterval(checkHash, 100);
 134    };
 135  
 136    onload = set_up
 137  </script>
 138  <style type="text/css">
 139    h2.tab span {
 140      margin-left: 9px;
 141      margin-right: 0px;
 142      padding: 1px 10px 0px 10px;
 143      border-left: 1px solid #ccc;
 144      border-top: 1px solid #ccc;
 145      border-right: 1px solid #ccc;
 146      cursor: pointer;
 147      /* Remove the following if you don't want rounded corners (Mozilla only). */
 148      -moz-border-radius: 7px 7px 0px 0px;
 149    }
 150  
 151    h2.tab span.not-selected {
 152      background-color: #eee;
 153      border-bottom: 1px solid #ccc;
 154      color: #999;
 155    }
 156  
 157    h2.tab span.selected {
 158      background-color: #fff;
 159      border-bottom: 1px solid #fff;
 160    }
 161  
 162    h2.tab {
 163      border-bottom: none;
 164      font-weight: bold;
 165      font-size: 100%;
 166      margin-bottom: 0px;
 167      font-style: normal;
 168    }
 169  
 170    div.section {
 171      border: 1px solid #ccc;
 172      padding: 15px 5px 5px 5px;
 173    }
 174  </style>
 175  </head>
 176  <body>
 177    <h2 class="tab" id="tab1">Tab 1</h2>
 178    <div class="section">
 179      content for first tab
 180    </div>
 181  
 182    <h2 class="tab" id="tab2">Tab 2</h2>
 183    <div class="section">
 184      content for second tab
 185    </div>
 186  
 187    <!--
 188      You'll notice that each section heading has an "id" attribute.
 189      You'll also notice clicking on each tab changes part of the URL to
 190      the id of the tab you clicked. This allows the Back button to work
 191      in Mozilla-based browsers (an Internet Explorer bug prevents it
 192      from working), and for proper links directly to a specific tab.
 193      For example, #tab2 appended to the URL will cause the second
 194     tab to be selected when the page loads.
 195    -->
 196  </body>
 197  </html>
to html javascript dhtml tabs by timmorgan on May 13, 2006

custom value in select box

   1  <script type="text/javascript">
   2    function custom_select_val(select_elm, prompt_text){
   3      var val = prompt(prompt_text, '');
   4      var option = document.createElement('option');
   5      option.setAttribute('value', val);
   6      option.innerHTML = val;
   7      option.selected = true;
   8      select_elm.appendChild(option);
   9    };
  10  </script>



   1  <select name="thing" onchange="if(this.value=='!') custom_select_val(this, 'Enter your custom value.')">
   2    <option value="static1">static item 1</option>
   3    <option value="static2">static item 2</option>
   4    <option value="static3">static item 3</option>
   5    <option value="!">[specify...]</option>
   6  </select>
to html javascript by timmorgan on Jun 07, 2005
« Newer Snippets
Older Snippets »
Showing 1-4 of 4 total  RSS