DZone Snippets: Coboldinosaur's Code Snippets

Bullets Without a UL Tag

COBOLdinosaur (Roy Marchand) — Wed, 09 May 2007 00:00:16 GMT

There are times when you want to put a bullet on an HTML page but you do not want to use a UL tag... this is how you do it:











•a


•b


•c


•d

For more tips on HTML, CSS, and most Web technologies visit me at ERT

Making Columns Render with Equal Height

COBOLdinosaur (Roy Marchand) — Tue, 10 Apr 2007 01:46:39 GMT

A problem sometimes faced by web developers is trying to get two (or more) columns in a multi-column layout to be the same height when the content is variable. Rather than using an arbitrary hardcoded value, the heights can be equalized (to the tallest one) with this script.

Assuming two columns in div tags with ids of "leftside" and "rightside" this script will set the height of the shorter to the height of the taller one. The page must be in standards compliant mode with a valid doctype or IE will mess it up in quirks mode. For longer articles and discussion visit my home site... ERT

Detecting Mouse Position

COBOLdinosaur (Roy Marchand) — Thu, 05 Apr 2007 02:36:06 GMT

This is an easy way to determine the mouse position (click anywhere and the co-ordinates get displayed:



 



   Mouse co-ordinates

   












You can store them in form fields



x =  

y = 







 or as plain text

Of course knowing the co-ordinates also makes it possible to position elements based on the position of the mouse pointer. It will work for any mouse event Mouseover, mouseout, etc; just change click to the desired event in the final if statement of the script. More good stuff and articles at the home of real IT Mentors

Dynamic Modification of CSS Class Properties

COBOLdinosaur (Roy Marchand) — Wed, 28 Mar 2007 01:49:01 GMT

Modifying the rendering of an element with an ID is relatively easy using document.getElementById. Modifying the attributes fo an entire class dynamically is a little more code, but the DOM does provide the means to do it through the stylesheet object; with some cross-browser variations.

For additional CSS and HTML see some of the full length articles
Written by IT professionals from Experts Round Table



 



 Fragment









click here

 hello world. All of your bases are belong to us.

Notice that the color of the text in the span is not changed, because the inline style prevails over the class in the stylesheet. This technique can be used to make on the fly changes to the look and feel of a page in response to events or user input.

Setting Element Height Dynamically

COBOLdinosaur (Roy Marchand) — Mon, 26 Mar 2007 11:58:49 GMT

There are times when you need to control the height of an element based on the screen size. However youcan control the user setup, and of course there are browser differences so this snippet handles browser and object detection and sets the height during page load and for any re-sizing event.

An example of the snippet in action



  var minorOffset = (document.all)? 25 : 38;

   function setHgt()

   {

      var sHGT;

      srcobj=document.getElementById('main');

      if (self.innerHeight)

      {

	   sHGT = self.innerHeight;

	}

      else

      { 

         if (document.documentElement && document.documentElement.clientHeight)

         {

	      sHGT = document.documentElement.clientHeight;

         }

         else

         {

            if (document.body)

            {

              sHGT = document.body.clientHeight;

            }

         }

      }

      sHGT=sHGT-(document.getElementById('main').offsetTop+minorOffset);

  document.getElementById('main').style.height=sHGT+"px";

   }

window.onload=setHgt;

window.onresize=setHgt;

Typed Tooltip Effect

COBOLdinosaur (Roy Marchand) — Tue, 20 Mar 2007 11:31:22 GMT

This simple bit of scripting will create a dynamic typing effect for your tool tips.
The script can be
seen implemented here



var str='';

var obj='false';

var pntr='';

var cnt=0;

var textArr = new Array(5);

textArr[0] = "All your bases are belong to us!";

textArr[1] = "The answer is 42; of course.";

textArr[2] = "The end of the universe will be the result of a mis-calculation in the core.";

textArr[3] = "I don't believe its alive; but it thinks it is.";

textArr[4] = "About 10 seconds after you open it; you'll wish you hadn't";



function looptext()

{

   obj.innerHTML=str.substr(0,cnt);

   cnt++;

   if (cnt<=str.length) setTimeout('looptext()',100);

}



function typeText(lnk,lyr)

{

   str=textArr[lyr];

   pntr= 'lyr'+lyr;

   obj=document.getElementById(pntr);

   obj.style.left=(lnk.offsetLeft+30)+'px';

   obj.style.top=(lnk.offsetTop+25)+'px';

   obj.style.display='block';

   cnt=1;

   looptext();

}



function clearText(lyr)

{

   cnt=2500;

   pntr='lyr'+lyr;

   obj=document.getElementById(pntr);

   obj.style.display='none';

   obj.style.left='-50px';

   obj.style.top='-50px';

   obj.innerHTML=' ';

}

The links using the effect are done this way:



         onmouseover="typeText(this,2)"

      onmouseout="clearText(2)"

      onclick="clearText(2)"> 

   This is link Three

Expand and collapse effect for data grids

COBOLdinosaur (Roy Marchand) — Wed, 14 Mar 2007 01:14:32 GMT

This is a little use of dynamic CSS to create expandable, and collapsible sections in data grid presentations.
Cd&
Experts Round Table



 





 





 

 











   
          onclick="showHide('fruit','fruitspan')">

         +  Fruit:
    
   
        Apple  Red  Shiny
        Pear  Green  Firm
        Banana  Red  Shiny
   












   
    

         +  Vegtable: 
   
   
        Carrot  Orange  Crisp
        Cucumber  Green  Delicious
        Cauliflower  White  Firm
   












   
    

         +  Animal:
    
   
        Cat  Calico  Lazy
        Dog  Retriever  Golden
        Badger  Muddy  Mean

onclick="showHide('fruit','fruitspan')"> + Fruit:
Apple	Red	Shiny
Pear	Green	Firm
Banana	Red	Shiny

+ Vegtable:
Carrot	Orange	Crisp
Cucumber	Green	Delicious
Cauliflower	White	Firm

+ Animal:
Cat	Calico	Lazy
Dog	Retriever	Golden
Badger	Muddy	Mean

Passing parameters between pages without servers side scripting

COBOLdinosaur (Roy Marchand) — Thu, 01 Mar 2007 13:05:35 GMT

// description of your code here
Sometimes you need to pass parameters directly between pages for dynamic effect. This is the way to process those on the receiving page. The arguments can be added directly onto the url or a form with a get method caa be used. As long as the server just passs the request through the receiving page can use the parameters to present alternate presentations, pre-populate form eleemnts, or just carry through the values for a multi-page form.

Cd&
Experts Round Table

Add Rows to an HTML table Dynamically

COBOLdinosaur (Roy Marchand) — Wed, 21 Feb 2007 13:02:17 GMT

// description of your code here
This script modifies an existing table in a page using
the DOM methods to add rows

Javascript to put a hotkey on a Web Page

COBOLdinosaur (Roy Marchand) — Tue, 20 Feb 2007 12:53:56 GMT

// description of your code here
This page will fire an event when the key specified in the
variable key1 is pressed.

Cd&
http://www.expertsrt.com



var key1="32";

var x='';

function handler(e) 

{

  if (document.all) {

  var evnt = window.event; 

  x=evnt.keyCode;

}

else

x=e.charCode;

if (x==key1) location.href='http://www.expertsrt.com';

}

if (!document.all){

window.captureEvents(Event.KEYPRESS);

window.onkeypress=handler;

}

else

{

document.onkeypress = handler;

}