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

Oliver Haag www.ohcon.de

« Newer Snippets
Older Snippets »
Showing 1-10 of 14 total  RSS 

show image in selection-box

// works only in mozilla

   1  
   2  <style type="text/css">
   3  <!--
   4  
   5      option[value=ohcon]:before { content:url("ohc.gif"); }
   6      option[value=baerlin]:before { content:url("baer.gif"); }
   7      option[value=zendo]:before { content:url("zendo.gif"); }
   8  
   9  -->
  10  </style>
  11  
  12  ..
  13  
  14  Select Company
  15  <select>
  16    <option value="ohcon">Oliver Haag IT consulting</option>
  17    <option value="baerlin">Bärlin Partners</option>
  18    <option value="zendo">Zendo-Marketing</option>  
  19  </select>

css learns to calculate

// only css3.0, preliminary

   1  
   2  div#left_half  {
   3    float:left;
   4    width:calc(50% - 8px);
   5  }

Javascript Browser Check

// the navigator object stores the browser and additional secifications

   1  
   2  <html><head><title>JS Browser Check</title></head><body>
   3  
   4  <script type="text/javascript">
   5  document.write("Your browser is " + navigator.appName);
   6  
   7  if (navigator.appVersion.substring(0, 1) == "4")
   8    document.write("4th generation browser!");
   9    
  10  document.write("patform/os:" + navigator.platform);
  11  document.write("user agent data:" + navigator.userAgent);
  12  
  13  if (navigator.cookieEnabled == true) {
  14    document.write("cookies enabled");
  15  } else if (navigator.cookieEnabled == false) {
  16    document.write("no cookies.");
  17  } else {
  18    document.write("cookies? No Info available.");
  19  }
  20  
  21  if (navigator.javaEnabled()) {
  22    document.write("java enabled.");
  23  } else {
  24    document.write("java not available.");
  25  }
  26  
  27  if (navigator.language.indexOf("en") > -1) {
  28    document.write("language ins english");
  29  }else if (navigator.language.indexOf("de") > -1) {
  30    document.write("language is german");
  31  }
  32  
  33  </script>
  34  
  35  </body></html>

javasrcritpt email to avoid spam

// email is written with javascript to hide it aganst scanning.
// if javascript is off, the email is obfuscated
   1  
   2  <script type="text/javascript" language=javascript>
   3  <!--
   4  name=('hugo');
   5  at=('@');
   6  domain=('mueller');
   7  dot=('.');
   8  ext=('de');
   9  document.write('<a href="mailto:' + name + at + domain + dot + ext + '">' + name + at + domain + dot + ext + '<\/a>');
  10  //-->
  11  </script>
  12  <noscript>hugo (at) mueller (dot) de</noscript>

reformat unsigned lists (bullet lists)

// unsigned list look the same in firefox and internet explore
// but firefox uses padding and ie uses margin to indent
// so if you want to eliminate the indent you mat set both

// here the top margin is negative too
// so the bullet list is written directly under the text
// and the bottom-margin of the p-tag can remain (needet elsewhere)
   1  
   2  ul {
   3  	padding-left: 15px;
   4  	margin-left: 0px;
   5  	margin-top: -10px;
   6  	margin-bottom: 10px;
   7  }

avoid visible whitespace in html

// if you want a line break and want to indent your html code
// but the browser makes problems with the whitespace
// make the whitespace a comment

//example
   1  
   2  <div id="topimages">
   3  	<image class="left" src="image/left.jpg"><!--
   4  	--><image class="left" src="image/mid.jpg"><!--
   5  	--><image class="right" src="image/right.jpg">
   6  </div><!--topimages-->

set width and padding without ccs browser hack

// firefox an internet explorer handle padding in div-elements with width differently
// you don't need a css browser hack, you can use two div-elements insteas
// the outer-div handles width
// the inner div handles padding

//html
   1  
   2  <div id="left_text">
   3  	<div class="paddingbox">
   4  		<p>loem ipsum dolor ...</p>
   5  	</div>
   6  </div><!--left_text-->


//css
//padding: top right, bottom, left;
   1  
   2  #left_text {
   3  	width: 208px;
   4  	float: left;
   5  }
   6  div.paddingbox {
   7  	padding: 4px 8px 4px 8px;
   8  }

change title with javascript

// change title with javascript

   1  
   2  ..
   3  <title>original title</title>
   4  ..
   5  <script type="text/javascript">
   6  function changeTitle(title) { document.title = title; }
   7  </script>
   8  ..
   9  <input type='button' onclick='changeTitle("new title")' value='Change Title'/> 
  10  ..

check user agent with javascript

// check user agent

   1  
   2  <a href="javascript:alert(navigator.userAgent)">User Agent</a>

evaluate form fields with php

// contains all types of fields

// of special interest are selection boxes.
// They can return an array.
// Here is a quick evaluation with implode().

   1  
   2  <!-- Formular auswerten (evaluate form)
   3       ********************************** -->
   4  
   5  <?php
   6  $hidden_value_1 = $_POST['hval1'];
   7  $hidden_value_2 = $_POST['hval2'];
   8  
   9  $short_text	= $_POST['stext'];
  10  $password	= $_POST['pwd'];
  11  $long_text	= $_POST['ltext'];
  12  
  13  $selected_option = $_POST['optn'];
  14  $radio_selection = $_POST['radsel'];
  15  
  16  $check_selection = $_POST['checksel'];
  17  $check_text = implode(', ',$check_selection);
  18  ?>
  19  
  20  
  21  
  22  <html><body>
  23  <h1>Kurze Anzeige (show values)</h1>
  24  Versteckte Werte: <?=$hidden_value_1?>, <?=$hidden_value_2?><br>
  25  Kurzer Text und Passwort: <?=$short_text?>, <span style="color: gray;"><?=$password?></span><br>
  26  Langer Text:  <?=$long_text?><br>
  27  Option: <?=$selected_option?><br>
  28  Radio-Auswahl: <?=$radio_selection?><br>
  29  CheckBox-Auswahl: <?=$check_text?>
  30  
  31  <h1>Ein Formular (form)</h1>
  32  
  33  <!-- Das Beispielformular (form example)
  34       ********************************** -->
  35  <form action="form.php" method="post">
  36  
  37  <!-- versteckte Elemente (hidden elements) -->
  38  <input type="hidden" name="hval1" value="Der erste versteckte Wert">
  39  <input type="hidden" name="hval2" value="Der zweite versteckte Wert">
  40  <p>
  41  
  42  <!-- einzeiliges Eingabefeld und Passwortfeld (text fields) -->
  43  Kurzer Text und Passwort <br>
  44  <input type="text" size="32" maxlength="64" name="stext" value="Kurze Textvorbelegung">
  45  <input type="password" size="16" maxlength="16" name="pwd" value="geheim">
  46  </p><p>
  47  
  48  <!-- mehrzeiliges Eingabefeld (text area) -->
  49  Langer Text <br>
  50  <textarea cols="128" rows="4" name="ltext">
  51  Optionale Textvorbelegung (optional text presetting): kann bei
  52  mehrzeiligen Textfeldern lang sein,da genügend Platz vorhanden ist.
  53  </textarea>
  54  </p><p>
  55  
  56  <!-- Auswahlliste mit Vorauswahl (selection list) -->
  57  Option <br> <select name="optn">
  58  <option selected>Die Erste Option</option>
  59  <option>Die zweite Option</option>
  60  <option>Die dritte Option</option>
  61  </select>
  62  </p><p>
  63  
  64  <!-- Radio-Buttons mit Vorauswahl (radio buttons) -->
  65  Radio-Auswahl <br>
  66  <input type="radio" name="radsel" value="first">Die erste Radiowahl<br>
  67  <input type="radio" name="radsel" value="seccond">Die zweite Radiowahl<br>
  68  <input type="radio" name="radsel" value="third" checked> Die dritte Radiowahl
  69  </p><p>
  70  
  71  CheckBox-Auswahl <br>
  72  <input type="checkbox" name="checksel[]" value="chk1" checked>Die erste Checkwahl<br>
  73  <input type="checkbox" name="checksel[]" value="chk2" checked>Die zweite Checkwahl<br>
  74  <input type="checkbox" name="checksel[]" value="chk3">Die dritte Checkwahl
  75  </p><p>
  76  
  77  <!-- Buttons zum Absenden/ Abbrechen (buttons to submit/reset) -->
  78  <input type="submit" value="auswerten">
  79  <input type="reset" value="zurücksetzen">
  80  
  81  </form>
  82  </body></html>
« Newer Snippets
Older Snippets »
Showing 1-10 of 14 total  RSS