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

James Robertson http://www.r0bertson.co.uk

« Newer Snippets
Older Snippets »
Showing 11-13 of 13 total

Add a Google custom search facility to your website

This HTML page displays a basic search page similar to http://www.google.com/ however this search page will only search for results from http://snippets.dzone.com. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>abc</title>
<meta http-equiv="Content-Type" content="text/html; charset: UTF-8" />

</head>
<body>

    <form action="http://www.google.com/search">
      <div><input name="query" type="hidden" value="site:snippets.dzone.com"></input></div>
      <div><input maxlength="2048" name="q" size="55" title="Google Search" value="" ></input></div>
      <div><input name="btnG" type="submit" value="Google Search"></input></div>
    </form>
</body>
</html>

I stumbled across the hidden query field while I was looking for ways to perform custom search without the need for JavaScript. If you are interested in Google's official custom search engine on your site go to http://www.google.com/cse

* update 8-Jan-08 2:01pm *
Here's a more advanced example from someone's blog titled 'Fine-tuning Custom Google Search' http://snipr.com/1wppb [blogs.salon.com]
<FORM method=GET action=http://www.google.com/custom>;
<A HREF=http://www.google.com/search>;
<IMG SRC=http://www.google.com/logos/Logo_40wht.gif border=0 ALT=Google align=middle></A> <INPUT TYPE=text name=q size="10" maxlength=255 value="">
<INPUT type=submit name=sa VALUE="Just Goog It!">
<INPUT type=hidden name=cof VALUE="GIMP:darkblue;LW:380;ALC:red;L:http://blogs.salon.com/0001111/images/rfbanner.jpg;GFNT:lightblue;LC:red;LH:100;AH:left;VLC:gray;S:http://blogs.salon.com/0001111/;GALT:blue;AWFID:ba6ecf243ae3d16f;"><br />
>span class="small">
<input type=radio name=sitesearch value="blogs.salon.com" checked>Search blogs.salon.com
<input type=radio name=sitesearch value="">Search the Web</span><br />
</FORM>
to html google search custom by jrobertson on Jan 06, 2008

Keeping the new contents of a growing list in view

The purpose of this code is to demonstrate how to keep the content at the bottom of a list always in view, similar to a chat window. Keywords: div, overflow, scroll, scrolltop. Reference: scrollTop Property http://snipr.com/1wdbn [msdn2.microsoft.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>scrolling div</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    
    <style type="text/css">
      <!--
      body {background-color: #43d;}
      div#list  {background-color: #4e8;  overflow: scroll; width: 15em; height: 10em;}
      p.other_user {background-color: #af5;}
      p {background-color: #ed3;}
      -->
    </style>
    <script type="text/javascript">
      function addText() {
        olist = document.getElementById('list');
        op = document.createElement('p');
        op.innerHTML = 'hi';
        ocontent = document.getElementById('content');
        ocontent.appendChild(op);
        olist.scrollTop = olist.scrollHeight;
      }
    </script>
  </head>
  <body>
    <div id="toolbar"><input type="button" value="add text" onclick="addText()" /></div>
    <p>A simple chat style display</p>
    <div id="list">
      <div id="content">
      <p class="other_user">Good <strong>afternoon</strong> how are you?</p>
      <p class="other_user">hello?</p>
      <p class="other_user">is anybody there?</p>
      </div>
    </div>    
  </body>
</html>
to html javascript css scrolltop by jrobertson on Jan 02, 2008

Slashdot's 3 column liquid layout

The following html and css code is an example of a 3 column liquid layout used on the front page of http://slashdot.org. What's interesting is that the left and right column do not change their widths, it's only the article content which changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Aenean: ullamcorper elementum, dui quam porttitor neque</title>
  <link rel="stylesheet" type="text/css" media="screen" href="core-tidied.css" />

</head>
<body>
<div id="frame">
  <div id="topnav">
    <div id="logo">
      <h1>
        <a href="//aenean.org">Aenean</a>
      </h1>
    </div>
  </div> 
  <div id="slogan">
    <h2>
      ullamcorper elementum, dui quam porttitor neque
    </h2>
  </div>
  <div id="wrapper">
    <div id="links">
      <div class="block" id="links-sections">
        <div class="title" id="links-sections-title">
          <h4>
                  hendrerit
          </h4>
        </div>
        <div class="content" id="links-sections-content">
          <ul>
          <li>suscipit</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="contents">
      <div id="slashboxes">	
        <div class="block">
          <div class="title" id="index_qlinks-title">
            <h4>
                    Vestibulum
            </h4>
          </div>
          <div class="content" id="index_qlinks-content">
            <p>egestas quam </p>
          </div>
        </div>
      </div>
      <div id="articles">
        <div class="article" id="art1">
          <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tincidunt porttitor felis. Sed a tellus in lacus adipiscing tincidunt. Ut sollicitudin auctor dolor. Maecenas orci. Fusce porttitor odio eget erat. Aliquam erat volutpat. Fusce mollis, orci eget ullamcorper elementum, dui quam porttitor neque, euismod pulvinar risus turpis nec neque. Maecenas dolor risus, vestibulum in, congue a, pulvinar id, leo. Vestibulum porttitor hendrerit mauris. Morbi fringilla lectus quis orci. Vivamus laoreet massa scelerisque felis.
          </p>

          <p>
          Aenean nunc neque, euismod porta, tempor ut, eleifend at, massa. Nam tempor urna at ligula. Etiam auctor dui tempus odio egestas sagittis. Donec metus pede, tempor nec, tincidunt sit amet, consectetuer eget, massa. Nam dolor arcu, ornare et, imperdiet vel, euismod ut, nibh. Quisque ut erat. Maecenas ante urna, suscipit eget, dictum non, porttitor at, magna. Duis accumsan. Suspendisse luctus vehicula pede. Mauris a nisl. Cras leo.
          </p>
        </div>
      </div>
    </div>	
  </div>
  <div id="footer">
    Ut sollicitudin auctor dolor. Maecenas orci. 
  </div>	
</div>

</body>
</html>




/* file: core-tidied.css */
body {
  min-width: 680px;
  color: #111;
  background: #222;
}

#contents p {
  background-color: #eee;
}

#topnav {
  background: #044;
  position: relative;
  height: 55px;
  margin: 5px 1.25em 0 1.25em;
}

  #topnav #logo {
    width: 415px;
    height: 100%;
  }
  #topnav #logo h1 {
    display: block;
    height: 100%;
    width: 100%;
  }
    #topnav #logo h1 a {
      display: block;
      width: 100%;
      height: 100%;
      outline: none;
      text-indent: -5000px;
      text-decoration: none;
      background: url(//images.slashdot.org/logo.png) no-repeat left top;
    }
  
#slogan{ display: none; }

/* Wrapper */
#wrapper {
  overflow: hidden;
  background-color: #fff;
}

#wrapper #articles { margin-right: 18.5em; }

/* User section menu */
/* Contents */
#contents {
  width: auto;
  margin-left: 10.5em;
}

/* General Body */

/* Blocks */
div.block div.title { background: #666 }
  div.block div.title h4 {
    color: #fff;
  }


/* Links (left sidebar) */
div#links {
  float: left;
  width: 9.25em;
  background: #eee;
}
    div#links div.block div.content ul li {  list-style-image: none; }

/* Slashboxes (right sidebar) */
div#slashboxes {
  float: right;
  width: 17.25em;
}

/* Footer */
div#footer {
  background: #bbb;
  clear: both;
}

#contents {margin-top: 2em;}


The secret to positioning the columns, is to use left and right margins to push the element (column being adjusted), away from it's siblings. In the above example the contents (outer box) is pushed away from the left (#contents { margin-left: 10.5em;}), and the articles (inner box) within the contents is pushed from the right (#wrapper #articles { margin-right: 18.5em; }).

to html css layout column 3 liquid by jrobertson on Nov 07, 2007
« Newer Snippets
Older Snippets »
Showing 11-13 of 13 total